Ontwerpdocument Milledoni Mobiele zoekproces Docent: Datum: Student: Vak:
H. van Vugt 30/01/2014 Mitchel Foppen, 500666386 Models & Processes
INLEIDING
2
Inleiding
PAGINA LAY-‐OUT
2
TOELICHTING OPDRACHT EN INHOUD
2
POSTURAL
3
In het volgende document worden de ontwerpproblemen voor een nieuw concept van het mobiele zoekproces van Milledoni uitgelicht en opgelost. Hierbij wordt gebruik gemaakt van vaste “patterns”: bewezen oplossingen voor specifieke design problemen (bronnen staan vermeld onder de afbeeldingen).
1. VINDT U HET PRETTIG OM OP DEZE MANIER DE DRIE LIJSTEN MET VRAGEN TE DOORLOPEN?
3
STRUCTURAL
4
2. ALS U HIER OP “IS” DRUKT, KRIJGT U FILTERS TE ZIEN. KUNT U DIT AANDRUKKEN? WAT VIND U VAN DE LOCATIE VAN DE FILTERS? 4 3. VINDT U HET MAKKELIJK OM OP DEZE MANIER DOOR DE RESULTATEN HEEN TE GAAN? 5 6
BEHAVOURAL
4. HOE KOMT HET DAT HIER “ZIJ” STAAT, TERWIJL U OOK EEN CADEAU KUNT ZOEKEN VOOR EEN JONGEN? 6 5. ALS U OP HIER OP “PRIJSINDICATIE” DRUKT, HOE DENKT U DAN IETS TE KUNNEN INVULLEN? BIJVOORBEELD MET EEN GEHEEL TOETSENBORD, OF ZULLEN ER ALLEEN CIJFERS VERSCHIJNEN? 7 6. WAT ZIJN DEZE BOLLETJES OP DEZE LIJNEN (ONDER “SOORT CADEAU”)? 8 WIREFLOW
FOUT! BLADWIJZER NIET GEDEFINIEERD.
FLOWCHARTS: INFORMATIE
10
FLOWCHARTS: “GENDER DROPDOWN” EN “AANPASSEN LEEFTIJD”
10
Pagina lay-‐out Voor dit document is voor een andere lay-‐out gekozen dan normale A4 documenten. Dit heeft een minimale invloed op het eventueel uitprinten van dit document.
Toelichting opdracht en inhoud
Milledoni heeft gevraagd om een onderzoek te verrichten naar het huidige mobiele zoekproces, en met een vernieuwd concept te komen die beter voldoet aan de wensen en verwachtingen van de gebruiker. Daarbij zijn van de volgende toepassingen gebruik gemaakt: -‐ Flowcharts -‐ Wireframes -‐ Wireflows Het document is opgesteld om – als een verhaal – u door het proces te leiden naar het nieuwe concept. Deze is in te delen in de volgende hoofdstukken: -‐ Vragen en oplossing -‐ Nieuwe structuur van het zoekproces -‐ Schets weergaven van het nieuwe zoekproces Daarnaast is het eerste hoofdstuk, vragen en oplossing, opgedeeld in drie niveaus: -‐ Postural: het hoogste niveau; hoe een applicatie zich opstelt tegenover de gebruiker. -‐ Structural: het midden niveau: hoe een applicatie in verhouding tot andere onderdelen werkt. -‐ Behavioral: het laagste niveau: hoe de onderdelen binnen de applicatie zich gedragen. Ook wordt er gebruik gemaakt van “wegwijzers”: Geeft aan dat dit de uiteindelijke keuze is geworden. Een extra notitie over de onderstaande schets.
2
Postural 1. Vindt u het prettig om op deze manier de drie lijsten met vragen te doorlopen? A: “ik vind het wel fijn om alles in een keer door te lopen, maar ik mis het overzicht. Ik kan hier bijvoorbeeld niet meer snel zien wat ik in het eerste kader had ingevuld.” Probleem: gebruikers vinden het fijn als ze zonder te zoeken iets terug kunnen vinden; daardoor houden ze overzicht en controle. Daarom worden lange lijsten op kleine apparaten vaak afgeraden. De gebruiker is in dit geval opzoek naar een wat bescheidenere weergave van de filters.
Oplossing: hoewel beide patterns ervoor zorgen dat er meer overzicht gecreëerd wordt, is pattern 2 de meest geschikte keuze voor dit probleem. Bij dit patroon is het makkelijker te communiceren dat de stappen stapsgewijs af moeten worden gewerkt, terwijl de gebruiker wel meer overzicht behoudt.
http://www.pinterest.com
Pattern 1: In plaats van drie aparte boxen verticaal onder elkaar te plaatsen, creëren we een enkele box met drie hoofdfilters. Deze hoofdfilters dienen ter vervanging van de huidige drie boxen
http://www.campaignmonitor.com
Pattern 2 (progressive disclosure): Bij dit patroon staan de drie huidige boxen ingeklapt onder elkaar. Als de gebruiker op een box klikt, dan klapt deze uit, en toont deze de inhoud. Als de gebruiker wéér op de header klikt, klapt de box weer in.
De eerste low fidelity wireframe is omgezet naar deze high fidelity wireframe. De blokken zijn nu inklapbaar, waardoor de gebruiker makkelijk kan navigeren door zowel de filters, als over de gehele pagina.
3
Structural 2. Als u hier op “is” drukt, krijgt u filters te zien. Kunt u dit aandrukken? Wat vind u van de locatie van de filters? A: “Heel raar. De filters staan buiten het scherm, en ernaar toe scrollen gaat lastig. Hoort dat?” Probleem: de filters die verschijnen bij sommige vragen, worden aan de zijkant van het scherm opgeroepen. Dit valt echter buiten het scherm; verticaal ernaar toe scrollen gaat moeilijk.
Oplossing: in de huidige situatie is pattern 1 een betere keuze. De gebruiker behoudt beter overzicht en controle door een slide-‐out item, en kan de relatie tot het eerste item beter plaatsen.
Pandora (applicatie)
Pattern 1: Wanneer de gebruik drukt op een item, schuift er een content item onder uit.
http://pttrns.com
Pattern 2: Een kleine popover die verschijnt wanneer de gebruiker op een filter drukt. Deze staat vol met filters waar de gebruiker uit kan kiezen. Als de gebruiker op een leeg deel van het scherm klikt, of eventueel op een escape hatch, verdwijnt de popover weer.
De tweede low fidelity wireframe is uitgewerkt. Wanneer de gebruiker op een plusje drukt, schuift een lijst met filters uit. Deze lijst kan worden gesloten door weer op het plusje (nu een kruisje) te drukken, of door ergens anders op het scherm te drukken.
3. Vindt u het makkelijk om op deze manier door de resultaten heen te gaan? A: “het is op zich lekker om er snel doorheen te kunnen scrollen, maar ik vind het een wel erg lange lijst worden. Probleem: lange resultaatlijsten hebben vaak als keerzijde dat ze de webpagina uit proportie halen. Hierdoor ontstaan grote pagina’s die misschien niet meer overzichtelijk zijn.
Oplossing: de beste oplossing voor dit probleem is pattern 2. Deze geeft gelijk alle
productinformatie weer zonder dat de gebruiker ergens op hoeft te klikken; daardoor is de browse-‐ervaring beter dan bij pattern 1. Producten kunnen netjes naast elkaar worden gezet waar de gebruiker makkelijk doorheen kan swipen, waardoor de pagina een stuk minder lang wordt, en de verhouding tussen de zoekresultaten en de rest van de pagina verbeterd wordt. http://www.onlymobilepro.com
http://my.safaribooksonline.com
Pattern 1: De zoekresultaten worden (in het klein) op een horizontale lijn gepresenteerd; de gebruiker kan vlug door deze lijn heen scrollen. Als de gebruiker op een product drukt, wordt deze uitvergroot, en wordt er meer informatie weergegeven.
Pattern 2 (carousel): De producten worden horizontaal naast elkaar gezet, ook wel de carousel view genoemd. Meestal zijn deze rijen niet extreem lang; hoogstens 10 producten naast elkaar, om het overzicht te behouden.
De tweede low fidelity wireframe is uitgewerkt naar een high fidelity wireframe. Producten worden opgestapeld tot een stapel van 6 producten. Gebruikers kunnen deze stapels heen en weer swipen.
Behavoural 4. Hoe komt het dat hier “zij” staat, terwijl u ook een cadeau kunt zoeken voor een jongen? A: “Ik denk dat we een beetje onze fantasie moeten toepassen…” Probleem: doordat gelijk alle filters zichtbaar zijn, is het niet altijd duidelijk hoe deze precies op elkaar aansluiten.
Oplossing: er zijn een aantal redenen waarom ik voor deze pattern heb gekozen. Allereerst lost het natuurlijk ons probleem op: gebruikers kunnen niet langer in verwarring raken, omdat we beginnen met maar een enkele filters: “ik zoek een cadeau voor een (…)”. Daarnaast biedt het ook meer structuur in een omgeving waar meerdere filters tegelijkertijd worden aangeboden. Tot slot verbeterd het ook de UX (User Experience) doordat het zoekproces minder bedreigend overkomt; door te beginnen met een simpele vraag, leidt je de gebruiker naar het zoekproces toe i.p.v. hem te overvallen. Pattern: responsive disclosure Bij deze pattern is een deel van de user interface verborgen van de gebruiker, totdat de gebruiker een keuze maakt. Daarna wordt de rest van de user interface beschikbaar. In het voorbeeld is “Maak nu reservekopie” verborgen, totdat de gebruiker ervoor kiest om gebruik te maken van de iCloud optie.
Bij deze vraag dienen de wireframes een ander doel. Hier probeer ik duidelijk te maken wat er precies bedoeld wordt met “responsive disclosure”: bij de eerste wireframe is alleen een enkel veldje zichtbaar. Wanneer de gebruiker hierop drukt, en iets kiest uit het dropdown menu, verschijnt wireframe twee. Bij wireframe twee zijn alle velden ingeladen.
5. Als u op hier op “prijsindicatie” drukt, hoe denkt u dan iets te kunnen invullen? Bijvoorbeeld met een geheel toetsenbord, of zullen er alleen cijfers verschijnen?
A: “ik denk dat ik zo’n ‘rolding’ krijg, die waar je verticaal bij moet scrollen. Daar staan dan alleen getallen op.” Probleem: dit specifieke veld roept een dropdown keuzemenu op met getallen. De gebruiker krijgt niet genoeg hints wat de verschillende velden zullen doen als erop geklikt wordt.
Oplossing: dit probleem sluit naadloos aan op pattern 2. Gebruikers weten door dit patroon dat het om zowel een dropdown menu gaat, als om een menu waarin een enkele optie te selecteren valt.
Wireframe 1 is uitgewerkt naar een high fidelity wireframe.
http://maxcdn.thedesigninspiration.com
Pattern 1: Door een pijltje te plaatsen in het dropdown veld, herkennen gebruikers dat het om een dropdown patroon gaat.
http://365psd.com/day/3-‐47/
Pattern 2: Door twee pijltjes te gebruiken, weet de gebruiker dat het om een vaste keuzemenu zal gaan, waarin een enkele optie geselecteerd mag zijn.
7
6. Wat zijn deze bolletjes op deze lijnen (onder “Soort cadeau”)? A: “geen idee, versiering? Oh wacht, is het een slider?” Probleem: het is niet (meteen) duidelijk dat het om sliders gaat, waarmee de gebruiker een inschatting kan aangeven van wat voor een soort cadeau hij-‐ of zij wilt. Oplossing: beide oplossingen kunnen een slider vervangen; pattern 2 is echter de juiste keuze, omdat we een beperkte ruimte hebben. Pattern 2 is in principe net zo groot als de huidige slider, waardoor het makkelijker te implementeren is. Daarnaast spreekt deze pattern meer voor zich dan pattern 1.
http://pttrns.com
Pattern 1: De gebruiker krijgt een variatie aan antwoorden te zien, zodat de meest passende optie geselecteerd kan woorden.
De tweede wireframe is uitgewerkt naar een high fidelity wireframe. Ik heb er bewust voor gekozen om normale bollen te gebruiken, zodat er geen verschil wordt gemaakt tussen de twee uiterste waarden (er is geen reden voor subtiele manipulatie, door bijvoorbeeld wireframe 1 toe te passen).
http://ux.stackexchange.com
Pattern 2: De slider vervangen met symbolische vertegenwoordigingen van een bepaalde waarde.
8
9
Flowcharts: informatie
Flowchart 1: de cijfers binnen de flowcharts verwijzen naar de volgende velden:
I. II. III. IV.
Alle flowcharts: bij elke verandering die de gebruiker op de pagina maakt (qua filters) vindt (automatisch) het volgende proces plaats:
A:
Bij elke verandering op de pagina vindt automatisch het volgende proces plaats:
10
Flowcharts Flowchart 1 (scherm 1.2): “gender” en “aanpassen leeftijd”
11
Flowchart 2 (scherm 3.2): toevoegen/verwijderen van filter “tags” (in het uitschuif onderdeel
12