You are on page 1of 16

10-10-’15

Eindopdracht: BVA iPhone & Watch

Tyrone Wiranta
Hogeschool van Amsterdam
Design Patterns - Paul Geurts
500715401
V1-08

Gekozen oplossing 9 Userstory 2: Een kavel opslaan 10 .Probleemomschrijving 14 .Gekozen oplossing 13 Userstory 4: Een bod doen op een kavel 14 .Gekozen oplossing 11 Userstory 3: Een bericht ontvangen op de Apple Watch 12 .Gekozen oplossing 15 Screenflow: 2  Tyrone Wiranta | 500715401 | V1-08 | 10 november 2015 16 .Probleemomschrijving 12 . Inhoudsopgave Userstory 1: Product in detail bekijken 4 .Probleemomschrijving 4 .Probleemomschrijving 10 .

Meestal handelaren die (een deel van) de complete veiling van een failliet bedrijf opkopen om per stuk door te verkopen. wat er in het document staat. Ik heb me gehouden aan de Ui-guidelines en ook aan de Apple Watch guidelines.Paul Geurts brekingen te vermijden. curatoren. De onderstaande informatie komt uit de briefing van de eindopdracht: “BVA is een van de grootste online veilinghuizen van Nederland. Vaak gaat het om de verkoop van de complete inventaris van een failliet bedrijf.bva-auctions. Ook een ander pattern gekozen. Paul Geurts Paul Geurts   10 november 2015 | V1-08| 500715401 | Tyrone Wiranta  3 .” Look & Feel “BVA richt zich voornamelijk op de zakelijke gebruiker. want ik kreeg het niet voor elkaar. Dat is ook wat ik heb ondervonden uit het interview. Ik heb het eindontwerp en schetsen aangepast. Hieronder zie je heel erg vlug hoe het er ongeveer uit ziet. “BVA is toegespitst op de verkoop van grote partijen goederen van bedrijven en instellingen. De stijl van het herontwerpen moet uitgaan van regelmatig terugkomende klanten en een zakelijke tone-of-voice. Ik heb Userstory 1b gesplitst in b & c.Korte inleiding: Voor deze opdracht ben ik aan de slag gegaan om een pattern verslag te maken voor een applicatie van BVA. Ik heb het interview aangepast. De aankoop van motorvoertuigen is voor particulieren complex. Paul Geurts Een Userstory opsplitsen in twee. industrie en het bedrijfsleven (on)roerende zaken ter veiling. Ik heb m’n schetsen helemaal opnieuw gemaakt. Paul Geurts Applewatch face userstory 3 aanpassen. Specifiek scenario meegeven in het interview. Ze brengen in opdracht van banken. Ik heb vooral aanpassingen gemaakt in de consistentie en gemak. Paul Geurts Met de hand schetsen. De kopers van de goederen zijn vrijwel altijd zakelijke klanten. Ik heb een vogelvlucht gemaakt en in Paul Geurts dit document geplaatst.” Feedbacktabel Feedback Aanpassing herkansing Feedback van In een vogelvlucht laten zien.com/ Concept van BVA” De applicatie in een notendop: De applicatie is een combinatie van een iPhone app & een Apple Watch app. Daarnaast gaat de verkoop van kleinere artikelen meestal niet per stuk maar per kavel. meestal zitten er geen papieren of sleutels bij de motorvoertuigen. leasemaatschappijen. Doormiddel van de iPhone app kan je gaan zoeken naar verschillende kavels en op de Apple Watch kan je dan eventueel ook gaan bieden. de professionele handelaar of een bedrijf die geïnteresseerd is in de inboedel van een failliete concurrent. https://www. Afbrekingen in het nederlands. 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. Interview meer uitwerken. Ik heb een nieuw interview afgenomen en scenario’s gebruikt. Ik heb zoveel mogelijk geprobeerd af.

