Design Patterns BVA App iPhone & Apple Watch

Ontwerpdocument BVA iPhone & Apple Watch App

Naam Omar Vasquez Jesus Studentnummer 500 704 100 Klas DMCI V1-11 Docent H.E.M. van Vugt Vak Design Patterns Opdracht Eindopdracht BVA Smartphone & Watch Versie 2 Datum 19-10-2015

1

Inhoudsopgave

BVA App iPhone & Apple Watch App

Over de BVA? 4 Inleiding 4 Ge誰nterviewde persoon 4 1e ontwerp - Specifiek product in detail bekijken (iPhone)

5

Probleem & 3 passende oplossingen 6 Lo-Fi schetsen & gekozen Lo-Fi schets 7 Hi-Fi ontwerp 7 2e ontwerp - Kavel opslaan (iPhone)

8/9

Probleem & 3 passende oplossingen Lo-Fi schetsen & gekozen Lo-Fi schets Hi-Fi ontwerp

10 11 11

3e ontwerp - Bericht ontvangen (Apple watch)

12/13

Probleem & 3 passende oplossingen Lo-Fi schetsen & gekozen Lo-Fi schets Hi-Fi ontwerp

14 15 15

4e ontwerp - Bieden, bedrag instellen (Apple watch)

16/17

Probleem & 3 passende oplossingen Lo-Fi schetsen & gekozen Lo-Fi schets Hi-Fi ontwerp

18 19 19

Screenflow BVA App 20/21

Tekst is groot het mag wat kleiner, is maak gebruik(extra van Spread duidelijker je ruimte. punten).

Feedback tabel Voorblad Feedback Laat zien wat je gaat maken!

Visual aan het beging van het ontwerpdocument, Feedback bijvoorbeeld: een Apple Laat zien wat je gaat Watch of iPhone die de App maken! weergeven.

Visual aan het beging van Tekst is groot het mag wat het ontwerpdocument, kleiner, maak gebruik van bijvoorbeeld: een Apple je ruimte.

Watch of iPhone die de App weergeven.

Feedback Tekst is groot het mag wat Laat zien wat je gaat kleiner, maak gebruik van Spread maken! is duidelijker (extra je ruimte. punten).

Visual aan het beging van

Structuur

het ontwerpdocument, bijvoorbeeld: een Apple Watch of iPhone die de App De Apple heeft geen Spread is watch duidelijker (extra weergeven. interview en geen huidige punten).

Probleemstelling #1 zijn Tekst is groot het mag wat situatie. twee problemen, kleiner, maak gebruik van pak een probleem en maak je ruimte. het specifieker.

Vormgeving Probleemstelling #1 zijn

Denk aan haptic feedback twee problemen, Spread isprobleem duidelijker bij Apple watch.en(extra pakde een maak Kijk naar gadget sites en punten). het specifieker. patternlibrary's ter inspiratie en voorbeelden.

Kijk naar gadget sites en Probleemstelling #1 je zijn Ontwerp alleen ter wat laat patternlibrary's twee problemen, zien in je probleemstelling. inspiratie en voorbeelden.

Beginscherm van de BVA pak een probleem en maak App weergeven het specifieker.

Beginscherm van de BVA Laat geengadget Lo-Fi schetsen Kijk sites en App naar weergeven zien bij de Hi-Fi. ter patternlibrary's Keuze van patterns inspiratie en voorbeelden. scherper maken, Lo-Fi wireframes niet in kleuren houd het functioneel.

Keuze van patterns Beginscherm van de BVA scherper maken, App weergeven Lo-Fi wireframes niet in kleuren houd het functioneel.

Probleemstelling Aanpassing herkansing Visual gemaakt op Photoshop met de BVA App op een Apple watch en iPhone.

Aanpassing herkansing Visual gemaakt op Photoshop met de BVA App op een Apple watch en Brood tekst is kleiner iPhone. gemaakt en structuur van het document is aangepast om ruimte te besparen.

Aanpassing herkansing Brood tekst is kleiner Visual gemaakt op gemaakt en structuur De structuur van het Photoshop met de BVAvan App het document is aangepast document is aangepast op een Apple watch en zo om ruimte besparen. dat er meerteruimte ontstaat iPhone. en is nu in spread vorm.

Feedback van H.E.M. van Vugt

