Student: Ilayda Kucukosmanoglu Klas: V1-07 Docent: Koop Reynders Models & Processes Datum: Versie: 30 januari o

Transcriptie

1 Student: Ilayda Kucukosmanoglu Klas: V1-07 Docent: Vak: Koop Reynders Models & Processes Datum: Versie: 30 januari o

2 Inhoudsopgave Debriefing blz. 3 Wireflow blz. 4 Mental Model blz. 9 Flowcharts blz. 15 Ilayda Kucukosmanoglu v107 - M&P - V1 2

3 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? 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: helpt je op weg naar net dat cadeau dat vertelt wat je wilt vertellen. Gedreven door een passie voor gepaste, passende cadeaus, struint dagelijks het web af naar de betere cadeaus. Daarbij geholpen door de even gepassioneerde community! Zo kun je op 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 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 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/ ogle.com/document/d/1shs0pzl_sdnxoy6 G1B-avQe6-JnCTknG1-uHfpDf8w/edit Ilayda Kucukosmanoglu v107 - M&P - V1 3

4 Wireflow Een vrouw Een vrouw Een vrouw vindt een passend kado voor hem, haar, hen, jong en oud Vind een kado voor mij! 25 mijn zus Het is voor haar verjaardag ar 25 mijn zus Het is voor haar verjaardag ar Kies 25 mijn zus Het is voor haar verjaardag ar 1.0 Gebruiker klikt op button vind een kado voor mij 2.0 Gebruiker klikt op invoerveld achter een 2.1 Gebruiker kiest vrouw 3.0 Gebruiker klikt op invoerveld achter van Ilayda Kucukosmanoglu v107 - M&P - V1 4

5 Een vrouw Een vrouw Een vrouw 20 ar Een vrouw 25 ar 20 ar mijn zus 20 ar mijn zus Kies Het is voor haar verjaardag mijn zus Het is voor haar verjaardag Het is voor haar verjaardag Kies een vriendin Het is voor haar verjaardag 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 v107 - M&P - V1 5

6 Een vrouw 20 Het is voor een vriendin haar verjaardag ar Kies Een vrouw 20 Het is voor een vriendin Kerst ar Haar eigenschappen en interesses: Zij heeft Zij houdt van Zij wil graag Zij wil geen Haar eigenschappen en interesses: Zij heeft Zij houdt van _ Films Dans Lezen Dieren Eten Retro Zij wil graag Zij wil geen 5.1 Gebruiker kiest kerst Gebruiker klikt op button volgende 6,0 Gebruiker klikt op plusje achter zij houdt van 6,1 Gebruiker klikt op tag films Ilayda Kucukosmanoglu v107 - M&P - V1 6

7 Haar eigenschappen en interesses: Haar eigenschappen en interesses: Prijs Soort kado: Prijs Soort kado: Zij heeft Zij heeft Behoudend Duurzaam Behoudend Duurzaam Zij houdt van _ Zij houdt van Films Experimenteel Hebben Experimenteel Hebben Films Dans Lezen Dieren Eten Retro Zij wil graag Zij wil geen Gepersonaliseerd Door de brievenbus Doen Gepersonaliseerd Door de brievenbus Doen Kies Zij wil graag Binnen 24 uur Binnen 24 uur Zij wil geen Bekijk resultaten Bekijk resultaten Gebruiker klikt op minnetje Gebruiker klikt op button volgende 7.0 Gebruiker klikt op invoerveld achter prijs 7,1 Gebruiker kiest rond 30 Ilayda Kucukosmanoglu v107 - M&P - V1 7

8 Soort kado: Soort kado: Opnieuw zoeken Prijs Rond 30 Behoudend Duurzaam Prijs Rond 30 Behoudend Duurzaam Vintage stropdas oldtimer ford 9,95 Experimenteel Hebben Experimenteel Hebben Gepersonaliseerd Door de brievenbus Doen Gepersonaliseerd Door de brievenbus Doen Geitenwollen sokken 25,00 Binnen 24 uur Bekijk resultaten Binnen 24 uur Bekijk resultaten Klassieke heren trui van merino wol Legenda een keer tap Gebruikersactie 8.0 Gebruiker klilt op tag hebben Gebruiker klikt op button bekijk resultaten 9.0 Resultaten worden getoond op de kado pagina Ilayda Kucukosmanoglu v107 - M&P - V1 8

9 Q: : Mental Model - vraag 1 Wat verwacht je op deze pagina te kunnen doen? Ik verwacht hier kado s te kunnen zoeken voor vrouwen. 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. Schetsen vindt een passend kado voor hem, haar, hen, jong en oud Vind een kado voor mij! Detail wireframe 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. nders heeft de gebruiker geen navigatie. 1. Launch screen 2. Walktrough Bron: 24/01/ com/p/306 Bron: 24/01/ com/p/306 Lo-fi schets 1.0 Lo-fi schets 2.0 Ilayda Kucukosmanoglu v107 - M&P - V1 9

10 Mental Model - vraag 2 Q: Wat zijn de grijze rechthoeken en wat gebeurt er als je er op klikt? : De grijze rechthoeken zijn invoervelden. ls 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. Schetsen Een vrouw 25 mijn zus Het is voor haar verjaardag ar 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. Detail wireframe 1. Dropdown 2. Placeholder Bron: 24/01/2014.milledoni.nl/ Bron: 24/01/ ui.com/tagged/design Lo-fi schets 1.0 Lo-fi schets 2.0 Ilayda Kucukosmanoglu v107 - M&P - V1 10

