Models & Processes Ontwerpdocument Milledoni.nl op mobiel. Laura Mentink V

Transcriptie

1 Models & Processes Ontwerpdocument Milledoni.nl op mobiel Laura Mentink V

2 Debriefing Aanleiding Milledoni.nl op mobiel, dat is de werktitel van dit project. Milledoni is een website, waar je heel gericht cadeau s kan zoeken voor iemand waar je een cadeau aan wil geven. Milledoni struint elke dag het web af, op zoek naar nog betere en originele cadeau s. Milledoni wordt steeds bekender en zij willen daarom een goed werkende mobiele website. In deze debriefing staat wat de opdracht precies inhoudt. De opdracht Voor Milledoni zal er een mobiele website ontworpen worden, door middel van patterns en ontwerpkeuzes en de keuzes hiervan zullen goed onderbouwd worden. Eerst zal de huidige mobiele website bekeken worden en door middel van vragen aan een niet CMD er zullen er ontwerpproblemen naar voren komen, die opgelost gaan worden. Het gaat puur om het vinden van een cadeau, andere delen van de mobiele website zullen niet aangepakt worden. 2

3 Inhoudsopgave Toelichting ontwerpkeuzes Home pag. 4 - Lo-fi s ontwerpkeuze Home pag. 5 - Detail Wireframe ontwerpkeuze Home pag. 5 Toelichting ontwerpkeuzes zoekknop pag. 6 - Lo-fi s ontwerpkeuze Zoekknop pag. 7 - Lo-fi s ontwerpkeuze Zoekknop pag. 7 Toelichting ontwerpkeuzes Filter Blok 3 pag. 8 - Lo-fi s ontwerpkeuze Filter Blok 3 pag. 9 - Lo-fi s ontwerpkeuze Filter Blok 3 pag. 9 Toelichting ontwerpkeuzes Tweede Blok pag Lo-fi s ontwerpkeuze Tweede Blok pag Lo-fi s ontwerpkeuze Tweede Blok pag. 11 Toelichting ontwerpkeuzes Blokjes pag Lo-fi s ontwerpkeuze Blokjes pag Lo-fi s ontwerpkeuze Blokjes pag. 13 Toelichting ontwerpkeuzes Resultaten pag Lo-fi s ontwerpkeuze Resultaten pag Lo-fi s ontwerpkeuze Resultaten pag. 15 Wireflow pag. 16 Flowchart pag. 17 3

4 Toelichting ontwerpkeuzes Home Gekozen pattern Vraag Wat denk je dat je op deze pagina kan doen? Wat voor een cadeau kan je hier kopen? Antwoord Ik denk dat je hier een cadeau kan zoeken voor een vrouw of meisje en verschillende zoekcriteria kan opgeven. Probleem Voor de gebruiker is het niet duidelijk dat je op Milledoni een cadeau kan kopen voor iedereen, maar lijkt het erop dat je alleen een cadeau kan kopen voor een vrouw/meisje. Het is dus niet meteen duidelijk wat je op deze pagina kan. Gevonden patterns Toelichting Pattern 2 is gekozen als beste oplossing. De gebruiker hoeft dan niet door een walkthrough heen en ziet in één oog opslag wat er op de pagina gedaan kan worden. Voor Milledoni zou dan in plaats van de camera een cadeau neergezet kunnen worden en de tekst vind hier jouw perfecte cadeau!. Net als op deze pagina, zou Milledoni ook korte steekwoorden kunnen neerzetten om de hoofdlijnen wat je hier kan doen weer te geven. Pattern 2: Home Bron: le-patterns.com/home Pattern 1: Walkthrough Bron: mobile-patterns.com/walkthrough 4

5 Lo-fi s ontwerpkeuze Home Detail Wireframe ontwerpkeuze Home Keuze Lo-fi De rechter lo-fi is het uiteindelijk geworden, omdat deze duidelijk en overzichtelijk is. Hierbij wordt het belangrijkste onderdeel ook rechts weergegeven. En dat is vaak waar de gebruiker kijkt. Dit zie je in verschillende apps terugkomen. 5