Er isstructuur bij de Apple De van watch het spread geen interview en document is aangepast Probleemstelling #1 is zo Brood tekst is kleiner geen situatie. dat erhuidige meer ruimte ontstaat aangepast het probleem is gemaakt en structuur van en is nu in spread vorm. nu specifieker. het document is aangepast om ruimte te besparen.

Probleemstelling #1 is Haptic feedback maak is aangepast het probleem De structuur onderdeel uitvan vanhet de nu specifieker.

Ik heb gekeken naar de document is aangepast zo oplossing voor de websites en voorbeelden dat er meer ruimte ontstaat probleemstelling van de bekeken. en is nu in spread vorm.

Apple watch.

H.E.M. van van Vugt Vugt H.E.M.

Ik heb gekeken naar de Probleemstelling #1 Alleen deen situaties inisde websites voorbeelden aangepast het probleem is probleemstelling is bekeken.

Het beginscherm van de ontworpen. nu specifieker.

BVA App is nu toegevoegd aan de spread.

H.E.M. van Vugt H.E.M. van Vugt

Feedback van H.E.M. van Vugt H.E.M. van Vugt

Feedback van H.E.M. H.E.M. van van Vugt Vugt H.E.M. van Vugt

H.E.M. van Vugt H.E.M. van Vugt

H.E.M. van Vugt H.E.M. van Vugt H.E.M. van Vugt H.E.M. van Vugt

H.E.M. van Vugt

Het beginscherm van de Er heb zijn geen Lo-Fi schetsen Ik gekeken naar de BVA App is nu toegevoegd te zien bijen devoorbeelden de Hi-fi websites aan de spread.

De keuze op de patterns is schetsen. bekeken. duidelijker gemaakt, de Lo-Fi wireframes zijn zwart-wit.

H.E.M. van Vugt H.E.M. van Vugt

De keuze op de patterns is Het beginscherm van de duidelijker gemaakt, BVA App is nu toegevoegd de Lo-Fi wireframes zijn aan de spread. zwart-wit.

H.E.M. van Vugt H.E.M. van Vugt

Spread is duidelijker (extra punten).

Probleemstelling #1 zijn twee problemen, pak een probleem en maak het specifieker.

Probleemstelling #1 zijn twee problemen, pak een probleem en en maak Kijk naar gadget sites het specifieker. ter patternlibrary's

Brood tekst is kleiner H.E.M. van Vugt gemaakt en structuur De structuur van het van H.E.M. van Vugt het document is aangepast document is aangepast zo om ruimte te besparen. dat er meer ruimte ontstaat en is nu in spread vorm.

De structuur van het H.E.M. van Vugt document is aangepast Probleemstelling #1 is zo H.E.M. van Vugt dat er meer ruimte ontstaat aangepast het probleem is en nu in spread vorm. nu is specifieker.

Probleemstelling #1 is aangepast het probleem is nu specifieker.

Ik heb gekeken naar de

inspiratie en voorbeelden.

websites en voorbeelden bekeken.

Kijk naar gadget sites en patternlibrary's ter inspiratie en voorbeelden.

Beginscherm van de BVA

Ik heb gekeken naar de websites en voorbeelden bekeken.

Het beginscherm van de

App weergeven

BVA App is nu toegevoegd aan de spread.

Beginscherm van de BVA App weergeven

Het beginscherm van de BVA App is nu toegevoegd aan de spread.

De keuze op de patterns is

Inhoud

Keuze van patterns scherper maken, Lo-Fi wireframes niet in kleuren houd het functioneel.

Keuze van patterns scherper maken, Lo-Fi wireframes niet in kleuren houd het functioneel.

H.E.M. van Vugt H.E.M. van Vugt

H.E.M. van Vugt H.E.M. van Vugt

H.E.M. van Vugt H.E.M. van Vugt

duidelijker gemaakt, de Lo-Fi wireframes zijn zwart-wit.

De keuze op de patterns is duidelijker gemaakt, de Lo-Fi wireframes zijn zwart-wit.

H.E.M. van Vugt

De Apple watch heeft geen interview en geen huidige situatie.

Er is bij de Apple watch spread geen interview en geen huidige situatie.

H.E.M. van Vugt

Denk aan haptic feedback bij de Apple watch.

Haptic feedback maak onderdeel uit van de oplossing voor de probleemstelling van de Apple watch.

