De verwerkte feedback / herkansing staat onderaan de pagina en begint bij bij het roze vlak net als dit vlak.

Een interactieontwerp wordt gebruikt om de interactie tussen de gebruiker en een systeem inzichtelijk te maken. Het ontwerp dient als input voor de developer, zodat het voor hem/haar inzichtelijk is hoe het systeem opgezet moet worden en welke gebruikersinteractie op welk moment plaatsvindt. Door middel van verschillende tools zoals bijvoorbeeld een sitemap, activity-diagram, wireframes en een styleguide kan worden bepaald hoe een product uitgewerkt moet worden.

Requirements

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

MoSCoW

Must have:

• Als eigenaar geef in de klant graag de optie om kiezen welke smaak thee hij wilt
• Als eigenaar geef in de klant graag de optie om kiezen welke smaak bubbels hij wilt
• Als eigenaar geef in de klant graag de optie om kiezen welke datum hij de bestelling wilt
• Als eigenaar geef in de klant graag de optie om kiezen hoeveel bekers thee hij wilt
• Als eigenaar zie ik graag de naam van de klant
• Als eigenaar zie ik graag de plaats van aflevering
• Als eigenaar zie ik de bestelling graag op mijn mail
• Als eigenaar zie ik graag de bestelling netjes gesorteerd
• Als eigenaar zie ik de thee en bubbel smaken graag bij elkaar
• Als klant zie ik graag een bevestiging van mijn bestelling
• Als eventplanner zie ik graag informatie over hoe ik het bedrijf kan bereiken buiten de reserveringssysteem
• Als eigenaar wil ik dat de klant de keuze heeft tussen 8tea5 Den haag en België

Should have:

• Als eventplanner kies ik graag het budget dat de eigenaar willig Is om uittegeven om op het event te staan of het budget dat ik heb om 8tea5  op mijn event te hebben.
• Als eventplanner vertel ik graag over waar mijn event voor staat en waarom u op mijn event zou kunnen staan.
• Als eventplanner zie ik graag foto’s van voorafgaande events zodat ik een beeld heb van wat er te misschien te wachten staat.
• Als klant zie ik graag een allergie kaart voor zodat ik zeker weet dat ik het mag serveren
• Als klant zie ik graag een voedingswaarden kaart zodat ik weet wat er in de bubbel tea gaat

Could have:

• Als klant zou ik mijn voorgaande bestelling nogmaals kunnen bestellen zonder alles zelf in te vullen
• Als klant zou ik kleine aanpassingen willen doen aan mijn vorige bestelling voor als ik net iets anders wil hebben.
• Als klant zou ik mijn bestelling automatisch elke week laten plaatsen.
• Als eventplanner zou ik graag video’s willen zien van de voorafgaande events zodat ik een beeld heb van wat er misschien te wachten staat.

Would have:

• Als eventplanner zou ik graag willen zien hoeveel 8tea5 heeft verdiend tijdens voorafgaande evnts, zodat ik ongeveer weet of het gaat lopen of niet.

Documentatiekennis

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

User stories

Een user story is een klein verhaaltje waarin kort wordt omschreven waar een bepaalde functionaliteit aan moet voldoen. User stories vertalen het concept voor een systeem tot een pakket aan wensen en behoeftes. Zo kan een ontwikkelaar functionaliteiten bouwen

Als [gebruiker] wil ik [actie] zodat ik [waarom].

 MoSCoW: 

MoSCoW gebruikt men om de gemaakte user stories te prioriteren. MoSCoW staat voor:
– Must have: De elementen die in het product aanwezig moet zijn zodat het werkt. De meest belangrijke elementen
– Should have: De elementen die in het product aanwezig zouden moeten zijn het zou handig zijn, maar het werkt nog steeds zonder.
– Could have: De elementen die niet in het product aanwezig hoeven te zijn het zijn meestal de details van het project iets wat niet perse met functionaliteit te maken heeft. Hier zit geen nood in in vergelijking met should have. Ze kunnen er uiteindelijk wel in.
– Won’t have: De elementen die de laagste prioriteit hebben. Alles is gemaakt kan hier nog naar gekeken worden maar waarschijnlijk komt het er niet in.

