Share
Dit artikel bouwt voort op ons vorige artikel over het mobiele ontwerpproces, die dieper graaft in prototyping van papieren protocollen en wireframing-fasen van app-ontwikkeling. Aan het eind heb ik een lijst met verschillende hulpmiddelen die u kunt gebruiken om uw wireframes en prototypen te maken.
Interactieontwerp voor mobiel is een veel voorkomend gespreksonderwerp tussen gebruikerservaringsexperts (UX), maar hoe zit het met degenen onder ons die af en toe alleen met UX werken? Veel ontwerpers en ontwikkelaars krijgen projecten toegewezen die niet de luxe hebben om een UX-specialist te behouden, maar waarvan (uiteraard) verwacht wordt dat ze elegante, intuïtieve interfaces produceren.
Er is een behoorlijke hoeveelheid discussie geweest in de gebruikersbelevingsgemeenschap over de noodzaak van wireframing in webontwerp tegenwoordig, en ik begon me af te vragen "is dit van toepassing op mobiel?" Zijn wireframes slechts een factureerbaar ontwerp, zodat de klant weet wij zijn aan het werken"? Nee, ik denk dat het meer is dan dat. Wireframing en papieren prototyping evolueren zeker naarmate de online vaardigheden en smaken van gebruikers meer verfijnd worden, maar deze praktijk is nog steeds een zeer waardevolle component in mobiel ontwerp.
In mijn ervaring is er een enorm verschil in de vorm en functie van wireframes versus papieren prototypen, ook al kunnen de termen door elkaar worden gebruikt. In mijn mobiele ontwerpproces is het eerste dat plaatsvindt nadat we hebben vastgesteld wie de app gebruikt en hoe, papieren prototypen zijn -NIET wireframes.
Sommigen beweren dat "paper is dead" en profiteren van de voordelen van digitale prototyping. Anderen beweren dat potlood en papier het ontwerp verstevigen. Persoonlijk bedenk ik meer vloeiende lay-outs als ik niet achter mijn computer sta. We zijn echter allemaal individuen, met verschillende voorkeuren en denkwijzen. Misschien kunt u net zo creatief zijn voor uw computer; het is iets dat elke ontwerper voor zichzelf moet uitzoeken!
Een van de dingen die ik leuk vind aan offline papieren prototyping, is de snelheid waarmee je ontwerp kunt herhalen. Ik gebruik screen-sized plaknotities die snel kunnen worden uitgetrokken, opnieuw bewerkt, herschikt etc. Als er eenmaal een flow is vastgesteld voor de app, is het tijd om de elementen op het scherm in een wireframed-versie vast te spijkeren.
Zelfs als dit een app voor uw eigen interne 'client' is, dienen wireframes als een andere recensie om ervoor te zorgen dat de app werkt op een manier die zowel de gebruiker als het bedrijf bedient. U kunt het proces overslaan en rechtstreeks van papieren prototypen naar Photoshop gaan voor GUI-ontwerp. Ik weet dat het verleidelijk is, maar doe het niet! Het moment dat je begint te werken in een bubbel is hetzelfde moment waarop je toegeeft aan de "vloek van kennis".
In het boek Made to Stick vertellen auteurs en broers Chip en Dan Heath over de "Curse of Knowledge" en de impact hiervan op ons vermogen om nieuwe, "kleverige" ideeën te creëren. Het uitgangspunt met betrekking tot mobiel ontwerp is dat wanneer u begint met het bouwen van uw kennisbasis voor mobiel ontwerp en technologie, hoe meer u afstand neemt van een "typische app-gebruiker". Je kunt je niet echt voorstellen hoe het is om je publiek te zijn, zelfs als je perfect bij het profiel past. Je vermogen om jezelf in de schoenen van je publiek te plaatsen wordt vertroebeld door alles wat je al weet over de app, hoe het werkt en wat je denkt dat het publiek wil.
Als we eenmaal iets weten, kunnen we ons moeilijk voorstellen hoe het was om het niet te weten. Onze kennis heeft ons "vervloekt". - Made to Stick
Dit alles om te zeggen dat u wireframe moet hebben en die wireframes moet delen met de doelgroep van uw app.
Nu dat wireframing en papieren prototyping binnen de mobiele context zijn gedefinieerd, wil ik de vijf belangrijkste dingen beschrijven die u zou moeten doen in uw wireframing en papieren prototyping sessies. Het is gemakkelijk om een aantal schetsen op te schorten en het een dag te noemen, vooral als je je niet concentreert op gebruikerservaring..
Ik hoop dat deze tips je aanmoedigen om de tijd te nemen om de gebruikerservaring van je app te overdenken door het een eenvoudig, stapsgewijs proces te maken dat herhaalbaar en gemakkelijk te volgen is!
Het eerste dat u moet doen voordat u erover nadenkt om pen op papier te zetten, is door uzelf deze vraag te stellen: wat is de primaire taak van uw app? Specifiek opschrijven:
(Your differentiator) (Your solution) for (Uw publiek).
Laten we eens kijken naar een voorbeeld voor de app Evernote:
"Met Evernote voor iPhone kunt u notities maken, foto's maken en spraakmemo's opnemen die u vervolgens op elk gewenst moment kunt openen vanaf uw iPhone, computer of internet."
De kopie op hun website legt de primaire taak voor de app duidelijk uit:
(Omni-toegankelijk) (creatie en opslag van meerdere bestanden) voor (gewone iPhone-gebruikers).
Definieer deze verklaring voor uw app en plak deze aan op een plek waar u deze vaak zult zien tijdens het werken aan de prototypen. Het zal je helpen precies gefocust te blijven op het enige dat de app MOET doen.
Nadat u uw primaire taak hebt gedefinieerd, heeft u waarschijnlijk ook nagedacht over wie een app wil die deze taak uitvoert! Use cases zijn de BESTE manier om het papieren prototypingproces op gang te brengen. In dit artikel bespreekt ik hoe ik casusscenario's heb gedefinieerd voor onze Doodle Bright-app. Ik gaf "mijn mensen" een naam, een adres, een beroep en een specifiek scenario wanneer ze een app als Doodle Bright zouden kunnen gebruiken.
Hier is een voorbeeld:
Jane wacht in het artsenbureau op een afspraak voor 3 uur met haar 4-jarige zoon, Tsjaad. Ze heeft haar iPad meegenomen voor het geval het wachten langer duurt dan verwacht en ze zitten natuurlijk een half uur vast in de wachtkamer voordat ze worden gebeld. Jane geeft de tijd door vrachtwagens en treinen te tekenen met Tsjaad terwijl ze op haar afspraak wachten.
In dit scenario spelen Jane en Tsjaad samen met de app, wat betekent dat mama hem kan vragen over de interactie met verschillende elementen op het scherm als hij niet zeker weet wat de volgende stap is.
Laten we nu naar dit voorbeeld kijken:
Jane zit in de carpoollijn om haar oudste van school op te halen. Tsjaad zit op de achterbank, verveeld na een dag boodschappen doen. Jane overhandigt haar iPad aan hem met de Doodle Bright-app gelanceerd. Chad weet welke knoppen moeten worden ingedrukt omdat ze intuïtief zijn voor een vierjarige.
In dit scenario moeten de bedieningselementen gemakkelijk te begrijpen zijn voor een niet-gecontroleerd kind. Verandert dit de typen papieren prototypes die u voor deze app maakt? Hé, ja dat doet het! Nu, in plaats van te ontwerpen voor moeder en zoon, om een grotere aantrekkingskracht te hebben, zien we dat de prototypen primair alleen op het kind gericht moeten zijn.
Het kan duidelijk zijn dat voor een dergelijke app 'denken als een kind' nodig is, maar zonder dit use case-scenario om een back-up van die claim te maken, kun je vallen in de standaard 'volwassen modus' van nadenken over het ontwerp.
In haar artikel over 'Het geheim van het ontwerpen van een intuïtieve interface' vertelt Susan Weinschenk hoe je je ontwerp kunt afstemmen op wat de gebruiker verwacht te zien. Hoe beter u dit kunt doen, hoe intuïtiever uw interface zal zijn.
Ik merk vaak dat ik een perfecte flow heb gedefinieerd voor een app en dan vind ik iets dat ik heb weggelaten. Ben je daar geweest? Het is verergerend, maar een ding dat ik heb ontdekt en dat kan leiden tot veel "weggaan" is denken buiten het "perfecte" scenario.
Een voorbeeld uit het Doodle Bright-scenario is wanneer Chad een totaal geweldige foto maakt die Jane wil opslaan en afdrukken, maar hij sluit per ongeluk de app. Oh Oh. Wat nu? Hebt u een automatische opslag in uw papieren prototypen verantwoord? ik hoop het!
Zoals ik eerder al zei, iedereen is uniek en creatief op zijn eigen manier. Je moet een methode vinden die het meeste uit je knijpt. Papieren prototyping is een van de meest creatieve oefeningen in het ontwikkelingsproces van de app, je moet hieraan werken in je "prime" uren, omgeving, enz..
Er zijn tal van artikelen beschikbaar met tientallen bronnen en hulpmiddelen voor het maken van wireframes. Ik hoop dat dit artikel je ervan overtuigd heeft dat het een taak is die je kunt aanpakken, zelfs als je geen expert bent in gebruikerservaringen. Bekijk de volgende links en noteer wat ik heb weggelaten in de opmerkingen hieronder.
Voor een geweldig artikel over wireframing in het algemeen, ga je naar de "Voordelen van Wireframing" om de beginselen te leren die van toepassing zijn op zowel het web als mobiele apps.
Bekijk vervolgens een zeer hoog niveauoverzicht van het wireframing-proces dat zich achter de app Washington Post iPad bevond. Persoonlijk zou ik graag meer informatie hierover zien!
Andere verwijzingen van Opmerking:
Een set afdrukbare sketch-sjablonen voor mobiele apps.
Een enorme lijst met tools voor wireframing en papieren prototyping.
Zoals het zegt: "uitstekende bronnen voor wireframing".
Accentsconagua