H.E.M. van Vugt

Ontwerp alleen wat je laat

Alleen de situaties in de

H.E.M. van Vugt

Apple watch

H.E.M. van Vugt

Wat is BVA?

Inleiding

BVA is een van de grootste online veilinghuizen van Nederland. Ze brengen in opdracht van banken, curatoren, leasemaatschappijen, industrie en het bedrijfsleven (on)roerende zaken ter veiling. https://www.bva-auctions.com/

Dit is een ontwerpdocument (interactieontwerp) voor de App van de veilingsite BVA Auctions B.V. Dit ontwerpdocument richt zich voornamelijk op het ontwerpen van de App voor de iPhone en de Apple watch. De verschillende onderdelen van de App zijn ontworpen aan de hand van vier User Stories.

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 failliet 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 & Feel BVA richt zich voornamelijk op de zakelijke gebruiker; de professionele handelaar of een bedrijf die geïnteresseerd is in de inboedel van een failliete concurrent. De stijl van het herontwerpen moet uitgaan van regelmatig terugkomende klanten en een zakelijke tone-of-voice.

Begrippen

1.

2.

3.

4.

De gebruiker kan op zijn iPhone een specifiek product in detail bekijken, zodat hij weet of dit product interessant is.

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

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

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

Aan de hand van deze User Stories, een interview met de gebruiker en een Mental Model kunnen we van de User Stories gespecificeerde probleemstellingen maken. Per probleemstelling kunnen we doormiddel van Design Patterns zowel structural als behavioural en het Mental Model van de gebruiker mogelijke oplossingen vinden.

Na het zoeken en analyseren van mogelijke oplossingen wordt hier uit de beste oplossing gekozen. Deze oplossing wordt vervolgens ontworpen naar de behoeftes van de BVA App, eerst ontwerp ik twee Lo-Fi wireframe schetsen en van deze twee Lo-Fi wireframe schetsen wordt de beste gekozen. De Lo-Fi wireframe schets die het beste aansluit als oplossing voor het probleem wordt vervolgens uitgewerkt tot een detail Hi-Fi ontwerp.

Alle Hi-Fi ontwerpen van de verschillende onderdelen van de App worden in één geheel getoond achterin dit document in de vorm van een screenflow. In de screenflow zie je een overzicht van het hele ontwerp en wordt de interactie getoond van de gebruiker met de App.

• Kavel: is een verkoopbare eenheid, deze kan bestaan uit een aantal stuks producten of een enkel product.

• Veiling: een verzameling van meerdere van kavels die op dezelfde plaats liggen opgeslagen en tegelijkertijd geveild worden.

Meestal is een ‘veiling’ de complete inboedel van een failliet bedrijf.

Geïnterviewde Jessica (21 jaar) Studente maatschappelijk werker (zorg en welzijn) Jessica studeert aan de ROC Nova college te Haarlem, ze volgt een opleiding voor maarschappelijk werker en zit nu in het tweede jaar van haar opleiding. Ze heeft wel eens eerder van BVA gehoord maar nog nooit de website, mobiele website of app bezocht. Ze is in het bezit van een iPhone en zit hier regelmatig op.

4

Specifiek product in detail bekijken De gebruiker kan op zijn iPhone een specifiek product in detail bekijken, zodat hij weet of dit product interessant is.

User story...

Passende oplossingen (structural patterns - Detail)

De gebruiker kan op zijn iPhone een specifiek product in detail bekijken, zodat hij weet of dit product interessant is.

Kieskeurig.nl - Specificaties

Nest Protect Batterij - Technische gegevens Beste Koop - Testresultaten

Kieskeurig.nl heeft een hele lange en erg uitgebreide Specificatie lijst. Er is veel informatie te zien over een bepaald product, nadeel hiervan is, is dat er bij het ontbreken van informatie er lange lege lijsten ontstaan. Wel werken ze met cijfers en sterretjes om beoordelingen in één oogopslag te kunnen zien.

Nest Protect Batterij is een erg handige en uitgebreide App voor de Nest Rookmelder. In deze App heb je ook een technische gegevens lijst, dit is ook een vorm van specificaties en uitgebreide informatie. De layout en font keuze zijn erg duidelijk en overzichtelijk er zijn geen overbodige details toegevoegd alleen de relevante informatie die de gebruiker nodig heeft.

