Design Patterns V1-1516 Eindopdracht Romy van der Beek 500707995 V101 Docent: Harm van Vugt 27-10-2015 A design pattern is a formal way of documenting a solution to a common design problem.
Inhoudsopgave Inleiding 1 De oplossing 1 Feedbacktabel 1 Userstory 1 2/3 Huidige situatie 2 Interview 2 Het probleem 2 Passende oplossingen + mijn keuze 2 Lofi schetsen + gekozen variant 3 Het ontwerp 3 Userstory 2 4/5 Huidige situatie 4 Interview 4 Het probleem 4 Passende oplossingen + mijn keuze 4 Lofi schetsen + gekozen variant 5 Het ontwerp 5 Userstory 3 6/7 Het probleem 6 Passende oplossingen + mijn keuze 6 Lofi schetsen + gekozen variant 7 Het ontwerp 7 Userstory 4 8/9 Het probleem 8 Passende oplossingen + mijn keuze 8 Lofi schetsen + gekozen variant 9 Het ontwerp 9 De screenflow 11 BVA Mijn oplossing in een notendop BVA is één van de grootste online veilinghuizen van Nederland. Hier mogen wij een ontwerpdocument voor een deel van de applicatie voor maken. Bij de applicatie heb ik rekening gehouden met de doelgroep, vrijwel zakelijke klanten. Wat hieruit is gekomen zul je terugzien in mijn ontwerpdocument. Met kleine aanpassingen in een ontwerp kan je al heel ver komen! Feedback Aanpassing Feedbackgever User story 2: Pattern 3 bij de passende oplossingen moet verder worden uitgewerkt. Ik heb bij de We heart it applicatie delen van screenshots gebruikt om de werking duidelijker te maken. Harm van Vugt User story 3: Het gaat om een signaal dus laat dit ook zien door middel van geluid. (Bijvoorbeeld een trilling) User story 4: De probleemstelling is te uitgebreid. User story 4: Laat alleen zien wat van toepassing is. Ga geen dingen toevoegen. User story 4: Hoe kan je nu een bod van bijvoorbeeld 1000000 instellen? Haptic feedback biedt hierbij een goede oplossing, dan krijg je een signaal door middel van geluid en een bericht op het scherm van apple watch. Ik heb de probleemstelling specifieker gemaakt door het gehele proces, een bod uitbrengen te vervangen door een bedrag instellen. Ik heb de knop voor het annuleren van een bod weggelaten. Ik heb ervoor gekozen om het minimum volgend bod wat vermeld staat bij de kavel te gebruiken voor het instellen van het bedrag. Dit maakt het voor de gebruiker veel gemakkelijker. Harm van Vugt Harm van Vugt Harm van Vugt Harm van Vugt CMD Design Patterns V101 Romy van der Beek 500707995 27 oktober 2015 pagina 1
Userstory 1 - Iphone Passende oplossingen User story: De gebruiker kan op zijn iphone een specifiek product in detail bekijken, zodat hij weet of dit product interessant is. Pattern 1 - Facebook Pattern 2 - Pathé Pattern 3 - Vakantieveilingen Huidige situatie Het interview Vraag: Is het duidelijk hoe je meerdere fotos kan bekijken en dan weer terug kan gaan naar het scherm met de veilingen? Waarom? Antwoord: Ja, maar het zou voor mij duidelijker zijn als de 4 fotoo tjes in het klein onder de grote foto zouden staan. Zodat je gelijk door de foto s heen kan swipen. Nu moet je helemaal op de foto klikken voordat je de foto echt helemaal kan zien. Het probleem Gebruikers moeten gelijk kunnen zien wat voor product ze kopen door middel van de foto s. De werking De eerste foto wordt groot weergegeven, de rest van de foto s staan in het klein eronder. Door op een foto te klikken, krijg je hem in het groot te zien. Vervolgens kan de gebruiker door de andere foto s heen swipen. De pijltjes geven aan dat er meer foto s zijn. Door op de pijltjes te klikken kom je bij de andere foto s. Ook is er de optie om te swipen naar andere foto s. Je ziet 1 van 5 staan bij de foto, dit houdt dat je bij nummer 1 van 5 foto s bent. Door naar links te swipen kom je bij de andere foto s. Mijn keuze - pattern 3 Vakantieveilingen Als je kijk naar pattern 3, de applicatie van Vakantieveilingen, wordt er gelijk duidelijk weergegeven waar de veiling om gaat. Ook vakantieveilingen is een applicatie waar je producten & diensten kan kopen. De manier waarop zij het weergeven is veel duidelijker voor de gebruiker omdat je gelijk één grote foto ziet. Plus als de gebruiker andere foto s wil bekijken, kan hij/zij gelijk door de foto s heen swipen zonder dat je naar een ander scherm moet gaan. CMD Design Patterns V101 Romy van der Beek 500707995 27 oktober 2015 pagina 2
Lo-fi schetsen Detailontwerp Schets 1: Behavioural pattern Schets 2: Behavioural pattern 1. De gebruiker kan direct door de afbeeldingen heen swipen zonder dat hij/zij naar een ander scherm moet gaan. 2. De gebruiker heeft hierbij beschikking over 5 foto s. Dit aantal zal bij ieder product anders zijn. 2 1 Gekozen variant Als ik kijk naar het probleem (Gebruikers moeten gelijk kunnen zien wat voor product ze kopen door middel van de foto s.) denk ik dat dit de beste oplossing is voor de gebruikers. Als je nu namelijk naar de applicatie kijkt, moet je eerst op de eerste foto klikken voordat je de andere foto s kunt zien. Je komt hierbij op een nieuw scherm, wat ook helemaal niet handig is. Bij deze oplossing blijf je op hetzelfde scherm en kun je gelijk alle foto s bekijken zonder enige moeite. CMD Design Patterns V101 Romy van der Beek 500707995 27 oktober 2015 pagina 3
Userstory 2 - Iphone User story: De gebruiker kan op zijn iphone een kavel opslaan, zodat hij op de hoogte blijft van de start van de veiling. Passende oplossingen Pattern 1 - NS Pattern 2 - Nu Pattern 3 - We heart it Huidige situatie Het interview Vraag: Is het duidelijk hoe je een kavel opslaat binnen de BVA applicatie? Zou het op een andere manier duidelijker zijn? Antwoord: Ja, het is duidelijk maar ik zou het op een andere manier weergeven. Het lijkt nu net of je de kavel liked, zoals ze dat bijvoorbeeld op Facebook doen. Daar relateer ik het nu ook mee en dat is denk ik niet de bedoeling aangezien het gaat om het opslaan van een kavel. Het probleem Gebruikers moeten in de applicatie duidelijk kunnen zien hoe ze een kavel kunnen opslaan. De werking Je ziet onderin het scherm een button met Reis opslaan, door hier op te drukken kan de gebruiker de reis later terugkijken. Hij wordt opgeslagen. Rechtsbovenin het scherm zie je een vakje met een pijltje naar boven, wanneer de gebruiker hierop druk, krijgt hij meerdere opties te zien, waaronder Voeg toe aan leeslijst. De gebruiker kan het artikel later terugkijken. Door een afbeelding ingedrukt te houden verschijnt het menu hierboven op het scherm. De afbeelding kan opgeslagen worden door op Beeld opslaan te drukken. Mijn keuze - pattern 1 NS Ik denk dat het voor de applicatie het beste is als het icoon wat ze gebruiken een duidelijkere betekenis heeft en niet ergens mee gerelateerd kan worden. In de BVA applicatie gebruiken ze al een icoontje zoals bij pattern 2, alleen dan niet voor het opslaan van een kavel. Om verwarringen te voorkomen denk ik dat pattern 1 het beste is als ik een ontwerp zoals pattern 1 maak. De gebruiker weet hier gelijk hoe hij/zij een kavel op kan slaan zonder dat het verborgen zit. CMD Design Patterns V101 Romy van der Beek 500707995 27 oktober 2015 pagina 4
Lo-fi schetsen Detailontwerp Schets 1: Behavioural pattern Schets 2: Behavioural pattern 1. De gebruiker kan gelijk na het bekijken van de kavel, de kavel opslaan. 2. De gebruiker kan zijn opgeslagen kavels makkelijk terugvinden door naar Mijn kavels te gaan. 1 3 3. Door hierop te klikken kan de gebruiker waar nodig extra informatie krijgen. Dit gaat onder anderen over de veiling zelf (start/sluiting), ophaaldagen en een toelichting van de veiling (waar gebruikers op moeten letten bij het bieden op deze veiling). Gekozen variant - schets 2 Bij de eerste lo-fi schets heb ik gekozen voor een button bovenin het scherm op de plek waar het hartje stond waarmee je de kavel op kon slaan. Bij de tweede lo-fi schets heb ik ervoor gekozen om de button met kavel opslaan helemaal vrij onderin te zetten nadat de gebruiker de beschrijving heeft gelezen. Ik denk persoonlijk dat dit beter zal werken omdat je normaal gesproken eerst de hele kavel doorneemt voordat je hem zal opslaan. 2 CMD Design Patterns V101 Romy van der Beek 500707995 27 oktober 2015 pagina 5
Userstory 3 - Apple Watch Passende oplossingen User story: De gebruiker ontvangt een bericht op zijn Apple Watch, zodat hij weet dat hij kan gaan bieden. Het probleem Gebruikers moeten een signaal krijgen op de Apple Watch, wanneer de veiling start. Pattern 1 - Uber Pattern 2 - CNN Pattern 3 - American Airlines CMD Design Patterns V101 Romy van der Beek 500707995 27 oktober 2015 pagina 6 De werking Met de Uber applicatie kun je een rit aanvragen. Wanneer de auto vertrekt en wanneer hij is gearriveerd krijg je een bericht. Ook krijg je status updates, een foto van de auto en van het kenteken. Bij de applicatie CNN krijg je nieuws over 12 gepersonaliseerde categorieën. Je beslist zelf welke content je op de Watch wil zien. Je kunt ervoor kiezen om het artikel te openen of af te wijzen door op Dismiss te drukken. Ook krijgt de gebruiker een signaal door middel van een trilling. Bij deze applicatie krijg je een bericht wanneer je moet vertrekken naar de luchthaven. Je krijgt extra informatie ontvangen over je vlucht, zoals bijvoorbeeld aanpassingen over je gate. Ook kun je inchecken via de Apple Watch. Mijn keuze - pattern 2 CNN Als ik kijk naar de verschillende manieren waarop de oplossingen worden weergegeven denk ik dat pattern 2 met de applicatie van CNN het beste zal gaan werken. Hier wordt een bericht weergegeven, waarbij de gebruiker ook de optie krijgt om het bericht af te wijzen. Dit is heel toepasselijk voor de BVA applicatie. Je kunt namelijk weergeven welke veiling er gestart is, zoals weergegeven bij pattern 2. Ook kun je de button met Dismiss gebruiken om te laten weten dat je het gezien hebt maar dat je niet gelijk wil bieden. Wanneer dit wel het geval is kan de gebruiker op het bericht drukken en een bod uitbrengen. Je krijgt een trilling zodat de gebruiker weet dat er een bericht is.
Lo-fi schetsen Detailontwerp Schets 1: Behavioural pattern Schets 2: Behavioural pattern 1. Door op de button te klikken zegt de gebruiker: Nee, bedankt ik wil niet direct een bod doen. 2 2. Door op de veiling te klikken (het gehele blok kan hierbij gebruikt worden), kan de gebruiker een bod uitbrengen voor de specifieke veiling. 3 3. Het minimum bod hangt af van het laatste bod wat er gedaan is en dus ook het aantal biedingen wat er gedaan zijn. Gekozen variant - schets 1 Ik denk persoonlijk dat schets 1 de beste oplossing is. Daarbij krijgt de gebruiker een bericht dat de veiling gestart is en krijgt daarnaast de optie om naar de veiling te gaan en een bod te doen. Wanneer de gebruiker dit op een later moment wil doen, kan de gebruiker het bericht afwijzen. Uiteindelijk gaat het bij deze user story om het bericht/signaal wat de gebruiker wil krijgen dus daarom denk ik dat schets 1 het beste is. Schets 2 is teveel gericht op de veiling en het bod doen. Daarnaast wil ik net als bij pattern 2 CNN haptic feedback toepassen, dit is een voelbare trilling. 1 De gebruiker krijgt een signaal door middel van Haptic feedback en een bericht op het scherm van de Apple Watch zelf. CMD Design Patterns V101 Romy van der Beek 500707995 27 oktober 2015 pagina 7
Userstory 4 - Apple Watch User story: De gebruiker kan op zijn Watch het te bieden bedrag instellen, zodat hij kan bieden. Passende oplossingen Pattern 1 - Wekker Pattern 2 - Siri Pattern 3 - Poll Party Het probleem Gebruikers moeten het bedrag in kunnen stellen. De werking Met de Apple Watch kan je meerdere wekkers tegelijkertijd beheren of instellen. Een nieuwe wektijd kun je instellen met de digital crown of door Siri om hulp te vragen. Je kunt Siri om elk moment om hulp vragen om een bepaalde actie uit te voeren. Je tilt je arm op en vraagt het aan Siri. Met deze applicatie kun je gokken wat een willekeurige uitkomst is van een peiling. Met 1 tikje op het scherm kun je je antwoord ingeven. Je kunt bijhouden hoe je ervoor staat en hoe je het hebt gedaan tegenover de rest van de wereld. Mijn keuze - pattern 1 wekker De gebruiker moet een optie hebben om een bedrag in te kunnen stellen op een bepaalde kavel/veiling. Wanneer de gebruiker ervoor kiest om de veiling aan te drukken die zojuist gestart is, komt hij/zij op het scherm waar een bod uitgebracht kan worden. Ik denk dat de beste optie is om de gebruiker gebruik te laten maken van de Digital Crown. Net zoals ze dat doen bij de applicatie van de wekker. Door aan de Digital Crown te draaien kan de gebruiker het bod instellen. Stel het lukt niet op deze manier, kan de gebruiker Siri inschakelen om het bod in te stellen. Deze optie geven ze je ook bij de wekker. CMD Design Patterns V101 Romy van der Beek 500707995 27 oktober 2015 pagina 8
Lo-fi schetsen Detailontwerp Schets 1: Structural pattern Schets 2: Structural pattern 1. Door de Digital Crown te gebruiken kan de gebruiker zijn/haar bedrag instellen. 2. Als het niet lukt met het instellen van het bedrag, kan de gebruiker gebruik maken van de optie om Siri om hulp te vragen. Dan kan de gebruiker het gewoon inspreken. 3 1 2 3. Bij user story 3 zie je bij het detailontwerp het minimum volgend bod staan. Waneer de gebruiker ervoor kiest om naar de veiling te gaan zal dit bedrag al zichtbaar zijn bij mijn bod. Gekozen variant - schets 1 Bij schets 2 heb ik er voor gekozen om een button om te annuleren linksonderin toe te voegen. Bij beide schetsen wordt er gebruik gemaakt van de Digital Crown om het bedrag in te kunnen stellen met als extra optie Siri. Deze optie kan de gebruiker op ieder moment inschakelen. Ik denk dat schets 1 het beste is. De gebruiker heeft hier een duidelijk overzicht van de veiling. Het bod van de gebruiker wordt hier duidelijk weergegeven, wat helemaal op een Apple Watch fijn is om het goed te kunnen zien. Daarbij zijn er bij schets 2 overbodige opties gebruikt ( annuleren ) die bij deze user story helemaal niet van toepassing zijn. Het gaat uiteindelijk om het instellen van het bedrag. CMD Design Patterns V101 Romy van der Beek 500707995 27 oktober 2015 pagina 9
CMD Design Patterns V101 Romy van der Beek 500707995 27 oktober 2015 pagina 10
Screenflow 1. Specifiek product in detail bekijken 2. Een kavel opslaan 3. De gebruiker krijgt een signaal 4. Het bod instelllen 3a. Detail werking De gebruiker kan naar user story 4 gaan door op de veiling te klikken, of afwijzen. 4a. Detail werking De Digital Crown zorgt ervoor dat de gebruiker het bedrag makkelijk kan instellen. 1a. Detail werking De gebruiker kan direct door de afbeeldingen heen swipen en weet precies waar hij/zij is door middel van het blauwe balkje. 2a. Detail werking Wanneer de kavel opgeslagen is, krijgt de gebruiker een signaal wanneer de veiling start. Zie User story 3. 4b. Detail werking Het bedrag wat bij user story 3 wordt weergegeven zie je terug bij Mijn bod bij user story 4. 1b. Detail gedrag 2b. Detail gedrag 1 van 5 2 van 5 Kavel opslaan Kavel opgeslagen etc. Legenda gestures CMD Design Patterns V101 Romy van der Beek 500707995 27 oktober 2015 pagina 11 Tap Swipe left Swipe right Swipe up Swipe down