Info. Info. Wanneer je hier op klikt. 4  Tyrone Wiranta | 500715401 | V1-08 | 10 november 2015 Content Pattern 2: Snapchat Berichten. kun je andere actie’s uit gaan voeren. Hiermee behoud je de consistentie van de applicatie. ik kwam daar meteen achter dat mijn respondent niet meteen bij de productpagina terecht kon. Mijn respondent was gewend geraakt aan de pijltjes. Een handige tool voor mensen die (moeilijke) gestures niet onthouden. De gebruikers zijn hier al in aanraking mee gekomen en daarom is het een oplossing die ongemerkt kan worden toegepast. zodat hij weet of dit product interessant is. daar is er beschreven wat je moet gaan doen. menu Content Navigatie In de applicatie van BVA is er al een icoontje voor feedforward gegeven. omdat het al in de app gebruikt wordt. . Dit was dus al een probleem. Snapchat heeft dit anders opgelost. Header. camera Content Pattern 3: Youtube Header. Weergave Pattern 1: BVA app Header.” Huidige situatie: Passende oplossingen: “Structural patterns” Hieronder staan de mogelijke oplossingen. Weergave Content Navigatie Interview: Ik heb gevraagd aan mij respondent om op een product te bieden. home. Logo. Youtube maakt ook gebruik van een icoontje. zoekbalk. Logo. Gekozen pattern: BVA app Ik heb voor deze oplossing gekozen. Probleemomschrijving: Voor mensen die nooit met een smartphone omgaan is feedforward een handig middel. Userstory 1a: “De gebruiker kan op zijn iPhone een specifiek product in detail bekijken. Niet iedereen weet dat ze gewoon kunnen klikken in een lijstje. dit icoontje dient ook meteen voor een menu. Die je ziet bij categorieën. Dit krijg je alleen te zien als je op een categorie wil klikken. Als er de mogelijkheid is om te klikken dan staat er: “Dubbelklik om te antwoorden”. BVA zou doormiddel van betere consistentie dit ook moeten doen voor de product detailpagina.

Daarom is het niet gebruikelijk om pattern B te gebruiken. Logo. Je verwacht namelijk een menu die naar beneden komt schuiven of in dergelijke. Info. Pattern A: Nieuwe pagina Pattern B: Nieuwe menu Header. Dit komt. Weergave 1 1 Nu kan je aan dat icoontje herkennen dat hierachter nog een pagina staan.   10 november 2015 | V1-08| 500715401 | Tyrone Wiranta  5 .” Gekozen oplossing: Nieuw ontwerp: Schetsen van de oplossingsrichting: Voor de oplossing heb ik de pattern van de BVA app gebruikt. Userstory 1a : “De gebruiker kan op zijn iPhone een specifiek product in detail bekijken. omdat dat andere icoontje iets totaal anders betekend. Ik heb dan ook gekeken waarom je het icoontje niet kan omdraaien. Content Navigatie Ik heb gekozen voor de linker pattern want die werkt toch het beste. Hieronder zie je de twee lowfi schetsen. zodat hij weet of dit product interessant is. Deze vond ik het best passen bij de applicatie.

omdat Catawiki geen gebruik maakt van een navigatie. Probleemomschrijving: Het probleem hier is dat de gebruiker in één oogopslag kunnen zien of het product interessant is of niet. Info. 6  Tyrone Wiranta | 500715401 | V1-08 | 10 november 2015 Meer optie’s. komt de afbeelding zelf niet goed naar voren. volgende veiling Afbeeldingen Afbeeldingen Afbeelding. Hier zie je dat de afbeelding. En dit moet ook gaan opvallen. deelknop. meer afbeeldingen. wil ik dit zo behouden. Userstory 1b: “De gebruiker kan op zijn iPhone een specifiek product in detail bekijken.” Huidige situatie: Passende oplossingen: “Structural patterns” Hieronder staan de mogelijke oplossingen. Afbeeldingen en een beschrijving zijn een belangrijke factor hierin. Deze zou ik dan eventueel onder de beschrijving kunnen zetten. zodat hij weet of dit product interessant is. Er is genoeg ruimte om een beschrijving te plaatsen op de pagina. toevoegen aan winkelwagen. de countdown en het bieden het meest opvallen op de pagina. artikel nummer & winkelmandje Content Pattern 2: Marktplaats Pattern 3: Catawiki Titel pagina. Maar door teveel details op de afbeelding. In deze applicatie is voornamelijk de foto het belangrijkste onderdeel van de pagina. omdat deze app ook betrekking heeft tot veilingen. Dit hebben ze gedaan. favorieten & delen Terugknop. Navigatie Marktplaats heeft de nadruk gelegd op de afbeelding en het contact opnemen. Mocht je toch meer informatie willen hebben over het artikel dan kan je op het info icoontje klikken. Een grote knop om een bod te plaatsen is belangrijk. Logo. Gekozen pattern: Marktplaats & Catawiki Ik heb gekozen voor een samenhang. meer informatie Titel Huidig bod & Countdown Titel Datum. Header. Dit doet BVA zelf wel en om consistent te blijven. . De foto’s wilde ze graag wat beter zien. aantal keer bekeken/favorieten Contact Beschrijving Beschrijving Navigatie Interview: Mijn respondent had alleen maar oog voor de foto’s en de titel. omdat er vaak via marktplaats een overeenkomst wordt gemaakt tussen de verkoper en de koper. De tekst voor de foto bleek niet zo’n succes in haar ogen. Plaats een bod Catawiki heeft een voordeel. omdat je kunt scrollen. Weergave Pattern 1: H&M Titel pagina.