Site map: 

Een sitemap, is een pagina of pagina’s waarin links naar alle pagina’s van een website staan,De bealngrijkste elementen van een pagina staan op de sitemap. Dit is een handig hulpmiddel voor bezoekers en zoekmachines om bepaalde pagina’s te vinden op een site.

Wireframes inclusief annotaties:

Wireframes zijn een visueel hulpmiddel bij het ontwikkelen van een website of -applicatie. Ze kunnen gezien worden als de bouwtekening van een website, waarin een overzicht wordt gegeven van de verschillende onderdelen die op een website aanwezig zullen zijn.

In de wireframes worden zaken vastgelegd als navigatie, indeling en inhoud, zonder gebruik te maken van een grafisch ontwerp. Het grote voordeel is dat alleen op de inhoud gefocust wordt en niet op het grafische aspect (en of het dus ‘mooi‘ is of niet).
Annotaties zijn aantekeningen die bij de wireframe worden geschreven zodat men weet wat er op de wireframe staat. Het zijn als het ware verklarende aantekeningen.

Style guide

Een style guide is een hulpmiddel voor ontwerpers waarbij de huisstijl van een bedrijf te zien is. Je kan er de kleuren in terug vinden, lettertypen, logo’s en patronen. Door de style guide constant te gebruiken, maakt de ontwerper producten die met een rode draad op elkaar lijken en blijft het het gevoel van dat specifieke bedrijf houden. Denk aan Facebook, als je aan Facebook denkt dan denk je aan de kleur blauw.

Activity diagram:

Een activity diagram is een diagram dat laat zien hoe bepaalde acties op de website verlopen. Denk hierbij aan het plaatsen van een een bestelling. Je zien vanuit verschillende perspectieven in het bedrijf hoe de bestelling verloopt.

 Wire flow

Een wireflow is een soort flowchart die sitemap en wireframes combineert. Het toont de stroom van het ene pagina of scherm naar een andere pagina of scherm. Dit is vooral handig voor de gebruiker, de gebruiker maakt uiteindelijk gebruik van de website en het is belangrijk om tot het uiteindelijke doel te komen door zo min mogelijk knoppen in gedrukt te hebben.

Opstellen

Je kunt voor tenminste 2 verschillende devices een interactieontwerp opstellen, zodanig dat het aansluit op de doelgroep en de context.

Uitvoeren

Je hebt het interactieontwerp gevolgd en indien nodig aangescherpt, zodanig dat het in meerdere iteraties is omgezet in een werkend prototype.

Low-fid wireframe Computer

Low-fid wireframe telefoon

Mid-fid wireframe computer

Mid-fid wireframe telefoon

High-fid wireframe computer

High-fid wireframe telefoon

http://localhost/reserveersysteem/

Eind resultaat

---

Feedback / Herkansing

Denk er aan dat je voor de uitdaging Opstellen bij het building block Interactie Ontwerpen ook toevoegd:

Een sitemap van je eigen reserveringssysteem nieuw

Een activity diagram

Opstellen:
Hoe kan je de interactie tussen de schermen weergeven? Hoe leg je uit wat verschillende knoppen doen en de functie/inhoud van de verschillende schermen? 
Maak de interactie in je ontwerp duidelijk zichtbaar.

Wireflow

Web

Telefoon

Duidelijk verschil tussen telefoon en desktop versie

Uitvoeren:
Bewijsmateriaal was te laat ingeleverd. Maar je hebt wel degelijk een mooi iteratief proces inzichtelijk in je leeswijzer. 
Verduidelijk dit proces nog een verhaal over feedback van je opdrachtgever. Je hebt keuzes moeten maken tijdens je ontwerpproces, licht deze toe.

Hierbij een link naar de originele site. https://8tea5.com

En anders een paar foto’s

Ik hoop dat mijn blog nu volledig is.

Bedankt voor uw tijd en feedback.