Huidige situatie

Interview gebruiker V: Je bent op de App en zoekt nu een specifiek product of kavel.

Waar ga je deze zoeken en hoe verwacht je de resultaten te zien?

A: Ik ga deze zoeken bij de zoekbalk bovenaan, als ik type verwacht ik mogelijke suggesties van wat ik zoek zoals bij de Google zoekbalk.

V: Wat verwacht je te zien tijdens het zoeken?

A: Een beschrijving van het product, de prijs en specificaties.

V: Wat voor details vind je belangrijk bij de specificaties van een product?

A: Kleur, maat, staat van het product, materiaal en dingen die belangrijk zijn voor dat Product.

Beste Koop is een App van de Consumentenbond.

In deze App kan je natuurlijk producten vergelijken aan de hand van specificaties en beoordelingen van klanten. Bij het bekijken van een specifiek product op de App is er genoeg informatie over het product te vinden, maar in het geval dat de specificatie n.v.t. is blijft het wel staan, dit kost ruimte en is onnodig.

Mentaal model gebruiker

Gekozen oplossing

De gebruiker wilt dat het product/kavel die hij of zij in detail wilt bekijken de details en specificaties van het product laten zien.

Ik heb gekozen voor het detail scherm van de Nest Protect Batterij.

Dit scherm laat de gegevens duidelijk en overzichtelijk zien, het voldoet ook aan de eisen van de gebruiker en haar mentaal model van de App. De font is erg duidelijk er is goed gebruik gemaakt van spatiering en alles is in één oogopslag te zien. Dit is wat ik nodig heb om de detaillijst van de BVA App te ontwerpen.

V: Wat wil je kunnen doen vanaf het detail scherm?

A: Details en specificaties van het product bekijken, V: Hoe verwacht je deze details en specificaties te zien?

A: In de vorm van een lijst met detail en de info die hier bij hoort.

Probleemstelling

V: Wat vind je belangrijk in zo’n lijst?

A: Dat het duidelijk te lezen is en dat ik niet al teveel hoef te scrollen of zoeken naar specificaties.

De gebruiker wilt specifieke informatie en/of specificaties over een bepaald product direct kunnen zien.

Ontwerpdocument BVA iPhone & Apple watch app 19 oktober 2015 Versie: 2 Ontwerper: Omar Vasquez Jesus Studentnummer: 500 704 100

6

Lo-Fi schetsen specifiek product in detail bekijken Ontwerp A

Hi-Fi ontwerp

Ontwerp B 2

1

3

4 Ontwerp A

Ontwerp B

Dit ontwerp is duidelijk maar de prijs zit verwerkt in de specificaties achteraf vond ik dit niet handig aangezien de klant nu niet in één oogopslag kan zien hoeveel een kavel/product kost. Nu zou die eerst de specificaties moeten doorlezen om de prijs te weten dit kost tijd en is onhandig

Dit ontwerp laat alleen de specificaties van het product zien, alle onderdelen die geen toegevoegde waarde hier bij hebben zijn weggelaten. Zo min mogelijk details maar wel duidelijk voor de gebruiker. De prijs is zoals bij de BVA App nog steeds bovenaan te zien dit is best handig want de gebruiker kan dan in één oogopslag zien of de kavel/product relevant voor hem/ haar is qua prijs. Verder heb ik gekozen voor de specificatie lijst van Nest Protect Batterij deze is duidelijk door te nemen en sluit aan bij de behoeftes van de BVA App. Ik heb gekozen voor Lo-Fi schets B net als bij de BVA App staat er eerst een korte beschrijving van het product/kavel dit heb ik er in gehouden de prijs ook. De specificatie lijst is vergelijkbaar met die van Nest Protect Batterij maar dan wel afgestemd voor de gebruikers van de BVA App. Door de details van het product in een lijst te zetten kan de gebruiker in één oogopslag de specificaties van het product zien. De prijs is ook duidelijk bovenaan te zien.

Annotatie 1. Prijs 2. Beschrijving Product 3. Specificaties Product 4. Meer informatie over deze veiling

Ontwerpdocument BVA iPhone & Apple watch app 19 oktober 2015 Versie: 2 Ontwerper: Omar Vasquez Jesus Studentnummer: 500 704 100

7

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

User story...

