Alexander Zeh Models & Processes september 2014 Oscar Trapman V1-06

1

Alexander Zeh | Models & Processes

500681085 | 21 september 2014 | Oscar Trapman | V1-06

2

Job Story 1

pagina 3

Job Story 2

pagina 6

Job Story 3

pagina 9

Job Story 4

pagina 12

Wireflow

pagina 16

In dit document is een ontwerp te vinden van een deel van de BVA web-app. Er zijn vier ontwerpen gemaakt en die zijn gebaseerd op de vier gegeven job stories. De ontwerpen zijn ontworpen voor de ingelogde staat op een web-app van BVA.

De opdracht bestond uit vier job stories waarbij elk een interview, 3 patterns, twee lo-fi schetsen en een detail schets horen. De site waarvoor alle ontwerpen zijn gemaakt is www.bva-auctions.com.



3

Als ik een zoekopdracht uitvoer, wil ik de resultaten kunnen zien, zodat ik een specifiek product kan vinden.

Wat verwacht je van de zoekresultaten als je een product ziet? Ik verwacht een soort lijst met daarin alle resultaten die iets te maken hebben met de gebruikte zoekterm. Net zoiets als bij bol.com etc. Kwamen je verwachtingen overeen met de huidige situatie? Het was een lijst, dat was voor mij wel duidelijk. Maar ik miste nog wat details over de producten. Wat vond je er niet goed aan? De zoekresultaten zijn nu heel erg algemeen, een filter zal wel handig zijn om wat duidelijkere resultaten te krijgen.

Hoe kan de gebruiker een filter gebruiken om specifieker te zoeken naar producten die in een overzichtelijk lijstoverzicht te vinden zijn?

Wat kan er dus beter? Een filter, hoeft niet eens zo uitgebreid te zijn, lijkt me wel handig.

Het probleem van de gebruiker is dat er een filter mist voor bij het zoeken. Dit is om de zoekresultaten wat te verkleinen.

Het probleem van de gebruiker is dat er een filter mist voor bij het zoeken. Dit is om de zoekresultaten wat te verkleinen. Een filter is er dus bij nodig. Ook moet de pagina goed overzichtelijk zijn zodat de gebruiker snel kan zien wat het product inhoudt.



4

Bol.com

Tweakers.net

Marktplaats

Uiteindelijke keuze

Een normale lijst met grote afbeeldingen en een grote prijsaanduiding wat het duidelijk maakt voor de gebruiker.

Kleine afbeeldingen met veel informatie over het product en een grote filter om specifieker te zoeken.

Tekst en afbeeldingen zijn ongeveer even groot. De informatie is duidelijk en overzichtelijk.

De uiteindelijke keuze is gevallen op de lijst van marktplaats. Deze heeft de beste verhoudingen tussen afbeeldingen en informatie.


De keuze voor filter is gevallen op die van Bol.com. Deze staat erg duidelijke bovenaan de pagina en heeft de juiste opties.


5

1. Detail lijst

2. Tegel lijst

Uiteindelijke ontwerp

Een normale lijst die op veel sites te vinden is. De kavels staan hierbij onder elkaar en er kan meer informatie bij staan.

Een tegel lijst met alle kavels. Er kunnen op deze manier meer kavels op de pagina staan, maar er past minder informatie per tegel.

De keuze is uiteindelijk gevallen op het eerste ontwerp. Deze lijst is overzichtelijk en er kan veel informatie naast de afbeelding staan.


Er is ook een filter toegevoegd die de prijs van de kavels filtert, waardoor er specifieker gezocht kan worden. 500681085 | 21 september 2014 | Oscar Trapman | V1-06

6

Als ik een specifiek product heb gevonden, wil ik alle details kunnen bekijken, zodat ik een keuze kan maken of dit product interessant voor mij is.

Wat verwacht je van de detailpagina van een product? Ik verwacht een grote afbeelding van het product, een duidelijke prijsaanduiding en duidelijke informatie over het product zelf. Kwamen je verwachtingen overeen met de huidige situatie? Het was wel aardig duidelijk en alle informatie stond er, maar het kan nog wel wat overzichtelijker. Het is ook slecht gemaakt dat ik naar een andere pagina wordt doorverwezen als ik op het plaatje kilk. Wat vond je er niet goed aan? De pagina was niet heel erg overzichtelijk en de afbeelding moet ook beter.

Hoe kan de gebruiker makkelijk een product bekijken, afbeeldingen meegerekent, op een overzichtelijke pagina zodat de gebruiker kan beslissen of dit product interessant is?

