Building Block: Interactie Ontwerpen (special post voor Jay lol)

Inleiding

Voor CLE3 had ik als podium het Lantarenvenster Rotterdam toegewezen gekregen van mijn teamcoach Dieuwertje. Tijdens het project had ik gewerkt aan een augmented reality (AR) game. Het creëren van de AR game is helaas niet gelukt door tijdsgebrek, want Stevie Lulofs die een teamgenoot van mij was moest andere prioriteiten stellen wat betreft haar building blocks. Ze heeft er voor gekozen om haar te gaan focussen op de front-end building block. Vandaar dat ik haar heb geholpen om de user stories te maken, zodat zij op basis daarvan de website die informatie weergeeft over het concept van de AR-game van Lantarenvenster Rotterdam goed in kaart kan brengen.

Voordat ik begon aan mijn interactieontwerp wilde ik de functionaliteiten juist in kaart brengen vanuit het perspectief van de gebruiker, zodat mijn team en ik zich goed in kunnen spelen op de behoeftes van onze gebruikers. Hiervoor heb ik user stories opgesteld en deze vervolgens geprioriteerd na mijn uitgevoerde MoSCoW analyse. Deze analyse stelt mij in staat om prioriteiten te stellen over welke functionaliteiten het meest belangrijk zijn en welke minder. Er was tijdens dit project geen sprake van een opdrachtgever. Binnen mijn team hebben we een rolverdeling gemaakt en mijn rol binnen het team tijdens CLE3 was om te functioneren als interactieontwerper. Vandaar dat de afgewogen keuzes voor de user stories en MoSCoW analyse niet met een opdrachtgever besproken zijn, maar wel intern met mijn projectteam.

Bij de uitdagingen van Opstellen en uitvoeren had ik materialen van CLE2 gebruikt als bewijsmateriaal. De opdrachtgever waarvoor ik CLE2 aan het uitvoeren was is Muhterem

Copur. Zij is de eigenaar van een bekende schoonheidspecialist genaamd “La

Femm” in Rotterdam-Zuid.

Requirements

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

User Stories – Geprioriteerd met MoSCoW

Afbeelding 1: User Stories: Latern Window AR Game.

Afbeelding 2: Extra toelichting bij de post-it briefjes: Blauwe post-it briefjes zijn functionaliteiten waarbij het nodig is om ingelogd te zijn.

Afbeelding 3: Extra toelichting bij de post-it briefjes. Gele post-it briefjes zijn functionaliteiten waarbij het niet nodig is om ingelogd te zijn.

User Stories – Acceptatiecriteria

Ik heb er bewust voor gekozen om de acceptatiecriteria niet op de post-its te vermelden, want anders komt er teveel tekst te staan op de post-it wat ervoor zorgt dat afbeelding 1 niet goed leesbaar wordt. Op afbeelding 1 staan de user stories ook genummerd in een zwarte cirkel. Ik refereer naar de nummers als het gaat om de opgestelde user stories en daarbij voeg ik per story de acceptatiecriteria toe.

Afbeelding 4: Een verduidelijking op afbeelding 1 (indien de nummers niet goed zichtbaar zijn). Hier vindt u welke user stories bij welk onderdeel van de MoSCoW analyse horen. Bron: zelfgemaakt.

Must haves

1 – Als gebruiker wil ik een informatie pagina in kunnen zien, zodat het concept van de AR-game duidelijker wordt.

Acceptatiecriteria

Op de informatiepagina wil ik antwoord op de volgende vragen zien. Wie zijn de ontwikkelaars? Wat inspireerde hun tot dit idee? Wat is het idee achter het concept?
Op de informatie pagina wil ik een visuele weergave van het concept van de game, zodat ik in één oogopslag het concept kan begrijpen.

2 – Als gebruiker wil ik een contact pagina in kunnen zien, zodat ik bij onduidelijkheden contact op kan nemen met de makers van de game.

Acceptatiecriteria

Op de contactpagina wil ik een webformulier zien waar ik de volgende gegevens kan invullen zoals, naam, telefoonnummer, e-mailadres en de vraag/opmerking die ik heb aan de makers van de game.
Als ik mijn het formulier verstuurd heb wil ik een geautomatiseerde mail ontvangen, zodat ik weet of mijn vraag/opmerking juist ontvangen is.
De vraag/opmerking wordt opgeslagen in de database.

3 – Als gebruiker wil ik weten op welke platformen de game beschikbaar is, zodat ik weet of ik deze kan spelen op mijn toestel.

Acceptatiecriteria

In de footer van de website wil ik een knop zien waar ik met 1 klik doorgestuurd wordt naar de Google Play Store.
De app is minstens beschikbaar op de Google Play Store.

4 – Als gebruiker wil ik een pagina kunnen bekijken met de spelregels van de game, zodat ik weet hoe ik de game moet spelen.

Acceptatiecriteria

In de navigatiestructuur binnen in de header van de webpagina moet er een knop komen waar ik met 1 klik doorgestuurd wordt naar de pagina waarin de spelregels beschreven staan.
De spelregels moeten op chronologische volgorde staan en aangevuld zijn met visuele content.

Should haves

5 – Als gebruiker wil ik een login functie, zodat ik mijn kortingsbonnen kan inzien.

Acceptatiecriteria

Ik wil kunnen inloggen door middel van de juiste gebruikersnaam en wachtwoord in te kunnen vullen.
Als ik mijn gebruikersnaam of wachtwoord niet kloppen, dan wil ik een foutmelding kunnen zien.

6 – Als gebruiker wil ik kunnen filteren op categorieën, zodat ik binnen 1 klik een overzicht heb van mijn kortingsbonnen per categorie.

Acceptatiecriteria

Om in deze pagina te kunnen komen moet ik eerst ingelogd zijn.
Er moet een aparte box komen waarin ik op checkboxes kan klikken, waardoor ik de kortingsbonnen kan inzien per categorie. Deze dienen uit de database opgehaald te worden.

7 – Als gebruiker wil ik een uitlog functie, zodat anderen geen toegang kunnen krijgen tot gevoelige informatie.

Acceptatiecriteria

Als ik ingelogd ben wil ook de mogelijkheid hebben om binnen 1 klik uit kunnen loggen.

Could haves

8 – Als gebruiker wil ik meer te weten komen over het LantarenVenster, zodat ik meer weet over de locatie waarop de game gebaseerd is.

Acceptatiecriteria

Als er toestemming is verkregen van het LantarenVenster Rotterdam om een deel van hun content te publiceren op deze website.
Geldt alleen als er toestemming is gegeven door het LantarenVenster Rotterdam: Er moet korte en bondige informatie komen over wat de LantarenVenster doet op de pagina ‘Over LantarenVenster’.

9 – Als gebruiker wil ik een blog pagina kunnen inzien, zodat ik op de hoogte blijf van de meest recente updates van de game.

Acceptatiecriteria

Bovenaan de website moet er een link komen waar ik met 1 klik een overzicht krijg van een blog pagina.
De meest recente blogs dienen als eerst getoond te worden en de oudere blogs onderaan. Deze dienen uit de database opgehaald te worden.

10 – Als gebruiker wil ik een FAQ kunnen inzien, zodat ik binnen 2 kliks een oplossing kan vinden voor de meest voorkomende problemen wat betreft de game.

Onderaan de website moet er een link komen waar ik met 1 klik een overzicht krijg van de meest gestelde vragen.
De meest gestelde vragen moeten als eerst getoond worden en de minder veel gestelde vragen onderaan. Deze dienen uit de database opgehaald te worden.
De meest gestelde vragen moeten opgeteld worden in de database.

