Het mobiele ontwerpproces

Als je een ontwerper bent, is het goede nieuws over de mobiele app-ruimte dit: design is alles. Of je nu een hulpprogramma of een game bouwt, uiterlijk heeft grote invloed op zowel populariteit als bruikbaarheid. Volgestopte of ongeorganiseerde apps zijn moeilijk te begrijpen en moeilijk te gebruiken. Dit wil niet zeggen dat een "serieuze tool" verfraaid moet worden met een overdreven GUI. Een geweldig app-ontwerp is er een die het uiterlijk en de functie in balans brengt.

In termen van functie zijn er zeker een aantal gebieden van app-ontwikkeling die niet per se de "functie van de ontwerper" zijn, maar toch een grote invloed hebben op het ontwerp, conceptueel en in de creatieve richting van de toepassing. Als je aan een app werkt en deze taken niet worden ingevuld, zoek dan iemand met deze vaardigheden om het zelf te proberen. Als u deze stappen overslaat, kunt u een duur traject van revisies doorlopen wanneer uw gebruikers constateren dat uw app functionaliteit mist of dat ze pijnlijk ontwerpfouten hebben.

Wat is de primaire taak van de toepassing?

Wanneer een idee voor een app over het algemeen is uitgewerkt, wordt het tijd om de toepassingsfunctionaliteit te beperken tot de kern van wat de app doet. De populairste apps leggen de focus op ÉÉN primaire taak en houden deze in stand. Hiertoe moet u bepalen wat die primaire taak is door een beknopte uitleg te geven van het hoofddoel van uw apps en de beoogde doelgroep, ook wel een productdefinitieverklaring genoemd..

Ik weet dat het nerds en nutteloos klinkt, maar dit is de uitdrukking die je de hele tijd dat je aan het ontwerp werkt, aan je muur had moeten plakken. Het is de kern van waar de app over gaat. Kies dus de paar functies die het meest door uw gebruikers worden gebruikt en die het meest geschikt zijn voor de mobiele context. Een snelle manier om dit te doen, is door deze lege plekken in te vullen voor de applicatie waaraan u werkt:

(Your differentiator) (Your solution) for (Uw publiek).

Hier is een voorbeeld voor de app 'Foto's' van de iPhone:

