Ontwerpen, Wireframing & Prototyping van een Android-app deel 1

Als je droomt van het maken van de volgende grote ding in Android-apps, dan zal ik niet liegen: je hebt je werk uitgesneden voor jou!

U hoeft maar een klein kijkje te nemen in de Google Play Store om dat te zien elk De app die u kunt bedenken, is al gemaakt, meestal meerdere keren en met wisselend succes.

In een dergelijke competitieve markt moet je app het volledige pakket aanbieden - gewoon een geweldige reeks functies hebben, zal het niet drukken! Je app moet ook responsief, gebruiksvriendelijk, volledig vrij van bugs zijn en (hoe oppervlakkig het ook mag lijken) het moet ziet er goed uit, te.

Dus als je wakker wordt in het midden van de nacht met een briljant idee voor een Android-app, weersta de verleiding om uit bed te springen, start Android Studio op en begin je visie tot leven te brengen. Als je je idee recht doet, moet je nadenken over het ontwerp van je applicatie.

In deze tweedelige serie laat ik je zien hoe je van een geweldig idee een geweldige app maakt. U leert hoe u elk onderdeel van het ontwerp van uw app plant, test en perfectioneert en hoe u zoveel mogelijk problemen oplost voordat u zelfs maar een regel code schrijft.

In deze eerste aflevering gaan we bekijken hoe we al die grote, brandende vragen die elke ontwikkelaar moet beantwoorden wanneer ze een nieuw Android-project starten, kunnen beantwoorden. Vervolgens maken we een lijst met alle schermen die we moeten bouwen, plus een schermkaart die precies laat zien hoe al deze schermen bij elkaar passen.

In deel 2 beheers je enkele krachtige, speciaal ontworpen technieken, waaronder wireframing en prototyping. Aan het einde van deel 2 hebt u een digitaal prototype gemaakt dat u kunt installeren en testen op uw Android-smartphone, -tablet of -emulator.

Om u te helpen zien precies hoe je een idee zou aannemen van 'vonkje inspiratie' naar een werkend digitaal prototype, ik ga me voorstellen dat ik een idee heb bedacht voor een Android-app die ik wil maken en dan dit idee in de hele serie verder ontwikkelen.

Omdat we (vermoedelijk) de zomer in gaan, ga ik een app ontwerpen die mensen helpt bij het plannen en boeken van de ultieme zomervakantie met al hun vrienden.

Dus we hebben ons idee - wat is het eerste dat we moeten doen?

1. Schrijf een productverklaring

Je typische app heeft veel leuke toegevoegde extra's, maar heeft ook een duidelijke definitie primaire taak. Onze voltooide reis-app kan bijvoorbeeld sociale media-functionaliteit bevatten, zodat gebruikers een stukje van die geweldige cocktail op het strand kunnen delen, of de kat die ze buiten hun hotel aaien, maar deze functies zijn niet de primaire taak van de app.

Een goede truc om tot de kern te komen van waar uw app echt over gaat, is een productverklaring te schrijven. Dit is een enkele zin die communiceert wat uw app is, wat deze doet en waarom het noodzakelijk is dat de gebruiker Google Play opstart en uw app downloadt nu. Het kan helpen om je voor te stellen dat je je app aan een potentiële gebruiker koppelt, en je hebt maar één zin om je boodschap over te brengen.  

Na lang wikken en wegen heb ik besloten tot de volgende productverklaring:

Een app die stress wegneemt bij het plannen en boeken van de ultieme zomervakantie.

Het is cruciaal dat jij nooit uit het oog verliezen van deze productverklaring, dus u wilt hem misschien op een post-it notitie krabbelen en boven uw bureau plakken.


2. Identificeer uw doelpubliek

De volgende grote vraag die u moet aanpakken, is: voor wie ik dit precies bouw?

Hopelijk heb je al een globaal idee van het soort persoon dat je app zou willen gebruiken, maar voor de beste resultaten moet je je app ontwerpen met een zeer specifieke doelgroep in gedachten. Het oude gezegde is waar: probeer iedereen tevreden te stellen, en uiteindelijk zal niemand tevreden zijn.

