Rosa Groot Herontwerpt de mobiele website van Milledoni. Eindopdracht M&P V januari 2014

Rosa Groot Herontwerpt de mobiele website van Milledoni Eindopdracht M&P 500642179 V1-03 30 januari 2014

2

Versie 1, door Rosa Groot

Inhoudsopgave Inleiding

3

Mentaal Model Vraag 1 Vraag 2 Vraag 3 Vraag 4 Vraag 5 Vraag 6 Vraag 7

4 6 8 10 12 14 16

Wireflow

18

Flowchart A Flowchart B

20 21

Bronnen

23

Herontwerp mobiele website Milledoni.nl

Inleiding Stel je voor dat je een cadeau zoekt voor iemand, maar je oprecht geen idee hebt wat je zult schenken. Ga je dan de stad of juist het internet afstruinen. Als je op het internet naar cadeautjes zoekt, stuit je vast en zeker op Milledoni.nl. Zij genereren leuke en orginele cadeautjes voor alle leeftijden. De website is responsive en werkt daarom ook op een Smart Phone. Toch is de website niet ideaal voor een klein scherm zoals een telefoon. Vandaar dit document: het is tijd voor een herontwerp van de mobiele Milledoni website. Het document bestaat uit een mentaal model, een flowchart en een wireflow. Drie tools om het herontwerp te onderbouwen en tot een zo efficiënt mogelijk herontwerp te komen. Het mentale model is gedaan met Thomas Fibbe, een A/V-student van 19 jaar, wonend in Amsterdam. Daarbij is hij intensief gebruiker van zijn Smart Phone. Tijdens het mentale model maakte we gebruik van een iPhone 4.

3

4


Vraag 1 Wat is het eerste dat je opvalt als je deze webpagina opent? “De tekst ‘Ik zoek een cadeau voor’. Ook dat kleine ronde plaatje valt op, omdat het geel is en in het midden van de pagina staat. Ook de groene balk valt op, die vind ik erg hinderlijk.”

Foodspotting

Deze startpagina van een mobiele website laat direct een sfeerbeeld van de website zien. Het doel van de website wordt kort in een paar woorden uitgelicht. Zo is het direct duidelijk voor de gebruiker wat er te doen is op de website.

Triplagent

Door met een korte ‘Walk-through’ van één pagina te starten, kan je de gebruiker in snel en duidelijk uitleggen wat de bedoeling is van de website. Maar ook hoe de website gebruikt moet worden. Dit pattern is beter omdat het meer informatie aan de gebruiker geeft in één oogopslag.


Door met iconen gecombineerd met woorden uit te leggen hoe de mobiele website werkt, geef je een volledige weergave van hoe het werkt. De iconen kunnen mogelijk verkeerd opgepikt worden, dit is de reden dat ik deze lo-fi niet heb gekozen.

Door met pijlen de drie stappen die een gebruiker doorloopt kort te omschrijven geef je een korte en krachtige uitleg. Een walk-through is alleen begrijpbaar als deze duidelijk en simpel is en daarom heb ik deze lo-fi gekozen.

Een gebruiker zal op deze pagina kort de drie stappen lezen en vervolgens op de ‘Start’ button drukken. Dan betreedt de gebruiker de website in zijn geheel. Dit scherm is er enkel één keer, wanneer iemand op een uniek apparaat de website bezoekt. Daarna zal de gebruiker direct worden doorgelinkt naar het volgende scherm.

5

6


Vraag 2 Wat is de eerste stap die je onderneemt als je de website bezoekt? “Naar beneden scrollen om de rest van de pagina te bekijken, omdat het nog niet duidelijk is wat ik hier moet doen. Ik heb geen overzicht op het moment. Daarna zou ik pas de zoekvelden in gaan vullen.”

Vine

