Eindopdracht, Design Patterns

7/25/2019 Eindopdracht, Design Patterns

1/16

Eindopdracht: BVA iPhone & Watch

10-10-15

Tyrone Wiranta

Hogeschool van AmsterdamDesign Patterns - Paul Geurts500715401

V1-08


2/16

Inhoudsopgave

Userstory 1: Product in detail bekijken 4

- Probleemomschrijving 4

- Gekozen oplossing 9

Userstory 2: Een kavel opslaan 10



Userstory 3: Een bericht ontvangen op de Apple Watch 12



Userstory 4: Een bod doen op een kavel 14



Screenow: 16

2Tyrone Wiranta | 500715401 | V1-08 | 10 november 2015


3/16

10 november 2015 | V1-08| 500715401 | Tyrone Wiranta 3

Korte inleiding:

Voor deze opdracht ben ik aan de slag gegaan om een pattern verslag te

maken voor een applicatie van BVA. De onderstaande informatie komt uit de

brieng van de eindopdracht:

BVA is een van de grootste online veilinghuizen van Nederland. Ze brengen inopdracht van banken, curatoren, leasemaatschappijen, industrie en het bedri-

jfsleven (on)roerende zaken ter veiling. https://www.bva-auctions.com/

Concept van BVA

BVA is toegespitst op de verkoop van grote partijen goederen van bedrijven

en instellingen. Vaak gaat het om de verkoop van de complete inventaris van

een failliet bedrijf. De kopers van de goederen zijn vrijwel altijd zakelijke klanten.

Meestal handelaren die (een deel van) de complete veiling van een failli et bedrijf

opkopen om per stuk door te verkopen. Het aankopen van producten voor

particulieren is minder aantrekkelijk aangezien een gekocht product opgehaald

moet worden bij het depot van BVA of bij het failliet bedrijf. De aankoop van

motorvoertuigen is voor particulieren complex, meestal zitten er geen papieren

of sleutels bij de motorvoertuigen. Daarnaast gaat de verkoop van kleinere

artikelen meestal niet per stuk maar per kavel.

Look & FeelBVA richt zich voornamelijk op de zakelijke gebruiker; de professionele hande-

laar of een bedrijf die genteresseerd is in de inboedel van een failliete concur-

rent. De stijl van het herontwerpen moet uitgaan van regelmatig terugkomende

klanten en een zakelijke tone-of-voice.

De applicatie in een notendop:

De applicatie is een combinatie van een iPhone app & een Apple Watch app.

Doormiddel van de iPhone app kan je gaan zoeken naar verschillende kavels

en op de Apple Watch kan je dan eventueel ook gaan bieden. Ik heb me

gehouden aan de Ui-guidelines en ook aan de Apple Watch guidelines. Ik heb

vooral aanpassingen gemaakt in de consistentie en gemak. Dat is ook wat ikheb ondervonden uit het interview. Hieronder zie je heel erg vlug hoe het er

ongeveer uit ziet.

Feedbacktabel

Feedback Aanpassing herkansing Feedback van

In een vogelvlucht laten zien, wat erin het document staat.

Ik heb een vogelvlucht gemaakt en indit document geplaatst.

Paul Geurts

Specifek scenario meegeven in het

interview.Ik heb een nieuw interviewafgenomen en scenarios gebruikt.

Paul Geurts

Afbrekingen in het nederlands. Ik heb zoveel mogelijk geprobeerd af-brekingen te vermijden, want ik kreeg

het niet voor elkaar.

Paul Geurts

Interview meer uitwerken. Ik heb het interview aangepast. Paul Geurts

Met de hand schetsen. Ik heb mn schetsen helemaal op-nieuw gemaakt.

Paul Geurts

Een Userstory opsplitsen in twee. Ik heb Userstory 1b gesplitst in b & c. Paul Geurts

Applewatch face userstory 3aanpassen.

Ik heb het eindontwerp en schetsenaangepast. Ook een ander patterngekozen.

Paul Geurts


4/16

Userstory 1a:De gebruiker kan op zijn iPhone een speciek product in detail bekijken, zodat hij weet of dit product interessant is.


Huidige situatie:

Pattern 1: BVA app Pattern 2: Snapchat Pattern 3:Youtube

Passende oplossingen: Structural patternsHieronder staan de mogelijke oplossingen.

