Interactie ontwerpen

Requirements

Je hebt de user stories gebruikt als aanleiding voor het interactieontwerp, zodanig dat hier de functionaliteiten op zijn afgestemd.

In CLE 2 heb ik een reserveringssysteem moeten maken voor opdrachtgever. Deze moest aan een aantal eisen voldoen:
– Dit moet gebeuren in php
– Een deel van de website is niet toegankelijk is zonder in te loggen
– Het formulier moet beveiligd zijn tegen xss en sql injecties

Naast deze eisen moest ik natuurlijk ook aan de wensen van de opdrachtgever voldoen. Na een korte interview heb ik user stories gemaakt. Deze zijn priotiseerd a.d.h.v. de INVEST en MoSCow methode en voldoen aan de eisen van de opdrachtgever en klanten. Naast het maken van user stories heb ik ook bij elke story de defenition of done opgeschreven. Dit is handig om te doen zodat je weet wanneer je deze user story gedaan hebt. Als je dit niet doet blijft het vaag of je hebt gedaan wat je moest doen. Hieronder zijn de user stories te zien:

Story 1:
Als eigenaar van een kapperszaak
wil ik de afspraken gestructureerd terug kunnen zien,
zodat ik mijn afspraken makkelijk terug kan vinden.

Defenition of done: Deze user story is behaald wanneer de admin, de afspraken kan onderscheiden met: naam, achternaam, e-mailadres, behandelingstype, datum, tijd en opmerking.

Story 2:
Als klant met een druk schema
wil ik zelf een tijd kunnen kiezen om een afspraak te maken,
zodat ik daar omheen andere dingen plannen.

Defenition of done: Deze user story is behaald wanneer de gebruiker zelf een tijd kan kiezen tijdens het maken van de afspraak.

Story 3:
Als eigenaar van de kapperszaak
wil ik mijn afspraken kunnen verplaatsen en/of bewerken,
zodat ik mijn werkschema overzichtelijk kan maken.

Defenition of done: Deze user story is behaald wanneer de admin, afspraken kan verwijderen of bewerken via de adminpagina.

Story 4:
Als klant met een onvoorspelbaar werkrooster
wil ik mijn afspraken op elk moment kunnen annuleren,
zodat ik niet voor dubbele afspraken kom te staan.

Defenition of done: Deze user story is behaald wanneer de gebruiker de afspraak kan annuleren via de website (met een e-mailverificatie).

Story 5:
Als vergeetachtig persoon
wil ik een reminder krijgen vlak voor ik een afspraak heb,
zodat ik mijn afspraak niet mis.

Defenition of done: Deze user story is behaald wanneer de gebruiker en admin een mail krijgen, 24 uur voor de afspraak, waarin staat wanneer deze afspraak is en wat de behandelingstype is.

Story 6:
Als klant
wil ik weten wat de betalingswijzen zijn,
zodat ik weet of ik contant geld mee moet nemen.

Defenition of done: Deze user story is behaald wanneer er onder aan het afspraakformulier is aangegeven wat de betalingsmogelijkheden zijn.

 

Documentatiekennis

Je kunt de verschillende onderdelen van een interactieontwerp benoemen, zodanig dat je weet welke functie deze onderdelen in het geheel hebben.

Met een user story zorg je ervoor dat in één zin duidelijk is waarom een bepaalde funtionaliteit belangrijk is voor een speciefieke doelgroep. Als voorbeeld:

Als (gebruiker) wil ik (funtionaliteit), zodat (Reden).

MoSCoW

Met behulp van de MoSCoW methode kan je de gemaakte user stories priotiseren. Hierdoor weet je welk het belangrijkst zijn en welke minder belangrijk zijn.

Must have
Functionaliteiten van belang zijn en in het product moeten voorkomen.

Should have
Functionaliteiten die in het product moeten voor komen, maar het product werkt ook zonder deze functionaliteiten.

Could have
Functionaliteiten die uiteindelijk wel in het product moeten komen, maar niet van belang zijn om op te focussen als de vorige twee punten nog niet behandeld zijn.

Would have
Functionaliteiten die niet in het uiteindelijke product hoeven te komen, maar het kan wel. Dit zijn bijvoorbeeld functionaliteiten die niet belangrijk zijn of op het moment niet haalbaar.

Style guide

Een style guide dient als een soort gids dat laat zien wanneer bepaalde visuele elementen toegepast moeten worden en in welke context. Het gaat dan bijvoorbeeld om: logo’s, kleurpaletten en lettertypen.

Site map