Nu stoort het de gebruiker niet om geheel alleen naar de afbeelding te kunnen kijken. alleen valt de titel van de pagina minder op. Ik vind dat de manier om de afbeeldingen te laten zien beter is. je maakt gebruik van een swipe gesture om door de afbeeldingen te gaan. De structuur van Catawiki slaat goed aan bij de BVA app. dan bij de BVA app.   10 november 2015 | V1-08| 500715401 | Tyrone Wiranta  7 . Pattern A: Afbeelding eerst Pattern B: Titel eerst 1 1 2 2 3 4 4 De titel van het product is het belangrijkste. omdat het ook gaat om een veiling. Userstory 1b: “De gebruiker kan op zijn iPhone een specifiek product in detail bekijken. klikt hij op “meer informatie over deze veiling” en dan schuift er meer informatie uit. Dit word een uitschuifbaar menuutje net zoals in de beschrijving van bijvoorbeeld youtube. dit blijft boven staan.” Gekozen oplossing: Nieuw ontwerp: Schetsen van de oplossingsrichting: Voor de oplossing heb ik de pattern van Catawiki en Marktplaats gebruikt. omdat ik vind dat de titel heel erg belangrijk is. Huidig bod en de tijd heb een aparte balk gekregen. Aan de titel/product naam kan je meteen zien wat voor product je bekijkt. zodat hij weet of dit product interessant is. Daarna komt de afbeelding. Ik heb dan ook twee varianten ervan geschetst. De beschrijving van het product is omhoog gegaan. Als de gebruiker meer informatie wil zien. Pattern A werkt ook. zodat de gebruiker eerst de beschrijving goed kan lezen. Voordat er geboden wordt. Ik heb ook een aanpassing gedaan aan de “Meer informaie over deze veiling” link. (Youtube) Ik heb gekozen voor pattern B. En dat wil je natuurlijk in één oogopslag kunnen zien.

Maar zodra je op het icoontje klikt. wil je meer lezen dan moet je een nieuwe pagina openen dit is erg onhandig dit zou ook op een andere manier moeten kunnen. Userstory 1c: “De gebruiker kan op zijn iPhone een specifiek product in detail bekijken. . Gekozen pattern: Youtube & Instagram Ik heb gekozen voor een samenhang. alleen is er een variatie gemaakt. Weergave Pattern 1: Bol. Dit is bij Youtube ongeveer hetzelfde. 8  Tyrone Wiranta | 500715401 | V1-08 | 10 november 2015 Terugknop Bij bol. Daarbij vond ze het niet erg om te scrollen. deze pop-up scherm komt op wanneer je meer van de beschrijving wil lezen. Logo. eerst wordt het niet getoond. Instagram heeft ongeveer hetzelfde als Youtube. Info. Header. zodat hij weet of dit product interessant is.com wordt er gebruik gemaakt van een pop-up scherm. En daarom wil ik een pattern ontwerpen die zowel gebruik maakt van een icoontje als een korte tekst. Navigatie Youtube maakt gebruik van responsive enabling. In plaats van een icoontje gebruiken zij gewoon de tekst meer. die ook als knopje dient. En de beschrijving is ook een deel waar de gebruikers zich op focussen. Probleemomschrijving: De beschrijving op de pagina is de te kort.com Pattern 2: Youtube Pattern 3: Catawiki Gebruikersnaam. locatie Afbeelding Beschrijving Afbeeldingen Beschrijving Beschrijving Navigatie Interview: Mijn respondent vond het onnodig om een aparte pagina te open wanneer zij in één oogopslag de beschrijving wil lezen. schuift er meer informatie uit. omdat Instagram voornamelijk ook de foto naar voren brengt.” Huidige situatie: Passende oplossingen: “Structural patterns & behavioural” Hieronder staan de mogelijke oplossingen.