11 Q: : Mental Model - vraag 3 Wat verwacht je te zien nadat je het eerste blok hebt ingevuld 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. llereerst 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. Schetsen Een vrouw 25 mijn zus Het is voor haar verjaardag Detail wireframe ar Waarom? 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. 1. Stukje in beeld 2. Progress bar Bron: 24/01/ mobile-patterns.com/feeds Bron: 24/01/ mobile-patterns.com/walkthroughs Lo-fi schets 1.0 Lo-fi schets 2.0 Ilayda Kucukosmanoglu v107 - M&P - V1 11

12 Q: : Mental Model - vraag 4 Hoe kan je opnieuw zoeken? Door de pagina te refreshen. 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. 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. Schetsen Opnieuw zoeken Vintage stropdas oldtimer ford 9,95 Geitenwollen sokken 25,00 Klassieke heren trui van merino wol Detail wireframe 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 1. Opvallend 2. Bij resultaten Begin opnieuw Begin opnieuw Bron: 24/01/2014.milledoni.nl/ Bron: 24/01/2014.milledoni.nl/ Lo-fi schets 1.0 Lo-fi schets 2.0 Ilayda Kucukosmanoglu v107 - M&P - V1 12

13 Mental Model - vraag 5 Q: Wat verwacht je als je op het plusje klikt? : 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. Schetsen Haar eigenschappen en interesses: Zij heeft Zij houdt van _ Films Dans Lezen Dieren Eten Retro Zij wil graag Zij wil geen Detail wireframe 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. 1. Dropdown tags 2. Picker Bron: 20/01/ ui.com/tagged/app_opentable Bron: 24/01/ app Lo-fi schets 1.0 Lo-fi schets 2.0 Ilayda Kucukosmanoglu v107 - M&P - V1 13

14 Mental Model - vraag 6 Q: Wat verwacht je te kunnen doen met de rondjes op de strepen? : 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. Schetsen Soort kado: Prijs Behoudend Experimenteel Duurzaam Hebben Gepersonaliseerd Doen Door de brievenbus Binnen 24 uur Bekijk resultaten Detail wireframe 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. 1. Checkboxes 2. Tags Prijsindicatie Behoudend Experimenteel Hebben Doen Gepersonaliseerd Binnen 24 uur Duurzaam Door de brievenbus Bron: 20/01/2014. milledoni.nl Bron: 20/01/ ui.com/tagged/app_opentable Lo-fi schets 1.0 Lo-fi schets 2.0 Ilayda Kucukosmanoglu v107 - M&P - V1 14

15 Flowcharts Flowchart Start en keuze geslacht 1.0 Gebruiker klikt op button vind een kado voor mij! Gebruiker kiest vrouw 2.1 vrouw verschijnt in invoerveld Eerst volgende filter pagina wordt getoond 2.0 Gebruiker klikt op invoerveld achter een Gebruiker kiest stel stel verschijnt in invoerveld en zij is wordt vervangen voor zij zijn Dropdown keuze menu wordt getoond Gebruiker kiest jongen jongen verschijnt in invoerveld en zij is wordt vervangen voor hij is Gebruiker kiest man man verschijnt in invoerveld en zij is wordt vervangen voor hij is Gebruiker kiest meisje meisje verschijnt in invoerveld en zij is verdwijnt Ilayda Kucukosmanoglu v107 - M&P - V1 15

16 Flowchart zoeken Flowchart leeftijd stel : 3.0 Gebruiker klikt op invoerveld achter van Heeft gebruiker iets ingevuld? Standaard kado suggesties worden getoond Dropdown keuze menu wordt getoond resultaten worden bepaald op basis van ingevoerde gegevens Is geslacht stel gekozen? leeftijd man/vrouw 9.0 resultaten worden getoond Is er een leeftijd ingevoerd? Invoerveld geeft geen response 3.1 Is ingevoerde leeftijd 16 of groter? ingevoerde leeftijd veranderd in 16 Ilayda Kucukosmanoglu v107 - M&P - V1 16

17 Flowchart leeftijd man/vrouw leeftijd man/vrouw 3.0 Gebruiker klikt op invoerveld achter van Is ingevoerde leeftijd 16 of groter? man/vrouw ingevoerd? Dropdown keuzemenu wordt getoond man/vrouw veranderd in jongen/meisje man/vrouw ingevoerd? man/vrouw veranderd in jongen/meisje Is er een leeftijd ingevoerd? Invoerveld geeft geen response 3.1 Ilayda Kucukosmanoglu v107 - M&P - V1 17

18 Flowchart hij is/zij is/ze zijn Flowchart het is voor Flowchart filter blok Gebruiker klikt op invoerveld achter zij is hij is ze zijn 5.0 Gebruiker klikt op invoerveld achter het is voor 6.0 Gebruiker klikt op plusje achter is, heeft, houdt van, wil graag of wil geen Dropdown keuze menu verschijnt Dropdown keuze menu verschijnt Dropdown keuze menu met tags verschijnt Heeft gebruiker keuze gemaakt? Heeft gebruiker keuze gemaakt? Heeft gebruiker keuze gemaakt? Heeft gebruiker nog een keuze gemaakt? Ilayda Kucukosmanoglu v107 - M&P - V1 18

19 Flowchart tags soort kado Flowchart prijsindicate 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 Dropdown keuze menu verschijnt Gebruiker klikt op tag experimenteel 8.0 Gebruiker klikt op tag hebben Gebruiker klikt op tag binnen 24 uur Heeft gebruiker keuze gemaakt? 7.1 Gebruiker klikt op tag gepersonaliseerd Gebruiker klikt op tag doen Legenda Start/stop flow Zichtbare output Splitsing Gebruikersinput Verbinding Flowchart verbinding Systeemproces Ilayda Kucukosmanoglu v107 - M&P - V1 19