Acceptatiecriteria

Won’t/would haves

11 – Als gebruiker wil ik social media iconen kunnen inzien, zodat ik de game kan volgen om bij te blijven met de recente updates ervan.

Acceptatiecriteria

Bovenaan de website moet er een link komen waar ik met 1 klik doorgestuurd wordt naar de social media pagina van de game.
Er moet een knop komen bovenaan de pagina die mij doorstuurt naar de Facebook pagina van de game.
Er moet een knop komen bovenaan de pagina die mij doorstuurt naar de Instagram pagina van de game.

12 – Als gebruiker wil ik gebruikersvoorwaarden in kunnen zien, zodat ik weet aan welke voorwaarden ik moet voldoen om de game te kunnen spelen.

Acceptatiecriteria

Onderaan de website moet er een link komen waar ik met 1 klik de gebruikersvoorwaarden kan lezen.

13 – Als gebruiker wil ik in contact kunnen komen met andere gamers, zodat ik het spel met hun kan samen spelen.

Acceptatiecriteria

Om in deze pagina te kunnen komen moet ik eerst ingelogd zijn.
De gebruiker moet kunnen chatten met andere gebruikers die deze game ook spelen.
Als de gebruiker een chat berichtje stuurt in de chat dan moet de gebruikersnaam, profielfoto, de huidige tijd en het bericht zichtbaar zijn in de chat.
De chatberichten moeten worden opgeslagen in de database.
Als er een bericht met scheldwoorden verstuurt wordt dient de gebruiker hierop geattendeerd worden via het chatsysteem.

Documentatiekennis

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

User Stories

User stories beschrijven de functionaliteiten van het systeem vanuit het perspectief van de gebruiker (Van Vlerken, 2016). Het template die wordt gehanteerd om zo’n user story op te zetten is “Als [rol] wil ik [doel//wens], zodat [belang]”. Juist omdat user stories worden geschreven uit het perspectief van de gebruiker kunnen de uiteindelijke ontwikkelaars van het desbetreffende product (bijvoorbeeld een website) zich beter inleven in de situatie van hun eindgebruiker. Als user stories gemaakt zijn worden ze vaak verbeterd aan de hand van de vooraf opgestelde personas om deze functionaliteiten nog beter af te kunnen stemmen op de wensen en behoeftes van de gebruiker.

Afbeelding 4: De basisstructuur van user stories. Bron: https://www.justinmind.com/blog/user-stories/

User Stories – INVEST Checklist

Een goede user story moet voldoen aan bepaalde criteria. Om dit te checken is er een INVEST-checklist. INVEST staat voor (Independent, Negatiable, Valuable, Estimable, Small enough, Testable).

Independent: Independent betekent dat user stories onafhankelijk van elkaar moeten zijn, zodat er prioriteiten gesteld kunnen worden (Van Vlerken, 2016).
Negotiable: Negotiable gaat erom dat een user story niet te gedetailleerd is, zodat de ontwikkelaars hier gemakkelijk met elkaar over kunnen brainstormen (Van Vlerken, 2016).
Valuable: Valuable is het afwegen van de waarde van een user story. Vaak wordt dat door de product owner bepaald. De meest belangrijke functionaliteiten worden als eerst ontwikkeld om de gebruiker tevreden te stellen (Van Vlerken, 2016).
Estimable: Voor estimable is het belangrijk om te kijken hoe lang het gaat duren om een bepaalde functionaliteit die ontwikkeld moet worden werkend te krijgen. Hierbij kunnen er vragen gaan gesteld worden of er bijvoorbeeld genoeg budget of kennis in huis is. Aan de hand daarvan kunnen er tijdinschattingen gemaakt worden om een user story te voltooien. Dit zorgt voor meer duidelijkheid wat betreft de tijdsduur van een user story (Van Vlerken, 2016).
Small: Bij small enough wordt er gecontroleerd of de functionaliteit op 1 post-it briefje past, 1 functionaliteit beschrijft en niet teveel werk kost (Van Vlerken, 2016).
Testable: Als het gaat om het onderdeel testable dan gaat het erom dat er acceptatiecriteria omschreven staat bij de gemaakte user story. Hierdoor kan het team van ontwikkelaars bepalen of de functionaliteiten wel aan de eisen voldoen. Bij dit onderdeel is het van belang dat de acceptatiecriteria meetbaar is. Binnen 2 kliks moet een gebruiker een bepaald doel kunnen bereiken. Het is belangrijk om subjectiviteit te voorkomen. Daarom zijn vage woorden zoals ‘snel’ en ‘makkelijk’ niet goed omdat je er niet goed mee een functionaliteit kan testen (Van Vlerken, 2016).

Afbeelding 5: De INVEST methode. Bron: https://www.justinmind.com/blog/user-stories/

MoSCoW

De MoSCoW analyse is bedoeld om prioriteiten te stellen en dit wordt vaak besproken met een opdrachtgever om de waarde van de user stories af te kunnen stemmen. Deze waarde wordt afgestemd om de Minimum Viable Product (MVP) te vormen. MVP zijn de minimale eisen van het product en vormt 60% ervan. De vooraf opgestelde user stories worden geprioriteerd vier verschillende hokjes. Must haves, should haves, could haves en won’t/would haves.

Must haves: Must haves zijn de user stories die per sé in het product moeten zitten.
Should haves: Zijn belangrijk maar hebben minder prioriteit dan de must haves.
Could haves: Kunnen verwerkt worden als er nog tijd over is tijdens het project.
Won’t/would have: Kunnen verwerkt worden als er nog tijd over is, maar kunnen ook weggelaten worden.

Afbeelding 6: De MoSCoW analyse. Bron: https://railsware.com/blog/moscow-prioritization/

Site map

Een sitemap weergeeft de navigatiestructuur van een website en geeft inzicht in de relatie tussen onderdelen door middel van nummering, pijltjes en titels. De opstelling van de structuur is meestal weergeven in een hiërarchische vorm. De structuur van de website gaat vaak de diepte of de breedte in. Een sitemap wordt wel eens ingezet als materiaal voor een card sorting test. Bij een card sorting test kan de interactieontwerper erachter komen hoe de gebruikers bepaalde informatie verwachten. Op basis van de input van de gebruiker kan de interactieontwerper de sitemap beter af te stemmen op de gebruiker, hierdoor gaat de gebruiksvriendelijkheid van een applicatie omhoog. Bij een open card sorting test heeft de interactieontwerper nog geen namen voor de hoofdcategorieën, maar onder de lege hoofdcategorieën staan wel items weergegeven. De doelgroep waar je deze test mee doet zal de meest logische naam voor deze categorie verzinnen. Uiteindelijk zal de interactieontwerper aan de deelnemer moeten vragen waarom hij of zij de kaarten op deze manier gesorteerd heeft en waarom er voor bepaalde labels zijn gekozen. Wanneer er een patroon ontstaat dat meerdere gebruikers dezelfde categorienaam geven dan is het handig om dit te implementeren in de sitemap voor tevreden gebruikers. Bij een gesloten card sorting test moet de deelnemer de deel categorieën sorteren aan een hoofdcategorie die al ingevuld is.

Afbeelding 7: Een hiërarchische sitemap. Bron: https://moqups.com/templates/diagrams-flowcharts/site-maps/

Wireframes inclusief annotaties

Wireframes zijn een blauwdruk van je product met de belangrijkste functionaliteiten die inzicht geven in de lay-out, content, groepering, hiërarchie & de interactie. Wireframes dienen ervoor om het concept van een product visueel en inzichtelijk te maken met de opdrachtgever. Wireframes zijn in verschillende vormen deze staan hieronder weergegeven. Ook zijn annotaties apart toegelicht.

Low Fidelity Schets: Is snelle schets van een wireframe die gemaakt wordt in minder dan 30 minuten. De functionaliteiten die weergegeven zijn de must haves die uit de MoSCoW analyse komen. Een low fidelity schets wordt vaak ingezet voor een brainstorm of een paper prototype test. De wireframe wordt vaak gemaakt met pen en papier (en soms ook op een pizzadoos?). Een low-fidelity schets wireframe wordt intern besproken met het team.

Low Fidelity Digitaal: Is een wireframe met daarin voorbeeld tekst zoals lorem ipsum. Ten opzichte van een Low Fidelity Schets is een Low Fidelity Digitaal 4x zo duur en is de interactieontwerper in het gemiddeld 2 uur aan kwijt. Het heeft een laag detailniveau en is voorzien van annotaties. Een low-fidelity digitaal wireframe wordt intern besproken met het team.

Medium Fidelity Digitaal: In een Medium Fidelity Digitaal wireframe worden de must & should haves van het product verwerkt erin. Ook staan de interacties hierin beschreven door middel van annotaties. De Medium Fidelity Digitaal kan besproken worden met de opdrachtgever.

High Fidelity Clickable: Is een wireframe die ingezet kan worden als een werkend prototype, omdat deze clickable is. De High Fidelity Clickable wireframe ziet er bijna uit als het product die er gebouwd moet worden voor de opdrachtgever zoals, de kleuren en de huisstijl. Een high Fidelity Clickable is voorzien van Must, should (& could) haves uit de voorheen uitgevoerde MoSCoW analyse. Deze is altijd digitaal gemaakt.

Annotaties: Zijn de nummering en labels die worden toegevoegd om de functionaliteiten die in de wireframe zitten toe te kunnen lichten. Hierdoor wordt de interactie van de verschillende stappen in een functionaliteit inzichtelijk.

Afbeelding 8: Een low-fidelity wireframe. Bron: https://blog.hubspot.com/website/high-fidelity-wireframe

Afbeelding 9: Een medium-fidelity wireframe. Bron: https://blog.hubspot.com/website/high-fidelity-wireframe

Afbeelding 10: Een high-fidelity wireframe. Bron: https://blog.hubspot.com/website/high-fidelity-wireframe

Style guide

Een style guide helpt bij het communiceren van het design van een website. De style guide moet voorzien van de volgende onderdelen: toon/boodschap, toegankelijkheid en de emotie. Alles moet een leesbaar document zijn zodat de ontwikkelaars en designers altijd kunnen kijken naar hoe de website er ongeveer uit moet zien. De style guide bestaat uit 5 basisbeginselen en 4 elementen deze zal ik hieronder toelichten.

Style guide – 5 basisbeginselen

1) Look & Feel: In deze stap wordt er nagedacht over welk gevoel de website moet over brengen aan de gebruiker. Denk hierbij aan welke huisstijl, branding etc. De interactieontwerper verdiept zich in wat een bepaalde kleur met de gebruiker doet.