Ik vind dat de manier om de afbeeldingen te laten zien beter is. Userstory 1c: “De gebruiker kan op zijn iPhone een specifiek product in detail bekijken. omdat het ook gaat om een veiling. Zodat je het eerste schermpje weer ziet. omdat een klein knopje minder goed werkt dan een knopje met tekst. dan schuift de tekst weer in. Ik heb dan ook twee varianten ervan geschetst. 2 3 Ik heb gekozen voor pattern B.” Gekozen oplossing: Nieuw ontwerp: Schetsen van de oplossingsrichting: Voor de oplossing heb ik de pattern van Catawiki en Marktplaats gebruikt. Scrollen is immers geen probleem. zodat hij weet of dit product interessant is. Pattern A: Afbeelding eerst Pattern B: Titel eerst 1 1 2 3 Zo schuift er een extra vak uit. De structuur van Catawiki slaat goed aan bij de BVA app. heb je meer ruimte om met je vinger te gaan klikken. dan bij de BVA app. als je de rest wil gaan lezen. dan kan je als nog gaan scrollen. De overige tekst staat onder elkaar. Als je hier op drukt. Door een linkje meer klikbaar te maken. om de rest van de tekst te bekijken.   10 november 2015 | V1-08| 500715401 | Tyrone Wiranta  9 .

10  Tyrone Wiranta | 500715401 | V1-08 | 10 november 2015 Op de mobiele website van Facebook kan je rechtsboven aan een status update een actie uitvoeren. . Probleemomschrijving: De gebruiker kan een veiling niet opslaan op de startpagina. Daarnaast zijn die advertentie’s op die startpagina niet zo groot. Dit lost het probleem van ons direct op. Userstory 2: “De gebruiker kan op zijn iPhone een kavel opslaan. Pattern 1: Facebook Interview: Uit het interview bleek dat mij respondent tijdens het rondkijken even snel kavels wilde gaan opslaan. zodat hij op de hoogte van blijft van de start van de veiling. Alleen gebruikt Twitter dit niet op hun mobiele website Gekozen pattern: Mail App Ik heb voor deze oplossing gekozen. Pattern 2: Mail App De mail app heeft dit probleem ook weten op te lossen door van rechts naar links te swipen kan je ook meerdere actie’s uit gaan voeren. Dus als je daaronder nog knoppen wilt zetten. Om tweets van andere te bewaren(favoriten) kan je ze later weer terug zien. omdat het helemaal geen ruimte inneemt. dan zijn ze moeilijk aan te klikken.” Huidige situatie: Passende oplossingen: “Behavioural patterns” Hieronder staan de mogelijke oplossingen. Ze vindt het te omslachtig om eerst daarvoor naar de detailpagina te gaan. dus door een menu erover heen te zetten is niet erg handig. Pattern 3: Twitter Twitter heeft het weer anders aangepakt. Dit hebben ze op deze manier handig gedaan want zo hoeven de gebruikers niet naar een andere pagina te gaan. hiervoor moet hij eerst naar de detail pagina. De ruimte tussen tussen de producten is relatief klein.

Je kan gewoon op de verschillende knoppen drukken. Ik heb dan ook gekeken waarom het niet andersom kan. kom je vaak terecht op de vorige pagina. omdat door gewenning van rechts naar links swipen logischer is. Userstory 2: “De gebruiker kan op zijn iPhone een kavel opslaan.   10 november 2015 | V1-08| 500715401 | Tyrone Wiranta  11 . Waarom kan je niet swipen van links naar rechts.” Gekozen oplossing: Nieuw ontwerp: Schetsen van de oplossingsrichting: Voor de oplossing heb ik de pattern van de mail app gebruikt. Je kan kiezen uit bieden. waarna je die later terug kan gaan zien. 1 2 Dit is de huidige status van de pattern. En dat wil je niet hebben. 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 1 2 3 Ik heb gekozen voor de linker pattern want die werkt toch het beste. Deze vond ik het best. Hieronder zie je de twee lowfi schetsen. Dit komt. Maar daarnaast is het ook zo als je op een mobiele iOS app van links naar rechts swiped. Als je van rechts naar link veegt krijg je deze menu te zien. bekijken en bewaren. 3 Wanneer je helemaal doorveegt bewaar je het product meteen in mijn kavels.