Passende oplossingen (design patterns)

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

Ness (iPhone) - coach marks

Rdio (iPhone) - Detail scherm

Pinterest (iPhone) - Feed scherm

Dit is een behavioural pattern, door naar boven te swipen krijg je meer informatie te zien en door naar beneden te swipen kan je de content opslaan.

Dit kan ook gebruikt worden voor kavels en veilingen van BVA. Daarnaast is het een behavioural pattern iets waar de gebruiker al bekend mee is.

Behavioural pattern, door naar boven te swipen slide er een menu open met opties. Deze pattern past bij de BVA App, door de opties te vertalen naar de handelingen van de gebruiker, zoals kavels opslaan.

Maar dit kan vee simpeler en werken met een menu als deze is niet relevant voor de BVA App, het gaat immers alleen om het opslaan van een kavel.

Structural pattern, de Pinterest App heeft een prikboord in het menu waar zich geprikte items bevinden, dit kan gebruikt worden in de context van de BVA App om kavels op deze manier op te slaan.

Huidige situatie

Interview gebruiker V: Je wilt nu een kavel opslaan waar ga je heen?

A: Naar de kavels, en via hier opslaan V: Op welke manier wil je dit opslaan?

A: Door lang ingedrukt te houden en dan via een menu op te slaan, net als bij Facebook als je een foto wilt opslaan.

V: Wat verwacht je te zien als je een kavel wilt opslaan?

A: Een icoon of knop om te op te slaan.

Mentaal model gebruiker

Gekozen oplossing

V: Wat verwacht je te zien na dat de kavel is opgeslagen?

A: Een reminder of notificatie dat het is opgeslagen. bijvoorbeeld bij Whatsapp: zie je een getal als je een bericht hebt, dit valt gelijk op en is makkelijk te onthouden.

De gebruiker benadert dit probleem vanaf zijn mentaal model die werkt volgens de standaard functies van het opslaan van content op bepaalde Apps.

De gebruiker gaat er van uit dat de BVA App op dezelfde manier werkt zonder te veel moeite te doen. Behavioural en structural patterns spelen hier allebei een rol in, de manier van hoe de gebruiker op de hoogte zal worden gehouden van een veiling zal een herkenbare en toegankelijke manier worden.

Ik heb gekozen voor de Ness App voor iPhone, aan de hand van deze behavioural patterns is het heel gemakkelijk en snel voor de gebruiker om een kavel op te slaan. Door alleen bij de kavel/product in de specificatie pagina te zijn en hier naar benden te swipen heb je de kavel opgeslagen, Na de kavel te hebben opgeslagen ontvangt de gebruiker en kort bericht waarop vermeld staat dat de kavel is opgeslagen. Nu de kavel is opgeslagen zal de gebruiker op de hoogte van de start van de kavel worden gehouden door een notificatie in het icoon van mijn kavels, zie bijvoorbeeld de notificatie bij de Pinterest App je kan zien hoeveel boorden je al hebt geprikt of Whatsapp die je laat weten via het icoon hoeveel nieuwe berichten je hebt. Dit kan bij mijn kavels ook gebruikt worden om de gebruiker te laten weten wanneer die de veiling start.

V: Zijn er dingen die er missen bij het opslaan van een kavel?

A: Krijg ik te zien wanneer deze veiling verlopen is of niet.

V: Zou je extra functies willen bij het opslaan van een kavel?

A: Niet per se extra functies, maar misschien wel de manier van het opslaan zelf, dus bijvoorbeeld opslaan door te swipen of ingedrukt houden zou kunnen.

V: Hoe ben je van andere Apps gewend dingen op te slaan?

A: Het verschilt per App maar meestal is het lang ingedrukt houden tot dat er een keuzemenu verschijnt en via dit menu opslaan.

Probleemstelling De gebruiker wilt een kavel opslaan op vergelijkbare manieren met hoe je op andere Apps content opslaat, ook wilt de gebruiker en notificatie/reminder krijgen na dat een kavel is opgeslagen.

Ontwerpdocument BVA iPhone & Apple watch app 19 oktober 2015 Versie: 2 Ontwerper: Omar Vasquez Jesus Studentnummer: 500 704 100

10

Lo-Fi schetsen Kavel opslaan Ontwerp A

Hi-Fi ontwerp Ontwerp B 4

2

1