2) Tone of Voice: Hierbij wordt er nagedacht hoe over hoe de content qua tekst weergegeven moet worden op de website. Moet de website informele content weergeven of formele content? De taalkeuze wordt afgestemd op de desbetreffende doelgroep.

3) Toegankelijkheid: De interactieontwerper moet vanuit meerdere perspectieven denken bijvoorbeeld hoe kan iemand die kleurenblind of slechtziend de website alsnog optimaal gebruiken.

4) Affordances: Bij affordances wordt er nagedacht of er al bepaalde verwachtingen zijn van een gebruiker. Bij een webwinkel is het belangrijk dat de user interface consistent is en niet veranderd vergeleken met andere webwinkels. Dit kan de gebruiker in de war brengen om verder komen op de website.

5) Auteursrecht: Een interactieontwerper mag niet een lay-out van een andere lay-out van een andere website kopiëren. Stel dat de website hetzelfde ingericht moet worden als Facebook kunnen daar nare consequenties aan vastzitten zoals een rechtszaak.

Style guide – 4 elementen

1) Kleuren: Kleuren kunnen een gevoel geven aan de bezoeker dit gevoel kun je bevestigen door een complementaire kleur te koppelen aan je basiskleur. Blauw straalt bijvoorbeeld rust of autoriteit uit. Ook kan de interactieontwerper kiezen voor een monochromatisch kleurenpallet waarbij een basiskleur bijpassende kleuren heeft die niet storend zijn voor de gebruiker.

2) Typografie: Is de lettertype en de lettergrootte. De interactieontwerper kan verschillende fonts kiezen zoals, serif fonts (ouderwets), sans serif fonts (modern) en script fonts (handgeschreven). In de style guide vermeld je welke fonts er worden gebruikt voor kopjes, tekst, subkopjes, links, headers, footers etc.

3) Compositie: Zorgt voor de leesbaarheid van de content. Items die in bepaalde groepen horen bij elkaar te staan. Zorg voor voldoende witruimte tussen de content, positionering van afbeeldingen en tekst maar ook het contrast. Wat moet de lezer aanspreken en waar ligt de nadruk op wat betreft de content.

4) Elementen: Dit zijn bijvoorbeeld knoppen, formulieren, iconen en navigaties. Door deze elementen mee te nemen in de style guide kunnen deze elementen weer hergebruikt worden om consistentie te creëren. Dit zorgt ervoor dat deze elementen herkenbaar worden voor de gebruiker.

Afbeelding 11: Een style guide. Bron: https://blog.hubspot.com/website/high-fidelity-wireframe

Activity diagram

Een activity diagram maakt de stappen die de gebruiker uitvoert en hoe het systeem hierop reageert inzichtelijk. Om een activity diagram te kunnen maken moet de interactieontwerper verschillende symbolen gebruiken. Hieronder heb ik beschreven wat de symbolen in en activity diagram precies inhouden.

Ruit (decision branch): Een ruit geeft een keuze moment aan. Denk hierbij aan een inlogsysteem wanneer de gebruiker op de verzend knop klikt moet er gecontroleerd worden in de database of de gebruiker daarin bestaat. Dit is een voorbeeld van een keuzemoment
Begin: Wordt aangegeven met een zwart ingekleurde cirkel.
Einde: Een cirkel die wit is aan de buitenkant van de cirkel en zwart van binnen. In een activity diagram is er maar 1 einde.
Swimlanes: Door swimlanes wordt het inzichtelijk welk individu of systeem een bepaalde handeling uitvoert. Een opdrachtgever kan bijvoorbeeld een geregistreerd account goedkeuren. Een gebruiker kan bijvoorbeeld een reservering maken mocht de activity-diagram om een reserveringssysteem gaan.
Actie: Wordt weergegeven als een wolkje en is een stap in het proces bijvoorbeeld een inlogformulier invullen.

Afbeelding 12: Een activity diagram. Bron: https://en.wikipedia.org/wiki/Activity_diagram#/media/File:Activity_conducting.svg

Wireflow

De wireflow is een soort van flowchart die bestaat uit een mengeling van de sitemap en wireframes (Bachelor of Graphical and Digital Media, Artevelde University College Ghent, 2019). Het laat de flow tussen verschillende pagina’s zien. Dit kan zijn wanneer op een ‘Over ons’ pagina klik wanneer de gebruiker zich op de homepage bevindt dat de gebruiker ook naar die pagina wordt doorgestuurd.

