Design Patterns AVV 2

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.1 Datum 13-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

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.

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 Op de mobiele site van de BVA-auctions is het zoeken naar de veilingen in het hamburger menu geplaatst. Hierdoor kan een eerste gebruiker niet gelijk zien waar die naar veilingen moet zoeken, of als een gebruiker snel iets wilt zoeken dan moet die eerst het menu openen om vervolgens te kunnen zoeken. Dit is een veiling site en het zoeken naar een veiling of kavel is dus een essentieel onderdeel aangezien veilingen aan een tijd zijn gebonden en bieden op een veiling of kavel tot op de laatste seconde kan.

Behavioural Patterns AVV 2

Passende oplossingen - Behavioural patterns Pattern 1 - Wildcard search

Pattern 2 - Rdio search

Pattern 3 - Google maps 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.

Tijdens het zoeken krijgt de gebruiker suggesties van mogelijke topics die beschikbaar zijn in de database.

De gebruiker bespaart tijd en hoeft zo geen specifieke topics te onthouden.

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.

13 september 2015

Versie: 0.1

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 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

13 september 2015

Ontwerp Hi-Fi Versie: 0.1

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.

13 september 2015

Versie: 0.1

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 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

13 september 2015

Ontwerp Hi-Fi Versie: 0.1

Ontwerper: Omar Vasquez Jesus

Studentnummer: 500 704 100

6

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.1 Datum 13-9-2015