Omschrijving – Een beschrijving kan in veel gevallen handig zijn om bepaalde zaken toe te lichten zoals de kleur of maat van een artikel Ook kan een

beschrijving erg handig zijn in gevallen waar geen afbeelding bij het product geplaatst kan worden.

Naast deze keuzes zijn er nog een hoop andere beslissingen gemaakt die gebaseerd zijn op bevindingen die ik eerder in dit proces heb gedaan. Met name de systeemeisen en gebruikers behoeften vormen een sterke basis voor de wireframes. Hieronder zal ik een paar van de wireframes verder bespreken.

Hierboven is de landingspagina van de website te zien. De focus van deze pagina ligt op het aansporen van gebruikers om zich aan te melden voor een account. Daarbij zal de gebruiker een korte uitleg krijgen waarom deze website het leven van de bezoeker een stukje gemakkelijker zal gaan maken. Het allereerste wat de gebruiker op deze pagina zal zien is bovenaan het logo en de naam van de website. Dit wordt hier duidelijk in zicht geplaatst om de gebruiker bekend te maken met het ‘merk’. Onder de naam van de website staat een zin die de website in één zin omschrijft. De gebruiker heeft door deze combinatie van logo, naam en punchline meteen een duidelijk beeld van wat hij of zij van de website kan verwachten.

Onder deze gegevens staat meteen een link in de vorm van een button naar de pagina waar de gebruiker zich kan registreren. Gebruikers kunnen de website alleen gebruiken als ze geregistreerd zijn en mede daarom is een zetje in de richting van het registratieformulier zeker nodig. Deze knop voor het registreren zal meteen in het oog moeten springen bij de bezoeker.

De focus hier ligt op het registreren/inloggen met behulp van Facebook. Facebook Connect helpt gebruikers om gemakkelijk en snel in te loggen. Aangezien de primaire doelgroep extreem goed is vertegenwoordigd op dit

platform is deze manier van inloggen voor een groot gedeelte de meest prettige manier. Omdat deze manier van inloggen mensen zonder Facebook uitsluit wordt er als alternatief het registreren met behulp van e- mail aangeboden.

Het grootste gedeelte van de pagina geeft een visuele presentatie van het gedeelte van de website dat alleen door middel van inloggen bekeken kan worden. In drie afbeeldingen moet het voor de bezoeker duidelijk zijn dat dit een website is die op al zijn of haar apparaten werkt en dat dit een website is waarmee hij of zij verlanglijstjes kan maken en delen.

Tot slot is er onderaan de pagina een extra stukje ingeruimd met nog meer informatie over de website. Dit gedeelte heeft als doel om de bezoekers die nog niet overtuigd zijn door de paar afbeeldingen van verdere informatie te zien. Ook op dit gedeelte van de pagina is een duidelijke knop aanwezig die de

bezoeker naar het

registratiescherm brengt.

Op een klein scherm worden dezelfde elementen weergegeven alleen in een iets ander formaat. Hiernaast is daar een voorbeeld van te zien.

Als de gebruiker de boodschap zoals te zien is bij afbeelding 4 heeft gelezen en kiest voor het ‘starten met verzamelen’, dan komt de gebruiker op de hierboven afgebeelde pagina terecht. De afbeelding hierboven toont een pagina waar al producten zijn toegevoegd.

Als we van boven naar beneden door de pagina heenlopen komen we de volgende elementen tegen:

1. Een knop die de gebruiker naar de ‘browse’ pagina brengt. Op de browse pagina kan de gebruiker door een groot aantal producten heen bladeren om zo op zoek te gaan naar ideeën voor zijn of haar eigen lijstje.

2. Een knop die een scherm opent waar de gebruiker gegevens voor een nieuw product voor op het lijstje kan toevoegen.

3. Als de gebruiker via Facebook is aangemeld komt hier een klein fotootje van de gebruiker met daarachter zijn of haar naam te staan. Deze knop fungeert tevens als dropdown menu met de opties:

 Browse – Brengt de gebruiker naar de browse pagina.

 Bookmarklet – Brengt de gebruiker naar een pagina waar de bookmarklet is te vinden.

 Instellingen – Brengt de gebruiker naar de pagina waar de instellingen kunnen worden aangepast.

 Uitloggen – Logt de gebruiker uit en brengt hem of haar de homepagina

4. Een melding waar meer wordt uitgelegd over de bookmarklet en een knop te zien is die de gebruiker naar de pagina brengt waar deze geïnstalleerd kan worden.

5. De knoppen die gebruikt kunnen worden om anderen voor het lijstje uit te nodigen.