Ontwerp A

Ontwerp B

Hier heb ik gebruik gemaakt van een behavioural pattern namelijk de lange touch die we ook gebruiken als we bijvoorbeeld en foto willen opslaan via Facebook of andere Apps die dit ondersteunen. Met het lang ingedrukken van de afbeelding van het product, sla je de kavel op. Dit principe werkt goed als je meerdere opties wilt bieden voor het gene wat je gaat opslaan. In het geval van de BVA App is dit niet nodig en is alleen opslaan van een kavel voldoende. Ook kan dit de gebruiker in verwarring brengen omdat die mogelijk het bekijken van de foto’s wel begrijpt door naar recht en links te swipen maar mogelijk niet begrijpt dat je dezelfde content ook lang ingedrukt kan houden om het op te slaan.

In dit ontwerp heb de behavioural pattern van de Ness App toegepast. Door naar boven te swipen kan de gebruiker zijn kavel opslaan dit is de enige handeling die de gebruiker hoeft te doen. De BVA App zoals die nu is heeft deze behavioural pattern al maar alleen door naar beneden te swipen om de pagina te refreshen. De gebruiker is er dus gewend mee nu kan de gebruiker omhoog swipen om de kavel op te slaan.

Na het omhoog swipen ontvangt de gebruiker en bericht met kavel opgeslagen, het witte hartje wordt blauw wat nog een indicatie is dat de kavel is opgeslagen en het mijn kavels icoontje geeft het getal aan van het aantal opgeslagen kavels.

De gebruiker wordt gewaarschuwd door mijn kavels aan de hand van een alarm zodat hij/zij weet dat de veiling gaat starten.

3

Annotatie 1. Swipe omhoog om kavel op te slaan 2. Reminder opgeslagen kavel 3. Aantal opgeslagen kavels 4. Hartje kleurt blauw als kavel is opgeslagen

Ontwerpdocument BVA iPhone & Apple watch app 19 oktober 2015 Versie: 2 Ontwerper: Omar Vasquez Jesus Studentnummer: 500 704 100

11

Bericht ontvangen De gebruiker ontvangt een bericht op zijn Apple Watch, zodat hij weet dat hij kan gaan bieden.

User story...

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

Passende oplossingen (design patterns) Apple watch - Bericht

Apple watch - Mail

iPhone - Reminder

Structural pattern, de message App laat de gebruiker Strutural pattern, mail App laat de gebruiker weten weten dat die een bericht heeft en dat hij kan dat die een mail heeft. Dit bericht kan direct gelezen antwoorden. De gebruiker kan op deze manier ook een worden. Mogelijke oplossing maar niet optioneel. bericht van de BVA ontvangen, zo dat die kan gaan bieden. Op deze manier ziet de gebruiker direct waar het bericht over gaat.

Net als bij een reminder op een iPhone of Android of een App die dit ondersteunt wordt de gebruiker herrinert iets te doen zo dat hij dit niet vergeet. De reminders zijn en erg handige oplossing en kunnen ook in combinatie met haptick feedback gebruikt worden zoals vibratie en geluid.

Mentaal model gebruiker

Gekozen oplossing

De gebruiker is gewend berichten te krijgen via bepaalde Apps op de Iphone denk hierbij aan berichten, mail en Whatsapp. De gebruiker wordt doormiddel van haptic feedback gealarmeert over het desbetreffende bericht.

De gekozen pattern is de message widget op de Apple Watch het is een te herkenbaar en goed werkend patroon om deze niet te gebruiken. De gebruiker ontvangt een bericht op zijn Apple Watch over wanneer hij/zij kan gaan bieden en kan door op de Reply button te drukken gelijk gaan bieden. Het bericht laat de gebruiker direct weten waar het onderwerp over gaat en dit in combinatie met vibratie en een alarm signaal zorgen voor het snel en acuraat op de hoogte houden van de gebruiker.

Probleemstelling Als de gebruiker een bericht ontvangt op zijn Apple Watch, moet het voor de gebruiker direct duidelijk zijn waar dit bericht over gaat.

Ontwerpdocument BVA iPhone & Apple watch app 19 oktober 2015 Versie: 2 Ontwerper: Omar Vasquez Jesus Studentnummer: 500 704 100

14

Lo-Fi schetsen Kavel opslaan

Hi-Fi ontwerp