Interview:Ik heb gevraagd aan mij respondent om opeen product te bieden, ik kwam daar meteenachter dat mijn respondent niet meteen bij deproductpagina terecht kon. Dit was dus al eenprobleem. Mijn respondent was gewendgeraakt aan de pijltjes. Die je ziet bijcategorien.

In de applicatie van BVA is er al eenicoontje voor feedforward gegeven. Dit krijg

je alleen te zien als je op een categorie wilklikken. BVA zou doormiddel van betere

consistentie dit ook moeten doen voor deproduct detailpagina.

Snapchat heeft dit anders opgelost, daaris er beschreven wat je moet gaan doen.

Als er de mogelijkheid is om te klikken danstaat er: Dubbelklik om te antwoorden.

Een handige tool voor mensen die(moeilijke) gestures niet onthouden.

Youtube maakt ook gebruik van een icoontje,dit icoontje dient ook meteen voor een menu.Wanneer je hier op klikt, kun je andere actiesuit gaan voeren.

Probleemomschrijving :Voor mensen die nooit met een smartphoneomgaan is feedforward een handig middel.Niet iedereen weet dat ze gewoon kunnenklikken in een lijstje.

Header, Logo, Info, Weergave

Header, Logo, Info, WeergaveBerichten, zoekbalk, camera Header, home, menu

Content

ContentContent

Content

Navigatie Navigatie

Gekozen pattern: BVA app

Ik heb voor deze oplossing gekozen, omdat het al in de app gebruikt wordt. Hiermee behoud je de consistentie van

de applicatie. De gebruikers zijn hier al in aanraking mee gekomen en daarom is het een oplossing die ongemerkt kan

worden toegepast.


5/16

Userstory 1a :De gebruiker kan op zijn iPhone een speciek product in detail bekijken, zodat hij weet of dit product interessant is.


Pattern A:Nieuwe pagina Pattern B:Nieuwe menu

Schetsen van de oplossingsrichting:

Voor de oplossing heb ik de pattern van de BVA app gebruikt. Deze vond ik het best

passen bij de applicatie. Ik heb dan ook gekeken waarom je het icoontje niet kan om-

draaien. Hieronder zie je de twee lowf schetsen.

Gekozen oplossing: Nieuw ontwerp:

Ik heb gekozen voor de linker pattern want die werkt toch het beste. Dit komt, omdat

dat andere icoontje iets totaal anders betekend. Je verwacht namelijk een menu die

naar beneden komt schuiven of in dergelijke. Daarom is het niet gebruikelijk om pattern

B te gebruiken.

Nu kan je aan dat icoontje her-

kennen dat hierachter nog een

pagina staan.


Content

Navigatie

1

1


6/16

Userstory 1b:De gebruiker kan op zijn iPhone een speciek product in detail bekijken, zodat hij weet of dit product interessant is.


Huidige situatie:

Pattern 1: H&M Pattern 2: Marktplaats Pattern 3: Catawiki

Passende oplossingen: Structural patternsHieronder staan de mogelijke oplossingen.

Interview: Mijn respondent had alleen maaroog voor de fotos en de titel. De fotos wildeze graag wat beter zien. De tekst voor de foto

bleek niet zon succes in haar ogen.

In deze applicatie is voornamelijk de fotohet belangrijkste onderdeel van de pagina.Mocht je toch meer informatie willen heb-ben over het artikel dan kan je op het info

icoontje klikken.

Marktplaats heeft de nadruk gelegd opde afbeelding en het contact opnemen.Dit hebben ze gedaan, omdat er vaak viamarktplaats een overeenkomst wordt ge-

maakt tussen de verkoper en de koper.

Catawiki heeft een voordeel, omdat deze appook betrekking heeft tot veilingen. Hier zie

je dat de afbeelding, de countdown en hetbieden het meest opvallen op de pagina. Er is

genoeg ruimte om een beschrijving te plaatsenop de pagina, omdat je kunt scrollen.

Probleemomschrijving :Het probleem hier is dat de gebruiker in noogopslag kunnen zien of het productinteressant is of niet. Afbeeldingen en eenbeschrijving zijn een belangrijke factor hierin.Maar door teveel details op de afbeelding,komt de afbeelding zelf niet goed naar voren.


Titel pagina, artikel nummer &

winkelmandje

Titel pagina, favorieten & delen Terugknop, volgende veiling

Afbeeldingen

Titel

Beschrijving

Plaats een bod

Huidig bod & Countdown

Afbeeldingen

Titel

Datum, aantal keer bekeken/favorieten

Contact

Beschrijving

Navigatie