6 Toelichting ontwerpkeuzes Zoekknop Gekozen pattern Vraag Waar staat de zoekknop, vind je dit logisch? Antwoord Ik kan de zoekknop in eerste instantie niet vinden. Wanneer je wat filters hebt ingevuld, verschijnt opeens de zoekknop. Maar deze verschijnt ergens middenin een blok. Dit is niet logisch, want je verwacht dat deze altijd zichtbaar is, maar dat is niet het geval. Probleem De gebruiker ziet niet direct waar hij kan zoeken en vind het onlogisch dat de zoekknop onder 1 blok staat en niet onderaan deze blokken of bovenaan. Gevonden patterns Toelichting Pattern 2 is de beste oplossing, hier is de zoekknop altijd zichtbaar bovenaan. Het is dus voor de gebruiker erg duidelijk, ook omdat deze knop in een duidelijke kleur is weergegeven. Bij pattern 1 is de zoekknop alleen zichtbaar wanneer het toetsenbord is opengeklapt. Dat is voor de gebruiker nog niet heel duidelijk. Pattern 1: Search Bron: le-patterns.com/search Pattern 2: Search Bron: com/tagged/search 6

7 Lo-fi s ontwerpkeuze Zoekknop Detail Wireframe ontwerpkeuze Home Keuze Lo-fi De onderste lo-fi is het uiteindelijk geworden, omdat hier het belangrijkste is dat je gaat zoeken. Deze staat daarom rechtsbovenin. In de app zullen alle belangrijkste keuzes voor de gebruiker rechtsbovenin staan. Hier wordt als eerst naar gekeken. 7

8 Toelichting ontwerpkeuzes Filter Blok 3 Gekozen pattern Vraag Wat vind je van de balkjes met bolletjes die je moet verschuiven in het 3e blok? Snap je wat er gebeurd wanneer je deze verschuift? Antwoord Ik vind de balkjes die je moet schuiven nutteloos. Ik snap niet wat er gebeurd als je het iets meer schuift naar behoudend (linkerkant) en wat er gebeurd wanneer je het rondje helemaal verschuift naar links. Probleem De structuur van het derde blok is erg onduidelijk voor de gebruiker. Hij snapt niet wat hij moet doen bij de balkjes met het rondje en de checkboxes zijn erg klein voor op mobiel. Gevonden patterns Toelichting Ik heb gekozen voor pattern 1, omdat hier wel duidelijk wordt aangegeven wat de keuze is van de gebruiker. Het is voor de gebruiker onduidelijk wanneer hij moet aangeven of hij een beetje experimenteel is of een beetje behoudend. Dit schept verwarring. Dit is een duidelijke en heldere oplossing. Pattern 1: Settings Pattern 2: Settings Bron: categories/18-settings?page=2 8

9 Lo-fi s ontwerpkeuze Filter blok 3 Detail Wireframe ontwerpkeuze Filter blok 3 Keuze Lo-fi De onderste lo-fi is het uiteindelijk geworden, omdat dit een duidelijker beeld geeft waar het antwoord bij hoort. Ook voor de filter-opties die eronder komen, is het makkelijker als de tekst boven de rondjes staat. Anders komt er teveel tekst onder elkaar en dat is verwarrend. Op deze manier wordt het steeds onderbroken door een keuzemogelijkheid. 9

10 Toelichting ontwerpkeuzes Tweede Blok Gekozen pattern Vraag Wat denk je dat er gebeurt als je op een plusje drukt onder het kopje Zij? Antwoord Dat de zin afgemaakt wordt. Dus dan wordt het Zij heeft een en dan gaat het verder naar het volgende blok. Wanneer ik er op druk dan verschijnen de antwoorden opeens naast het scherm. Dit is al helemaal onduidelijk. Probleem Het is voor de gebruiker totaal niet duidelijk wat de plusjes achter de woorden bij het kopje Zij doen. Gevonden patterns Toelichting Pattern 1 is de beste oplossing, omdat de gebruiker hier zelf de opties kan aanvinken. Wanneer de opties zijn aangevinkt, zullen deze (in dit geval) rood kleuren, zodat het duidelijk is voor de gebruiker wat aangevinkt staat en wat niet. De filters kunnen ook ieder voor zich ingeklapt worden, zodat wanneer er veel antwoorden zijn, dit niet een heel lang blok wordt. Pattern 1: Checks Bron: elyui.com/search Pattern 2: Settings Bron: bile-patterns.com/settings 10