6. Links naar de lijstjes waar de gebruiker voor is uitgenodigd. In eerste instantie zijn het alleen fotootjes, maar als de gebruiker er met de muis overheen gaat is de naam van de persoon te zien.

7. Als een gebruiker met de muis over een product van zijn of haar lijstje beweegt wordt er een knop zichtbaar die het wijzigen of verwijderen van het product mogelijk maakt. Als de gebruiker op de afbeelding of de link klikt wordt de gebruiker naar de website waar het product te koop is gebracht. Op een klein scherm ziet de pagina er iets anders uit dan op een groter scherm.

1. Zo wordt het menu automatisch ingeklapt. Door op het icoontje te klikken wordt deze weer uitgeklapt en zichtbaar voor de gebruiker. 2. Bovenaan de pagina staat informatie

over de gebruiker. In eerste instantie is alleen de naam van de eigenaar van het lijstje te zien, maar verdere informatie kan getoond worden door op het pijltje naar beneden te klikken.

3. Bovenaan het verlanglijstje staat een knop om een nieuw product toe te voegen aan de lijst met wensen. Verder werkt het toonbaar maken van de knop voor het wijzigen van een product iets anders op een touchscreen. Op een computer met een muis kan de gebruiker met de muis over het product heen gaan om dit tevoorschijn te laten komen, maar op een touchscreen moet de gebruiker eerst op het product ‘klikken’.

Voor pagina’s waar het niet vanzelfsprekend is hoe het er uit komt te zien op een klein scherm heb ik twee varianten gemaakt. Voor andere pagina’s heb ik alleen de grote variant getoond.

7.2. Het interactieontwerp testen

De eerste testcyclus van dit project is het testen van het interactieontwerp. Hiervoor is een testplan opgesteld en zijn een aantal testpersonen geselecteerd.

Dit testplan had als doel om de sterke en met name de zwakke punten van het interactie ontwerp boven water te krijgen. In een vroeg stadium van de ontwikkeling van het project is het nog mogelijk om cruciale fouten met betrekking tot de bruikbaarheid van het project aan te passen. Om mogelijke fouten zelfs nog voor de bouw van het product te kunnen verbeteren is er gekozen voor het zogenaamde paper prototyping.

Het testplan bestaat uit drie delen: een overzicht van de onderzoeksvragen en beschrijving van de testmethode, een uitwerking van de testtaken en tot slot een overzicht van de verkregen resultaten. Het overzicht van de onderzoeksvragen bevat een onderverdeling in deelvragen en meetvragen. Deze meetvragen zijn geoperationaliseerd weergegeven in een schema. Vervolgens is beschreven hoe en met wie de test uitgevoerd zal worden. De tweede stap bestaat uit het beschrijven van de testtaken die de testpersonen hebben moeten uitvoeren. Deze taken zijn naar aanleiding van de meetvragen uit de operationalisatie opgesteld. Bij iedere taak is beschreven wat de verschillende mogelijke scenario’s zijn. Het slot van de testcyclus bestaat uiteraard uit het trekken van conclusies naar aanleiding van de resultaten.

7.2.1. Het opzetten van het testplan

De eerste stap in de testcyclus is het kiezen van een methode om mee te testen. De keuze is daarbij op ‘paper protoyping’ gevallen, simpelweg omdat er alleen nog papieren schetsen van het product zijn en een volledige versie testen destijds nog niet mogelijk was.

Paper prototyping is een soort gebruikerstest waarbij representatieve gebruikers aan de slag gaan met het uitvoeren van een aantal realistische taken. Deze taken voeren ze uit op een papieren versie van het uiteindelijke ontwerp, waarbij de werking van het systeem wordt nagespeeld.

Om dit naspelen zo goed mogelijk werkelijkheid te kunnen laten worden werd er in dit geval niet getest op papier, maar op de computer. Het systeem waarmee getest werd bestond uit een serie ontwerpen die aan elkaar waren gelinkt.

De gebruiker werd tijdens het testen opgedragen om een aantal taken uit te voeren. Bij het uitvoeren van deze taken konden tussendoor vragen worden gesteld om verduidelijking te krijgen. Vooraf aan het testen werden ook een aantal vragen gesteld om een aantal wensen van de testpersonen duidelijk te krijgen. Deze vragen vormden samen een kort interview.

Er werd gekozen om met 10 testpersonen aan de slag te gaan en dus 10 verschillende testen af te leggen. Er werd voor dit aantal gekozen omdat hiermee een goede balans tussen geïnvesteerde tijd en betrouwbaarheid van de testresultaten kon worden bereikt.

Wat kan er aan het interactieontwerp