Inleiding
Ik maak een reserverings systeem voor een woning coöperatie. Ze hebben daar werk auto’s die je kan gebruiken om naar een afspraak te gaan. Hiervoor is een reserverings systeem maar het werkt totaal niet fijn. De werknemers zelf moeten een auto kunnen reserveren de klanten van de woning coöperatie hebben hier niks mee te maken.
Alle dingen die ik heb aangepast staan dikgedrukt. Dat is wel zo makkelijk.
Requirements
Je hebt de user stories gebruikt als aanleiding voor het interactieontwerp, zodanig dat hier de functionaliteiten op zijn afgestemd.
Ik heb de user stories gemaakt met de als, wil, zodat methode die we geleerd hebben bij de ontwerp lessen. Aangezien ik een bedrijf heb gekozen die geen ‘admin’ nodig heeft in zijn reserverings systeem kan ik daar geen user stories voor maken. De user stories heb ik gemaakt op basis van het interview met de opdracht gever.
Ze heeft hier in duidelijk aangeven wat ze veranderd wilde hebben en/of toegevoegd. Hiernaast staan 2 foto’s (ze zijn klikbaar). 1 daarvan zijn mijn user stories + admin stories. Daarbij staat ook mij intervieuw die ik afgenomen heb zodat u kan zien waarop ik het gebaseerd is. De user stories van de beheerder heb ik onderstreept zodat daar onderscheid tussen is.
Documentatiekennis
Je kunt de verschillende onderdelen van een interactieontwerp benoemen, zodanig dat je weet welke functie deze onderdelen in het geheel hebben.
User stories
Gebruik je om doelgroep te begrijpen wat ze willen. Door middel van de “als [rol], wil [doel,wens], zodat [belang]” methode kan je dat kort en krachtig neer zetten.
Een user story is belangrijk omdat via een user story een gebruiker invloed op het ontwikkelen van het systeem uiteindelijk de functionaliteit ervan.
MoSCoW
Gebruik je om taken op te delen op belangrijkeheid. Je hebt 4 catagoriën. Must have houdt in dat het er in moet zitten. Should have moet er ook in zitten maar die komen pas na de must haves. Hierna komen de could haves die zijn zeker minder belangerijk dan de should haves. Dan als laatste als je daar tijd voor hebt begin je aan de won’t haves.
Je user stories pioriteren met de MoSCoW methode is blangerijk omdat je dan gemakkelijk onderscheid kan maken tussen; wat is echt nodig en moet ik als eerste doen (must haves) en wat kan ik doen als ik tijd over heb (won’t haves).
Site map
Is een overzicht van de pagina’s. Welke onder welke vallen. zoals de account pagina heeft ook een delete en edit pagina.
Een site map maken is belangrijk omdat je dan inzicht krijgt in de relatie tussen onderdelen.
Wireframes inclusief annotaties
Is een legenda van je pagina. Je zet hierbij cijfers en beschrijft wat het doet. Zodat een andere programmeur ook kan zien wat het moet gaan doen/doet.
Wireframes zijn belangerijk omdat ze je inzicht geven in lay-out, content, groepering, hiërarchie & interactie. De annotaties zijn belangerijk om belangrijke
functionaliteiten toe te lichten en de interactie in verschillende stadia inzichtelijk te maken.
Style guide
Is een samenvatting van de style die je gaat gebruiken op je website. Hierin staan de kleur, size, lettertype en vorm. Ik heb de style van officiele website overgenomen want dat past ook het best bij het bedrijf. De kleuren heb ik er bij gezet.
Een style guide is belangrijk om te maken omdat je dan gelijk de look and feel van de site ziet. Ook kan je snel zien of iets goed/minder goed bij elkaar past.
Activity diagram
Is een schema waarin je kan volgen welke wegen (in mijn geval) die de gebruiker/systeem/database afleggen. Ook wat er gebeurt als het fout gaat. Ik heb de mijne gemaakt over het reserveren form.
Een activity diagram is belangrijk omdat het inzicht geeft over het gedrag de gebruiker en je systeem.
Wireflow
Is een overzicht van hoe de pagina’s met elkaar in verbinding staan. Dus je kan van de index pagina naar de reseveren enzo. Dan komt de wireframe en site map samen.
Een wireflow is belangerijk omdat het je inzicht geeft in de relatie tussen de onderdelen en daarbij ook de functionaliteit en de look en feel.
Opstellen
Je kunt voor tenminste 2 verschillende devices een interactieontwerp opstellen, zodanig dat het aansluit op de doelgroep en de context.
In eerste instantie had ik een interactie ontwerp alleen van een desktop omdat ze daar werken vanaf een laptop/computer. Hiervan heb ik ook een mobiel interactie ontwerp gemaakt. Ik heb nog nooit gewerkt met Adobe XD en het was best makkelijk op het eerste gezicht maar voor de moeilijke dingen begreep ik niet zo goed. Aangezien ik nog niet goed wist wat voor style ik precies wilde is het ook wel mooi zo in zwart wit. Mijn doelgroep zijn wat oudere mensen. Ik wilde het zo simpel mogelijk houden. Geen extra informatie laten zien die het on overzichtelijk maken.
Ik heb mijn activity diagram en mijn vernieuwde site map hier toegevoegd. Deze zijn klikbaar. Aan de site map heb ik de volgorde veranderd. ook kan je nu zien met de pijlen van elke pagina (genummerd) naar welke kan. Daarbij heb ik een admin gedeelte toegevoegd zoals gevraagd. Ik heb een wireframe gemaakt met annotaties. Ook heb ik een wireflow gemaakt die interactief is.
Uitvoeren
Je hebt het interactieontwerp gevolgd en indien nodig aangescherpt, zodanig dat het in meerdere iteraties is omgezet in een werkend prototype.
Ik heb het proces even naast elkaar gezet zodat u goed kan zien dat er wel wat aapassingen gedaan zijn. Zeker van af de schets. Ik wist toen nog totaal niet wat er allemaal mogelijk is en wat ik kon. Met digitaal gaat het wat meer lijken op de uiteindelijke uitkomt. Ik wilde graag een papieren prototype maken en die voorleggen aan mijn opdracht gever. Alleen heb ik er voor gekozen dat het leren van html/css en php toch net wat belangrijker zijn. Zoals je kan zien bij de eerste soort agenda die ik gemaakt heb, is heel goed te zien dat ik niet wist wat er mogelijk was. Daar kreeg ik ook wat feedback op en ben ik soort van opnieuw begonnen.
Alle plaatjes zijn klikbaar dus dan vergroten ze. Tijdens dat ik de schets aan het maken was kreeg ik al feedback. Angel vertelde mij dat de agenda die ik aan het maken was met tijdvakken. Totaal niet mooi zou staan op een pagina. Hij zei dat er genoeg plugins en Html agenda’s bestonden die dit al konden. Daar ben toen naar gaan zoeken en heb ik die opgeslagen voor later. De schetsen heb ik ook meegenomen naar mijn opdrachtgever. Samen met haar heb ik nog wat dingen aangepast in de schets (Beide foto’s staan er bij). Zoals dat ze graag wilde dat er 2 datums kunnen ingevuld worden. Ik had een Low-fidelity wireframe schets dus daar stond nog niet alles op. Ze wilde ook graag een menu en wat meer look en feel. Dit hebben we samen snel aangepast. Digitaal. Tijdens dat ik bezig was met de front-end en back-end ben ik zeer veranderd van dingen. Dit kwam vooral omdat weer nieuwe dingen leerde en deze ook direct ging toepassen. Zoals je kan zien bij het 2e plaatje had ik nog weinig tot geen style gebruikt. Daarna ging ik dat opzoeken en leren. Dat zie je overduidelijk in de plaatjes erna. De uitkomst is totaal anders dan wat ik verwacht had. Dit is juist goed vind ik. Ik heb geleerd in het proces en dat heb ik gelijk toegepast. Zoals met de agenda, ik wist nog niet wat er mogelijk was en toen kreeg ik dat te horen van Angel en daar ben ik mee aan de slag gegaan. Hierna bij het programmeren heb ik het toegepast en heb het van mijzelf gemaakt door middel van de style. Onder mijn iteraties staat een video van mijn reserverings- systeem.
Schetsen
Digitaal
Tijdens
Uitkomst