Wie u probeert aan te spreken, moet elk onderdeel van uw app beïnvloeden, van de functies die u gebruikt, tot het uiterlijk van uw gebruikersinterface, tot de toon van de tekst van uw toepassing. Daarom is het cruciaal dat u uw doelgroep zo vroeg mogelijk in het ontwerpproces identificeert.

Ik heb al een globaal idee van wie ik doel: jonge volwassenen van 18 tot 25 jaar die ofwel op vakantie zijn in een universiteit of universiteit, een volledig nieuw jaar achter de rug hebben, of een laatste avontuur willen voordat het tijd is om te beginnen met zoeken voor die eerste fulltime baan. Dit is een goed begin, maar we kunnen specifieker worden!

Een simpele maar effectieve truc om je publiek op nul te stellen, is door een gebruikerspersoon.

Een gebruikerspersoon is een enkele gebruiker die het soort persoon belichaamt dat u target. Welke kenmerken zou deze persoon hebben? Hoewel de exacte kenmerken afhankelijk zijn van het soort app dat u in gedachten heeft, kunt u beginnen met het beantwoorden van de volgende vragen:

  • Hoe oud is jouw gebruikerspersoon? Dit kan een exacte leeftijd of een leeftijdscategorie zijn, zoals 60-plussers of jongvolwassenen.  
  • Waar wonen zij? Dit kan een specifiek land of een specifieke stad zijn, bijvoorbeeld aan zee of in de grote stad.
  • Hebben ze kinderen??
  • Wat zijn hun hobby's?
  • Hebben ze een baan? En zo ja, wat is het?
  • Zijn ze momenteel in het onderwijs?
  • Wat is hun favoriete type applicatie?
  • Wat is hun minst favoriete type applicatie?
  • Welke factoren motiveren hen om een ​​app te downloaden?
  • Betalen ze ooit voor mobiele apps??
  • Hoe ervaren zijn ze met mobiele apps? Zijn ze een krachtige gebruiker of een beginner??  
  • Hoe ervaren zijn ze met technologie in het algemeen?

Laten we een gebruikerspersoon voor onze reis-app maken. Voor de beste resultaten helpt het om je persona als een echt persoon te beschouwen. Misschien wil je je gebruikersnaam zelfs een naam geven, wat precies is wat ik ga doen: ontmoet Sasha!

  • Ze is 20.
  • Ze is een universiteitsstudent tijdens de zomervakantie.
  • Ze woont de hele zomer bij haar ouders, maar zal aan het begin van het academische jaar terugkeren naar de studentenhallen.
  • Ze is vrijgezel, zonder kinderen.
  • Ze heeft geen baan, dus haar studielening is haar enige bron van inkomsten.
  • Als iemand die is opgegroeid met sociale media, zijn haar favoriete apps alles wat ervoor zorgt dat ze foto's en statusupdates deelt met haar vrienden, familie en het World Wide Web in het algemeen.
  • Ze is een professional met technologie, vooral mobiele apps.

Aangezien mijn app helemaal draait om het organiseren van een vakantie, moet ik ook Sasha's ervaringen met reizen definiëren. Is mijn "typische" gebruiker waarschijnlijk goed bereisd? Zijn ze verantwoordelijk geweest voor het plannen van hun eigen vakantie vóór, of is dit helemaal nieuw voor hen?

Ik voeg de volgende kenmerken toe aan mijn gebruikerspersoon:

  • Sasha is meerdere keren in het buitenland geweest, maar alleen bij haar familie.
  • Dit is de eerste keer dat ze haar eigen vakantie plant.
  • Sasha kan redelijk georganiseerd zijn als ze dat wil, maar omdat dit de eerste keer is dat ze betrokken is bij het plannen en boeken van een vakantie, zou ze een helpende hand zeker waarderen!

Use Cases