Door alle belangrijke informatie direct in één oogopslag op je scherm te zien, kan de gebruiker direct starten met het invullen van de zoekvelden. Hier zou je bijvoorbeeld kunnen kiezen uit hoe veelomvattend je je zoekopdracht wilt gaan maken. Dit pattern laat een goed overzicht zien van de mogelijkheden, vandaar dat het een betere oplossing is.

Circle

Door alle belangrijke informatie direct in één oogopslag op je scherm te zien, kan de gebruiker direct aan de slag gaan met het invullen van de zoekvelden. Hier start de gebruiker direct met enkele opties en kan telkens extra vragen toevoegen als hij/zij dit relevant vindt.


Het lijkt me onhandig dat de gebruiker telkens tussen twee pagina’s aan het navigeren is. Vandaar dat me een pijltje naar rechts niet praktisch lijkt. De onderste knop van het menu is een button die vervolgens de resultaten van de zoekopdracht zal laten zien. Enkele voorbeelden of categorieën laten zien op de eerste pagina is wel een goed idee.

Door een kopje als een losse dropdown menu te gebruiken kan er veel informatie op één pagina. De eerste drop-down staat automatisch open. De andere zijn er voor de gebruiker om wellicht te gebruiken. Het is niet verplicht. De zoekopdracht sluit je af met een druk op de ‘Laat zien’ button. Deze manier van ruimte bestaren is erg efficiënt. Daarom is deze lo-fi het beste.

De eerste drop-down staat automatisch open zodat de gebruiker direct kan beginnen met input geven. Onderaan de pagina is er de mogelijkheid om nog meer filters toe te voegen. Daaronder zijn twee knoppen: één om je input te wissen (uit het oude ontwerp) en één om de resultaten van je zoekopdracht te bekijken. Het tabje links wordt later in het doument uitgelegd.

7

8


Vraag 3 Vul de eerste vier vraagvelden in, wat verwacht je dat er gebeurt als je dit hebt gedaan? “De bekijk resultaten knop kwam plots naar voren, die stond er eerst niet. Toen ik op de knop laat suggesties zien drukte kwamen er afbeeldingen tevoorschijn met cadeautjes die ik zou kunnen kopen voor de desbetreffende ontvanger. Ik had eerst niet door dat er meer dan één resultaat voor me was geselecteerd, omdat een voorbeeld van een cadeau direct de hele pagina vult.”

Jukely

Door onder elkaar de producten in een lijst te laten zien is het mogelijk om meerdere producten op één pagina te laten zien. Dat is erg goed aan dit pattern. Het is belangrijk dat er nog genoeg ruimte is voor enkele informatie over het product. De pijl rechts maakt duidelijk dat daar een gedetailleerd overzicht te vinden is.

Ness

Door de producten in een zijwaardse lijst te presenteren, kan je een grote foto van het product laten zien. Ook is er genoeg plek voor informatie over het product. Door links en rechts van het gecentreerde product een stukje van een volgend product te laten zien is het duidelijk dat de gebruiker door de resultaten kan swipen.


De zoekresultaten zijn hier weer gegeven in een lijst. Elk item heeft genoeg ruimte gekregen om belangrijke informatie te vertonen. Ook is er een balk die de tags laat zien die bij het product horen, tags zijn er belangrijk bij het generen van zoekresultaten. Daarom is deze lo-fi het beste.

Door twee zoekresultaten naast elkaar te laten zien, ziet de gebruiker erg veel producten in één oogopslag, dit is een voordeel. Er is in dit ontwerp geen rekening gehouden met de hoeveelheid informatie die er bij een product hoort. Daarom is dit geen goede oplossing.

In dit voorbeeld zie je een duidelijke foto, titel, informatie en tags per product. Ook is er nog een mogelijkheid om het product gedetailleerder te bekijken. Door op het informatieblok te klikken, ga je naar een volgende pagina, waar het product word utigelicht. De gebruiker kan gewoon naar beneden doorscrollen tot alle resultaten zijn bekeken.

9

10