Opstellen

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

Zoals ik in de inleiding al aangaf is deze uitdaging gebaseerd op het content management systeem (CMS) die ik heb gemaakt voor de schoonheidsspecialist La Femm. La Femm biedt verschillende schoonheidsbehandelingen. Voor acne is zijn doelgroepen jongens en meisjes die zich in hun puberteit bevinden. Voor ontharing is de doelgroep mensen tussen de 18 en 35 jaar en de overige gezichtsbehandelingen zoals huidverjongingen en pigmentverwijderingen zijn gericht op mensen van 35 jaar en ouder. Dat is bedoeld voor mensen die er jonger en stralender

eruit willen zien. De doelgroepen variëren dus qua leeftijd voor verschillende schoonheidsbehandelingen.

Sitemap

Als eerst ben ik begonnen met het opstellen van de sitemap voor de schoonheidsspecialist La Femm. Hierdoor kon ik de hiërarchie van de navigatiestructuur goed in kaart kunnen brengen. Om tot het gewenste resultaat te komen had ik gebruik gemaakt van de website https://www.gloomaps.com die over een tool beschikt om op een makkelijke manier de sitemap in elkaar te zetten.

Afbeelding 13: De sitemap voor La Femm

Mocht afbeelding 13 niet duidelijk leesbaar zijn? Neem dan een kijkje op de site waar mijn sitemap ontwerp staat gepubliceerd ? https://www.gloomaps.com/KjEtdE2xow

Desktop | Low Fidelity

Afbeelding 14: Low-fidelity wireframe desktop voor de pagina Homepage 0.0

Afbeelding 15: Low-fidelity wireframe desktop voor de pagina Over Ons 1.0

Afbeelding 16: Low-fidelity wireframe desktop voor de pagina Behandeling 2.0

Afbeelding 17: Low-fidelity wireframe desktop voor de pagina Manicure 2.1.1

Afbeelding 18: Low-fidelity wireframe desktop voor de pagina Sportmassage 2.1.2

Afbeelding 19: Low-fidelity wireframe desktop voor de pagina Voetmassage 2.1.3

Afbeelding 20: Low-fidelity wireframe desktop voor de pagina Relax Aroma Therapie 2.1.4

Afbeelding 21: Low-fidelity wireframe desktop voor de pagina Media 3.0

Afbeelding 22: Low-fidelity wireframe desktop voor de pagina Contact 4.0

Afbeelding 23: Low-fidelity wireframe desktop voor de pagina Inloggen 5.0

Afbeelding 24: Low-fidelity wireframe desktop voor de pagina Registratie 6.0

Mobile | Low Fidelity

Voor de low-fidelity heb ik geen annotaties op papier geschreven simpelweg omdat er te weinig ruimte erop. Daarom zal ik de nummers onderaan elke afbeelding toelichten.

Afbeelding 25: Low-fidelity wireframe mobile voor de pagina Homepage 0.0

Annotaties toelichting bij afbeelding 25

1) Logo onclick

Als je op het logo klikt dan wordt je teruggestuurd naar de homepage.

2) Menu clickable: call-to-action > open menu

Als er op het menu wordt geklikt zal de navigatiebar zichzelf openklappen.

3) Hier komt de welkomst tekst te staan van La Femm

–

Afbeelding 26: Low-fidelity wireframe mobile voor de pagina Over Ons 1.0

Annotaties toelichting bij afbeelding 26

1) Logo onclick

Als je op het logo klikt dan wordt je teruggestuurd naar de homepage.

2) Menu clickable: call-to-action > open menu

Als er op het menu wordt geklikt zal de navigatiebar zichzelf openklappen.

3) Hier komt tekst over La Femm te staan

–

Afbeelding 27: Low-fidelity wireframe mobile voor de pagina Behandelingen 2.0

Annotaties toelichting bij afbeelding 27

1) Logo onclick

Als je op het logo klikt dan wordt je teruggestuurd naar de homepage.

2) Menu clickable: call-to-action > open menu

Als er op het menu wordt geklikt zal de navigatiebar zichzelf openklappen.

3) Hier komt een titel te staan met de tekst ‘Behandelingen’

–

4) Onclick: Hier komt een lijst te staan met links die verwijzen naar de verschillende behandelingen.

Afbeelding 28: Low-fidelity wireframe mobile voor de pagina Micro-needling 2.1.0

Annotaties toelichting bij afbeelding 28

1) Logo onclick

Als je op het logo klikt dan wordt je teruggestuurd naar de homepage.

2) Menu clickable: call-to-action > open menu

Als er op het menu wordt geklikt zal de navigatiebar zichzelf openklappen.

3) Hier komt een titel te staan met de tekst ‘Micro-needling’

–

4) Hier komt een tabel te staan met info over de behandeling en de prijs ervan.

Afbeelding 29: Low-fidelity wireframe mobile voor de pagina Manicure 2.1.1

Annotaties toelichting bij afbeelding 29

1) Logo onclick

Als je op het logo klikt dan wordt je teruggestuurd naar de homepage.

2) Menu clickable: call-to-action > open menu

Als er op het menu wordt geklikt zal de navigatiebar zichzelf openklappen.

3) Hier komt een titel te staan met de tekst ‘Manicure’

–

4) Hier komt een tabel te staan met info over de behandeling en de prijs ervan.

Afbeelding 30: Low-fidelity wireframe mobile voor de pagina Sportmassage 2.1.2

Annotaties toelichting bij afbeelding 30

1) Logo onclick

Als je op het logo klikt dan wordt je teruggestuurd naar de homepage.

2) Menu clickable: call-to-action > open menu

Als er op het menu wordt geklikt zal de navigatiebar zichzelf openklappen.

3) Hier komt een titel te staan met de tekst ‘Sportmassage’

–

4) Hier komt een tabel te staan met info over de behandeling en de prijs ervan.

Afbeelding 31: Low-fidelity wireframe mobile voor de pagina Voetmassage 2.1.3

Annotaties toelichting bij afbeelding 31

1) Logo onclick

Als je op het logo klikt dan wordt je teruggestuurd naar de homepage.

2) Menu clickable: call-to-action > open menu

Als er op het menu wordt geklikt zal de navigatiebar zichzelf openklappen.

3) Hier komt een titel te staan met de tekst ‘Voetmassage’

–

4) Hier komt een tabel te staan met info over de behandeling en de prijs ervan.

Afbeelding 32: Low-fidelity wireframe mobile voor de pagina Relax Aroma Therapie 2.1.4

Annotaties bij afbeelding 32

1) Logo onclick

Als je op het logo klikt dan wordt je teruggestuurd naar de homepage.

2) Menu clickable: call-to-action > open menu

Als er op het menu wordt geklikt zal de navigatiebar zichzelf openklappen.

3) Hier komt een titel te staan met de tekst ‘Relax Aroma Therapie’

–

4) Hier komt een tabel te staan met info over de behandeling en de prijs ervan.

Afbeelding 33: Low-fidelity wireframe mobile voor de pagina Media 3.0

Annotaties bij afbeelding 33

1) Logo onclick

Als je op het logo klikt dan wordt je teruggestuurd naar de homepage.

2) Menu clickable: call-to-action > open menu

Als er op het menu wordt geklikt zal de navigatiebar zichzelf openklappen.

3) Hier komt een titel te staan met de tekst ‘Media’

–