Dus nu hebben we de wie, maar hoe zit het met de wanneer? Onder welke omstandigheden kan Sasha zich gedwongen voelen haar telefoon uit te schakelen en onze app op te starten?

Hier zijn een paar die in me opkomen:

  • Sasha hangt samen met universiteitsvrienden, en onvermijdelijk is het gesprek over hoe leuk ze deze zomer zullen zijn. Iedereen wordt overenthousiast en voordat je het weet, heeft Sasha onze app geopend en zij en haar vrienden plannen gretig wat zeker de reis van je leven zal zijn.
  • Sasha is zojuist in de groepchat gekomen en zij en haar vrienden gaan weg in hun favoriete instant-berichtenapp en ze ziet dat - eindelijk! - iedereen heeft een bestemming afgesproken. Opgewonden start Sasha onze app op en begint met het onderzoeken van leuke dingen om te doen in dat gebied.
  • Sasha voelt zich gefrustreerd. Zij en haar vrienden lijken uren te praten over hoe geweldig hun reis zal zijn, maar komen er nooit echt toe reservering iets. Iemand moet de leiding nemen en het lijkt erop dat die persoon haar zal moeten zijn. Het enige probleem is dat ze nog nooit zoiets geregeld heeft. Wat ze nodig heeft, is een soort app die stress kan wegnemen bij het plannen en boeken van de perfecte zomervakantie ... .

3. Maak een lijst met functies

Het is tijd om plezier te hebben: laat je fantasie de vrije loop en noteer elke functie die je in je app zou opnemen als je oneindige tijd, geld en een heel leger ontwikkelaars klaarstoomde om je te helpen. Voor nu, maak je geen zorgen over de vraag of deze functies praktisch zijn, denk aan dit als je ultieme lijst met functies.

Als je moeite hebt om inspiratie op te doen, ga dan naar de Google Play Store en download een paar voorbeelden van Android-apps die soortgelijke inhoud bevatten of dezelfde doelgroep hebben als je app.


Besteed enige tijd aan het verkennen van deze apps en noteer wat de app goed doet, en op alle gebieden waarvan u denkt dat deze kunnen verbeteren. 

Hier zijn enkele van de functies die ik heb genoteerd:

  • De mogelijkheid om alles te boeken wat de gebruiker nodig zou kunnen hebben voor zijn reis, van vliegtuig-, trein- en buskaartjes tot hotelreserveringen en zelfs diverse dingen zoals het reserveren van een tafel in dat lokale restaurant dat bijzonder goede recensies heeft op TripAdvisor.
  • Lees beoordelingen die door andere gebruikers zijn achtergelaten en plaats uw eigen beoordelingen.
  • De gebruiker bepaalt zijn budget vooraf en de app filtert vervolgens alle suggesties op basis van dit budget.
  • Wees spontaan! Het plannen van een vakantie zou leuk moeten zijn, dus waarom zou u niet alles aan het lot overlaten door een virtuele pin in een virtuele kaart te steken?  
  • Oké, dus het plannen van een vakantie moet leuk zijn, maar het kan ook hard werken zijn, vooral als dit de eerste reis is die je ooit hebt geboekt. Onze app moet een checklist bieden met alles wat de gebruiker nodig heeft om te boeken en te regelen, om de perfecte vakantie te plannen. 
  • Social media-functionaliteit, zodat gebruikers al hun vrienden en familie jaloers kunnen maken door foto's en statusupdates te plaatsen over hoeveel plezier ze op vakantie hebben.
  • Een reisverslag voor die gebruikers die meer willen delen dan eenvoudige foto's en statusupdates.
  • Omdat mijn doelgroep jonge volwassenen is, is dit misschien de eerste keer dat velen van hen verantwoordelijk zijn voor het boeken van hun eigen vakantie. Ze kunnen een algemeen advies op prijs stellen dat is bedoeld voor de eerste keer dat u reist, zoals hoe u een paspoort aanvraagt, of het soort dingen dat u wel en niet in uw handbagage kunt meenemen..
  • Een aftelling, zodat gebruikers de weken, dag, uren en minuten kunnen volgen tot het vakantie is.

