DESIGN PATTERNS AVV 2 Mental model & User Story
Naam Omar Vasquez Jesus Studentnummer 500 704 100 Klas DMCI V1-11 Docent H.E.M. van Vugt Vak Design Patterns Opdracht AVV 2 Versie 0.2 Datum 17-9-2015
Inhoudsopgave Behavioural design patterns 3 Passende oplossingen BVA mobiele site 3 Gekozen oplossing BVA mobiele site 4 Structural design patterns 5 Passende oplossingen BVA mobiele site 5 Gekozen oplossing BVA mobiele site 6 Bijlage 7
Feedback formulier Feedback
Aanpassing herkansing
Feedback van
Structural pattern Pattern-1 Yelp en Facebook lijken erg veel op elkaar, ze voelen een beetje als dezelfde pattern.
Er is wel een verschil tussen de Yelp en de Facebook pattern, de iconen van Facebook geven de gebruiker feedback. De iconen in de navigatie van Yelp doen dit niet. Het onderscheidt tussen welke Lo-Fi schets gekozen wordt voor het uiteindelijke ontwerp is duidelijk gemaakt, door een kop bij de tekst. Achtergrond is aangepast. Er is meer rust in het document en het is beter leesbaar.
Simon de Vries Dennis Spierenburg
Schetsen zijn duidelijke variaties, onderbouwing voor schets keuzes kan misschien beter (het is niet duidelijk welke schets gekozen is). Achtergrond is erg mooi maar hindert soms bij het lezen.
Simon de Vries
Dennis Spierenburg
Probleemstelling en oplossing sluiten heel goed op elkaar aan.
Simon de Vries
Document ziet er netjes en professioneel uit, enkelzijdig is slim want dat geeft het voldoende rust.
Simon de Vries Dennis Spierenburg
1e user story: beschrijf slechts 1 probleem en pas daar de patterns op aan.
User story is aangepast en er wordt slecht 1 probleem beschreven in de probleemomschrijving. Patterns zijn aangepast.
Harm Vugt
User story: Als gebruiker, wil ik gelijk door de veilingen kunnen zoeken, zodat ik niet mis grijp op een mogelijk bod.
Huidige situatie
Interview Kan je zien waar je naar veilingen moet zoeken? Niet direct, maar na het menu te openen zag ik het. Vind je dat de zoek optie op de juiste plek staat? Ik vind van niet meestal staat deze rechts of links boven aan de pagina. Wat zou je verbeteren om snel een veiling te vinden? De zoekknop moet direct zichtbaar zijn.
Probleemomschrijving De gebruiker wilt snel naar veilingen kunnen zoeken, zodat hij/zij mogelijke veilingen niet mist en optijd kan bieden. Het huidige zoekmenu zit een beetje verstopt en is voor de gebruiker niet direct zichtbaar ook is er geen feedback vanaf de website zelf zoals: meest gezocht, trending topics etc. De zoekfunctie moet meer naar voren worden gebracht en de gebruiker moet snel een efficiënt kunnen zoeken naar veilingen en topics op de website.
Behavioural Patterns AVV 2
Passende oplossingen - Behavioural patterns Pattern 1 - Wildcard search
Pattern 2 - Rdio search
Pattern 3 - Etsy search
Tijdens het zoeken geeft het zoek scherm twee andere opties aan: jouw recent gezochte topics en trending zoek topics. Met dit menu ziet de gebruiker direct want er trending is een kan die op snelle manier terug naar topics die recent bezocht zijn door hem. Dit bespaart de gebruiker veel tijd en hoeft de gebruiker minder te onthouden.
Naast de zoekoptie wordt het voor de gebruiker makkelijker gemaakt door het zoeken op te breken in verschillende secties. Zo kan de gebruiker zonder precies te weten wat die zoekt zijn topic toch vinden en bespaart die tijd als die niet weet in welke categorie zijn zoek topic zich bevindt.
Het zoeken is bij Etsy onderverdeeld in categorieën en onderwerpen de zoekopties zijn dus logisch onderverdeeld waardoor de gebruiker gelijk kan zien binnen welke categorieën en onderwerpen hij kan zoeken. Voor de BVA zou dit handig kunnen zijn voor het onderverdelen van de vele producten die geveild worden. Bijvoorbeeld categorieën als: elektronica, kantoor, thuis etc.
Gekozen pattern: is 1 - wildcard search
Deze pattern biedt de beste oplossing, ten eerste is voor de gebruiker op een snelle en overzichtelijke manier te zien wat zijn recente zoek topics zijn. Voor een mobiele site als de BVA-auctions is dit erg handig voor de gebruikers en de context waarin de site bezocht wordt sluit hierbij aan. De gebruiker zal waarschijnlijk onderweg zijn of op een gehaaste manier de site bezoeken. Als gebruiker verwacht je dus snelle response en zo min mogelijk input. Naast het recent gezocht ziet de gebruiker ook welke zoek topics trending zijn, zo kan je snel naar trending veilingen gaan zo dat je hier op een snelle manier op kunt bieden. Zonder eerst alle veilingen te hebben gezien om vervolgens degene die trending zijn er uit te moeten vissen. Kortom deze zoek pattern biedt de gebruiker feedback, overzicht en snelheid aan. 17 september 2015
Versie: 0.2
Ontwerper: Omar Vasquez Jesus
Studentnummer: 500 704 100
3
User story: Als gebruiker, wil ik gelijk door de veilingen kunnen zoeken, zodat ik tijd bespaar en zo niet mis grijp op een mogelijk bod.
Gekozen oplossing Het zoeken wordt voor de gebruiker makkelijk gemaakt door het zoeken te verdelen in categorieĂŤn. Vooral voor veiling sites is dit handig zodat gebruikers snel kunnen zoeken.
Nieuw ontwerp Het zoekvlak is aangepast op het gedrag van de gebruiker. De meest recent bezochte topics zijn direct zichtbaar en veel gezochte topics zijn op deze manier ook makkelijk te zien.
Notities 1. Hamburger menu, via hier kan de gebruiker de verschillende menu’s keuzes zien en via hier navigeren.
1 2 3
4
2. Zoekbalk de gebruiker kan direct naar veilingen zoeken zonder eerst via het menu te navigeren. 3. De meest recent gezochte topics van de gebruiker worden hier getoond. 4. De meest trending en meest gezochte onderwerpen worden hier getoond. Op deze manier kan de gebruiker op een snelle manier tranding onderwerpen zien en er heen gaan.
oplossing Lo-Fi schets 1
oplossing Lo-Fi schets 2
Gekozen variant - Lo-Fi schets 2 Dit variant is het beste omdat het overzichtelijk is voor de gebruiker, en de gebruiker op een snelle en efficiĂŤnte manier bepaalde onderwerpen kan doorzoeken. De gebruiker wordt ook geholpen door de veel gezochte onderwerpen gelijk te laten zien, dit kan op een veiling site veel tijd schelen.
Behavioural Patterns AVV 2
17 september 2015
Ontwerp Hi-Fi Versie: 0.2
Ontwerper: Omar Vasquez Jesus
Studentnummer: 500 704 100
4
User story: Als gebruiker, wil ik het menu van de veilingen gelijk en overzichtelijk kunnen zien, zodat ik op en snelle en overzichtelijke manier tussen menu’s kan wisselen.
Huidige situatie
Interview Staan de menu’s die je het vaakst gebruikt op een goede plek? Nee eigenlijk niet, menu’s zoals: uitgelicht, zoeken, gesloten veilingen en mijn kavels staan niet op een handige plek. Kan je gemakkelijk en snel tussen menu’s wisselen? Het gaat wel maar gemakkelijk is anders, het liefst naast elkaar onder in het scherm zoals bij de meeste applicaties.
Probleemomschrijving Het optie menu van de veilingen is niet gelijk zichtbaar, hierdoor is het voor nieuwe gebruikers en huidige gebruikers hinderlijk en tijdrovend om tussen de verschillende menu’s te wisselen. De navigatie is niet geheel gebruiksvriendelijk en past niet bij de context van de site. De menu’s en opties die door de gemiddelde gebruiker vaak gebruikt worden, deze moeten dus duidelijk te vinden zijn en je moet snel tussen menu’s kunnen wisselen.
Structural Patterns AVV 2
Passende oplossingen - Structural patterns Pattern 1 - Yelp navigation
Pattern 2 - Facebook navigation Pattern 3 - Evernote navigation
Het menu is hier heel duidelijk weergegeven bij binnenkomst kan de gebruiker direct zien waar die heen kan. Door de iconen die gebruikt worden is het snel te zien naar welk menu je heen wilt navigeren. Dit scheelt de gebruiker tijd en kan die in situaties waar die niet veel aandacht aan ze scherm kan geven toch het gewenste menu vinden zonder al te veel moeite.
Bij Facebook is de navigatie tussen de verschillende menu’s erg visueel en duidelijk vorm gegeven. De gebruiker ziet niet alleen wat de verschillende menu’s zijn, maar doormiddel van feedback kan die snelle en belangrijke informatie al van te voren zien zonder überhaupt naar het menu te zijn gegaan. Als je onderweg bent of haast hebt is dit erg gebruiksvriendelijk.
De navigatie op evernote is op een tablad concept gebasserd je gaat doro de menu’s heen als tabbladen. Op deze manier zijn de verschillende menu’s direct zichtbaar en hou je overzicht. Beginnende gebruikers kunnen op deze manier bepaalde menu’s snel vinden.
Gekozen pattern: is 1 - Yelp navigation Duidelijkheid, overzicht, herkenbaarheid en rekening houden met de context en gebruiker, dit zijn een van de onderwerpen waar de navigatie en indeling van Yelp hoog in scoort. Het lijkt erg veel op de navigatie van Facebook maar is op een kleine aantal dingen na beter voor de BVA site. Het onderste menu is voor de snelle bediening en is een erg herkenbaar patroon voor mobiele gebruikers. Ook is doormiddel van iconen duidelijk gemaakt wat de verschillende menu’s voorstellen. Deze pattern is overzichtelijk houdt rekening met zowel gebruiker als context en is zeker geschikt voor de BVA site.
17 september 2015
Versie: 0.2
Ontwerper: Omar Vasquez Jesus
Studentnummer: 500 704 100
5
User story: Als gebruiker, wil ik het menu van de veilingen gelijk en overzichtelijk kunnen zien, zodat ik op en snelle en overzichtelijke manier tussen menu’s kan wisselen.
Gekozen oplossing De gebruiker kan nu direct bij het openen van de mobiele website zien wat de vershillende menu’s zijn en kan die op een snelle en duidelijke manier naar het gewenste menu toe gaan.
Nieuw ontwerp Hier is het hamburger menu er in gehouden voor instellingen, daarnaast is de zoekbalk gelijk bovenaan te zien zodat de gebruiker snel kan zoeken. Navigeren door de menu’s kan erg snel doormiddel van het overzicht en de snelkeuze menu onderin het scherm.
1
2 3
Notities 1. Via het hamburger menu kan de gebruiker naar de instellingen gaan. 2. De zoekbalk is altijd zichtbaar in het bovenste menu de gebruiker kan nu altijd zoeken naar veilingen of bepaalde onderwerpen, zonder door het menu te moeten navigeren. Dit scheelt de gebruiker veel tijd. 3. Dit is het navigatie menu doormiddel van iconen is het nu mogelijk op een makkelijke en snelle manier door het menu te navigeren. 4. Snelmenu voor de meest gebruikte opties.
oplossing Lo-Fi schets 3
4
oplossing Lo-Fi schets 4
Gekozen variant - Lo-Fi schets 4 Dit ontwerp biedt de meeste opties aan de gebruiker zonder hem/haar te hinderen met te veel visueel geweld. De gebruiker kan bij het openen van de app vanaf de homepage overal heen zonder al te veel moeite. Het snel menu onderin biedt de mogelijkheid om veel gebruikte opties altijd bij de hand te hebben, op deze manier wint de gebruiker veel bruikbare tijd en is het menu overzichtelijk te zien.
Structural Patterns AVV 2
17 september 2015
Ontwerp Hi-Fi Versie: 0.2
Ontwerper: Omar Vasquez Jesus
Studentnummer: 500 704 100
6
Design Patterns AVV 2
17 september 2015
Versie: 0.2
Ontwerper: Omar Vasquez Jesus
Studentnummer: 500 704 100
7
Naam Omar Vasquez Jesus Studentnummer 500 704 100 Klas DMCI V1-11 Docent H.E.M. van Vugt Vak Design Patterns Opdracht AVV 2 Versie 0.2 Datum 17-9-2015