4) Hier komt wat tekst te staan over wanneer La Femm in de media is geweest

5) Onclick: Hier komen download linkjes te staan van media artikelen over La Femm.

6) Hier komt een YouTube video die diverse behandelingen demonstreert.

Afbeelding 34: Low-fidelity wireframe mobile voor de pagina Contact 4.0

Annotaties bij afbeelding 34

1) Logo onclick

Als je op het logo klikt dan wordt je teruggestuurd naar de homepage.

2) Menu clickable: call-to-action > open menu

Als er op het menu wordt geklikt zal de navigatiebar zichzelf openklappen.

3) Hier komt een titel te staan met de tekst ‘Contact’

–

4) Hier komt wat tekst te staan over wanneer La Femm in de media is geweest

5) Onclick: Hier komen download linkjes te staan van media artikelen over La Femm.

Afbeelding 35: Low-fidelity wireframe mobile voor de pagina Inloggen 5.0

Annotaties bij afbeelding 35

1) Logo onclick

Als je op het logo klikt dan wordt je teruggestuurd naar de homepage.

2) Menu clickable: call-to-action > open

Als er op het menu wordt geklikt zal de naviagatiebar zichzelf openklappen.

3) Hier komt een titel te staan met de tekst ‘Inloggen’

4) Formulier met input velden voor gebruikersnaam en wachtwoord.

5) Onclick: Submit knop die checkt of de gebruikersnaam en wachtwoord correct zijn.

Afbeelding 36: Low-fidelity wireframe mobile voor de pagina registratie 6.0

Annotaties bij afbeelding 36

1) Logo onclick

Als je op het logo klikt dan wordt je teruggestuurd naar de homepage.

2) Menu clickable: call-to-action > open menu

Als er op het menu wordt geklikt dan zal de naviagtiebar zichzelf openklappen.

3) Hier komt een titel te staan met de tekst ‘Registreren’

4) Formulier met input velden voor gebruikersnaam, e-mail en wachtwoord.

5) Onclick: Submit knop die checkt of de velden niet leeg zijn.

Desktop | High Fidelity

Om de High-Fidelity wireframes uit te werken ben ik uit mijn comfort zone gegaan. Ik heb mezelf Adobe XD aangeleerd om deze High-Fidelity Wireframes te kunnen maken (hier ben ik stiekem wel trots op! ?). Ook de nummering wordt weer per wireframe apart toegelicht omdat de wireframe anders te druk wordt. In de high-fidelity wireframes zijn goed afgestemd met de doelgroep. Dit heb ik ook besproken met mijn opdrachtgever, omdat er zowel jongere als oudere mensen de schoonheidsspecialiste bezoeken. We zijn uiteindelijk tot de conclusie gekomen om informeel taalgebruik in te gaan gebruiken wat betreft het prototype. De reden hiervoor is omdat de bedrijfssfeer informeel is. Op afbeelding 45 wordt er in de contact pagina boven het invoerveld ‘Je bericht’ getoond om het taalgebruik op de website informeel te houden. Nu sluit mijn ontwerp aan bij de bestemde doelgroep.

Afbeelding 37: High-fidelity wireframe desktop voor de pagina Homepage 0.0

Annotaties bij afbeelding 37

1. Onclick: Wanneer de gebruiker op het ‘logo’ klikt dan zal hij of zij teruggestuurd worden naar de home pagina.
2. Onclick: Wanneer de gebruiker klikt op de ‘home’ link dan zal hij of zij worden teruggestuurd worden naar de home pagina.
3. Onclick: Wanneer de gebruiker klikt op de ‘over ons’ link dan zal hij of zij naar de over ons pagina gestuurd worden.
4. Onclick: Wanneer de gebruiker klikt op de behandelingen link dan zal hij of zij naar de ‘behandelingen’ pagina gestuurd worden.
5. Onclick: Wanneer de gebruiker klikt op de ‘media’ link dan zal hij of zij naar de media pagina gestuurd worden.
6. Onclick: Wanneer de gebruiker klikt op de ‘contact’ link dan zal hij of zij naar de contact pagina gestuurd worden.
7. Onclick: Wanneer de gebruiker klikt op de ‘inloggen’ link dan zal hij of zij naar de inlog pagina gestuurd worden.
8. Onclick: Wanneer de gebruiker klikt op de ‘registratie’ link dan zal hij of zij naar de registratie pagina gestuurd worden.
9. Inlogformulier: Hier kan de admin direct inloggen
10. Onclick: Een knop die de admin doorstuurt naar de admin pagina als de gebruikersnaam en wachtwoord correct ingevuld zijn.

Afbeelding 38: High-fidelity wireframe desktop voor de pagina Over Ons 1.0

Annotaties bij afbeelding 38

1. Onclick: Wanneer de gebruiker op het ‘logo’ klikt dan zal hij of zij teruggestuurd worden naar de home pagina.
2. Onclick: Wanneer de gebruiker klikt op de ‘home’ link dan zal hij of zij worden teruggestuurd worden naar de home pagina.
3. Onclick: Wanneer de gebruiker klikt op de ‘over ons’ link dan zal hij of zij naar de over ons pagina gestuurd worden.
4. Onclick: Wanneer de gebruiker klikt op de behandelingen link dan zal hij of zij naar de ‘behandelingen’ pagina gestuurd worden.
5. Onclick: Wanneer de gebruiker klikt op de ‘media’ link dan zal hij of zij naar de media pagina gestuurd worden.
6. Onclick: Wanneer de gebruiker klikt op de ‘contact’ link dan zal hij of zij naar de contact pagina gestuurd worden.
7. Onclick: Wanneer de gebruiker klikt op de ‘inloggen’ link dan zal hij of zij naar de inlog pagina gestuurd worden.
8. Onclick: Wanneer de gebruiker klikt op de ‘registratie’ link dan zal hij of zij naar de registratie pagina gestuurd worden.
9. Hier komt algemene tekst te staan over La Femm.
10. Hier komt een header te staan met ‘Over Ons’.

Afbeelding 39: High-fidelity wireframe desktop voor de pagina Behandelingen 2.0

Annotaties bij afbeelding 39

1. Onclick: Wanneer de gebruiker op het ‘logo’ klikt dan zal hij of zij teruggestuurd worden naar de home pagina.
2. Onclick: Wanneer de gebruiker klikt op de ‘home’ link dan zal hij of zij worden teruggestuurd worden naar de home pagina.
3. Onclick: Wanneer de gebruiker klikt op de ‘over ons’ link dan zal hij of zij naar de over ons pagina gestuurd worden.
4. Onclick: Wanneer de gebruiker klikt op de behandelingen link dan zal hij of zij naar de ‘behandelingen’ pagina gestuurd worden.
5. Onclick: Wanneer de gebruiker klikt op de ‘media’ link dan zal hij of zij naar de media pagina gestuurd worden.
6. Onclick: Wanneer de gebruiker klikt op de ‘contact’ link dan zal hij of zij naar de contact pagina gestuurd worden.
7. Onclick: Wanneer de gebruiker klikt op de ‘inloggen’ link dan zal hij of zij naar de inlog pagina gestuurd worden.
8. Onclick: Wanneer de gebruiker klikt op de ‘registratie’ link dan zal hij of zij naar de registratie pagina gestuurd worden.
9. Hier komt een heading te staan met ‘Behandelingen’.
10. Onclick: Hier komt een list items te staan met de behandelingen manicure, sportmassage, voetmassage en relax aroma therapie. Als de gebruiker hierop klikt wordt hij doorgestuurd naar de specifieke pagina van de behandeling waarop geklikt is.
11. Inlogformulier: Hier kan de admin direct inloggen.
12. Onclick: Een knop die de admin doorstuurt naar de admin pagina als de gebruikersnaam en wachtwoord correct ingevuld zijn.

