Opdracht: Teken een Wireflow van een interactief element
Deze deeltaak hoort bij sprint 5 "Fix the Flow". Dit is een deeltaak die je individueel uitvoert.
In de workshop S05W1-01-Sprintplanning-interactie-en-Wireflows wordt behandeld wat een Wireflow is en hoe je een goede Wirelfow tekent.
Deze deeltaak hoort bij de leertaak:
Je leert hoe je 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 een interactieg element:
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 tweedejaars zien en spreek de interactie door.
- Is de schets duidelijk? Schrijf op- of aanmerkingen bij je schets.
- Verwerk de feedback als dat nodig is.
Deze 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