How to

Mobile design sprint: zo maak je jouw app retestrak

0

Mobiele apps ontwikkelen doen we al ruim 10 jaar. Maar met alleen ontwikkelen heb je nog geen goede app. Een strak mobile design is minstens zo belangrijk. Want als dit slecht is, maakt het niet uit hoe goed de techniek is. Een gebruiker is namelijk al afgehaakt nog voordat de app de kans heeft gehad zich te bewijzen. Dus, hoe zorg je er dan voor dat jouw mobile design, en dus jouw app, wel retestrak is?

Wij gebruiken hier een mobile design sprint voor. Dit is een periode van een aantal dagen waarin er met opdrachtgevers, gebruikers en designers gewerkt wordt aan een goed doordacht en werkend mobile design. Hoe dat precies werkt, lees je in dit artikel!

1. Start met een goede basis

Het is belangrijk om duidelijk te krijgen wat het gewenste doel van de app is, wat de app moet communiceren en hoe de gebruiker zo snel en eenvoudig mogelijk zijn doelen in de app behaalt.

Het beantwoorden van deze vragen is cruciaal voor het slagen van de app. Zeker met het oog op de beperkte schermruimte. Daarom wordt iedere mobile design sprint gestart met een gezamenlijke sessie van opdrachtgevers, gebruikers en designers. Door de hoofdfunctie van de app in deze setting uit te schrijven en deze steeds verder te downdrillen naar aansluitende functionaliteiten, creëer je een duidelijk beeld van de app. Van zowel de omvang als de samenhang. Maar ook welke prioriteiten functionaliteiten hebben. De uitgeschreven functionaliteiten noemen we ook wel user stories.

Bijvoorbeeld:

“Als gebruiker wil ik een account kunnen aanmaken.”

2. Wireframes

Op basis van de user stories, worden wireframes gemaakt. Dit zijn schermen zonder opmaak. Het gaat er namelijk niet om de juiste kleuren te selecteren, maar om de juiste flow te visualiseren. Dit werkt het makkelijkst in tools zoals Figma. Hierin kunnen wireframes direct in de gewenste flow gezet worden.

Het maken van wireframes dient vooral als validatie van de user stories. In samenwerking met de opdrachtgever wordt besloten of de flow aan de wens voldoet, of dat er inmiddels nieuwe inzichten zijn. Het steeds meer finetunen van de wireframes samen met de opdrachtgever noemen we itereren. Je handelt hierbij puur op inzicht. Niet op onderbuikgevoelens.

3. Prototype

Het itereren van de wireframes leidt tot een prototype. Dit klikbare model is nog altijd niet opgemaakt, maar geeft goed inzicht in de flow van de app. Deze stap is misschien wel de belangrijkste. In deze fase kunnen eventuele problemen of onduidelijkheden in de flow namelijk nog vroegtijdig opgelost worden.

Op basis van de feedback wordt er opnieuw beoordeeld welke aanpassingen er gedaan moeten worden, zodat er uiteindelijk een goede vertaalslag naar het design (de user interface) gemaakt kan worden.

decoratief

4. De user interface (UI)

Een UI werkt voor mobiel net even anders dan voor websites. Naast de beperkte schermruimte, moet er rekening gehouden worden met de Google (Android) en Apple (iOS) richtlijnen, waarbij apps moeten voldoen aan bepaalde regels. Deze regels zijn opgesteld met herkenning en gebruiksgemak in gedachten. Apps krijgen daarmee dus een herkenbare vorm van interactie. Cruciaal om rekening mee te houden en deze verwachtingen ook goed te managen richting opdrachtgever.

Voorbeelden van deze regels, zijn bijvoorbeeld de tabbar op iOS (zie afbeelding) en de herkenbare Material Design-stijlelementen en transities op Android. Hoewel hier nooit 100% aan voldaan moet worden, is het voor een gebruiker direct te herkennen.

iOS-tab bar met voor iOS herkenbare icons en stijlelementen

iOS-tab bar met voor iOS herkenbare icons en stijlelementen

Tenslotte is het kleurgebruik van een app vaak in lijn met de huisstijlregels van de opdrachtgever. Let daarbij wel op fel of druk kleurgebruik. Op een klein scherm kan dit al snel afleiden van het beoogde doel van de app.

5. Van itereren kan je leren!

Het opleveren van een mobile design gebeurt altijd in iteraties. Je gaat dus steeds terug naar de opdrachtgever met de laatste stand. Hij of zij kan daar dan feedback op geven, of er kan gehandeld worden naar nieuwe inzichten.

Daarbij is het handig om een bepaald format te gebruiken waarmee je de designs gemakkelijk kunt communiceren. Zeker nu we veel op afstand zitten! Een goede manier om dit te doen, is het gebruik van ‘iteratie decks’. Dit zijn presentaties in Google Slides met daarin de schermen in de juiste volgorde inclusief de user stories.

6. Het design als basis voor ontwikkeling

Zodra het mobile design klaar is, geldt deze als briefing voor het ontwikkelteam. Wij werken volgens het scrum-principe. Dat betekent dat er in een ‘project refinement’ stapsgewijs door het design gegaan wordt en er per functionaliteit geschat wordt hoe complex deze is. Dat doen we door het toekennen van complexiteitspunten.  Deze punten tellen we bij elkaar op, net zo lang tot er een volle sprint ontstaat. Een sprint heeft namelijk ruimte voor een maximaal aantal complexiteitspunten. Dit wordt herhaald totdat alle functionaliteiten zijn geschat. Zo ontstaat er een compleet beeld van het aantal sprints.

Het grootste voordeel van deze methodiek is dat er op basis van inzichten en prioriteiten tijdens ontwikkeling geschoven kan worden met functionaliteiten. Is iets minder belangrijk geworden? Dan kan dit met een lagere prioriteit naar beneden worden geschoven op de backlog. Is iets ontzettend belangrijk geworden? Dan kan dit met een hogere prioriteit naar boven gesleept worden.

Tijdens het ontwikkelproces blijft het design-team op de achtergrond betrokken. Kleine aanpassingen en wijzigingen op basis van opgedane inzichten worden snel doorgevoerd in het design. Dit soort late aanpassingen worden altijd weer toegevoegd aan een nieuw iteratie deck, zodat iedereen beschikt over het meest recente design.

Een app is nooit af

En zelfs als de app in de stores staat, is deze nooit af. Inzichten kunnen immers veranderen. Houd daarom altijd een vinger aan de pols bij gebruikers en opdrachtgever. Monitor de reviews in de stores zodat je direct kunt inspelen op vervelende gebruikerservaringen en houd de nieuwe trends en ontwikkelingen in de gaten! Alleen zo wordt je app pas echt een succes!