Afbeelding 40: High-fidelity wireframe desktop voor de pagina Manicure 2.1.1

Annotaties bij afbeelding 40

1. Onclick: Wanneer de gebruiker op het ‘logo’ klikt dan zal hij of zij teruggestuurd worden naar de home pagina.
2. Onclick: Wanneer de gebruiker klikt op de ‘home’ link dan zal hij of zij worden teruggestuurd worden naar de home pagina.
3. Onclick: Wanneer de gebruiker klikt op de ‘over ons’ link dan zal hij of zij naar de over ons pagina gestuurd worden.
4. Onclick: Wanneer de gebruiker klikt op de behandelingen link dan zal hij of zij naar de ‘behandelingen’ pagina gestuurd worden.
5. Onclick: Wanneer de gebruiker klikt op de ‘media’ link dan zal hij of zij naar de media pagina gestuurd worden.
6. Onclick: Wanneer de gebruiker klikt op de ‘contact’ link dan zal hij of zij naar de contact pagina gestuurd worden.
7. Onclick: Wanneer de gebruiker klikt op de ‘inloggen’ link dan zal hij of zij naar de inlog pagina gestuurd worden.
8. Onclick: Wanneer de gebruiker klikt op de ‘registratie’ link dan zal hij of zij naar de registratie pagina gestuurd worden.
9. Inlogformulier: Hier kan de admin direct inloggen.
10. Onclick: Een knop die de admin doorstuurt naar de admin pagina als de gebruikersnaam en wachtwoord correct ingevuld zijn.
11. Een heading waar ‘Manicure’ komt te staan.
12. Een tabel met informatie en de prijs van de behandeling.

Afbeelding 41: High-fidelity wireframe desktop voor de pagina Sportmassage 2.1.2

Annotaties bij afbeelding 41

1. Onclick: Wanneer de gebruiker op het ‘logo’ klikt dan zal hij of zij teruggestuurd worden naar de home pagina.
2. Onclick: Wanneer de gebruiker klikt op de ‘home’ link dan zal hij of zij worden teruggestuurd worden naar de home pagina.
3. Onclick: Wanneer de gebruiker klikt op de ‘over ons’ link dan zal hij of zij naar de over ons pagina gestuurd worden.
4. Onclick: Wanneer de gebruiker klikt op de behandelingen link dan zal hij of zij naar de ‘behandelingen’ pagina gestuurd worden.
5. Onclick: Wanneer de gebruiker klikt op de ‘media’ link dan zal hij of zij naar de media pagina gestuurd worden.
6. Onclick: Wanneer de gebruiker klikt op de ‘contact’ link dan zal hij of zij naar de contact pagina gestuurd worden.
7. Onclick: Wanneer de gebruiker klikt op de ‘inloggen’ link dan zal hij of zij naar de inlog pagina gestuurd worden.
8. Onclick: Wanneer de gebruiker klikt op de ‘registratie’ link dan zal hij of zij naar de registratie pagina gestuurd worden.
9. Inlogformulier: Hier kan de admin direct inloggen.
10. Onclick: Een knop die de admin doorstuurt naar de admin pagina als de gebruikersnaam en wachtwoord correct ingevuld zijn.
11. Een heading waar ‘Sportmassage’ komt te staan.
12. Een tabel met informatie en de prijs van de behandeling.

Afbeelding 42: High-fidelity wireframe desktop voor de pagina Voetmassage 2.1.3

Annotaties bij afbeelding 42

1. Onclick: Wanneer de gebruiker op het ‘logo’ klikt dan zal hij of zij teruggestuurd worden naar de home pagina.
2. Onclick: Wanneer de gebruiker klikt op de ‘home’ link dan zal hij of zij worden teruggestuurd worden naar de home pagina.
3. Onclick: Wanneer de gebruiker klikt op de ‘over ons’ link dan zal hij of zij naar de over ons pagina gestuurd worden.
4. Onclick: Wanneer de gebruiker klikt op de behandelingen link dan zal hij of zij naar de ‘behandelingen’ pagina gestuurd worden.
5. Onclick: Wanneer de gebruiker klikt op de ‘media’ link dan zal hij of zij naar de media pagina gestuurd worden.
6. Onclick: Wanneer de gebruiker klikt op de ‘contact’ link dan zal hij of zij naar de contact pagina gestuurd worden.
7. Onclick: Wanneer de gebruiker klikt op de ‘inloggen’ link dan zal hij of zij naar de inlog pagina gestuurd worden.
8. Onclick: Wanneer de gebruiker klikt op de ‘registratie’ link dan zal hij of zij naar de registratie pagina gestuurd worden.
9. Inlogformulier: Hier kan de admin direct inloggen.
10. Onclick: Een knop die de admin doorstuurt naar de admin pagina als de gebruikersnaam en wachtwoord correct ingevuld zijn.
11. Een heading waar ‘Voetmassage’ komt te staan.
12. Een tabel met informatie en de prijs van de behandeling.

Afbeelding 43: High-fidelity wireframe desktop voor de pagina Relax Aroma Therapie

Annotaties bij afbeelding 43

1. Onclick: Wanneer de gebruiker op het ‘logo’ klikt dan zal hij of zij teruggestuurd worden naar de home pagina.
2. Onclick: Wanneer de gebruiker klikt op de ‘home’ link dan zal hij of zij worden teruggestuurd worden naar de home pagina.
3. Onclick: Wanneer de gebruiker klikt op de ‘over ons’ link dan zal hij of zij naar de over ons pagina gestuurd worden.
4. Onclick: Wanneer de gebruiker klikt op de behandelingen link dan zal hij of zij naar de ‘behandelingen’ pagina gestuurd worden.
5. Onclick: Wanneer de gebruiker klikt op de ‘media’ link dan zal hij of zij naar de media pagina gestuurd worden.
6. Onclick: Wanneer de gebruiker klikt op de ‘contact’ link dan zal hij of zij naar de contact pagina gestuurd worden.
7. Onclick: Wanneer de gebruiker klikt op de ‘inloggen’ link dan zal hij of zij naar de inlog pagina gestuurd worden.
8. Onclick: Wanneer de gebruiker klikt op de ‘registratie’ link dan zal hij of zij naar de registratie pagina gestuurd worden.
9. Inlogformulier: Hier kan de admin direct inloggen.
10. Onclick: Een knop die de admin doorstuurt naar de admin pagina als de gebruikersnaam en wachtwoord correct ingevuld zijn.
11. Een heading waar ‘Sportmassage’ komt te staan.
12. Een tabel met informatie en de prijs van de behandeling.

Afbeelding 44: High-fidelity wireframe desktop voor de pagina Media 3.0

Annotaties bij afbeelding 44