Wat kan er dus beter? Een meer overzichtelijke pagina met daarop een betere manier van

De pagina is voor de gebruiker niet heel erg overzichtelijk en er wordt doorverwezen naar een andere pagina voor de afbeeldingen.

De afbeeldingen moeten op dezelfde pagina te zien blijven als de informatie. Die informatie moet vervolgens overzichtelijk op de pagina worden geplaatst.



7

Bol.com

Tweakers.net

Marktplaats

Uiteindelijke keuze

Duidelijke titel, grote afbeelding en duidelijke prijsaanduiding. Alleen weinig informatie op het eerste gezicht.

Kleine afbeeldingen en weinig verdere informatie over het product. Alleen verschillende prijsaanduidingen per winkel.

Grote afbeelding en duidelijke titel. Er is ook extra informatie zichtbaar op de pagina.

De uiteindelijke keuze in gevallen op marktplaats. Er is een duidelijke titel, afbeelding en er is goede informatie om het voor de gebruiker duidelijker te maken.



8

1. Focus op bieden

2. Gerelateerde producten

Uiteindelijke ontwerp

Een detail pagina met een grote afbeelding en duidelijke informatie. Het bieden is erg duidelijk gemaakt voor dit ontwerp.

Bijna identiek aan het eerste ontwerp, maar dan met gerelateerde producten om de gebruiker andere producten aan te bevelen.

Er is gekozen voor het eerste ontwerp. Er is een carousel met afbeeldingen bovenaan de pagina met daaronder overzichtelijke informatie. Ook is er meer aandacht op het bieden in plaats van op gerelateerde producten.



9

Als ik een interessant kavel heb gevonden, wil ik het kunnen opslaan, zodat ik het makkelijk terug kan vinden en op de hoogte van start veiling wordt gehouden.

Hoe verwacht je hoe je een kavel opslaat om die te volgen? Ik verwacht een knop waarmee je de kavel opslaat. Een soort van ‘plaats op je verlanglijstje’. Die kavel wordt dan opgeslagen in een lijst waarmee je de kavel makkelijk kan volgen. Kwamen je verwachtingen overeen met de huidige situatie? Ja, het was voor mij erg duidelijk hoe ik de kavel op zou moeten slaan. Alleen is het niet duidelijk aangegeven dat de biedingen op de kavel van start zijn gegaan. Wat vond je er niet goed aan? Ik krijg niet te horen/ zien wanneer er een opgeslagen kavel wordt geopend. En je moet naar beneden scrollen om de opslaan knop te vinden, dat is irritant.

Hoe kan de gebruiker makkelijk een kavel toevoegen aan ‘favorieten’ zodat deze makkelijk terug te vinden is als deze geopend is?

Wat kan er dus beter? Een melding die voor mij aangeeft dat de kavel is gestart zodat ik mee kan bieden en de knop moet een betere plek krijgen

Er mist een duidelijke melding voor de gebruiker wanneer de kavel is gestart. Deze is wel terug te vinden in de lijst met opgeslagen kavels.

De knop om de kavel op te slaan moet duidelijk op de pagina staan. En er moet een duidelijke melding komen die overal op de site terecht kan komen als er een kavel wordt gestart zodat de gebruiker gelijk kan beginnen met meebieden. Alexander Zeh | Models & Processes


10

Tweakers.net

eBay

IMDb

Uiteindelijke keuze

Bovenaan de pagina staat een kleine button om het product op jouw verlanglijst te zetten. Er komt een melding dat het is opgeslagen.

Een middelgrote button bovenaan de pagina. Als de gebruiker erop klikt kom er een melding dat het is opgeslagen.

Linksboven aan de pagina staat een vierkante button. Deze wordt groen met een vink als de gebruiker deze aanklikt.

De keuze is uiteindelijk gevallen op de button van eBay. Deze is groter dan de andere twee, waardoor het ook duidelijker is voor de gebruiker.



11

Uiteindelijke ontwerp 1. Onderaan de pagina

2. Bovenaan de pagina

Een button onderaan de pagina zodat de gebruiker eerst de tekst leest voordat die toegevoegd kan worden aan ‘mijn kavels’.

Twee buttons bovenaan de pagina. Een met ‘toevoegen’, om de kavel toe te voegen. En een ‘niet meer zien’, om deze kavel niet meer te zien.


De keuze is gevallen op het eerste ontwerp met de button onderaan de pagina. Dan kan de gebruiker eerst de informatie lezen en dan bepalen of de kavel wordt opgeslagen. De gebruiker krijgt daarna een melding of de kavel opgeslagen moet worden. Als de gebruiker op opslaan drukt, komt het in de lijst rechts te staan.