11 Lo-fi s ontwerpkeuze Tweede Blok Detail Wireframe ontwerpkeuze Tweede Blok Toelichting Pattern 1 is de beste oplossing, omdat de gebruiker hier direct al opties ziet, voordat de antwoorden worden opengeklapt. Dat zorgt ervoor dat de vraagstelling direct duidelijk is voor de gebruiker. Wanneer zijn keuze er niet tussenstaat kan hij de antwoorden openklappen en heeft hij meer keuzes. 11

12 Toelichting ontwerpkeuzes Blokjes Gekozen pattern Vraag Wat gebeurt er wanneer je op een vakje drukt in het eerste blok en in het derde blok achter prijsindicatie? Antwoord Ik denk dat je dan kan typen en het antwoord zelf in moet vullen. Prijsindicatie vind ik ook erg belangrijk, ik snap niet dat dit in het laatste blok pas zichtbaar is. Probleem Het is voor de gebruiker niet duidelijk dat hier een dropdown menu komt. Gevonden patterns Toelichting Pattern 1 is de beste oplossing, omdat hier verschillende filter opties worden weergegeven. Voor Milledoni zou de price range erg handig zijn voor de prijsbepaling in blok 3. Voor de leeftijd kan hetzelfde worden gebruikt als bij guests. De dropdown menu s kunnen ingezet worden, net zoals de data hier wordt aangegeven. Ook hier verschijnt een dropdown menu. Dit zal nog wel beter worden aangegeven door middel van een pijltje. Pattern 1: Search Bron: rest.com/pin/ / Pattern 2: Search Bron: le-patterns.com/search 12

13 Lo-fi s ontwerpkeuze Blokjes Detail Wireframe ontwerpkeuze Blokjes Keuze Lo-fi De linker lo-fi is mijn uiteindelijke keuze, omdat deze mooi compact is en overzichtelijk. De rechter lo-fi is minder overzichterlijk doordat er tussenruimtes zijn en meer dropdown menu s. Bij de linker is de bovenste dropdown weggehaald, omdat er weinig keus was en dit is gewoon op een regel neergezet. Voor het 3e blok: 13

14 Toelichting ontwerpkeuze Resultaten Gekozen pattern Vraag Wat verwacht je als op bekijk de resultaten drukt? Antwoord Ik verwacht dat de resultaten op ooghoogte komen, op dezelfde hoogte waar de filter staat, nadat je op zoeken hebt gedrukt. Dus eigenlijk een soort van nieuwe pagina. Ook vind ik het onhandig dat de resultaten zo groot worden weergegeven, dan moet je ontzettend veel naar beneden scrollen. Probleem De gebruiker heeft niet direct in de gaten waar de resultaten te zien zijn en vind het onhandig dat je zoveel moet scrollen om alle resultaten te bekijken. Gevonden patterns Toelichting Pattern 1 is de beste oplossing, omdat je hier de resultaten in viervoud ziet. Daarnaast staat de prijs er duidelijk aangegeven en de titel van het product eronder. Ook is de zoekbalk nog zichtbaar, wanneer de resultaten gevonden zijn. En onderaan is deze keuze er ook nog, zodat er opnieuw gefilterd kan worden. Pattern 2: Search Bron: le-patterns.com/search Pattern 1: Etsy Bron: bipost/ /detail-on-etsy 14

15 Lo-fi s ontwerpkeuze Resultaten Detail Wireframe ontwerpkeuze Resultaten Keuze Lo-fi De linker lo-fi is mijn uiteindelijke keuze, omdat gebruikers visueel ingesteld zijn. Zij zullen eerst de foto willen bekijken en wanneer ze dit interessant vinden, zullen ze de titel lezen. Of ze klikken direct op de foto. Daarom moet de titel onderaan het plaatje staan (mindere prioriteit). 15

16 Wireflow 1.0 Home 2.0 Blok Blok Blok Resultaten 2.1Dropdown Mijn relatie tot hen 2.1Dropdown Gelegenheid 3.1Dropdown is 16

17 Flowchart 17