CMD Amsterdam 1516 - DFI: Design Patterns V1 Blok 1 Eindopdracht feedback en beoordeling Datum.. 30-10.. - 2015 Klas... v1-03 Student Robbin Lenior Docent Onderdeel Specificatie (is helder overgebracht hoe het bedachte moet werken) Onderbouwing (is het helder hoe de onderdelen leiden deze oplossing) Patterns (bij de onderbouwin g zijn de juiste patterns ingezet) Ontwerp (is de bedachte oplossing passend) Zeer zwak* Cijfer 1.0 De specificatie van schermen, screenflow of het document is niet of verkeerd toegepast. Feedback tabel is niet opgenomen. Er missen een of meerdere onderdelen in de onderbouwing: probleemstelling, interview, toelichting patterns/voorbeelden, keuze of LoFi s Er zijn minder dan 3 voorbeelden/patterns gegeven bij een probleem. De oplossing (het ontwerp) is geen oplossing voor het probleem. De toegepaste patterns/voorbeelden zijn niet passend bij het probleem. Onvoldoende 1 punt De specificatie is minimaal toegepast. De werking is totaal niet duidelijk. Er is meerdere malen toelichting noodzakelijk. Zonder mondelinge toelichting valt niet af te leiden dat het ontwerp is gebaseerd op de User Story Er zijn 3 verschillende voorbeelden/ patterns gevonden bij bij een elk probleem. De voorbeelden/pattern s zijn geen oplossing voor het probleem. De oplossing (het ontwerp) is geen passende oplossing voor het probleem. Voldoende 1,5 punt De student geeft de werking in de wireframes en screenflow weer. De werking van de UI is met één mondelinge toelichting heel duidelijk. Het ontwerp is duidelijk gebaseerd op de User Story. Slechts één enkele stap geen logisch vervolg op de voorgaande stap. De voorbeelden/patterns zijn allemaal een oplossing voor het probleem. Het is helder welk deel van het scherm dit pattern weergeeft. De oplossing (het ontwerp) is een passende oplossing voor het probleem. De keuze van de toegepaste patterns/voorbeelden is helder en consistent. Goed (2 punten) De gekozen specificatie vorm maakt de werking in een oogopslag duidelijk. Het ontwerp is duidelijk gebaseerd op de user story. De voorbeelden/patterns zijn passende en uiteenlopende oplossings richtingen voor dit probleem. Het is helder welk deel van het scherm dit pattern weergeeft. De oplossing (het ontwerp) is een passende oplossing voor het probleem. De keuze van de toegepaste patterns/voorbeelden is helder en consistent. Meerdere patterns worden gecombineerd tot een eigen ontwerp. Talent (2,50 punt) Er is een eigen variatie op de gegeven specificatie vorm bedacht en uitgewerkt die werking in een oogopslag duidelijk maakt. Het proces van User Story naar ontwerp spreekt voor zich. Het document is in zijn opzet en indeling zijn toegespitst op het helder onderbouwen van de oplossing. De User Stories zijn gedetailleerd tot deel-problemen De voorbeelden/patterns zijn passende en uiteenlopende oplossings richtingen voor dit probleem. Het is helder welk deel van het scherm dit pattern weergeeft. Er zijn passende patterns gevonden die vaak in een andere context gebruikt worden. De keuze van de toegepaste patterns/voorbeelden is helder en consistent. De gevonden patterns leidt dit tot een vernieuwend eigen oplossing voor dit probleem. De haptische feedback is gespecificeerd en passend. *Indien een of meer onderdelen als Zeer zwak zijn beoordeeld, is het cijfer een 1,0 1. De inhoudsopgave met titels werken ipv User story 1:. (en kloppend maken) 2. De App gebruiken 3. Interview en Probleem omschrijving omdraaien 4. Interview iets gedetaileerder en iets meer context 5. Highlight relevante dingen bij voorbeelden 6. Ik heb gekozen.. 7. Probleem omschrijving uitbreiden, iets meer diepgang 8. Notificatiescherm Wat gebeurd er bij 00.00? Eventuele toelichting docent Punten Punten /10 = cijfer
Eindopdracht Robbin Lenior Student# 500705146 Klas: V1-03 Robbin.Lenior@hva.nl 3
Inleiding Waar gaat dit document over? Inhoudsopgave: In dit document zal je mijn oplossing en ontwerp vinden voor de BVA app, zowel voor Iphone en Apple Watch. Er worden oplossingen gevonden voor 4 verschillende User Story s. Er is een probleemomschrijving gemaakt, onderzoek gedaan naar bestaande apps, twee lo-fi schetsen gemaakt en een nieuw ontwerp gemaakt. Mijn naam is Robbin Lenior, zit in de klas V1-03 en dit vak heet Design Patterns. Pagina 4: Pagina 4: Pagina 5: Pagina 6: Pagina 7: Pagina 8: Pagina 9: Pagina 10: Pagina 11: Pagina 12: Pagina 13: Waar gaat het document over? Inhoudsopgave BVA-auctions product pagina: Probleem omschrijving + Onderzoek BVA-auctions product pagina: Lo-fi schermen + Nieuw ontwerp BVA-auctions toevoegen/volgen: Probleem omschrijving + Onderzoek BVA-auctions toevoegen/volgen: Lo-fi schermen + Nieuw ontwerp Apple Watch Notificatie scherm: Probleem omschrijving + Onderzoek Apple Watch Notificatie scherm: Lo-fi schermen + Nieuw ontwerp Apple Watch Bieden scherm: Probleem omschrijving + Onderzoek Apple Watch Bieden scherm: Lo-fi schermen + Nieuw ontwerp Verbinding van de verschillende schermen (screenflow) 4
User Story: De gebruiker kan op zijn iphone een specifiek product in detail bekijken, zodat hij weet of dit product interessant is. Huidige situatie: Voorbeelden: 1. AutoScout 24 2. H&M product 3. Bol.com product Interview resultaten: Paul Lenior, 50 jaar. Wonend in Monnickendam, vader van vier kinderen en heeft een fulltime baan. Een aantal vragen die gesteld zijn: Wat vindt je van de app (hoe deze eruit ziet) en waarom? Wat zou je anders doen? De geïnterviewde vindt het handig dat je door de foto s heen kan swipen. Wel vindt hij de beschrijving erg moeilijk om doorheen te gaan. Er staat veel tekst en het is niet overzichtelijk. Misschien zou hij de beschrijving anders neerzetten, niet zo zeer de focus leggen op het bod uitbrengen. Probleem omschrijving: De gebruiker wil een product in detail kunnen bekijken, zowel foto s als de informatie die erover te verkrijgen is en daarmee kijken of ze het interessant vinden. Herkomst: AutoScout24 Herkomst: H&M Herkomst: Bol.com AutoScout24 gebruikt een carousel voor de foto s met een streep als indicatie waar de gebruiker is. Verder is de content gestructureerd met als mogelijkheid om deze in en uit te klappen. Ook staan er buttons onder voor directe handelingen zoals bellen. H&M heeft thumbnails als indicatie voor zijn carousel. Verder is de titel klein en moet de andere thumbnails gebruiken om meer informatie te kunnen bekijken. Bol.com heeft een geavanceerdere layout omdat ze er meer informatie kwijt willen zoals prijs, naam, soort, review sterren, enzovoort. Je kunt hem in je winkelmandje doen of op je verlanglijstje of delen met andere. Aandachtspunt Buttons / navigatie Content Header Gekozen: Er is gekozen voor de eerste oplossing, omdat deze erg focussed op het product zelf. De foto s zijn makkelijk te bereiken doormiddel van een swipe beweging. Je ziet in één overzicht over wat het gaat en hoeveel het kost. Verder is de informatie (beschrijving) gestructureerd zodat ze er makkelijker doorheen kunnen gaan en weet de gebruiker waar hij aan toe is. De gebruiker kan deze ook inklappen. 5
User Story: De gebruiker kan op zijn iphone een specifiek product in detail bekijken, zodat hij weet of dit product interessant is. Lo-fi schetsen van de oplossing: (Structural & Behavioural) Het nieuwe ontwerp: (Structural & Behavioural) 1. Bod focus 2. Info focus BVA-auctions product pagina 1 Zodra de gebruiker op de pijl tapped, schuift er een stukje uit waar hij/zij een bod kan gaan plaatsen. Bod plaatsen.. 2 De gebruiker kan het in klappen door Volg deze kavel op het pijltje te tappen. Deze staat standaard open geklapt. Bod plaatsen.. 1 Informatie De gebruiker kan de informatie (beschrijving van het product) bekijken en in klappen als hij/zij dat wilt. Dit kan door een tap te geven op het pijl omhoog icoon. De gebruiker heeft hier meer focus op de informatie en kan als hij/zij dit wilt, de opties om een bod te maken open klappen met behulp van de pijl icoon. Een tap daarop is al genoeg. Hetzelfde geldt voor de informatie, Informatie: Detail 1: Detail 2: Detail 3: Detail 4: Mooi scherm Batterij GH+ Retina scherm 15 mp Camera 2 alleen staat deze als standaard al open. Beschrijving: Een hele mooi tablet voor een scherpe prijs. Deze tablet van het jaar 2015.. 1 tap swiping links en rechts Aandachtspunt Buttons / navigatie Content Header Gekozen pattern: Ik heb gekozen voor oplossing 2: Info focus, hierbij staat de optie bod plaatsen standaard ingeklapt. Doordat deze standaard is ingeklapt ziet de gebruiker de content die eronder staat voor een deel en weet dan dat er meer informatie beneden zit. De gebruiker krijgt hiermee meer vrijheid om te kiezen waarop ze willen focussen, tegelijkertijd is de content gestructureerder en daardoor makkelijker te overzien. 6
User Story: De gebruiker kan op zijn iphone een kavel opslaan, zodat hij op de hoogte blijft van de start van de veiling. Huidige situatie: Voorbeelden: 1. Bol.com verlanglijstje 2. Marktplaats favoriet 3. Ebay opties Interview resultaten: Paul Lenior, 50 jaar. Wonend in Monnickendam, vader van vier kinderen en heeft een fulltime baan. Een aantal vragen die gesteld zijn: Begrijp je hoe alles werkt en waarvoor het staat? Zou jij het anders doen? De geïnterviewde geeft aan dat hij aanneemt dat het hartje als favoriet werkt, net als je een ster zou hebben. Hij weet hoe het werkt, hij tapped erop en het hartje wordt actief. Hij zou er iets bij zetten om het duidelijker te maken waarvoor het is en misschien een bevestiging van dat het is toegevoegd. Probleem omschrijving: De gebruiker wil een kavel opslaan om deze later terug te kijken of om op de hoogte te blijven van de kavel, maar het is niet duidelijk waar of hoe dit kan. Herkomst: Bol.com Herkomst: Marktplaats Herkomst: Ebay Bij Bol.com kun je een product aan je verlanglijstje en je winkelmandje toevoegen. Als je iets toevoegd veranderd de status van het icoontje en komt er een notificatie bovenin te staan van wat er gebeurd is. Marktplaats heeft een favorieten knopje, je ziet aan zijn status (hier is hij grijs/leeg) of hij al is toegevoegd. Zodra je hem toevoegd wordt dit sterretje geel ingekleurd zodat de gebruiker weet dat hij toegevoegd is. Bij Ebay kun je ervoor kiezen om hem direct te kopen, aan je winkelwagen toetevoegen en hem te bekijken, dat betekend dat hij naar een lijst gaat waar je nog naar kan kijken later. Aandachtspunt Buttons / navigatie Content Header Gekozen: Er is een combinatie gekozen tussen oplossing 1 en 3: Bol.com verlanglijstje en Ebay opties. Er moet tekst worden neergezet om duidelijker te maken van wat het doet. Ook moet er als de gebruiker tapped een notificatie of bevestiging komen van wat er gebeurd is. 7
User Story: De gebruiker kan op zijn iphone een kavel opslaan, zodat hij op de hoogte blijft van de start van de veiling. Lo-fi schetsen van de oplossing: (Behavioural & Structural) Het nieuwe ontwerp: (Behavioural & Structural) 1. Icoon met notificatie 2. Icoon met verandering BVA-auctions toevoegen/volgen 1 1 Als de gebruiker op de balk of het icoon tapped wordt deze actief en verandert hij in het volgende: Je volgt deze kavel 2 Tegelijkertijd komt er een notificatie boven aan het scherm. Deze gaat naar 3 seconden vanzelf weg of de gebruiker kan deze zelf weghalen door op het kruisje te tappen. Volg deze kavel 1 Je volgt deze kavel nu! Er wordt hier tekst toegevoegd bij het hart icoontje om duidelijker te maken waarvoor het is. Ook komt er een notificatie als de De gebruiker zit een balkje staan met daarin Volg deze kavel en daarbij het hart icoon. Zodra de gebruiker op het hart Bod plaatsen.. Informatie: gebruiker er op tapped. 1 Als de gebruiker op het hart icoon tapped komt er een notificatie, deze gaat naar 3 seconden vanzelf weg of de gebruiker kan deze zelf weghalen door op het kruisje te tappen. icoon of de balk zelf tapped veranderd de status van het hart icoon en de tekst naar Je volgt deze kavel. 2 Als de gebruiker op de balk of het hart icoon tapped wordt de status van het hart icoon veranderd en de tekst in de balk. De gebruiker kan vervolgens nog een keer op de balk tappen om hem weer uit jouw kavels te halen. Detail 1: Mooi scherm Detail 2: Batterij GH+ Detail 3: Retina scherm Detail 4: 15 mp Camera Beschrijving: Een hele mooi tablet voor een scherpe prijs. Deze tablet van het jaar 2015.. Als de gebruiker hem weer weghaalt door nog een keer op de balk of het hart icoon te tappen komt de volgende notificatie: Je volgt de kavel niet meer! 1 tap Gekozen pattern: Aandachtspunt Content Buttons / navigatie Header Er is gekozen voor een combinatie tussen oplossing 1 en 2. De positie en structuur van oplossing 2 Icoon met verandering, maar met de notificatie van oplossing 1. Hiermee wordt de gebruiker op twee manieren duidelijk gemaakt wat er is gebeurd (een notificatie en verandering van tekst). 8
User Story: De gebruiker ontvangt een bericht op zijn Apple Watch, zodat hij weet dat hij kan gaan bieden. Probleem omschrijving: De gebruiker wil weten dat hij kan gaan bieden en wil daarom op zijn Apple Watch berichten ontvangen met daarin over welke kavel het gaat, hoelaat hij kan gaan bieden en hij wil alvast wat informatie kunnen krijgen over de desbetreffende kavel. Voorbeelden: 1. AppleWatch, Instacast, NHL 2. Britishairways 3. Timely Herkomst: Apple Watch, Instacast, NHL Herkomst: Britishairways Herkomst: Timely De gebruiker krijgt een melding met daarin informatie over het onderwerp. Deze kan hij aan tappen om er meer over te zien. De gebruiker ziet een tijdsindicatie met daarbij informatie over het onderwerp. Verder kan de gebruiker opzij swipen voor meer schermen. De gebruiker ziet een overzicht met daarin een bericht dat er iets gaat komen en kan daarbij een nieuw item toevoegen of een wekker zetten doormiddel van knoppen. Buttons / navigatie Content Header Gekozen: Er is gekozen voor oplossing 1: bij deze oplossing krijgt de gebruiker een melding met daarin wat informatie over de desbetreffende veiling. Hij kan zelf kiezen om verder te gaan op zijn Apple Watch of dan zijn iphone te pakken. Ook staat er een tijdsindicatie bij van hoelaat de veiling zou zijn. 9
User Story: De gebruiker ontvangt een bericht op zijn Apple Watch, zodat hij weet dat hij kan gaan bieden. Lo-fi schetsen van de oplossing: (Structural) Het nieuwe ontwerp: (Structural) 1. Notificatie met informatie 2. Notificatie met info en tijd Apple Watch Notificatie scherm BVA Veiling #1 Uw veiling begint over: 16.07 Hier komt informatie over de veiling en een kort verhaaltje... BVA 00:54 Veiling #2 Uw veiling begint over: 1:32 Hier komt informatie over de veiling 1 1 De tijd loopt af zodat de gebruiker een exacte tijd heeft van wanneer hij kan bieden. De gebruiker kan van boven naar onder swipen om al zijn opgeslagen veilingen te bekijken die er aankomen. De meldingen komen 2 minuten van te voren zodat de gebruiker tijd heeft om zich een beetje voor te bereiden. Als de teller op 00:00 staat veranderd de display naar het volgende: De gebruiker krijgt een notificatie wanneer hij kan gaan bieden. Dit wordt in de vorm van een informatie berichtje gedaan. De gebruiker krijgt een X aantal minuten van te voren een melding dat hij binnekort kan gaan bieden op een veiling die hij heeft opgeslagen. Doordat de notificatie iets eerder is kan de gebruiker voorbereiden op de veiling. Ook kan hij swipen naar de eerst volgende veilingen die gaan komen. U kunt gaan bieden: Bieden Hier komt informatie over de veiling en een kort verhaaltje... Als de gebruiker op bieden drukt komt hij bij de volgende User Story. 1 tap Content Header Gekozen pattern: Ik heb gekozen voor oplossing 2: Notificatie met info en tijd. Bij deze oplossing kan de gebruiker zich voorbereiden op de veiling. Als je dit ongeveer 2 minuten van te voren aangeeft is dat voldoende tijd om of je telefoon te pakken of klaar te gaan zitten om te bieden. Ook geeft het meer inzicht op de opvolgende veilingen die gaan komen. 10
User Story: De gebruiker kan op zijn Watch het te bieden bedrag instellen, zodat hij kan gaan bieden. Probleem omschrijving: De gebruiker wilt op elk moment kunnen bieden op de kavels die hij volgt. Hij moet op een klein scherm een specifiek bedrag in kunnen voeren en deze bevestigen dat hij wilt bieden. Voorbeelden: 1. AppleWatch Fitness 2. PCalc op AppleWatch 3. Android Alarm Herkomst: Apple Watch Fitness Herkomst: PCalc Herkomst: Android Alarm De gebruiker kan de eenheid (in dit geval tijd) aanpassen door op plus of min te tappen. Daarna kunnen ze op start drukken. Je kunt hier ook doormiddel van de Golden Crown aan de zijkant de eenheid aanpassen. Op het scherm bevinden zich meerdere blokjes waar de gebruiker iets mee kan doen. Ook staan hier plus en min knoppen. De gebruiker kan de eenheid aanpassen door omhoog of omlaag te swipen, of door op de pijlen te tappen. Gekozen: Er is gekozen voor een combinatie tussen oplossing 1 en oplossing 3. De layout van oplossing 1, waarbij je een eenheid hebt met daaronder een knop en de functie van de Golden Crown. Van oplossing 3 is het swipen om de eenheid aan te passen gekozen. Hiermee geef je de gebruiker meerdere mogelijkheden om het aan te passen. 11
User Story: De gebruiker kan op zijn Watch het te bieden bedrag instellen, zodat hij kan gaan bieden. Lo-fi schetsen van de oplossing: (Behavioural) Het nieuwe ontwerp: (Behavioural) 1. Bieden met buttons 2. Bieden met swipen Apple Watch Bieden scherm BVA Kavelnaam 16.07 1 Als de gebruiker het minimun bod aangeeft doormiddel van de Golden Crown zal de prijs niet verder naar Huidig bod: 120,00 beneden gaan dan het minimun bod. 122,00 Minimum bod: 121,00 Bieden 2 1 Als de gebruiker het minimun bod aangeeft, valt de button - weg zodat hij niet meer verder naar beneden kan. 121,00 Minimum bod: 121,00 De gebruiker kan hier doormiddel van de buttons de prijs verhogen of verlagen. Zodra de minimum prijs wordt aangegeven valt de button met - weg zodat de gebruiker alleen maar hoger kan. Als de gebruiker met de Golden Crown De gebruiker kan swipend de prijs in centen en hele euro s aanpassen. Ook kan de gebruiker de Golden Crown hiervoor gebruiken, de gebruiker tapped op een eenheid en begint dan te draaien. 2 Als de gebruiker op bieden tapped krijgt hij een verificatie of hij zeker weet dat hij wilt bieden, want als de gebruiker per ongeluk op bieden klikt heeft hij de mogelijkheid om hem nog aan te passen. draait stopt het getal zodra het minimun bod behaalt is. BVA Kavelnaam Weet je zeker dat je wilt bieden? Kavel naam 122,00 Ja Nee 1 tap Golden Crown draaien Swipe Gekozen pattern: Er is gekozen voor oplossing 1: Bieden met buttons. Hiermee geef je de gebruiker duidelijke opties om het bedrag aan te passen en vervolgens te gaan bieden. Ook verkom je dat de gebruiker lager kan gaan dan het minimum bod omdat de - wegvalt bij het minimum bedrag wat ze moeten bieden. 12
Screenflow Verbinding van de verschillende schermen BVA-auctions product pagina BVA-auctions toevoegen/volgen Apple Watch Notificatie scherm Gebruiker bekijkt het product en kijkt of het interessant is. De gebruiker vindt het interessant en gaat de kavel volgen. De gebruiker krijgt een notificatie dat de kavel bieding binnekort begint zodat hij zich erop voor kan bereiden. 16.07 Je volgt deze kavel nu! BVA Veiling #1 Uw veiling begint over: 00:54 Hier komt informatie over de veiling en een kort verhaaltje... BVA Veiling #2 Uw veiling begint over: 1:32 Hier komt informatie over de veiling Volg deze kavel Volg deze kavel Je volgt Volg deze kavel Bod plaatsen.. Bod plaatsen.. Bod plaatsen.. Apple Watch Bieden scherm Informatie: Informatie: Informatie: De gebruiker kan gaan bieden. Detail 1: Mooi scherm Detail 1: Mooi scherm Detail 1: Mooi scherm Detail 2: Batterij GH+ Detail 2: Batterij GH+ Detail 2: Batterij GH+ 16.07 Detail 3: Detail 4: Retina scherm 15 mp Camera Detail 3: Detail 4: Retina scherm 15 mp Camera Detail 3: Detail 4: Retina scherm 15 mp Camera BVA Kavelnaam Beschrijving: Beschrijving: Beschrijving: Huidig bod: 120,00 Een hele mooi tablet voor een scherpe prijs. Deze tablet van het jaar 2015.. Een hele mooi tablet voor een scherpe prijs. Deze tablet van het jaar 2015.. Een hele mooi tablet voor een scherpe prijs. Deze tablet van het jaar 2015.. 122,00 Minimum bod: 121,00 Bieden 13