(Eenvoudig te gebruiken) (digitale foto's delen) voor (gewone iPhone-gebruikers).

Marktonderzoek

Marktonderzoek klinkt misschien als een van die * geeuw * -taken, maar het overslaan van deze stap is ... dom. Als je het niet wilt doen, huur dan iemand anders in die wel enthousiast is over dit soort werk. Val niet in de val van "niemand anders heeft dit gedaan" en "dit idee is volledig origineel" of "Ik wil mijn idee zuiver houden, beschermd tegen invloeden van buitenaf." Als je deze ideeën koopt, zal je app wees perfect, maar alleen voor jou.

Stap 1: Bereid je voor om te vergelijken

De beste manier om verwijzingen te kruisen en al uw onderzoek te documenteren, is het in een spreadsheet of tekstverwerkingsdocument te plakken. U kunt uw eigen maken OF IK heb er een gemaakt in Google Documenten die u kunt gebruiken: Spreadsheet voor mobiele app-onderzoeken. Ik heb voorbeelden toegevoegd die relevant zijn voor de app waar we in dit artikel aan zullen werken. Vervang deze gegevens gewoon door uzelf! Dit maakt het gemakkelijk en gemakkelijk om naar alle functies, voordelen en technologie die andere producten bieden te verwijzen.

Stap 2: Zoek naar bestaande oplossingen

Ik zeg 'bestaande oplossingen' in plaats van 'concurrentie' omdat niet alle gerelateerde producten concurreren op uw mobiele markt. Sommige kunnen web-apps, desktop-applicaties of zelfs offline bronnen in hetzelfde interessegebied zijn. De beste manier om bestaande producten te vinden, is om te zoeken naar alle soorten zoekwoorden die betrekking hebben op uw toepassing:

  • Google
    • beperk de zoekopdracht tot 'blogs' en 'nieuws' om echt recente resultaten te krijgen
  • iTunes App Store
  • Android Marketplace

Stap 3: ontdek technische beperkingen

Tijdens marktonderzoek moet je voorbereid zijn om technische beperkingen te ontdekken die je niet verwachtte. Als ontwerper kunt u zeggen: "Who cares? Dat is de baan van de ontwikkelaar! "Misschien wel, maar het zou je verbazen hoeveel technische haalbaarheidsdiscussies het design beïnvloeden! Geloof me, je wilt deel uitmaken van die discussie.

Voorbeelden van technische beperkingen kunnen zijn: Wat als u een app wilde maken waarmee u oproepen van een specifiek nummer kunt blokkeren? De iPhone SDK ondersteunt die functionaliteit niet. Of wil ik zeggen dat ik een app wilde maken waarmee je de dichtstbijzijnde coffeeshop kunt vinden? Denk beter na over hoeveel hits uw app kan krijgen, omdat Google en Yahoo! beide beginnen met opladen zodra u een bepaald aantal zoekverzoeken in uw app overschrijdt!

Stap 4: Planning voor toekomstige functionaliteit

Dit is erg belangrijk. Wanneer je ontmoedigd raakt door te leren over alle dingen die vandaag niet mogelijk zijn, goed nieuws - je kunt ze nog steeds plannen in je ontwerp! Had de eerste iPhone een videocamera? Nee, maar ontwikkelaars die hun game hadden, begonnen ooit na te denken over mogelijkheden op dat gebied die zich onvermijdelijk in de toekomst zouden openen.

Een andere reden om te plannen voor toekomstige functionaliteit is dat de toepassingen kunnen opschalen of groeien. Hetzelfde als websites, apps gaan vaak door een of andere groeispurt. Soms betekent dat het toevoegen van functies of inhoud, soms betekent het dat je dingen wegpoetst! Bedenk hoe je een balans kunt bewaren tussen creativiteit en modulariteit. Sta je toe om stukjes eenvoudig in en uit te pluggen vanuit een lay-outstandpunt en heb je onderweg veel minder last van hoofdpijn!

Doelgroep

Het kennen van uw doelgroep is erg belangrijk bij het definiëren van een ontwerpstijl, typografie en lay-out. Spreekt je app een beroep op accountants of 18 - 25-jarige gamers? Het hebben van deze informatie en het nog dieper duiken om 'persona's' te ontwikkelen is essentieel om te begrijpen wat de demografie wil zien, en de context waarin ze de app zullen gebruiken.

Mike Todd is bijvoorbeeld een 18-jarige student in New York City. Dit vertelt ons veel meer over Mike. Hij zit op de universiteit, rond andere studenten van zijn leeftijd, de meeste met vergelijkbare schema's. Mike wil misschien een spel met interactie tussen twee spelers. Zouden we aan interactie tussen twee spelers hebben gedacht als we Mike's leeftijd wisten? Afhankelijk van de app, misschien of misschien niet. Ongeacht, het uittekenen van persona's brengt rijkdom in uw brainstorm en helpt bij het uittekenen van functionaliteit die belangrijk is voor uw doelgroep, en belangrijk voor het ontwerp.

Gebruik casusscenario's

Zodra persona's zijn gedefinieerd, moeten de personages worden geplaatst in relevante, levensechte, "mobiele" omstandigheden. Waar zijn de gebruikers die de app gebruiken? Zijn ze te voet, met de auto of met de trein??
De drieënveertigjarige Bill rijdt naar een vergadering in het centrum van Londen en wil stoppen voor een kopje koffie. Moet de app vereisen dat Bill meerdere keren op het scherm tikt voordat hij zijn coffeeshop kan vinden? Absoluut als je broer een body shop heeft! Nadenken over de uiteenlopende omstandigheden waarin gebruikers zich bevinden, en inbellen in scenario's waarbij bepaalde functionaliteit zich herhaalt, is de sleutel tot het definiëren van de schermen die u gaat ontwerpen.

Sitemap

Sitemaps voor mobiel zijn cruciaal voor ontwerp. Om een ​​flow te ontwerpen die intuïtief is, biedt inzicht in de relatie tussen content en andere content een manier om eenvoudige en bruikbare besturingselementen te ontwerpen. Sitemaps van mobiele apps verschillen van sitemaps voor websites, omdat mobiele apps de gebruiker niet meerdere manieren moeten bieden om naar één locatie te gaan. Eén deur naar één kamer: dat is alles. Mobiele gebruikers hebben geen tijd om een ​​verkeerde beweging uit te voeren en gaan vervolgens "terug" en proberen het juiste pad te vinden.

Wireframing en papieren prototyping

Gegevens verzameld uit de use case-scenario's zullen de inhoud en besturingselementen definiëren die aanwezig moeten zijn op de schermen die zijn gedefinieerd in de sitemap. Vanaf daar moet u een voorlopige lay-out ontwerpen die rekening houdt met elk van deze ontwerpelementen. Definieer een raster en bepaal het belang van informatie met behulp van de kleur, vorm en grootte van ontwerpelementen.

Ergonomisch gesproken houden gebruikers mobiele apparaten met touchscreen zo vast dat de duimpositie doorgaans naar het midden van het scherm is gericht. Dus als u gebruikers snel door de app wilt navigeren, geeft u ze bedieningselementen waarmee ze met één hand het apparaat kunnen vasthouden!

Overweeg ook de variëteit aan manieren waarop content op en buiten het scherm kan worden verplaatst. Mobiele vellen zijn bijvoorbeeld een prima manier om bruikbare besturingselementen te verbergen totdat de gebruiker klaar is om ze te gebruiken.
Bedenk hoe u de gebruikersinvoer kunt minimaliseren. Wie wil vastzitten met het invoeren van een hoop tekst? Geef gebruikers een keuzelijst, zodat ze in plaats daarvan een keuze uit een menu kunnen selecteren.

Bij mobiel ontwerp bespaart papieren prototyping u veel tijd. Net als bij elk ontwerp- of illustratieproces, kunt u met iteraties van uw ontwerp een breder scala aan ontwerpopties in een diepere mate verkennen. En met papieren prototypes is er minder "risico", minder gehechtheid aan een stuk papier dan een gepolijst Photoshop-bestand. Werken aan post-it-notities is bijvoorbeeld handig als u schermen opnieuw kunt rangschikken, toevoegen of verwijderen totdat de flow juist is. Zie deze Tumblr-thread voor een mooie verzameling mobiele wireframes.

Definitieve bestanden maken

Nadat u uw papieren prototypen hebt aangepast, is het tijd om die schetsen tot leven te brengen in Photoshop. Als je dat nog niet hebt gedaan, ga je terug naar mijn vorige bericht op iPhone Design Templates en pak je een paar om te beginnen. In dat artikel vindt u ook specificaties over hoe u uw bestanden op de juiste grootte en resolutie kunt instellen. Als je het geluk hebt om met een ontwikkelaar samen te werken die afbeeldingen voor je kan uitdelen, wees dan beleefd en organiseer je bestand met behulp van mappen.

Conclusie

Dit is zeker een verkorte versie van elke stap in het mobiele ontwerpproces, dus laat me hieronder een opmerking achter en laat me weten op welk gebied je zou willen dat ik uitleg over!

Over de auteur

Jen Gordon is een freelance designer die in 2008 hard voor mobiel viel. Sindsdien heeft ze tientallen interfaces ontworpen voor zowel iPhone als iPad. Als ze niet druk is met het verplaatsen van pixels, schrijft ze graag over design en creëert ze assets die andere ontwerpers en ontwikkelaars kunnen gebruiken. Hieronder staat een geweldige iPhone Design-bundel die ze speciaal voor MobileTuts-lezers heeft samengesteld!