Nu is het tijd voor een realiteitscheck: er is geen enkele manier om iemand te verkroppen allemaal hun ideeën in een enkele app. Zelfs als al je ideeën verstandig zijn, goed doordacht en een beroep op je doelgroep zouden doen, zou het gooien van alles behalve het aanrecht in een app een nachtmerrie zijn voor jou als ontwikkelaar en waarschijnlijk leiden tot een vreselijke gebruikerservaring.

Stel je voor dat je voor de eerste keer een app lanceert en meteen wordt geconfronteerd met een enorm, ingewikkeld menu vol met een ton aan opties. Keuze is een goede zaak, maar te veel keuze wordt gewoon verwarrend! Aangezien het laatste wat u wilt doen uw gebruikers in verwarring brengt, moeten we onze lijst met ultieme functies naar de absolute essentie schrappen.

Dus hoe bepalen we welke functies leven, en welke functies sterven?

Voor de eerste release moet u zich concentreren op functies die essentieel zijn voor het leveren van de kernfunctionaliteit van uw app. En vergeet niet dat het feit dat een functie niet in versie 1.0 komt, niet betekent dat het niet in een volgende update terechtkomt. Als u een functie in uw lijst tegenkomt die potentieel heeft, maar niet essentieel is voor het vervullen van de primaire taak van uw app, maakt u er een notitie van die de moeite van het opnieuw bezoeken waard is zodra de grondbeginselen van uw app zijn onderdrukt.

Uw gebruikersafspraken en gebruiksgevallen moeten ook een rol spelen bij het bepalen welke functies u in versie 1.0 (en in volgende releases) opneemt. Welke functies zijn het meest waarschijnlijk aantrekkelijk voor Sasha?

Na het opnieuw lezen van de gebruikerspersoon, het gebruik van cases en de productverklaring, heb ik de volgende functies afgehandeld:

  • Reizen en accommodatie boeken. Dit is een absolute must - als Sasha niet op zijn minst vervoer en een slaapplaats regelt, dan gaat ze nergens.
  • Een budget instellen. Sasha financiert de hele reis op de bodem van haar studielening, dus het stellen van een budget is een topprioriteit voor onze geldbewuste student.
  • Een virtuele pin in een virtuele kaart steken. Sasha is een jonge student die op zoek is naar een zomeravontuur met al haar vrienden, dus de gedachte om iets een beetje gek en spontaan te doen, kan haar misschien aanspreken. Herinner je ons ook onze gebruikscasus waarin Sasha met haar vrienden rondhangt en ze allemaal elkaar op het hart drukken over hoeveel plezier ze deze zomer zullen hebben? Dit is de perfecte gelegenheid voor Sasha om de bal echt aan het rollen te krijgen door onze app op te starten en een virtuele pin in een virtuele kaart te steken.
  • Een checklist. Aangezien dit de eerste keer is dat Sasha betrokken was bij het plannen van haar eigen vakantie, zou het hebben van een duidelijke checklist om door te werken het hele ding veel minder intimiderend maken.

Onze lijst bevat andere functies die een beroep op Sasha zouden doen, zoals het kunnen plaatsen van foto's van haar reis, omdat we al weten dat Sasha een fan is van alle dingen sociale media. Voor deze eerste release zal ik de dingen echter eenvoudig houden en gefocust blijven op het primaire doel van de app. Zodra u de kernfunctionaliteit van uw app hebt geleverd en uw productverklaring hebt vervuld, kunt u uw aandacht richten op al die leuke extra's die u graag wilt hebben.

4. Schets de High-Level Flow uit

Je volgende taak is om na te denken over de schermen die je moet maken om deze lijst met functies te bezorgen, dus pak een stuk papier en een pen of potlood. Schets een aantal ruwe stroomdiagrammen van de routes die uw gebruikers kunnen nemen via uw app om kerntaken uit te voeren.