Vraag 4 Je hebt zojuist besloten om je zoekopdracht toch nog wat specifieker te maken, hoe ga je terug naar de vlakken om de informatie aan de zoekopdracht aan te vullen? “Aangezien ik rustig aan naar beneden aan het scrollen was om alle suggesties te bekijken had ik verwacht dat ik vanuit daar verder kon gaan. Er was alleen geen button of iets dergelijks, dus scrolde ik helemaal terug naar boven. Dat vind ik erg onlogisch. Aangezien ik als ik alle cadeautjes heb bekeken en onderaan de pagina ben wil ik daar de keuze krijgen om mijn zoekopdracht te specificeren.”

Foursquare

Door een ‘tablad-navigatie’ onderaan de pagina te gebruiken, is het altijd duidelijk voor de gebruiker waar hij/zij zich bevind. Drie tabs zouden Zoeken, Resultaten en Profiel kunnen zijn. Zo is het gemakkelijk om van de Resultaten pagina naar de Zoeken pagina te navigeren.

M dot

Een kleine button aan de rand van de pagina neemt weinig ruimte in. Het beïnvloedt de rest van de indeling van de pagina niet. Toch is het mogelijk om er een dergelijk menu in te verwerken. Eén van de opties in dit menu zal bijvoorbeeld ‘Terug naar de top’ zijn. Omdat het zo weinig ruimte inneemt lijkt me dit een beter pattern.


Hier zit het tabje links tegen de rand van het scherm aan. Daar zit hij het minst in de weg. Aangezien de gebruiker op dit scherm niet zijwaarts swipet, zal hij niet snel per ongeluk open gaan. Als de gebruiker erop tapt zal er een menu uit komen, zoals je kan zien in de hi-fi rechts op deze pagina. Omdat het tabje links minder in de weg zit heb ik deze lo-fi gekozen.

Hier zit het tabje in het midden onderin het scherm. Dat is een redelijk gebruikelijke plek om hem te ontwerpen. Uit ervaring kan ik zeggen dat je het tabje erg vaak per ongeluk opent, dat kan irriterend zijn. Als de gebruiker erop tapt zal er een menu uit komen, zoals je kan zien in de hi-fi rechts op deze pagina.

Hier zie je rechtsboven een kleine versie van waar het tabje zich bevindt. De grotere hi-fi laat zien hoe het menu eruit ziet dat zich onder het tabje verschuilt. De content hiervan is van de huidige website gehaald. Ik heb enkel ‘Naar de top’ toegevoegd, omdat deze knop werd gemist in het huidige ontwerp.

11

12


Vraag 5 Er zijn drie vlakken waarin je de zoekopdracht kan verfijnen, denk je alle drie de vlakken nodig te hebben om een geschikt cadeau te vinden. “Nee, de onderste twee kunnen prima gecombineerd worden. Het vlak ‘Soort cadeau’ is stukken belangrijker dan het ‘Hij heeft’ vlak. Drie vlakken is dus redelijk overdreven. Het haalt ook de snelheid voor de gebruiker weg.”

Skim for iPhone

Door de website te beginnen met de gebruiker te laten kiezen hoe veelomvattend je de zoekopdracht wilt laten worden, stel je de gebruiker precies genoeg vragen. Omdat hij zelf heeft gekozen wat voor soort vragen hij denkt nodig te hebben bij het genereren van een passend cadeau.

Ness

Het is ook mogelijk om de zoekopdracht grotendeels open te houden en enkel een dropdown aan te bieden met filteropties. Zo kan de gebruiker zelf aangeven of én hoeveel filters er worden gebruikt. Het gebruik van uitklapbare extra filters bespaart ruimte en geeft toch overzicht, dit lijkt mij een goede oplossing.


In dit ontwerp heb ik enkel twee dropdowns (filters) en één button als interactiepunten voor de gebruiker. Dat is erg weinig. Een dropdown werkt prima op een Smart Phone. Ook de input via het toetsenbord werd niet als hinderlijk ervaren.