Daarnaast zou er alleen maar één knop nodig hoeven te zijn. zodat hij weet dat hij kan gaan bieden. dus dat zou pattern 1 alleen maar overbodig maken. Je kan doormiddel van het knopje dismiss het bericht laten verdwijnen. Pattern 3: Tinder Bij Tinder krijg je een notificatie wanneer je een nieuwe match hebt.” Probleemomschrijving: De gebruiker moet herrinnerd kunnen worden om te gaan bieden. wanneer je timer afloopt krijg je knoppen te zien. “De onderstaande patterns lossen alle 3 het probleem op van de Apple Watch. 12  Tyrone Wiranta | 500715401 | V1-08 | 10 november 2015 . Passende oplossingen: Hier zijn de oplossingen voor de Apple Watch.” Pattern 1: Pomodoro Time Pomodoro heeft een andere manier van een signaal geven. dat hij/zij kan gaan bieden. als hij of zij overboden wordt of wanneer het tijd is om te bieden. Je kan doormiddel van een korte beschrijving meteen zien waarop je kan gaan bieden. Gekozen pattern: Tinder ziet er vrolijk uit. En doormiddel van een logo en korte tekst kan je meteen aan de gebruiker duidelijk maken. Userstory 3: “De gebruiker ontvangt een bericht op zijn Apple Watch. Pattern 2: Boiled Egg Timer Deze applicatie laat heel erg vrolijk zien dat je ei klaar is met koken.

En fijn is om naar te kijken. Ik heb deze uitgekozen. zodat hij weet dat hij kan gaan bieden.   10 november 2015 | V1-08| 500715401 | Tyrone Wiranta  13 . 1 Ik heb gekozen voor de linker pattern want het is beter om meteen naar de applicatie gestuurd te worden. dan dat je alleen de notificatie kan laten verdwijnen. Ik heb twee varianten van deze pattern geschetst. Pattern A: Meteen Bieden Pattern B: Annuleren 1 Doormiddel van force touch verdwijnt de notificatie. Userstory 3: “De gebruiker ontvangt een bericht op zijn Apple Watch. zodat je niet hoeft te bieden.” Gekozen oplossing: Nieuw ontwerp: Schetsen van de oplossingsrichting: Voor de oplossing heb ik de pattern van Tinder gebruikt. omdat die heel erg simpel was.

honderdtallen. Pattern 2: Yum-Yum! Yum-Yum! werkt praktisch hetzelfde. Daarnaast gaat Moneywiz over geld en dat sluit beter aan dan de timer applicatie’s. Passende oplossingen: Hier zijn de oplossingen voor de Apple Watch.” Probleemomschrijving: Soms wil je snel kunnen bieden.” Pattern 1: Kitchen Timer Bij de applicatie van Kitchen Timer kan je uren. Waardoor je zoveel mogelijk cijfers in kan voeren. 14  Tyrone Wiranta | 500715401 | V1-08 | 10 november 2015 . Het nadeel is dat je geen duizendtallen erin kan voeren. zodat hij kan bieden. tientallen en eenheden. minuten & seconden makkelijk wijzigen doormiddel van de plus en min tekens. Pattern 3: MoneyWiz 2 MoneyWiz2 heeft gewoon een rekenmachine layout. Zonder dat je op je telefoon moet gaan kijken. Userstory 4: “De gebruiker kan op zijn Watch het te bieden bedrag instellen. Daarvoor zal een Apple Watch applicatie erg handig zijn. Dit zou je eventueel kunnen doen met duizendtallen. waar je ook bent. 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. “De onderstaande patterns lossen alle 3 het probleem op van de Apple Watch. alleen de indeling ziet er anders uit dan bij Kitchen Timer.

3 Dit is een knop ter bevestiging van je bod.” Gekozen oplossing: Nieuw ontwerp: Schetsen van de oplossingsrichting: Voor de oplossing heb ik de pattern van MoneyWiz2 gebruikt. omdat ronde buttons kleiner zijn dan vierkante. hoe meer fouten je kan gaan maken. Een AppleWatch heeft zelf geen grote touchscreen. 3 Ik heb gekozen voor de rechter pattern want die is beter. Ik heb twee varianten zitten uit proberen. Hieronder zie je de twee lowfi schetsen. dus dan moet je kleine buttons. zoveel mogelijk vermijden. Hoe kleiner de buttons. Pattern A: Rond Pattern B: Vierkant 1 2 1 Als je hier op klikt ga je terug naar de vorige pagina. 2 Als je hier op klikt verwijder je de laatste cijfer dat je hebt ingetoetst.   10 november 2015 | V1-08| 500715401 | Tyrone Wiranta  15 . Deze vond ik het best passen bij de applicatie. Userstory 4: “De gebruiker kan op zijn Watch het te bieden bedrag instellen. zodat hij kan bieden.

Bieden op een product Legenda gestures Drukken 16  Tyrone Wiranta | 500715401 | V1-08 | 10 november 2015 Swipen . Screenflow: BvA applicatie iPhone & Apple Watch 1a. Subcategorie 1b. Opslaan in mijn kavels 1c. Productpagina 2. Notificatie Apple Watch 4. Meer informatie 3.