Milledoni.nl op mobiel

MILLEDONI.NL OP MOBIEL
Door: Sijmen Vos, 500661784, klas v1-05
Docent: Koop Reynders
Datum: 17 februari 2014
Inhoud
Inleiding ......................................................................................................................................................................................... 1
Mentale model bij vraag 1 (behavioural) ......................................................................................................................... 2
Mentale model bij vraag 2 (behavioural) ......................................................................................................................... 3
Mentale model bij vraag 3 (structural) .............................................................................................................................. 4
Mentale model bij vraag 4 (behavioural) ......................................................................................................................... 5
Mentale model bij vraag 5 (structural) .............................................................................................................................. 6
Mentale model bij vraag 6 (behavioural) ......................................................................................................................... 7
Flowchart ...................................................................................................................................................................................... 8
Inleiding
In dit document geef ik mijn aanbevelingen voor de verbetering van de mobiele website van
Milledoni.nl. De huidige mobiele website is een responsive variant van de desktop versie, en deze is
niet geoptimaliseerd voor mobiel gebruik. Door middel van het mentale model van de gebruiker te
analyseren, heb ik aanpassingen gezocht aan de hand van bestaande patterns. In dit document is
alleen gekeken naar oplossingen voor het vinden van een passend cadeau. Alleen de vragen waarbij
problemen op treden heb ik uitgewerkt en oplossingen voor gezocht. Op de volgende pagina’s
beschrijf ik eerst het mentale model van de gebruiker, daarna geef ik aan wat het probleem is en geef
ik twee mogelijke patterns die het probleem oplossen. Op de rechterhelft van de pagina geef ik twee
LO-FI schetsen van het beste pattern en vervolgens heb ik hier nog een detailschets van gemaakt. Na
alle problemen volgt een flowchart van hoe de website werkt, en vervolgens de wireflow.
Wireflow ........................................................................................................................................................................................ 9
Milledoni.nl
Huidige mobiele website, eigen afbeelding.
Sijmen Vos
Milledoni.nl op mobiel
17-2-2014
1
Mentale model bij vraag 1 (behavioural)
Schetsen toepassing oplossing
Q: “Wat zijn de donkere rechthoeken in het bovenste blok, en wat kun je ermee?”
A: Ik moet daar waarschijnlijk wat invullen, maar ik weet niet precies wat.
Probleem
Het is voor de gebruiker niet duidelijk wat er in de invoervelden ingevuld kan worden zonder er op te
klikken. Het is ook niet helder dat het invoervelden zijn.
Oplossing
Een goede oplossing is hier affordance. Door het invoerveld een beetje schaduw te geven is het
meteen zichtbaar dat er iets ingevuld kan worden. De meeste gebruikers begrijpen dan wel dat er op
geklikt moet worden. Door gebruik te maken van input prompt kan ook suggestie voor input
weergegeven worden.
De beste oplossing is hier om gebruik te maken van affordance en overal een dropdown tekentje
weer te geven dat suggereert dat er gekozen kan worden uit een aantal opties. Ook bij leeftijd is het
handig om een dropdown menu te gebruiken, omdat er nu geen gebruik gemaakt wordt van forgiving
format.
Detail wireframe
Input prompt
Input prompt. Digital image. Ui-patterns.
N.p., n.d. Web. 26 Jan. 2014. <http://uipatterns.com/image/13/0/0/540>.
Sijmen Vos
Tap affordance Digital image. Flickr.com.
N.p., n.d. Web. 3 Dec. 2013.
<http://farm7.static.flickr.com/6055/627
5545416_cb7ea882f7.jpg>
Milledoni.nl op mobiel
17-2-2014
2
Mentale model bij vraag 2 (behavioural)
Schetsen toepassing oplossing
Q: “Wat moet je doen als je alles hebt ingevuld in het bovenste vierkant?”
A: Ik zie beneden in het scherm nog een kader waar ik waarschijnlijk nog wat in moet vullen.
Probleem
Het is voor de gebruiker niet duidelijk wat hij of zij moet doen als hij klaar is met invullen van het
bovenste blok. Na het invullen van een veld verschijnt er wel een “Bekijk de resultaten” knop, maar de
gebruiker gaat zonder wat in te vullen van uit dat hij nog meer moet doen in het blok er onder. Het is
niet duidelijk dat het hier gaat om geavanceerd zoeken.
Oplossing
Een oplossing kan hier zijn om gebruik te maken van uitklapbare opties (accordion menu). Dan
zou het tweede en derde blok als uitkapbare optie onderaan het bovenste blok. Ook kan door middel
van paging aangegeven worden dat er meerdere velden zijn die ingevuld kunnen worden. Echter is
het dan nog een probleem dat de gebruiker niet weet dat dit niet verplicht is. Door live zoek
resultaten weer te geven onder de formulieren (die horizontaal naast elkaar staan) ziet de gebruiker
zodra hij iets invult dat er resultaten zijn (zie ook oplossing bij probleem 3).
Het beste is hier om gebruik te maken van paging, waardoor duidelijk wordt dat er meer ingevuld
kan worden. Door dit te combineren met duidelijke weergave van zoekresultaten is dit sterk.
Detail wireframe
Uitklapbare opties/Accordion menu
Accordion menu. Digital image. Ui-Patterns.
N.p., n.d. Web. 26 Jan. 2014. <http://uipatterns.com/static/imgcache/231_0_0_22
5.jpg>.
Sijmen Vos
Paging
pagination. Digital image. Smashing
Magazine. N.p., n.d. Web. 15 feb. 2014. <
http://media.smashingmagazine.com/wpcontent/uploads/2013/01/paginationclose-up.png>.
Milledoni.nl op mobiel
17-2-2014
3
Mentale model bij vraag 3 (structural)
Schetsen toepassing oplossing
Q: “Waar verwacht je de zoekresultaten te zien”
A: Op een nieuwe pagina die opent.
Probleem
Het is niet duidelijk aangegeven dat de resultaten onder het formulier getoond worden. Dit is jammer,
want deze resultaten worden live geüpdatet als er een veld gewijzigd wordt.
Oplossing
Een live filter die meteen aangeeft hoeveel resultaten er zijn gevonden is een oplossing. Een tweede
mogelijkheid is om de resultaten knop onderaan de pagina weer te geven (onder het bovenste blok)
en deze disabled weer te geven. Wanneer er dan een veld is ingevuld wordt deze knop actief en kan
er op geklikt worden. De geavanceerde opties worden dan anders weergegeven (zie mentale model
bij vraag 4).
De beste oplossing is hier een combinatie van alle twee de patterns. Zo kan er onder aan het scherm
een knop staan met bijvoorbeeld “ 30 resultaten” en wanneer de gebruiker er op klikt, gaat hij naar
de resultaten. Door de animatie die er nu al in zit, krijgt de gebruiker ook een hint dat hij naar onder
kan scrollen. Met een pijltje omhoog (back to top button, zie ook vraag 5) kunnen de zoek criteria
gewijzigd worden.
Live Filter
Live Filter. Digital image. Ui-Patterns. N.p.,
n.d. Web. 26 Jan. 2014. <http://uipatterns.com/static/imgcache/32_0_0_498.
jpg>.
Sijmen Vos
Detail wireframe
Disabled button
Enabled vs disabled. Digital image.
Stackexchange.com. N.p., n.d. Web. 26 Jan.
2014.
<http://i.stack.imgur.com/d4rh0.png>.
Milledoni.nl op mobiel
17-2-2014
4
Mentale model bij vraag 4 (behavioural)
Q: “Wat denk je dat er gebeurt als je op een + klikt in het
A: Ik kan dan iets toevoegen.
Schetsen toepassing oplossing
2e
blok?”
Probleem
De gebruiker snapt dat een plus tekentje betekent dat er iets toegevoegd kan worden, maar weet niet
precies wat. Hij moet dan eerst op het plus tekentje klikken om te kijken wat voor opties er mogelijk
zijn, terwijl deze misschien niet van toepassing zijn.
Oplossing
Door Input prompt / input hints toe te passen zou er in de velden al een lichtgrijze tekst kunnen
staan die een hint geeft over de tags die toegevoegd kunnen worden. Zo kunnen er al enkele tags als
voorbeeld staan waardoor het duidelijk wordt wat voor dingen er ingevuld kunnen worden. Een
andere oplossing is om de velden vrije invoer te geven, dus de plusjes weg te halen en door middel
van auto complete de bestaande tags te tonen.
Hier is zijn de input hints/prompt de beste oplossing, het is een kleine aanpassing maar het helpt de
gebruiker te begrijpen wat er ingevuld kan worden.
Detail wireframe
Input prompt / input hints
Input prompt. Digital image. Ui-patterns.
N.p., n.d. Web. 26 Jan. 2014. <http://uipatterns.com/image/13/0/0/540>.
Sijmen Vos
Autocomplete
autocomplete. Digital image. Ui-patterns.
N.p., n.d. Web. 16 feb. 2014. <http://uipatterns.com/image/1613/0/0/540>.
Milledoni.nl op mobiel
17-2-2014
5
Mentale model bij vraag 5 (structural)
Schetsen toepassing oplossing
Q: “Hoe kan je opnieuw beginnen of keuzes wijzigen als je beneden bent en er zit geen leuk cadeau
tussen?”
A: Ik herlaad de pagina(?).
Probleem
Als de gebruiker na het invullen al meer naar beneden is gegaan op de pagina, moet hij weer helemaal
terug omhoog scrollen om velden te veranderen. De gebruiker kan niet even snel terug naar de
ingevoerde waardes.
Oplossing
Een eerste oplossing is om een back to top knop weer te geven wanneer de gebruiker de
zoekresultaten aan het bekijken is. Een andere mogelijkheid is om een zoek icoon weer te geven
boven in de header, dan weet de gebruiker waar hij op moet klikken om terug naar zijn zoek invoer te
gaan.
Back to top is hier de mooiste en ook de betere oplossing. Als er ook tekst bij staat zoals “terug naar
zoeken”, dan weet de gebruiker dat hij zijn invoer kan veranderen.
Detail wireframe
Back to top
Eigen afbeelding.
Sijmen Vos
Zoek icoon
Search icon. Digital image.
endlessicons.com. N.p., n.d. Web. 15 feb.
2014. < http://www.endlessicons.com/wpcontent/uploads/2012/12/search-icon614x460.png >.
Milledoni.nl op mobiel
17-2-2014
6
Schetsen toepassing oplossing
Mentale model bij vraag 6 (behavioural)
Q: “Wat denk je dat je op deze pagina kunt doen?”
A: Een cadeau zoeken voor iemand.
Probleem
Dat je op de website een cadeau kunt zoeken, is duidelijk. Echter is het niet duidelijk dat er ook een
community van cadeauspotters is.
Oplossing
Door een korte, maar krachtige ondertitel (subtitle) toe te voegen zoals “Zoek of spot cadeaus!”,
krijgt de gebruiker al een beter indruk wat er mogelijk is op de website. Een andere mogelijkheid kan
zijn om een splash screen weer te geven voordat de website laadt. Hier kan dan informatie op staan
over wat er op de website te doen is.
Een ondertitel toevoegen geeft hier een mooi en goed resultaat. Een splash screen is leuk, maar
wordt vooral gebruikt voor native apps en niet zozeer voor websites. Vandaar deze keuze.
Detail wireframe
Subtitle
Eigen afbeelding.
Splash screen
Splash screen. Digital image. Mobilepatterns.com. N.p., n.d. Web. 15 feb. 2014. <
http://img0.mobilepatterns.com/img/320/13623674719002013-03-03%2021.31.42.png>.
Sijmen Vos
Milledoni.nl op mobiel
17-2-2014
7
Flowchart
Sijmen Vos
Milledoni.nl op mobiel
17-2-2014
8
Wireflow
Of swipe van
links naar rechts
1.0 Basis criteria
Of swipe van
boven naar
beneden
Of swipe van
links naar rechts
2.0 Persoonlijkheden
3.0 Soort cadeau
4.0 zoekresultaten
2.1
1.2.1
1.2.2
1.1
2.2
1.0 Basis criteria
Sijmen Vos
2.0 Persoonlijkheden
Milledoni.nl op mobiel
17-2-2014
9

Download Report