1. Onclick: Wanneer de gebruiker op het ‘logo’ klikt dan zal hij of zij teruggestuurd worden naar de home pagina.
2. Onclick: Wanneer de gebruiker klikt op de ‘home’ link dan zal hij of zij worden teruggestuurd worden naar de home pagina.
3. Onclick: Wanneer de gebruiker klikt op de ‘over ons’ link dan zal hij of zij naar de over ons pagina gestuurd worden.
4. Onclick: Wanneer de gebruiker klikt op de behandelingen link dan zal hij of zij naar de ‘behandelingen’ pagina gestuurd worden.
5. Onclick: Wanneer de gebruiker klikt op de ‘media’ link dan zal hij of zij naar de media pagina gestuurd worden.
6. Onclick: Wanneer de gebruiker klikt op de ‘contact’ link dan zal hij of zij naar de contact pagina gestuurd worden.
7. Onclick: Wanneer de gebruiker klikt op de ‘inloggen’ link dan zal hij of zij naar de inlog pagina gestuurd worden.
8. Onclick: Wanneer de gebruiker klikt op de ‘registratie’ link dan zal hij of zij naar de registratie pagina gestuurd worden.
9. Inlogformulier: Hier kan de admin direct inloggen.
10. Onclick: Een knop die de admin doorstuurt naar de admin pagina als de gebruikersnaam en wachtwoord correct ingevuld zijn.
11. Een heading waar ‘Media’ komt te staan.
12. Een rij met linkjes die de gebruiker doorsturen naar media artikelen waarin La Femm betrokken was.

Afbeelding 45: High-fidelity wireframe desktop voor de pagina Contact 4.0

Annotaties bij afbeelding 45

1. Onclick: Wanneer de gebruiker op het ‘logo’ klikt dan zal hij of zij teruggestuurd worden naar de home pagina.
2. Onclick: Wanneer de gebruiker klikt op de ‘home’ link dan zal hij of zij worden teruggestuurd worden naar de home pagina.
3. Onclick: Wanneer de gebruiker klikt op de ‘over ons’ link dan zal hij of zij naar de over ons pagina gestuurd worden.
4. Onclick: Wanneer de gebruiker klikt op de behandelingen link dan zal hij of zij naar de ‘behandelingen’ pagina gestuurd worden.
5. Onclick: Wanneer de gebruiker klikt op de ‘media’ link dan zal hij of zij naar de media pagina gestuurd worden.
6. Onclick: Wanneer de gebruiker klikt op de ‘contact’ link dan zal hij of zij naar de contact pagina gestuurd worden.
7. Onclick: Wanneer de gebruiker klikt op de ‘inloggen’ link dan zal hij of zij naar de inlog pagina gestuurd worden.
8. Onclick: Wanneer de gebruiker klikt op de ‘registratie’ link dan zal hij of zij naar de registratie pagina gestuurd worden.
9. Een heading waar ‘Contact’ komt te staan.
10. Een formulier met 4 velden o.a. naam, e-mail, onderwerp, je bericht.
11. Onclick: Hiermee wordt het bericht van de gebruiker verstuurt naar het e-mailadres van de admin.

Afbeelding 46: High-fidelity wireframe desktop voor de pagina Inloggen 5.0

Annotaties bij afbeelding 46

1. Onclick: Wanneer de gebruiker op het ‘logo’ klikt dan zal hij of zij teruggestuurd worden naar de home pagina.
2. Onclick: Wanneer de gebruiker klikt op de ‘home’ link dan zal hij of zij worden teruggestuurd worden naar de home pagina.
3. Onclick: Wanneer de gebruiker klikt op de ‘over ons’ link dan zal hij of zij naar de over ons pagina gestuurd worden.
4. Onclick: Wanneer de gebruiker klikt op de behandelingen link dan zal hij of zij naar de ‘behandelingen’ pagina gestuurd worden.
5. Onclick: Wanneer de gebruiker klikt op de ‘media’ link dan zal hij of zij naar de media pagina gestuurd worden.
6. Onclick: Wanneer de gebruiker klikt op de ‘contact’ link dan zal hij of zij naar de contact pagina gestuurd worden.
7. Onclick: Wanneer de gebruiker klikt op de ‘inloggen’ link dan zal hij of zij naar de inlog pagina gestuurd worden.
8. Onclick: Wanneer de gebruiker klikt op de ‘registratie’ link dan zal hij of zij naar de registratie pagina gestuurd worden.
9. Een formulier met 2 velden (gebruikersnaam en wachtwoord).
10. Onclick: Hier kan de admin direct inloggen.

Afbeelding 47: High-fidelity wireframe desktop voor de pagina Registratie 6.0

Annotaties bij afbeelding 47

1. Onclick: Wanneer de gebruiker op het ‘logo’ klikt dan zal hij of zij teruggestuurd worden naar de home pagina.
2. Onclick: Wanneer de gebruiker klikt op de ‘home’ link dan zal hij of zij worden teruggestuurd worden naar de home pagina.
3. Onclick: Wanneer de gebruiker klikt op de ‘over ons’ link dan zal hij of zij naar de over ons pagina gestuurd worden.
4. Onclick: Wanneer de gebruiker klikt op de behandelingen link dan zal hij of zij naar de ‘behandelingen’ pagina gestuurd worden.
5. Onclick: Wanneer de gebruiker klikt op de ‘media’ link dan zal hij of zij naar de media pagina gestuurd worden.
6. Onclick: Wanneer de gebruiker klikt op de ‘contact’ link dan zal hij of zij naar de contact pagina gestuurd worden.
7. Onclick: Wanneer de gebruiker klikt op de ‘inloggen’ link dan zal hij of zij naar de inlog pagina gestuurd worden.
8. Onclick: Wanneer de gebruiker klikt op de ‘registratie’ link dan zal hij of zij naar de registratie pagina gestuurd worden.
9. Een formulier met 2 velden (gebruikersnaam en e-mailadres).
10. Onclick: Hier kan een gebruiker zich registreren als admin indien er toestemming wordt gegeven aan de admin.

Mobile | High Fidelity

Annotaties bij afbeelding 48a

1. Onclick: Wanneer de gebruiker op het ‘logo’ klikt dan zal hij of zij teruggestuurd worden naar de home pagina.
2. Onclick: Wanneer de gebruiker op dit blok klikt wordt de navigatiestructuur van de mobiele website open geklapt (zie afbeelding 48b).
3. Een heading met als tekst ‘Welkom bij La Femm!’
4. Hier komt wat welkomst tekst te staan van La Femm.

Afbeelding 48b: De uitgeklapte navigatiestructuur.

Annotaties bij afbeelding 48b

1. Onclick: Wanneer de gebruiker op het ‘logo’ klikt dan zal hij of zij teruggestuurd worden naar de home pagina.
2. Onclick: Wanneer de gebruiker op dit blok klikt wordt de navigatiestructuur van de mobiele website dicht geklapt (zie afbeelding 48a).
3. Onclick: Wanneer er een individueel item wordt geklikt zal de gebruiker naar de desbetreffende pagina gestuurd worden.

Afbeelding 49: High-fidelity wireframe mobile voor de pagina Over Ons 1.0

Annotaties bij afbeelding 49

1. Onclick: Wanneer de gebruiker op het ‘logo’ klikt dan zal hij of zij teruggestuurd worden naar de home pagina.
2. Onclick: Wanneer de gebruiker op dit blok klikt wordt de navigatiestructuur van de mobiele website open geklapt (zie afbeelding 48b).
3. Een heading met als tekst ‘Over Ons’
4. Hier komt wat tekst te staan Over La Femm.

Afbeelding 50: High-fidelity wireframe mobile voor de pagina Behandelingen 2.0

Annotaties bij afbeelding 50

1. Onclick: Wanneer de gebruiker op het ‘logo’ klikt dan zal hij of zij teruggestuurd worden naar de home pagina.
2. Onclick: Wanneer de gebruiker op dit blok klikt wordt de navigatiestructuur van de mobiele website open geklapt (zie afbeelding 48b).
3. Een heading met als tekst ‘Behandelingen’
4. Onclick: Wanneer er een individueel item wordt geklikt zal de gebruiker naar de desbetreffende pagina gestuurd worden van een specifieke behandeling.