Afbeelding, deelknop, meer informatie

Meer opties, meer afbeeldingen,

toevoegen aan winkelwagen.

Content

Navigatie

Gekozen pattern: Marktplaats & Catawiki

Ik heb gekozen voor een samenhang, omdat Catawiki geen gebruik maakt van een navigatie. Dit doet BVA zelf wel en

om consistent te blijven, wil ik dit zo behouden. Een grote knop om een bod te plaatsen is belangrijk. En dit moet ook

gaan opvallen. Deze zou ik dan eventueel onder de beschrijving kunnen zetten.


7/16

Userstory 1b:De gebruiker kan op zijn iPhone een speciek product in detail bekijken, zodat hij weet of dit product interessant is.


Pattern A:Afbeelding eerst Pattern B:Titel eerst


Voor de oplossing heb ik de pattern van Catawiki en Marktplaats gebruikt. De structuur

van Catawiki slaat goed aan bij de BVA app, omdat het ook gaat om een veiling. Ik vind

dat de manier om de afbeeldingen te laten zien beter is, dan bij de BVA app. Ik heb

dan ook twee varianten ervan geschetst.


Ik heb gekozen voor pattern B, omdat ik vind dat de titel heel erg belangrijk is. Aan de

titel/product naam kan je meteen zien wat voor product je bekijkt. En dat wil je natuurlijk

in n oogopslag kunnen zien. Pattern A werkt ook, alleen valt de titel van de pagina

minder op. Ik heb ook een aanpassing gedaan aan de Meer informaie over deze

veiling link. Dit word een uitschuifbaar menuutje net zoals in de beschrijving van

bijvoorbeeld youtube.

De titel van het product is het

belangrijkste, dit blijft boven

staan.

Daarna komt de afbeelding, je

maakt gebruik van een swipe

gesture om door de afbeeldingen

te gaan.

Huidig bod en de tijd heb een

aparte balk gekregen. Nu stoort

het de gebruiker niet om geheel

alleen naar de afbeelding te kun-

nen kijken.

De beschrijving van het product

is omhoog gegaan, zodat de

gebruiker eerst de beschrijv-

ing goed kan lezen. Voordat er

geboden wordt. Als de gebruiker

meer informatie wil zien, klikt hij

op meer informatie over deze

veiling en dan schuift er meer

informatie uit. (Youtube)

1

2

4

2

3

4

1


8/16

Userstory 1c:De gebruiker kan op zijn iPhone een speciek product in detail bekijken, zodat hij weet of dit product interessant is.


Huidige situatie:

Pattern 1: Bol.com Pattern 2:Youtube Pattern 3: Catawiki

Passende oplossingen: Structural patterns & behaviouralHieronder staan de mogelijke oplossingen.

Interview: Mijn respondent vond het onnodigom een aparte pagina te open wanneer zijin n oogopslag de beschrijving wil lezen.

Daarbij vond ze het niet erg om te scrollen.

Bij bol.com wordt er gebruik gemaakt vaneen pop-up scherm, deze pop-up schermkomt op wanneer je meer van debeschrijving wil lezen.

Youtube maakt gebruik van responsiveenabling, eerst wordt het niet getoond.Maar zodra je op het icoontje klikt, schuifter meer informatie uit.

Instagram heeft ongeveer hetzelfde alsYoutube, alleen is er een variatie gemaakt. Inplaats van een icoontje gebruiken zij gewoonde tekst meer, die ook als knopje dient.

Probleemomschrijving :De beschrijving op de pagina is de te kort, wil

je meer lezen dan moet je een nieuwe paginaopenen dit is erg onhandig dit zou ook op eenandere manier moeten kunnen.


Gebruikersnaam, locatie

Afbeeldingen

Beschrijving

NavigatieTerugknop

Beschrijving

Afbeelding

Beschrijving

Navigatie

Gekozen pattern:Youtube & Instagram

Ik heb gekozen voor een samenhang, omdat Instagram voornamelijk ook de foto naar voren brengt. En de beschrijving

is ook een deel waar de gebruikers z ich op focussen. Dit is bij Youtube ongeveer hetzelfde. En daarom wil ik een

pattern ontwerpen die zowel gebruik maakt van een icoontje als een korte tekst.


9/16

Userstory 1c:De gebruiker kan op zijn iPhone een speciek product in detail bekijken, zodat hij weet of dit product interessant is.


Pattern A:Afbeelding eerst Pattern B:Titel eerst