12

Als de veiling open gaat, wil ik op het product kunnen bieden, zodat ik het kan gaan bezitten.

Hoe verwacht je dat je een bod moet uitbrengen? Ik verwacht een soort Marktplaats idee waarbij mensen een bod in kunnen typen en die vervolgens op de site kunnen laten zien. Kwamen je verwachtingen overeen met de huidige situatie? Mijn verwachtingen kwamen een beetje uit. Er is inderdaad een invulveld om het gewilde bedrag in te vullen, maar er is geen lijst te zien met hoogste biedingen. Alleen het hoogste bod wordt laten zien. Ook krijg ik geen melding als het bod te laag is zodat ik het bod aan kan passen Wat vond je er niet goed aan? Er was geen melding voor een te laag bod.

Hoe kan de gebruiker gemakkelijk een bod indienen en gelijk weten of het bod hoog genoeg is?

Wat kan er dus beter? Een beter systeem voor als de gebruiker een bod wilt plaatsen. Een melding vooraf zou perfect zijn. En het moet ook gewoon nog steeds simpel blijven.

Er is geen melding te zien als het door de gebruiker ingevulde bedrag te laag is om de hoogste bieder te overtreffen.

Er moet een melding komen, gelijk als de gebruiker het bedrag intypt, dat het bod te laag of goed is. Dit kan eventueel net die ene seconde zijn dat de kavel wordt verkocht aan de gebruiker. En het bieden moet simpel blijven zodat de gebruiker gelijk weet wat er moet gebeuren. Alexander Zeh | Models & Processes


13

eBay

Marktplaats

Speurders.nl

Uiteindelijke keuze

Duidelijke pagina met het huidige bod bovenaan. Er staat ook duidelijk bij hoe hoog het bod moet zijn.

Ongeveer hetzelfde als bij eBay. Maar hier is de ‘plaats bod’ button nog onklikbaar. Pas als de juiste hoogte van het bod is ingevuld, kan het bod worden geplaatst

Bovenaan de pagina nog wat het artikel inhoudt. Daaronder een form en er kan pas een bod geplaatst worden als het hoger is als het gevraagde bod.

De uiteindelijk keuze is gevallen op die van eBay. Deze heeft de simpelste interface en het is gelijk duidelijk voor de gebruiker wat er te doen staat. Ook wordt er laten zien hoe hoog het bod moet zijn, wat verkeerde biedingen uit het leven werkt.



14

1. Melding op homepage

2. Melding in kavellijst

De gebruiker krijgt een melding op de homepage als een opgeslagen kavel is geopend. Als de gebruiker op de melding klikt, wordt die bepaalde pagina geopend.

Er komt een melding op de pagina van de opgeslagen kavels of de veiling geopend, gewonnen of afgelopen is.



15

Uiteindelijke ontwerp De uiteindelijke keuze is gevallen op een combinatie van de twee schetsen. Het begint met een melding op de homepagina met dat er een kavel is geopend. Deze melding staat ook zo op de pagina met opgeslagen kavels van de gebruiker.


Als de gebruiker een bod wilt uitbrengen, wordt het gelijk gecontroleerd en als het bod geaccepteerd is, wordt de border groen. Als laatste komt er nog een melding met de vraag of de gebruiker zeker weet om het bod uit te brengen.


16

Zoeken

Detail

De gebruiker begint de zoekopdracht op de pagina met alle kavels. Daar zoekt de gebruiker op tafel en krijgt worden de zoekresultaten getoond.

Als de gebruiker op een kavel heeft geklikt, verschijnt de detailpagina. Op deze pagina kan de gebruiker de kavel opslaan als deze interessant is.


Detail Melding De gebruiker krijgt vervolgens een melding met de vraag of deze kavel echt opgeslagen moet worden.

Opgeslagen overzicht Vervolgens wordt de kavel opgeslagen in de lijst van opgeslagen kavels. Van hieruit kan de gebruiker zien of de kavel is gestart.


17

Melding homepage

Bieden

Melding bieden

De gebruiker krijgt ook een melding op de homepage als een kavel is geopend. Door hier op te klikken, opent de desbetreffende kavels.

Als de gebruiker vervolgens een bod wilt uitbrengen wordt het bod gelijk gecontroleerd en als het hoog is, goedgekeurd.

Als laatste krijgt de gebruiker nog een pop-up met de vraag of dit bod definitief is. Als de gebruiker op ‘plaats bod’ drukt, is het bod uitgebracht.



Alexander Zeh Models & Processes september 2014 Oscar Trapman V1-06

Recommend Documents