1 2

3

4

Ontwerp A

Ontwerp B

Bij dit ontwerp heb je maar een keus als je het bericht hebt gekregen om te bieden dit geeft de gebruiker niet veel opties.

Dit ontwerp biedt de gebruiker de optie om te kiezen of hij wilt bieden of dat hij het bericht sluit en niet meer over deze kavel bericht wordt. Bij het langer indrukken kan de kavel worden verwijderd.

5

Annotatie 1. Onderwerp van het bericht 2. Naam kavel/product 3. Foto kavel/product 4. Bieden 5. Cancel/ kavel verwijderen

Ontwerpdocument BVA iPhone & Apple watch app 19 oktober 2015 Versie: 2 Ontwerper: Omar Vasquez Jesus Studentnummer: 500 704 100

15

Bieden, bedrag instellen De gebruiker kan op zijn Watch het te bieden bedrag instellen, zodat hij kan bieden

User story...

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

Passende oplossingen (design patterns) Apple watch - Alarm instellen

Apple watch - Stopwatch

iPhone - Bieden Veiling App

Behavioural pattern, op de alam App kan je vooringestelde alarmen activeren door naar rechts te sliden. Dit kan ook in de vorm van vooringestelde prijzen om ronde bedragen snel te kunnen bieden.

Daarnaast zou je de prijzen als nog kunnen aanpassen met de kroon van de horloge

Structural pattern, door de plus en min knop kan je de afstand bepalen. Dit kan een gepaste oplossing zijn om een bedrag in te stellen om vervolgens te kunnen bieden.

Op deze veiling App is erg uitgebreid weergegeven wat je gaat bieden en hoeveel btw je hiervoor betaalt er wordt erg veel informatie gegeven aan de gebruiker omtrend de prijs van zijn bod. Dit is erg handig voor een App op de iPhone maar zou niet werken op het formaat van een Apple Watch.

Mentaal model gebruiker

Gekozen oplossing

De gebruiker wilt op een acurate manier zijn bedrag kunnen instellen, het kunnen immers om honderden euro’s gaan. Daarnaast is het handig voor de gebruiker om vaak ingestelde bedragen gelijk te kunnen plaatsen.

De alarm App biedt gemak en veiligheid voor de BVA App gebruikers op de Apple Watch, je wilt namelijk gelijk kunnen bieden zonder al te veel te moeten doen daarnaast ga je natuurlijk vaak ronde getallen bieden, zo hoef je tijdens het instellen van het bedrag alleen naar rechts te swipen. Zit jou bedrag er niet tussen dan kan je altijd nog het bedrag aanpassen naar jou voorkeur.

Probleemstelling De gebruiker moet via de Apple Watch een bedrag kunnen instellen om te bieden via de BVA App

Ontwerpdocument BVA iPhone & Apple watch app 19 oktober 2015 Versie: 2 Ontwerper: Omar Vasquez Jesus Studentnummer: 500 704 100

18

Lo-Fi schetsen Kavel opslaan

Hi-Fi ontwerp

1 2 3 4 5 6

Ontwerp A

Ontwerp B

Met de alarm App als inspiratie Kan de gebruiker vooringestelde bedragen direct instellen (activeren) door een simpele swipe naar rechts. Het enige wat dit ontwerp niet biedt is het handmatig instellen van bedragen.

Dit ontwerp is hetzelfde principe als ontwerp A, maar hier krijgt de gebruiker wel de mogelijkheid om specifieke bedragen in te voeren doormiddel van touch plus en min en doormiddel van de kroonwiel van de Watch.

7

8

Annotatie 1. Onderwerp van het bericht 2. Opdracht 3. Bedrag niet geselecteerd 4. Bedrag geselecteerd 5. Specifiek bedrag 6. Plus 7. Min 8. Bod uitbrengen

Ontwerpdocument BVA iPhone & Apple watch app 19 oktober 2015 Versie: 2 Ontwerper: Omar Vasquez Jesus Studentnummer: 500 704 100

19

Screenflow BVA App 1.

2.

3.

4.

20

Naam Omar Vasquez Jesus Studentnummer 500 704 100 Klas DMCI V1-11 Docent H.E.M. van Vugt Vak Design Patterns Opdracht Eindopdracht BVA Smartphone & Watch Versie 1 Datum 9-10-2015

22