Voor mijn reis-app zijn de kerntaken:

  1. Een reis boeken.
  2. Gegevens bekijken over eventuele ritten die de gebruiker al heeft gepland.

U vertegenwoordigt meestal schermen met vormen en drukt de navigatie uit met lijnen of pijlen.


Deze oefening is vooral bedoeld om u te laten nadenken over de verschillende schermen die u moet maken om de functies te leveren die u hebt gekozen uit uw lijst met ultieme functies. Besteed niet te veel tijd aan uw stroomschema, omdat u deze stroom verfijnt wanneer u uw schermoverzicht gaat maken.  

5. Maak een schermlijst

Stel vervolgens een lijst op van alle schermen die u moet maken op basis van uw stroomdiagram.

Hier is mijn schermlijst, plus een kort overzicht van wat ik van plan ben om in elk scherm op te nemen:

  • Thuis scherm. Dit scherm bevat een menu met alle trips die de gebruiker al via onze app heeft gepland. De gebruiker kan op elk item in dit menu tikken om de checklist voor die specifieke rit te bekijken. Als alternatief kunnen ze het 'Plan A New Adventure!' een tik koppelen.
  • Kaart. Dit scherm bevat een kaart en een virtuele pin. De gebruiker kan op een deel van de kaart tikken, of als ze zich spontaan voelen, kunnen ze de virtuele punaise pakken, hun ogen sluiten en alles aan het lot overlaten.
  • Selecteer een stad. Nadat de gebruiker het land heeft geselecteerd dat ze willen bezoeken, geeft dit scherm suggesties voor enkele steden waar ze misschien willen blijven. Dit scherm bevat ook een schuifregelaar waar de gebruiker de app kan laten weten met welk budget ze werken. 
  • checklist. Dit scherm bevat een checklist voor de gebruiker om door te werken. Als u op een item in deze lijst tikt, wordt een scherm geopend waarop de gebruiker deze taak kan uitvoeren, waaronder:
  • Boek vervoer.
  • Boek een hotel.

6. Maak een schermkaart

Nu is het tijd om ons stroomdiagram en onze schermlijst te combineren in een schermoverzicht waarin de navigatieverhouding tussen al deze schermen wordt weergegeven.

Begin met het eerste scherm dat de gebruiker ziet wanneer ze uw app starten en naar buiten werken.


Het is nooit te vroeg om te zoeken naar manieren om de gebruikerservaring te verbeteren, dus neem na het maken van je schermoverzicht even de tijd om ernaar te kijken met een kritisch oog. Een factor die een grote invloed heeft op de gebruikerservaring, is het aantal schermen dat de gebruiker nodig heeft om te navigeren om de kerntaken van de app te voltooien.

Over het algemeen geldt: hoe minder stappen, hoe beter de gebruikerservaring. Deze kaart is de perfecte gelegenheid om plaatsen te identificeren waar u het aantal schermen kunt verminderen dat de gebruiker nodig heeft om te navigeren. Dit kan inhouden het verwijderen van schermen, het combineren van schermen, het herschikken van schermen of het identificeren van plaatsen waar het zinvol zou zijn om een ​​'snelkoppeling' toe te voegen, zodat de gebruiker rechtstreeks van scherm A naar scherm E kan springen..

Conclusie

Tot nu toe hebben we een aantal belangrijke beslissingen genomen over de app die we gaan maken, inclusief wie onze doelgroep is en welke functies we gaan opnemen in versie 1.0 (met enkele functies over voor latere releases). We hebben ook een lijst gemaakt van alle schermen die we moeten ontwerpen en schetsten hoe deze schermen in onze voltooide app gerangschikt zullen worden.

Op dit punt hebben we onze app allemaal gepland, zij het op een zeer hoog niveau. In deel 2 ga ik dieper graven en de individuele schermen ontwerpen die deel uitmaken van deze schermkaart, voordat ik deze schermen test door een digitaal prototype te bouwen.