Opdracht: Schets de User flow in een Wireflow
Deze leertaak hoort bij sprint 5 "Fix the Flow". Dit is een deeltaak die je individueel uitvoert.
In de workshop S05W1-02-Userflow-Wireflows wordt behandeld wat een Wireflow is en hoe je een goede Wirelfow tekent.
Deze deeltaak hoort de leertaak:
Je leert hoe je de User Flow kan tekenen in een Wireflow.
Deze opdracht gaat over de analyse, ontwerp en test fase van de DLC.
Voordat je een Wireflow gaat tekenen moet je goed beschrijven wie de gebruiker is en wat de doelen van de gebruiker zijn. Daarna kun je met een User Story de interactie beschrijven die je wil ontwerpen.
- Schrijf eerst wie de gebruiker is van jouw opdracht en wat de gebruiker wil bereiken, wat is de User Goal?
- Schrijf een User Story van de belangrijkste interactie:
Als <gebruiker> wil ik <functionaliteit> zodat <meerwaarde>
Teken een Wireflow die alle mogelijke output, de belangrijkste userflow en de interactie duidelijk maakt. Een Wireflow toont opeenvolgende wireframes die verschillende states/schermen tonen, op basis van de interactie.
Hieronder staat een voorbeeld van een Wireflow met de User Story Als bezoeker wil ik een verhaal kunnen terugvinden door op een woord uit de titel te zoeken
- Schets alle mogelijke output (states en/of schermen) die een gebruiker te zien krijgt
- Geef met een andere kleur de interactie aan. Op welke elementen klikt een gebruiker? Scrollen of draggen?
- Geef met pijlen de User Flow aan
- Geef elke state een nummer en titel
- Schrijf onder elke state wat een gebruiker doet en wat de interface moet laten zien
Met een Wireflow laat je zien hoe een interactie op een website eruit komt te zien. Een Wireflow is voor jezelf, maar ook voor je team waar je mee samen werkt of om een product owner te laten zien hoe een interactie moet gaan werken. Andere mensen moeten je schets kunnen begrijpen. Het is belangrijk dat je netjes schetst, goede labels gebruikt en passende teksten schrijft.
- Laat de wireflow aan een klasgenoot zien en spreek de interactie door.
- Is de schets duidelijk voor een collega designer en developer? Schrijf op- of aanmerkingen bij je schets.
- Verwerk de feedback als dat nodig is.
Focus sprint 5 - De focus van deze sprint ligt op interactie en informatie architectuur van een website.
Doel van deze opdracht:
- Je leert hoe je de User Flow kan tekenen in een Wireflow.
Voor deze deeltaak geldt het gedragscriterium:
- Probleemoplossend vermogen: Student schetst om gedachten en processen te verkennen.
De Wireflow opdracht is done als
- Het is duidelijk wie de gebruiker is
- Er is een User Story geschreven van de interactie
- Er is een Wireflow getekend met alle mogelijke output (states en/of schermen)
- Alle states hebben een nummer, titel en beschrijving
- De User Flow en de interactie zijn goed weergegeven
- De opdracht is gedocumenteerd in de Readme van de deeltaak