Student: Klas: Docent: Vak: Datum: Versie:
Ilayda Kucukosmanoglu 500655851 V1-07 Koop Reynders Models & Processes 30 januari 2014 1.o
Inhoudsopgave
Debriefing
blz. 3
Wireflow
blz. 4
Mental Model
blz. 9
Flowcharts
blz. 15
Ilayda Kucukosmanoglu - 500655851 - v107 - M&P - V1
2
Debriefing
Inleiding Een goed cadeau zegt meer dan 1000 woorden. Maar een goed cadeau luistert nauw. Voor wie is het? Hoe goed ken je deze persoon? Wat wil je uitgeven? Wat is de reden van het cadeau? Van gewoon een sympathiek gebaar tot een blijk van waardering, van een cadeau dat je achterlaat op een cadeautafel tot hét groepscadeau op een huwelijk of jubileum: Milledoni helpt je op weg naar net dat cadeau dat vertelt wat je wilt vertellen. Gedreven door een passie voor gepaste, passende cadeaus, struint Milledoni dagelijks het web af naar de betere cadeaus. Daarbij geholpen door de even gepassioneerde community! Zo kun je op Milledoni zoeken op leeftijd, bedrag, gelegenheid, maar vind je ook de reacties van anderen op een cadeau.
Opdracht vanuit de opdrachtgever - We zoeken alleen een oplossing voor het vinden van een passend kado (dus niet login, navigatie, blog, delen, nieuwsbrief, etc.) - Gebruik zo veel mogelijk de bestaande filters. - Je bent vrij om de filters op een andere manier uit te voeren. - Onderbouw elke ontwerp beslissing via je ontwerpdocument.
Huidige situatie milledoni.nl
Milledoni Milledoni is als startup begonnen met een beperkt budget. In de eerste fase is gewerkt aan aan degelijke achterkant. Tijdens de grote tweede release is voor de desktop site het meeste budget vrij gemaakt. Voor mobiel is een betaalbare en gemakkelijk te onderhouden responsive variant gekozen. Nu Milledoni gaat lopen is er budget vrijgemaakt voor verbetering van de mobiele variant. Het is niet uitgesloten dat een goed ontwerp voor mobiel doorgevoerd gaat worden naar de desktop variant. Wij staan overal voor open, mits goed onderbouwd!
20/01/2014. milledoni.nl
20/01/2014. milledoni.nl
20/01/2014. milledoni.nl
Bron debriefing: 20/01/2014. https://docs.go ogle.com/document/d/1shS0PzL_sdNXOy6 G1B-avQe6-JnCTknG1-uHfpDf8Aw/edit
Ilayda Kucukosmanoglu - 500655851 - v107 - M&P - V1
3
Wireflow
17:17
Milledoni
17:17
17:17
Milledoni
Milledoni 1
2
1
3
Ik ben opzoek naar een kado voor:
Milledoni vindt een passend kado voor hem, haar, hen, jong en oud Vind een kado voor mij!
1.0 Gebruiker klikt op button “vind een kado voor mij”
17:17
Een
vrouw
Van
25
Jaar
Milledoni
2
3
1
Ik ben opzoek naar een kado voor: Een
vrouw
Van
25
2
3
Ik ben opzoek naar een kado voor: Een vrouw
Jaar
Van
Jaar
25
Zij is mijn zus
Zij is mijn zus
Zij is mijn zus
Het is voor haar verjaardag
Het is voor haar verjaardag
Kies
Het is voor haar verjaardag
Volgende
Volgende
Volgende
2.0 Gebruiker klikt op invoerveld achter “een”
2.1 Gebruiker kiest “vrouw”
3.0 Gebruiker klikt op invoerveld achter “van”
Ilayda Kucukosmanoglu - 500655851 - v107 - M&P - V1
4
17:17
Milledoni 1
17:17
17:17
Milledoni
Milledoni 3
2
1
1
2
3
Ik ben opzoek naar een kado voor:
Ik ben opzoek naar een kado voor:
Een
vrouw
Een
vrouw
Van
25
Van
20
Jaar
Zij is mijn zus
Jaar
Zij is mijn zus Kies
Het is voor haar verjaardag
2
17:17
Milledoni
3
Ik ben opzoek naar een kado voor: Een
vrouw
Van
20
Jaar
Zij is mijn zus Het is voor haar verjaardagKies
1
2
3
Ik ben opzoek naar een kado voor: Een vrouw Van 20
Jaar
Zij is een vriendin Het is voor haar verjaardag
Het is voor haar verjaardag
20 Volgende
Volgende
Volgende
Volgende
3.1 Gebruiker voert leeftijd “20” in
4.0 Gebruiker klikt op invoerveld achter “zij is”
4.1 Gebruiker kiest “een vriendin”
5.0 Gebruiker klikt op invoerveld achter “het is voor”
Ilayda Kucukosmanoglu - 500655851 - v107 - M&P - V1
5
17:17
Milledoni
Ik ben opzoek naar een kado voor:
Een
vrouw
Van
20
17:17
17:17
Jaar
Zij is een vriendin
1
Van
Het is voor haar verjaardag Kies
2
1
3
Ik ben opzoek naar een kado voor: Een
17:17
Milledoni
Milledoni
vrouw
Jaar
20
Zij is een vriendin
Milledoni
2
3
1
Haar eigenschappen en interesses:
Haar eigenschappen en interesses:
Zij is
+
Zij is
+
Zij heeft
+
Zij heeft
+
Zij houdt van
+
Zij houdt van
_
Zij wil graag
+
Zij wil geen
+
Het is voor Kerst Volgende
5.1 Gebruiker kiest “kerst”
Volgende
Gebruiker klikt op button “volgende”
Ilayda Kucukosmanoglu - 500655851 - v107 - M&P - V1
3
2
Volgende
6,0 Gebruiker klikt op plusje achter “zij houdt van”
Films
Dans
Lezen
Dieren
Eten
Retro
Zij wil graag
+
Zij wil geen
+
Volgende
6,1 Gebruiker klikt op tag “films”
6
17:17
Milledoni 1
17:17
17:17
Milledoni
Milledoni 3
2
1
Haar eigenschappen en interesses:
17:17
2
1
3
2
Milledoni 3
1
2
Soort kado:
Soort kado:
Haar eigenschappen en interesses:
3
Prijs
Prijs
Zij is
+
Zij is
+
Zij heeft
+
Zij heeft
+
Behoudend
Zij houdt van
_
Zij houdt van Films
+
Experimenteel
Zij wil graag
+
Gepersonaliseerd
Zij wil geen
+
Door de brievenbus
Door de brievenbus
Binnen 24 uur
Binnen 24 uur
Films
Dans
Lezen
Dieren
Eten
Retro
Zij wil graag
+
Zij wil geen
+
Volgende
Gebruiker klikt op minnetje
Volgende
Gebruiker klikt op button “volgende”
Ilayda Kucukosmanoglu - 500655851 - v107 - M&P - V1
Duurzaam Hebben Doen
Behoudend
Duurzaam
Experimenteel
Hebben
Gepersonaliseerd
Doen
Bekijk resultaten
Bekijk resultaten
7.0 Gebruiker klikt op invoerveld achter “prijs”
7,1 Gebruiker kiest “rond 30”
Kies
7
17:17
Milledoni 1
2
3
1
Prijs Duurzaam
Experimenteel
Hebben
Gepersonaliseerd
2
1
3
Soort kado:
Rond 30
Behoudend
Milledoni
Milledoni
Soort kado: Prijs
17:17
17:17
Doen
Vintage stropdas “oldtimer ford”
Duurzaam
Experimenteel
€9,95
Hebben
Gepersonaliseerd
Door de brievenbus
Door de brievenbus
Binnen 24 uur
Binnen 24 uur
Bekijk resultaten
3
Opnieuw zoeken
Rond 30
Behoudend
2
Doen
Bekijk resultaten
Geitenwollen sokken
€25,00 Klassieke heren trui van merino wol
Legenda een keer tap Gebruikersactie
8.0 Gebruiker klilt op tag “hebben”
Gebruiker klikt op button “bekijk resultaten”
Ilayda Kucukosmanoglu - 500655851 - v107 - M&P - V1
9.0 Resultaten worden getoond op de kado pagina
8
Schetsen
Mental Model - vraag 1 Q: “Wat verwacht je op deze pagina te kunnen doen?” A: Ik verwacht hier kado’s te kunnen zoeken voor vrouwen.
Milledoni
Probleem De gebruiker denk dat je alleen kado’s kan vinden voor vrouwen. Dit omdat er op het eerste gezicht “zij is” staat. Oplossing Er zou een launch screen gebruikt kunnen worden waarop in een zin staat wat milledoni is en wat je er kunt doen. Op zo een pagina kan je dan ook een knop als “start” maken waarmee aan de gebruiker duidelijk wordt gemaakt dat hij kan beginnen. Wat ook een optie is is een korte walktrough van de site laten zien. Doormiddel van een walktrough geef je alle opties .. weer die de site te bieden heeft. Op die manier creeer je meer duidelijkheid voor de gebruiker. De gebruiker heeft niet heel veel info nodig en daarom is een launch screen de beste oplossing.
Milledoni vindt een passend kado voor hem, haar, hen, jong en oud Vind een kado voor mij!
Waarom? In mijn detail wireframe ben ik vooral uitgegaan van schets 2.0. Deze oplossing is beter omdat het in 1 zin aan de gebruiker laat zien wat milledoni.nl doet. De start button motiveert de gebruiker om van start te gaan. Ik heb er wel voor gekozen om het menu en milledoni logo wel in beeld te brengen. Dit om de gebruikvriendelijkheid te verbeteren. Anders heeft de gebruiker geen navigatie.
Detail wireframe
1. Launch screen
Bron: 24/01/2014.http://pttrns. com/p/306
2. Walktrough
Bron: 24/01/2014 http://pttrns. com/p/306
Ilayda Kucukosmanoglu - 500655851 - v107 - M&P - V1
Lo-fi schets 1.0
Lo-fi schets 2.0
9
Mental Model - vraag 2
Schetsen
Q: “Wat zijn de grijze rechthoeken en wat gebeurt er als je er op klikt?” A: De grijze rechthoeken zijn invoervelden. Als je er op klikt kun je zelf iets intypen. Probleem De gebruiker verwacht dat hij zelf iets moet intypen. In plaats daarvan krijgt hij een dropdown keuze menu. Vervolgens verwacht hij bij het volgende invoerveld een dropdown menu omdat de velden aan elkaar gelijk zijn. Deze keer moet de gebruiker het wel zelf intypen. Oplossing Een oplossing kan zijn het invoerveld voor de leeftijd ook als dropdown menu weer te geven. Om duidelijk te maken dat het om een dropdown menu gaat moet een pijltje in het invoerveld getoond worden. Een andere optie is om de functionlaliteit dropdown eruit te halen en het veld een placeholder te geven. Zo weet de gebruiker wat hij zelf moet intypen. Een combinatie van beide patterns is de beste oplossing omdat dit het .. meeste duidelijkheid creeert.
Milledoni
Ik ben opzoek naar een kado voor: Een
vrouw
Van
25
Jaar
Zij is mijn zus
Waarom? In mijn detail wireframe ben ik uitgegaan van schets 2.0. Deze oplossing is beter omdat ik bij de gebruiker heb gemerkt dat het idee van het invullen van een zin niet echt doordringt. Op deze manier zijn het gewoon losse invoervelden die uiteindelijk samen een zin vormen.
Het is voor haar verjaardag
Detail wireframe
1. Dropdown
Bron: 24/01/2014.milledoni.nl/
2. Placeholder
Bron: 24/01/2014 http://inspired -ui.com/tagged/design
Ilayda Kucukosmanoglu - 500655851 - v107 - M&P - V1
Lo-fi schets 1.0
Lo-fi schets 2.0
10
Mental Model - vraag 3
Schetsen
Q: “Wat verwacht je te zien nadat je het eerste blok hebt ingevuld” A: Ik klik op bekijk resultaten dus dan krijg ik resultaten te zien. Probleem De gebruiker is niet op de hoogte van alle drie de filters. Op het eerste gezicht is alleen de eerste filter te zien. De gebruiker vult deze in en kan meteen resultaten krijgen. Pas wanneer de pagina naar beneden scrollt voor de resultaten ziet de gebruiker dat er nog meer filters zijn. Oplossing Op het eerste gezicht moet aan de gebruiker al duidelijk worden gemaakt dat er drie filters beschikbaar zijn. Allereerst is het verstandig om te knop “bekijk resultaten” pas te tonen na de derde filter. Op die manier stimuleer je de gebruiker al om te scrollen hij moet namelijk op zoek. Een manier om te laten zien dat er nog iets volgt kan door het volgende al een stukje in beeld te brengen op die manier ziet de gebruiker dat er nog wat volgt. Verder kun je een progress bar gebruiken waarin de gebruikerstap voor stap de filters al kan invullen en aan het einde de resultaten krijgt. Gezien de grootte van de blokken is handiger om de walktrough te gebruiken. De eerste keer kan er ook dan ook een welkom scherm gebruikt worden waarin de gebruiker duidelijk uitleg krijgt over wat hij precies kan op de site. 1. Stukje in beeld
Bron: 24/01/2014.http://www. mobile-patterns.com/feeds
Waarom?
Milledoni 1
2
3
Ik ben opzoek naar een kado voor: Een
vrouw
Van
25
Jaar
Zij is mijn zus Het is voor haar verjaardag
In mijn detail wireframe ben ik uitgegaan van schets 2.0. Deze oplossing is beter omdat het woord F1 eigenlijk weinig zegt. Ook het woord “eind” is vaag. Door 1, 2, 3, “kado” te gebruiken wordt de spanning opgebouwd. Verder is de knop“volgende” handiger om te gebruiken. Een touchscreen kan klein zijn en dan is het lastig om op een kleine pijl te drukken.
Volgende
Detail wireframe
2. Progress bar
Bron: 24/01/2014.http://www. mobile-patterns.com/walkthroughs
Ilayda Kucukosmanoglu - 500655851 - v107 - M&P - V1
Lo-fi schets 1.0
Lo-fi schets 2.0
11
Mental Model - vraag 4
Schetsen
Q: “Hoe kan je opnieuw zoeken?” A: Door de pagina te refreshen.
Milledoni
Probleem De gebruiker ziet de button “opnieuw zoeken”over het hoofd. Nadat hij er op werd gewezen vertelde hij dat hij die knop bij de resultaten zou verwachten.
1
3
2
Opnieuw zoeken
Vintage stropdas “oldtimer ford”
Oplossing De gebruiker kaart twee problemen aan namelijk dat hij de knop over het hoofd heeft gezien en dat hij de knop op een andere plek verwachtte. Dit komt doordat de gebruiker op dat moment bezig is met het krijgen van de resultaten. Om dit op te lossen kan de knop een opvallender uiterlijk krijgen. Dit kan door een opvallende kleur te kiezen en een icoon te gebruiken in de button. Een andere oplossing is om de knop te plaatsen bij de resultaten. De gebruiker kan dan eerst bekijken welke resultaten hij heeft gekregen. Indien hij daarna opnieuw wil zoeken kan hij dat makkelijk doen. Daarbij is deze oplossing de meest handige.
€9,95
Geitenwollen sokken
€25,00 Klassieke heren trui van merino wol
Waarom? In mijn detail wireframe ben ik uitgegaan van schets 2.0. Deze oplossing is beter omdat ook bij schets 1.0 de “opnieuw zoeken” button eigenlijk wegvalt. De duim van de gebruiker belemmert het beeld; Bij schets 2.0 is dit niet het geval. De knop is altijd zichtbaar boven in het scherm. De gebruiker kan er makkelijk bij en hij is groot en opvallend
Detail wireframe
1. Opvallend
2. Bij resultaten
Begin opnieuw
Begin opnieuw
Bron: 24/01/2014.milledoni.nl/
Bron: 24/01/2014.milledoni.nl/
Ilayda Kucukosmanoglu - 500655851 - v107 - M&P - V1
Lo-fi schets 1.0
Lo-fi schets 2.0
12
Mental Model - vraag 5
Schetsen
Q: “Wat verwacht je als je op het plusje klikt?” A: Ik verwacht dat ik meer informatie kan invullen over voor wie ik een kado zoek. Ik krijg dan waarschijnlijk een dropdown keuze menu.x Probleem De gebruiker verwacht een dropdown menu maar krijgt in plaats daarvan een popover die nauwelijk klikbaar is, half in beeld is en niet goed leesbaar is. Oplossing Om in te spelen op de verwachting van de gebruiker kan er een dropdown keuze menu toegepast worden. Zodra de gebruiker op het plusje klikt kunnen de opties als het ware opengeklapt worden. Daarin kunnen dan dezelfde tags weergegeven worden. Het plusje kan dan ook veranderen in een minnetje waardoor de gebruiker het ook weer kan dichtklappen. Wat ook een optie is is om er echt een invoerveld met en picker van te maken. Omdat de gebruiker meerdere tags kan kiezen is een dropdown keuze menu verstandiger om te gebruiken.
Milledoni 1
3
2
Haar eigenschappen en interesses: Zij is
+
Zij heeft
+
Zij houdt van
_
Films
Dans
Lezen
Dieren
Eten
Retro
Zij wil graag
+
Zij wil geen
+
Volgende
Waarom? In mijn detail wireframe ben ik vooral uitgegaan van schets 2.0. Deze oplossing is beter omdat het idee van de plusjes goed werkt. Om dit beter te maken heb ik ervoor gekozen om een minnetje te laten zien als het menu “opengeklapt” is. Op die manier voelt het voor de gebruiker echt alsof hij iets opent en sluit. Ook is het voor mobiel beter om tags te gebruiken die volledig klikbaar zijn in plaats van kleine checkboxes.
Detail wireframe
1. Dropdown tags
Bron: 20/01/2014.http://inspired -ui.com/tagged/app_opentable
2. Picker
Bron: 24/01/2014.9292 app
Ilayda Kucukosmanoglu - 500655851 - v107 - M&P - V1
Lo-fi schets 1.0
Lo-fi schets 2.0
13
Mental Model - vraag 6
Schetsen
Q: “Wat verwacht je te kunnen doen met de rondjes op de strepen?” A: Ik denk dat dit ook een filter is en dat ik de rondjes kan bewegen maar ik weet niet precies wat de invloed ervan is. Probleem De gebruiker heeft wel door hoe hij de bolletjes moet bewegen maar heeft moeite met het begrijpen van de invloed op de resultaten. Hij ziet daardoor niet goed wat hij doet en hoe hij het goed moet doen. Oplossing Een slider is iets wat niet heel erg veel aangeeft, het is vooral handig als de gebruiker meteen feedback krijgt te zien zoals op de desktop site wel het geval is. Daarom is het in dit geval beter om de sliders te vervangen voor iets anders. Er zijn twee opties. Je kan in een aantal woorden criteria koppelen aan een kado. Deze kan je dan kiesbaar maken door middel van checkboxes. Een andere optie is om de criteria aan het kado in de vorm van tags te maken. De tags zijn dan volledig klikbaar. Deprijsindicatie kan in beide gevallen een dropdown blijven. 1. Checkboxes
Milledoni 1
2
3
Soort kado: Prijs Behoudend
Duurzaam
Experimenteel
Hebben
Gepersonaliseerd Door de brievenbus Binnen 24 uur
Doen
Waarom? In mijn detail wireframe ben ik uitgegaan van schets 2.0. Deze oplossing is beter omdat het ook hier beter is om grote klikbare tags te gebruiken in plaats van kleine checkboxes. Op mobiel is alles al klein en is het vaak erg onhandig om kleine delen klikbaar te maken. Met name mensen met grote vingers hebben hier last van.
Bekijk resultaten
Detail wireframe
2. Tags
Prijsindicatie
Behoudend Experimenteel Hebben Doen Gepersonaliseerd Binnen 24 uur Duurzaam Door de brievenbus
Bron: 20/01/2014. milledoni.nl
Bron: 20/01/2014.http://inspired -ui.com/tagged/app_opentable
Ilayda Kucukosmanoglu - 500655851 - v107 - M&P - V1
Lo-fi schets 1.0
Lo-fi schets 2.0
14
Flowcharts Flowchart “Start en keuze geslacht”
Gebruiker kiest “vrouw”
1.0 Gebruiker klikt op button “vind een kado voor mij!”
Eerst volgende filter pagina wordt getoond
Gebruiker kiest “stel”
2.0 Gebruiker klikt op invoerveld achter “een”
2.1 Ja
Ja
“vrouw”verschijnt in invoerveld
A Zoeken
“stel” verschijnt in invoerveld en “zij is” wordt vervangen voor “zij zijn”
A Zoeken
“jongen” verschijnt in invoerveld en “zij is” wordt vervangen voor “hij is”
A Zoeken
Nee
Gebruiker kiest “jongen”
Dropdown keuze menu wordt getoond
Ja
Nee
Gebruiker kiest “man”
Ja
“man”verschijnt in invoerveld en “zij is” wordt vervangen voor “hij is”
Nee
Ilayda Kucukosmanoglu - 500655851 - v107 - M&P - V1
A Zoeken
Gebruiker kiest “meisje”
Ja
“meisje”verschijnt in invoerveld en “zij is” verdwijnt
A Zoeken
Nee
15
Flowchart “leeftijd stel”
Flowchart “zoeken”
3.0 Gebruiker klikt op invoerveld achter “van”
A: Zoeken
Heeft gebruiker iets ingevuld?
Nee
Standaard kado suggesties worden getoond
Ja
resultaten worden bepaald op basis van ingevoerde gegevens
9.0 resultaten worden getoond
Dropdown keuze menu wordt getoond
Is geslacht “stel” gekozen?
Nee
A leeftijd man/vrouw
Ja
Is er een leeftijd ingevoerd?
Nee
Invoerveld geeft geen response
Nee
ingevoerde leeftijd veranderd in “16”
Ja 3.1
Is ingevoerde leeftijd 16 of groter?
A Zoeken
Ja
A Zoeken
Ilayda Kucukosmanoglu - 500655851 - v107 - M&P - V1
16
Flowchart “leeftijd man/vrouw” A leeftijd man/vrouw Is ingevoerde leeftijd 16 of groter?
3.0 Gebruiker klikt op invoerveld achter “van”
Nee
Ja
Is er een leeftijd ingevoerd?
Nee
Invoerveld geeft geen response
Ja 3.1
Ilayda Kucukosmanoglu - 500655851 - v107 - M&P - V1
Nee
A Zoeken
Ja
Dropdown keuzemenu wordt getoond man/vrouw ingevoerd?
man/vrouw ingevoerd?
Nee
man/vrouw veranderd in jongen/meisje
A Zoeken
man/vrouw veranderd in jongen/meisje
A Zoeken
Ja
A Zoeken
17
Flowchart “hij is/zij is/ze zijn”
Flowchart “het is voor”
4.0 Gebruiker klikt op invoerveld achter “zij is” “hij is” “ze zijn”
5.0 Gebruiker klikt op invoerveld achter “het is voor”
Dropdown keuze menu verschijnt
Dropdown keuze menu verschijnt
Heeft Nee gebruiker keuze gemaakt?
Heeft Nee gebruiker keuze gemaakt?
Ja 4.1
Ja 5.1
Flowchart “filter blok 2”
6.0 Gebruiker klikt op plusje achter “is”, “heeft”, “houdt van”, “wil graag” of “wil geen”
Dropdown keuze menu met tags verschijnt
Heeft Nee gebruiker keuze gemaakt?
Ja 6.1
A Zoeken
A Zoeken
A Zoeken
Heeft gebruiker nog een keuze gemaakt?
Nee
Ja
Ilayda Kucukosmanoglu - 500655851 - v107 - M&P - V1
18
Flowchart “prijsindicate”
Flowchart “tags soort kado” Gebruiker klikt op tag “behoudend”
Gebruiker klikt op tag “duurzaam”
Gebruiker klikt op tag “door de brievenbus”
7.0 Gebruiker klikt op invoerveld achter “prijs”
A Zoeken
A Zoeken
A Zoeken
Dropdown keuze menu verschijnt
Gebruiker klikt op tag “experimenteel”
8.0 Gebruiker klikt op tag “hebben”
Gebruiker klikt op tag “binnen 24 uur”
A Zoeken
A Zoeken
A Zoeken
Gebruiker klikt op tag “gepersonaliseerd”
Gebruiker klikt op tag “doen”
A Zoeken
A Zoeken
Heeft Nee gebruiker keuze gemaakt?
Ja 7.1
A Zoeken
Legenda Start/stop flow
Zichtbare output Verbinding
Splitsing Gebruikersinput
A
Flowchart verbinding Systeemproces
Ilayda Kucukosmanoglu - 500655851 - v107 - M&P - V1
19