In dit ontwerp staan erg veel buttons. Eén daarvan: ‘Random Results’ was een uitprobeelser die ik ondertussen als nutteloos ervaar. Er is geen plek voor nutteloze content op het scherm van een Smart Phone. De ‘Begin opnieuw’ button is wel erg belangrijk voor een gebruiker. Zodat er in één keer alles gewist kan worden.

Hier zie je wat er onder de dropdown ‘Meer Filters’ vandaan komt. Door de optie aan te bieden om de zoekopdracht te verfijnen, kan de gebruiker zelf bepalen of dit nodig is. het is ook mogelijk om terug naar boven te scrollen of het kopje weer dicht te klappen, dan zal de input niet verloren gaan. De onderste balk zal vast in het scherm staan.

13

14


Vraag 6 We gaan nu verder naar het vlak ‘Hij’. Vind je het toevoegen van tags een overzichtelijke manier om dit vlak in te vullen. “Wanneer ik op het plusje druk vallen de tags buiten het scherm, dan moet ik naar links swipen waardoor de rest van de pagina in zijn geheel buiten beeld valt. Dat is super onpraktisch voor een mobiele website. De kleur verandering van de toegevoegde tags is een pluspunt dat is handig.” Jukely

Door de tags in een ‘layer-over’ te laten zien is het mogelijk voor de gebruiker om alles op één scherm te houden. Er moet een duidelijk ‘Gereed’ knop zijn, zodat de gebruiker weer terug kan keren naar de zoekopdracht. Met deze pattern is het mogelijk veel tags in één oogopslag te laten zien, daarom lijkt mij dit de beste oplossing.

LimeLight

Een andere mogelijkheid is om de tags in een ‘pop-up’ in een lijst te laten zien met aan het einde van iederen regel een toevoegen knop. Ook hier moet er een duidelijke ‘Gereed’ button zijn, zodat de gebruiker makkelijk de weg terug naar de zoekopdracht vind.


Deze lo-fi laat een grote lijst met tags zien. Door ze aan te tappen krijgen ze een andere kleur. Daarnaast is er nog de mogelijkheid om zelf een tag toe te voegen die er nog niet tussen staat. Deze lo-fi is beter omdat er door de regel-opvulling meerdere tags op één pagina passen.

Dit ontwerp laat bij elke tag een boxje zien die de gebruiker aan of uit kan vinken. Zo ziet de gebruiker welke tags er wel of niet bij de zoekopdracht horen. Daarnaast is er nog de mogelijkheid om zelf een tag toe te voegen die er nog niet tussen staat. Linksboven via het pijlje of met de gereed knop ga je terug naar het invullen van je zoekopdracht.

De tags die de gebruiker heeft aangevinkt zijn grijs. Als de gebruiker klaar is met tags toevoegen kan hij/ zij via de ‘Gereed’ button of via het pijltje linksbovenin (<) terug naar de zoekopdracht en het invullen van de filters verder voortzetten. Daarnaast is er ook nog de mogelijkheid zelf een tag toe te voegen via de ‘Mis je iets’ button.

15

16


Vraag 7 Vind je een invulvak, dropdown, slider of het toevoegen van tags de beste manier om je informatie te verwerken? En waarom? “Tags zijn makkelijk en snel. De slider is niet handig, die is niet precies genoeg. Dropdown is wel fijn, dat die zoveel opties geeft, alleen de klikbare knopjes zijn erg klein. Een invulvak kan ook goed en snel werken, het is alleen wel onhandig dat ik het algemene toetsenbord voor me krijg als ik enkel nummers in hoef te vullen.”

Cloudier

Hier zie je een goede oplossing om een slider preciezer te maken: door er fixeer punten aan toe te voegen. Daarnaast zijn de opties op een duidelijke manier verdeeld en kan je door het groeperen zien welke onderdelen bij elkaar horen. Doordat deze pagina erg duidelijk en overzichtelijk is, is dit de beste oplossing.

Path