Voor de oplossing heb ik de pattern van Catawiki en Marktplaats gebruikt. De structuur

van Catawiki slaat goed aan bij de BVA app, omdat het ook gaat om een veiling. Ik vind

dat de manier om de afbeeldingen te laten zien beter is, dan bij de BVA app. Ik heb

dan ook twee varianten ervan geschetst.


Ik heb gekozen voor pattern B, omdat een klein knopje minder goed werkt dan een

knopje met tekst. Door een linkje meer klikbaar te maken, heb je meer ruimte om met je

vinger te gaan klikken.

Zo schuift er een extra vak uit, om

de rest van de tekst te bekijken.

Als je hier op drukt, dan schuift

de tekst weer in. Zodat je het

eerste schermpje weer ziet.

De overige tekst staat onder

elkaar, als je de rest wil gaan

lezen, dan kan je als nog gaan

scrollen. Scrollen is immers geen

probleem.

2

3

1

3

2

1


10/16

Userstory 2:De gebruiker kan op zijn iPhone een kavel opslaan, zodat hij op de hoogte van blijft van de start van de veiling.


Huidige situatie:

Pattern 1: Facebook Pattern 2: Mail App Pattern 3:Twitter

Passende oplossingen: Behavioural patternsHieronder staan de mogelijke oplossingen.

Interview:Uit het interview bleek dat mij respondenttijdens het rondkijken even snel kavels wilde

gaan opslaan. Ze vindt het te omslachtig omeerst daarvoor naar de detailpagina te gaan.

Op de mobiele website van Facebook kan je

rechtsboven aan een status update een actie

uitvoeren. Dit hebben ze op deze manier han-

dig gedaan want zo hoeven de gebruikers niet

naar een andere pagina te gaan.

De mail app heeft dit probleem ook weten op

te lossen door van rechts naar links te swipen

kan je ook meerdere acties uit gaan voeren.

Twitter heeft het weer anders aangepakt. Om

tweets van andere te bewaren(favoriten) kan je

ze later weer terug zien. Dit lost het probleem

van ons direct op. Alleen gebruikt Twitter dit

niet op hun mobiele website

Probleemomschrijving :De gebruiker kan een veiling niet opslaan opde startpagina, hiervoor moet hij eerst naar dedetail pagina.

Gekozen pattern: Mail App

Ik heb voor deze oplossing gekozen, omdat het helemaal geen ruimte inneemt. De ruimte tussen tussen de producten

is relatief klein, dus door een menu erover heen te zetten is niet erg handig. Daarnaast zijn die advertenties op die start-

pagina niet zo groot. Dus als je daaronder nog knoppen wilt zetten, dan zijn ze moeilijk aan te klikken.


11/16

Userstory 2:De gebruiker kan op zijn iPhone een kavel opslaan, zodat hij op de hoogte van blijft van de start van de veiling.


Pattern A:Slide to the left Pattern B:Slide to the right


Voor de oplossing heb ik de pattern van de mail app gebruikt. Deze vond ik het best. Ik

heb dan ook gekeken waarom het niet andersom kan. Waarom kan je niet swipen van

links naar rechts. Hieronder zie je de twee lowf schetsen.


Ik heb gekozen voor de linker pattern want die werkt toch het beste. Dit komt, omdat

door gewenning van rechts naar links swipen logischer is. Maar daarnaast is het ook zo

als je op een mobiele iOS app van links naar rechts swiped, kom je vaak terecht op de

vorige pagina. En dat wil je niet hebben.

Dit is de huidige status van de

pattern.

Wanneer je helemaal doorveegt

bewaar je het product meteen in

mijn kavels, waarna je die later

terug kan gaan zien.Als je van rechts naar link veegt

krijg je deze menu te zien. Je kan

kiezen uit bieden, bekijken en

bewaren. Je kan gewoon op de

verschillende knoppen drukken,

1

1 3

2

2

3


12/16

Userstory 3:De gebruiker ontvangt een bericht op zijn Apple Watch, zodat hij weet dat hij kan gaan bieden.


Pattern 1: Pomodoro Time Pattern 2: Boiled Egg Timer Pattern 3:Tinder

Passende oplossingen: Hier zijn de oplossingen voor de Apple Watch.De onderstaande patterns lossen alle 3 het probleem op van de Apple Watch.

Pomodoro heeft een andere manier vaneen signaal geven, wanneer je timer aoopt

krijg je knoppen te zien.

Deze applicatie laat heel erg vrolijk zien datje ei klaar is met koken.