Een sitemap is een document waar alle pagina’s van je site te zien zijn. Door een site map kan je zien hoe je op bepaalde pagina’s terecht kan komen. Hieronder heb ik een voorbeeld van een site map die ik heb gemaakt voor het reserveringssysteem.

Wireframes

Een wireframe is een soort blauwdruk van je website. Je schetst de website zodat je deze niet meteen hoeft te bouwen. Als er dingen zijn die veranderd moeten worden, kan dit makkelijk worden gedaan zonder te coderen. Een wireframe laat bijvoorbeeld zien waar bepaalde content op een site gaat staan. Dmv annotaties kan je aan de klant duidelijk maken wat je met bepaalde onderdelen bedoeld. Zoals uitleg over wat er gebeurd als je op een bepaalde knop klikt. Hieronder is een link te zien van een clickable wireframe die ik heb gemaakt voor mijn opdrachtgever (kapster):
Wireframe

Wire flow

Met behulp van een wire flow verbind je de pagina’s van een wireframe met elkaar. Hierdoor weet je welke knop waar naartoe gaat. De mogelijke acties op de pagina’s worden duidelijk.

Ik heb ook een low fidelity Wireframe gemaakt voor de website van de Vuurvechter9000 die in het volgende punt genoemd wordt. Deze wireframe heb ik gemaakt voor de mobiel. Er staan annotaties bij die laten zien waar bepaalde elementen in de Wireframe voor dienen.

 

Activity diagram

Een activity diagram is een methode om stapsgewijs het proces van het systeem en de gebruiker weer te geven. Ik heb hieronder een Activity diagram gemaakt van het inloggedeelte van de reserveringspagina. Het idee is dat alleen de admin kan inloggen.

Opstellen & Uitvoeren

Je kunt voor tenminste 2 verschillende devices een interactieontwerp opstellen, zodanig dat het aansluit op de doelgroep en de context.
Het interactieontwerp is ontwikkeld in meerdere iteraties, zodanig dat je het kunt omzetten in een werkend prototype.

Voor mijn front-end block moest ik ervoor zorgen dat mijn site responsive was en daarom ook op een ander device zou werken. Ik heb hierbij de opdracht genomen uit CLE 1 sprint 3. In deze sprint was de opdracht om een spel te maken voor kinderen. Ik hield me hier bezig met de casing van het product en later heb ik een one pager hiervan gemaakt. Deze heb ik vervolgens responsive gemaakt.

Om dit te bereiken heb ik media queries gebruikt. Deze zorgen ervoor dat als het scherm kleiner is dan een bepaalde grootte, de website op een bepaalde manier aanpast waardoor het er nog goed uit ziet. De site is voornamelijk gericht naar de jongere doelgroep tussen 6 en 9 jaar. Dit is de reden waarom de tekst erg simpel is. De link naar deze site is hieronder te vinden:
Vuurvechter 9000tm

Mobiele weergaven
Desktop weergave

Aan het begin van CLE 2, heb ik een wireframe gemaakt voor mijn opdrachtgever. Dit heb ik gedaan zodat ik feedback kan krijgen en vervolgens een prototype kan maken waarin de feedback is verwerkt die ik eerder heb gekregen. Hieronder is nogmaals de wireframe te zien die ik heb gemaakt.
Wireframe

Naast de wireframe heb ik een prototype van de site gemaakt met zo veel mogelijk functionaliteiten (voor zo ver het kan in een prototype). Dit is een uitbreiding van de wireframe. Ik heb hier de volgende feedback in verwerkt die ik van mijn opdrachtgever en testpersoon heb gekregen:
Voornaam, achternaam, e-mailadres en opmerking staat vast en kan niet veranderd worden (edit pagina)

Hieronder is de link van het prototype te zien.
Prototype

Aangezien dit slechts een prototype is, is het lastig om van speciefieke funtionaliteiten feedback te krijgen. Ik doel hier op bijvoorbeeld het limiteren van hoelaat tot hoelaat je kan reserveren. Ik heb later feedback gevraagd wat meer hierop gericht is. Dit heb ik met de daadwerkelijke website zelf gedaan.

De feedback die daaruit kwam luidt als volgt:

Feedback testpersoon
Feedback opdrachtgever

Ik heb jammer genoeg niet voldoende tijd gehad om al de feedback aan te pakken. Ik heb daarom het belangrijkste eruit gepakt en ben daarmee aan de slag gegaan.

Hieronder is een filmpje te zien van het reserveringssysteem. Het is mij niet gelukt om deze online te krijgen omdat het erg lastig is om de database ook online te zetten. Zonder online database krijg je meteen een foutmelding zodra je op de site komt.

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *