Requirements
Je hebt de user stories gebruikt als aanleiding voor het interactieontwerp, zodanig dat hier de functionaliteiten op zijn afgestemd.
Voor CLE2 had ik na de debriefing de user stories opgesteld voor mijn reserveringssysteem. Hiermee kon ik snel zien wat de belangrijkste functies van het reserveringssysteem moesten zijn. Bij de user stories heb ik ook de MoSCoW (must haves, should haves, could haves en won’t haves) analyse gebruikt en hierdoor krijg je gelijk een goed beeld van wat de hoofdfuncties moeten zijn, en wat er nog eventueel later bij kan komen (betere opmaak, details, tools). Deze MoSCoW analyse stem je samen af met je opdrachtgever, die weet ook het best wat zijn klanten het belangrijkst vinden. Als voorbeeld was het bij mijn reserveringssysteem heel belangrijk dat er een melding zou komen wanneer een datum of tijd niet beschikbaar is, zo is de klant daar ook van op de hoogte en kan hij/zij een afspraak op een andere datum/tijd inplannen. Dit is dus een must have, een voorbeeld van een should have (minder prioriteit) was dat de klanten een bevestiging krijgen wanneer de afspraak is gemaakt. Dit is niet noodzakelijk om ervoor te zorgen dat het reserveringssysteem goed functioneert, maar het voegt wel wat toe voor de gebruiker.
De user stories en de MoSCoW analyse is hier uitgeschreven:
Documentatiekennis
Je kunt de verschillende onderdelen van een interactieontwerp benoemen, zodanig dat je weet welke functie deze onderdelen in het geheel hebben.
Er zijn verschillende onderdelen die bij een interactieontwerp horen:
Site map:
Een site map is een grafische weergave van de informatie architectuur van een website en geeft hierbij vooral de relaties/connecties aan tussen onderdelen van de content van de website. Een sitemap is een goede manier om de structuur van een website duidelijk te tonen en de content ook goed in te delen zodat de website steeds gebruikersvriendelijker wordt. Designers en developers kunnen ook zo in één oogopslag zien waar de (samenhangende) content op de website te vinden moet zijn voor de gebruiker.
Wireframe (met annotaties):
Wireframes is een visueel hulpmiddel die essentieel is bij het ontwikkelen van een website. Met een wireframe laat je voornamelijk de opbouw van een website zien en hoe de pagina’s met elkaar in verbinding staan. De focus ligt bij wireframes vooral op de lay-out, de structuur, de navigatie en de functionaliteit van de website. Je kunt wireframes in 2 categorieën: low fidelity en high fidelity. Bij low fidelity wireframes zie je vaak alleen de must haves van jouw website en het is ook niet interactief. Je ziet dan ook vaak dat dit simpele schetsen zijn (zie foto). Dan bevatten high-fidelity wireframes naast de must haves ook vaak should (en soms zelfs could) haves. High-fidelity gaat vooral verder in op de details en is vaak wel interactief. Deze schetsen zijn dan ook wat uitgebreider dan low fidelity schetsen (zie foto).
Ook hebben wireframes vaak annotaties, dit zijn aantekeningen bij je wireframes die aangeven wat een bepaalde functie (bijvoorbeeld een knop) doet bij interactie.
Een wireframe wordt uiteindelijk gebruikt om een opdrachtgever een idee te geven over hoe jij de website eruit wilt laten zien en hier kan de opdrachtgever eventueel feedback op geven voordat de echte development begint. Deze feedback kan gebruikt worden om bijvoorbeeld een nieuwe (high-fidelity) wireframe te maken.
Activity diagram:
Een activity diagram is een diagram die de verbanden tussen bepaalde activiteiten weergeeft. Het laat vooral het gedrag van de gebruiker zien tijdens het gebruik van de website, maar het laat ook het gedrag van de website zelf zien. Een activity diagram bestaat uit een start- en eindpunten (initial node en final node), hiertussen worden afgeronde rechthoeken geplaatst (acties) en pijlen die de overgangen aangeven (flows).
Wireflow:
Een wireflow is een combinatie van een wireframe en een flowchart. De wireframes die je hebt gemaakt voeg je samen toe en zet je flows tussen (overgangen). Als voorbeeld in de foto hieronder zie je dat je eerst bij de inlogpagina komt, en er vervolgens meerdere “routes” zijn (wachtwoord vergeten, inloggen, registreren), en dat je na één van deze routes bij het dashboard terecht komt en vanuit daar weer andere “routes” kan nemen (notificaties, zoeken, tijdlijn, etc).
Opstellen
Je kunt voor tenminste 2 verschillende devices een interactieontwerp opstellen, zodanig dat het aansluit op de doelgroep en de context.
Ik ben begonnen met het maken van de wireframes, eerst de low fidelity en daarna de high fidelity (met annotaties):
Hierna heb ik een activity diagram gemaakt voor het inlogsysteem van de admin (opdrachtgever en ik):
Daarna heb ik de sitemap opgesteld van de website van mijn opdrachtgever (garage Van den Heuvel) en heb daarbij het kopje “afspraak” toegevoegd, omdat ik dit voor mijn opdrachtgever maak:
En als laatst heb ik een wireflow gemaakt van het inlogsysteem met als annotaties:
- Druk op login -> Brengt gebruiker naar de admin pagina (met correcte inloggevens)
- Druk op wijzig -> Brengt gebruiker bij het wijzigen van de afspraken
- Druk op opslaan -> Brengt de gebruiker terug naar de admin pagina
- Druk op uitloggen -> Brengt de gebruiker terug naar de inlogpagina
Zelfde annotaties gelden hier als bij de desktopversie van de wireflow:
- Druk op login -> Brengt gebruiker naar de admin pagina (met correcte inloggevens)
- Druk op wijzig -> Brengt gebruiker bij het wijzigen van de afspraken
- Druk op opslaan -> Brengt de gebruiker terug naar de admin pagina
- Druk op uitloggen -> Brengt de gebruiker terug naar de inlogpagina
Uitvoeren
Je hebt het interactieontwerp gevolgd en indien nodig aangescherpt, zodanig dat het in meerdere iteraties is omgezet in een werkend prototype.
Na al deze voorbereidingen in de vorige uitdaging heb ik een werkend prototype gemaakt van het reserveringssysteem en van het inlogsysteem. Ik heb grotendeels de high-fidelity wireframes nagevolgd, ik heb de sitemap aangehouden en de activity diagram is terug te vinden in de acties die ondernomen moeten worden bij het inloggen (juiste gegevens invullen,etc). Al mijn must haves (en sommige should haves) zitten al in de website. Ik ben erg tevreden met het resultaat en ik weet nu dat als je niet de voorbereidingen doet die bij interactie ontwerpen horen, je toch een minder resultaat krijgt. Het is altijd goed om eerst klein en simpel te beginnen (bijvoorbeeld low fidelity wireframes) i.p.v. gelijk al aan het programmeergedeelte te beginnen.