Bij Tinder krijg je een notifcatie wanneer je

een nieuwe match hebt. Je kan doormiddelvan het knopje dismiss het bericht latenverdwijnen.

Probleemomschrijving :De gebruiker moet herrinnerd kunnen wordenom te gaan bieden, als hij of zij overbodenwordt of wanneer het tijd is om te bieden.

Gekozen pattern:Tinderziet er vrolijk uit. En doormiddel van een logo en korte tekst kan je meteen aan de ge-bruiker duidelijk maken, dat hij/zij kan gaan bieden. Je kan doormiddel van een korte beschrijving meteen zien wa-arop je kan gaan bieden. Daarnaast zou er alleen maar n knop nodig hoeven te zijn, dus dat zou pattern 1 alleenmaar overbodig maken.


13/16

Userstory 3:De gebruiker ontvangt een bericht op zijn Apple Watch, zodat hij weet dat hij kan gaan bieden.


Pattern A:Meteen Bieden Pattern B:Annuleren


Voor de oplossing heb ik de pattern van Tinder gebruikt. Ik heb deze uitgekozen,

omdat die heel erg simpel was. En fjn is om naar te kijken. Ik heb twee varianten van

deze pattern geschetst.


Ik heb gekozen voor de linker pattern want het is beter om meteen naar de applicatie

gestuurd te worden, dan dat je alleen de notifcatie kan laten verdwijnen.

Doormiddel van force touch

verdwijnt de notifcatie, zodat je

niet hoeft te bieden.

1

1


14/16

Userstory 4:De gebruiker kan op zijn Watch het te bieden bedrag instellen, zodat hij kan bieden.


Pattern 1: Kitchen Timer Pattern 2:Yum-Yum! Pattern 3: MoneyWiz 2

Passende oplossingen: Hier zijn de oplossingen voor de Apple Watch.De onderstaande patterns lossen alle 3 het probleem op van de Apple Watch.

Bij de applicatie van Kitchen Timer kan jeuren, minuten & seconden makkelijkwijzigen doormiddel van de plus en mintekens. Dit zou je eventueel kunnen doenmet duizendtallen, honderdtallen, tientallenen eenheden.

Yum-Yum! werkt praktisch hetzelfde, alleende indeling ziet er anders uit dan bijKitchen Timer. Het nadeel is dat je geenduizendtallen erin kan voeren.

MoneyWiz2 heeft gewoon een rekenmachinelayout. Waardoor je zoveel mogelijk cijfers inkan voeren.

Probleemomschrijving :Soms wil je snel kunnen bieden, waar je ookbent. Zonder dat je op je telefoon moet gaankijken. Daarvoor zal een Apple Watch appli-catie erg handig zijn.

Gekozen pattern: MoneyWiz2

Ik heb voor deze oplossing gekozen, omdat je doormiddel van een soort rekenmachine layout zelf aan kan geven

hoeveel cijfers je wil gaan in toetsen. Daarnaast gaat Moneywiz over geld en dat sluit beter aan dan de timer

applicaties.


15/16

Userstory 4:De gebruiker kan op zijn Watch het te bieden bedrag instellen, zodat hij kan bieden.


Pattern A:Rond Pattern B:Vierkant


Voor de oplossing heb ik de pattern van MoneyWiz2 gebruikt. Deze vond ik het best

passen bij de applicatie. Ik heb twee varianten zitten uit proberen. Hieronder zie je de

twee lowf schetsen.


Ik heb gekozen voor de rechter pattern want die is beter, omdat ronde buttons

kleiner zijn dan vierkante. Een AppleWatch heeft zelf geen grote touchscreen, dus dan

moet je kleine buttons, zoveel mogelijk vermijden. Hoe kleiner de buttons, hoe meerfouten je kan gaan maken.

Als je hier op klikt ga je terug

naar de vorige pagina.

Als je hier op klikt verwijder je

de laatste cijfer dat je hebt in-

getoetst.

Dit is een knop ter bevestiging

van je bod.

1

2

3

1

2

3


16/16

Screenow:BvA applicatie iPhone & Apple Watch

16 Tyrone Wiranta | 500715401 | V1-08 | 10 november 2015

1a. Subcategorie

2. Opslaan in mijn kavels 1c. Meer informatie

1b. Productpagina 3.Notifcatie Apple Watch

Legenda gestures

4. Bieden op een product

Drukken Swipen

Documents

Eindopdracht, Design Patterns