Afbeelding 51: High-fidelity wireframe mobile voor de pagina Manicure 2.1.1

Annotaties bij afbeelding 51

1. Onclick: Wanneer de gebruiker op het ‘logo’ klikt dan zal hij of zij teruggestuurd worden naar de home pagina.
2. Onclick: Wanneer de gebruiker op dit blok klikt wordt de navigatiestructuur van de mobiele website open geklapt (zie afbeelding 48b).
3. Een heading met als tekst ‘Manicure’
4. Een tabel waarin informatie staat over de behandeling en wat het kost.

Afbeelding 52: High-fidelity wireframe mobile voor de pagina Sportmassage 2.1.2

Annotaties bij afbeelding 52

1. Onclick: Wanneer de gebruiker op het ‘logo’ klikt dan zal hij of zij teruggestuurd worden naar de home pagina.
2. Onclick: Wanneer de gebruiker op dit blok klikt wordt de navigatiestructuur van de mobiele website open geklapt (zie afbeelding 48b).
3. Een heading met als tekst ‘Sportmassage’
4. Een tabel waarin informatie staat over de behandeling en wat het kost.

Afbeelding 53: High-fidelity wireframe mobile voor de pagina Voetmassage 2.1.3

Annotaties bij afbeelding 53

1. Onclick: Wanneer de gebruiker op het ‘logo’ klikt dan zal hij of zij teruggestuurd worden naar de home pagina.
2. Onclick: Wanneer de gebruiker op dit blok klikt wordt de navigatiestructuur van de mobiele website open geklapt (zie afbeelding 48b).
3. Een heading met als tekst ‘Voetmassage’
4. Een tabel waarin informatie staat over de behandeling en wat het kost.

Afbeelding 54: High-fidelity wireframe mobile voor de pagina Relax Aroma Therapie 2.1.4

Annotaties bij afbeelding 54

1. Onclick: Wanneer de gebruiker op het ‘logo’ klikt dan zal hij of zij teruggestuurd worden naar de home pagina.
2. Onclick: Wanneer de gebruiker op dit blok klikt wordt de navigatiestructuur van de mobiele website open geklapt (zie afbeelding 48b).
3. Een heading met als tekst ‘Relax Aroma Therapie’
4. Een tabel waarin informatie staat over de behandeling en wat het kost.

Afbeelding 55: High-fidelity wireframe mobile voor de pagina Media 3.0

Annotaties bij afbeelding 55

1. Onclick: Wanneer de gebruiker op het ‘logo’ klikt dan zal hij of zij teruggestuurd worden naar de home pagina.
2. Onclick: Wanneer de gebruiker op dit blok klikt wordt de navigatiestructuur van de mobiele website open geklapt (zie afbeelding 48b).
3. Een heading met als tekst ‘Media’
4. Onclick: Linkjes die verwijzen naar media artikelen die zijn gepubliceerd over La Femm.

Afbeelding 56: High-fidelity wireframe mobile voor de pagina Contact 4.0

Annotaties bij afbeelding 56

1. Onclick: Wanneer de gebruiker op het ‘logo’ klikt dan zal hij of zij teruggestuurd worden naar de home pagina.
2. Onclick: Wanneer de gebruiker op dit blok klikt wordt de navigatiestructuur van de mobiele website open geklapt (zie afbeelding 48b).
3. Een heading met als tekst ‘Contact’
4. Invoervelden waarin de naam, e-mail, onderwerp en bericht ingevoerd moeten worden.
5. Onclick: Als de velden ingevuld zijn dan wordt dit bericht verstuurd naar de admin.

Afbeelding 57: High-fidelity wireframe mobile voor de pagina Inloggen 5.0

Annotaties bij afbeelding 57

1. Onclick: Wanneer de gebruiker op het ‘logo’ klikt dan zal hij of zij teruggestuurd worden naar de home pagina.
2. Onclick: Wanneer de gebruiker op dit blok klikt wordt de navigatiestructuur van de mobiele website open geklapt (zie afbeelding 48b).
3. Een heading met als tekst ‘Inloggen’.
4. Invoervelden waarin de gebruikersnaam en wachtwoord ingevoerd moeten worden.
5. Onclick: Als de velden ingevuld zijn dan wordt dit er gecontroleerd of de gebruikersnaam en wachtwoord juist zijn. Zo, ja? Dan wordt de admin doorgestuurd naar het admin panel.

Afbeelding 58: High-fidelity wireframe mobile voor de pagina Registratie 6.0

Annotaties bij afbeelding 58

1. Onclick: Wanneer de gebruiker op het ‘logo’ klikt dan zal hij of zij teruggestuurd worden naar de home pagina.
2. Onclick: Wanneer de gebruiker op dit blok klikt wordt de navigatiestructuur van de mobiele website open geklapt (zie afbeelding 48b).
3. Een heading met als tekst ‘Registratie’.
4. Invoervelden waarin de gebruikersnaam, e-mailadres en wachtwoord ingevoerd moeten worden.
5. Onclick: Als de velden ingevuld zijn dan wordt de gebruiker geregistreerd, maar eerst dient hij of zij toestemming te krijgen van de admin. Dan pas heeft de gebruiker admin rechten.

Uitvoeren

Je hebt het interactieontwerp van begin tot eind uitgevoerd (en indien nodig aangescherpt), zodanig dat je kan laten zien dat je het vanuit meerdere iteraties hebt omgezet in een werkend prototype.

Het interactieontwerp heb ik vanaf het begin tot het einde uitgevoerd. Hiervoor heb ik gebruik gemaakt van verschillende methodieken zoals een sitemap maken, low-fidelity wireframes schetsen en deze omzetten naar high-fidelity wireframes. Van de wireframes zijn er dus meerdere iteraties, omdat er op de low-fidelity versie van de pagina ‘Media’ een YouTube video was geschetst. Mijn opdrachtgever Muhterem wilde de video’s gescheiden houden van de website. Om die reden had ik de video uit het ontwerp gehaald in de high-fidelity versie ervan. Ook vond ze dat het inlogformulier niet op elke pagina moet staan, omdat het alleen bestemd is voor personeel met admin rechten. Dit is dan ook weggehaald zoals u kunt zien afbeelding 59 die hieronder staat weergegeven.

Afbeelding 59: Het inlogformulier op de onderdelen ‘Home, behandelingen, media en contact’ waren overbodig omdat bezoekers niet hoeven in te loggen in het systeem.

Mijn werkende prototypes heb ik ook gemaakt in Adobe XD en deze had ik gedemonstreerd in de onderstaande video’s, zowel voor de desktop als de mobile versie.

Prototype | Desktophttps://www.youtube.com/embed/wUWLtDM2eWE?showinfo=0

Prototype | Mobilehttps://www.youtube.com/embed/EC7pCS3Hu7I?showinfo=0

Referenties

Bachelor of Graphical and Digital Media, Artevelde University College Ghent. (2019, 8 april). New Media Design II. gdm.gent. https://1819.gdm.gent/nmd2/workflow/design/wireflow/

Van Vlerken, T. (2016, 6 april). Een goede basis voor gelukkige gebruikers: zo schrijf je een user story.

https://www.frankwatching.com/archive/2016/04/06/een-goede-basis-voor-gelukkige-gebruikerszo-schrijf-je-een-user-story/.