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
7/25/2019 Eindopdracht, Design Patterns
2/16
Inhoudsopgave
Userstory 1: Product in detail bekijken 4
- Probleemomschrijving 4
- Gekozen oplossing 9
Userstory 2: Een kavel opslaan 10
- Probleemomschrijving 10
- Gekozen oplossing 11
Userstory 3: Een bericht ontvangen op de Apple Watch 12
- Probleemomschrijving 12
- Gekozen oplossing 13
Userstory 4: Een bod doen op een kavel 14
- Probleemomschrijving 14
- Gekozen oplossing 15
Screenow: 16
2Tyrone Wiranta | 500715401 | V1-08 | 10 november 2015
7/25/2019 Eindopdracht, Design Patterns
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
7/25/2019 Eindopdracht, Design Patterns
4/16
Userstory 1a:De gebruiker kan op zijn iPhone een speciek product in detail bekijken, zodat hij weet of dit product interessant is.
4Tyrone Wiranta | 500715401 | V1-08 | 10 november 2015
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.
7/25/2019 Eindopdracht, Design Patterns
5/16
Userstory 1a :De gebruiker kan op zijn iPhone een speciek product in detail bekijken, zodat hij weet of dit product interessant is.
10 november 2015 | V1-08| 500715401 | Tyrone Wiranta 5
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.
Header, Logo, Info, Weergave
Content
Navigatie
1
1
7/25/2019 Eindopdracht, Design Patterns
6/16
Userstory 1b:De gebruiker kan op zijn iPhone een speciek product in detail bekijken, zodat hij weet of dit product interessant is.
6Tyrone Wiranta | 500715401 | V1-08 | 10 november 2015
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.
Header, Logo, Info, Weergave
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/25/2019 Eindopdracht, Design Patterns
7/16
Userstory 1b:De gebruiker kan op zijn iPhone een speciek product in detail bekijken, zodat hij weet of dit product interessant is.
10 november 2015 | V1-08| 500715401 | Tyrone Wiranta 7
Pattern A:Afbeelding eerst Pattern B:Titel eerst
Schetsen van de oplossingsrichting:
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.
Gekozen oplossing: Nieuw ontwerp:
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
7/25/2019 Eindopdracht, Design Patterns
8/16
Userstory 1c:De gebruiker kan op zijn iPhone een speciek product in detail bekijken, zodat hij weet of dit product interessant is.
8Tyrone Wiranta | 500715401 | V1-08 | 10 november 2015
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.
Header, Logo, Info, Weergave
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.
7/25/2019 Eindopdracht, Design Patterns
9/16
Userstory 1c:De gebruiker kan op zijn iPhone een speciek product in detail bekijken, zodat hij weet of dit product interessant is.
10 november 2015 | V1-08| 500715401 | Tyrone Wiranta 9
Pattern A:Afbeelding eerst Pattern B:Titel eerst
Schetsen van de oplossingsrichting:
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.
Gekozen oplossing: Nieuw ontwerp:
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
7/25/2019 Eindopdracht, Design Patterns
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.
10Tyrone Wiranta | 500715401 | V1-08 | 10 november 2015
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.
7/25/2019 Eindopdracht, Design Patterns
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.
10 november 2015 | V1-08| 500715401 | Tyrone Wiranta 11
Pattern A:Slide to the left Pattern B:Slide to the right
Schetsen van de oplossingsrichting:
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.
Gekozen oplossing: Nieuw ontwerp:
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
7/25/2019 Eindopdracht, Design Patterns
12/16
Userstory 3:De gebruiker ontvangt een bericht op zijn Apple Watch, zodat hij weet dat hij kan gaan bieden.
12Tyrone Wiranta | 500715401 | V1-08 | 10 november 2015
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.
7/25/2019 Eindopdracht, Design Patterns
13/16
Userstory 3:De gebruiker ontvangt een bericht op zijn Apple Watch, zodat hij weet dat hij kan gaan bieden.
10 november 2015 | V1-08| 500715401 | Tyrone Wiranta 13
Pattern A:Meteen Bieden Pattern B:Annuleren
Schetsen van de oplossingsrichting:
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.
Gekozen oplossing: Nieuw ontwerp:
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
7/25/2019 Eindopdracht, Design Patterns
14/16
Userstory 4:De gebruiker kan op zijn Watch het te bieden bedrag instellen, zodat hij kan bieden.
14Tyrone Wiranta | 500715401 | V1-08 | 10 november 2015
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.
7/25/2019 Eindopdracht, Design Patterns
15/16
Userstory 4:De gebruiker kan op zijn Watch het te bieden bedrag instellen, zodat hij kan bieden.
10 november 2015 | V1-08| 500715401 | Tyrone Wiranta 15
Pattern A:Rond Pattern B:Vierkant
Schetsen van de oplossingsrichting:
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.
Gekozen oplossing: Nieuw ontwerp:
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
7/25/2019 Eindopdracht, Design Patterns
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
Top Related