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.
.
Sijmen Vos
Tap affordance Digital image. Flickr.com. N.p., n.d. Web. 3 Dec. 2013.
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. . 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. .
Sijmen Vos
Detail wireframe
Disabled button Enabled vs disabled. Digital image. Stackexchange.com. N.p., n.d. Web. 26 Jan. 2014. .
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. .
Sijmen Vos
Autocomplete autocomplete. Digital image. Ui-patterns. N.p., n.d. Web. 16 feb. 2014. .
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