De verdeling van de content is in dit pattern erg interessant. Het maakt het mogelijk om verschillende soorten manieren van input op één pagina te zetten. Drie verschillende vlakken om de zoekopdracht te specificeren is zal op deze manier niet meer nodig zijn.


In dit ontwerp heb ik enkel twee dropdowns (filters) en twee buttons als interactiepunten voor de gebruiker. Een dropdown werkt prima op een Smart Phone. Ook de input via het toetsenbord werd niet als hinderlijk ervaren. Verder is er nog de mogelijkheid om tags toe te voegen en om iets te verschuiven op het balkje.

In dit ontwerp heb ik uitgeprobeerd hoe het werkt als ik de filters groepeer en dit verschil ook aanduidt met gekleurde vlakken. Ik vind het beeld er rommeliger van worden en zie het dus niet als een efficiënte oplossing. De ‘Opnieuw’ button en ‘Resultaten’ button in één lijn is wel een goed idee.

Het is in deze filter mogelijk om tags toe te voegen, cijfers in te vullen, boxjes aan te vinken en een schuif-mechanisme op vijf verschillende standen te zetten. Als je alle input wilt wissen gebruik je daar de knop ‘Start opnieuw’ voor en als je de zoekresultaten wilt bekijken tap je op de knop ‘Bekijk resultaten’.

17

18 Versie 1, door Rosa Groot

Wireflow

A

B

A

B

C

C

D

D avontuur

E

verassing F

1

eco E

F

3

3 2

2


19

1. ‘Start’ button om de mobiele website te betreden. 2. ’Bekijk resultaten’ button om naar de resultaten te gaan. 4 3 H

I J

K L

4

3. ‘Meer filters’ uitklap-menu om meer filters aan te bieden. 4. ’Resultaten’ laat de gegenereerde zoekresultaten zien naar aanleiding van de zoekopdracht. Input A: Voor wie het is Input B: De leeftijd Input C: De gelegenheid Input D: Eigenschap Input E: Het toevoegen van tags Input F: Hebben vs. Doen Input H: Het toevoegen van tags Input I: Prijsindicatie Input J: aanvink boxjes Input K: Expirimenteel vs Behoudend Input L: Houdt van ...

20 Versie 1, door Rosa Groot

Flowchart A

B

Klikt op de button ‘Start’ 1

F Schuif op stand 5?

Klikt op de button ‘Bekijk resultaten’ 2

A Input A ingevuld?

B Input B ingevuld?

op 4?

op 3?

op 2?

op 1?

Geeft 4 weer

Geeft 3 weer

Geeft 2 weer

Geeft 1 weer

Geeft input weer G In totaal > 3 input velden ingevuld?

Melding: ‘Vul aub meer info in’

Geeft input weer Leest de input en slaat het op als metadata.

C Input C ingevuld?

Geeft input weer

D Input D ingevuld?

Geeft input weer

E Input E ingevuld?

A

Mis je iets?

3 Klik op ‘Meer filters’ ?

Genereert zoekresultaten.

Toetsenbord om een tag te typen.

Geeft zoekresultaten weer 4

Ga verder naar Flowchart B


Flowchart B

B

Klikt op de button ‘Bekijk resultaten’

H Input H ingevuld?

Geeft input weer

Genereert zoekresultaten.

I Is er een prijs ingevuld?

J Beide boxjes aagevinkt?

Leest de input en slaat het op als metadata.

Geeft input weer

Geeft zoekresultaten weer 4 Brievenbus aagevinkt?

Duurzaam aagevinkt?

Brievenbus checkbox AAN

Duurzaam checkbox AAN

K Schuif op stand 5?

op 4?

op 3?

op 2?

op 1?

Geeft 4 weer

Geeft 3 weer

Geeft 2 weer

Geeft 1 weer

L Input L ingevuld?

A

Geeft input weer

21

Rosa Groot Herontwerpt de mobiele website van Milledoni. Eindopdracht M&P V januari 2014

Recommend Documents