Rick Bierman 500692491 V1_09 30 oktober 2014 Models&Processes A.Zeh BVA.NL OP DE SMARTPHONE



Vergelijkbare documenten
Alexander Zeh Models & Processes september 2014 Oscar Trapman V1-06

Ontwerpdocument BVA app Ontwerpdocument BVA app

Models & Process. Eindopdracht. Rosa Schuurmans V november Koop Reynders

Models & Processes Ontwerpdocument Milledoni.nl op mobiel. Laura Mentink V

Milledoni.nl Ontwerpdocument herontwerp zoekfunctie. Models & Processes Sanne Schouten Klas: V1-07 Docent: Koop Reynders

MILLEDONI.NL OP MOBIEL. Door: Sijmen Vos, , klas v1-05 Docent: Koop Reynders Datum: 17 februari 2014

Design Patterns V Eindopdracht

CMD Amsterdam DFI: Design Patterns V1 Blok 1 Eindopdracht feedback en beoordeling

1. Over LEVIY. 5. Meldingen Wat zijn meldingen? 5.1 Technische melding toevoegen Hoe voeg ik een melding toe?

Parkinson Thuis. Gebruikershandleiding

5. Documenten Wat kan ik met Documenten? 1. Over LEVIY. 5.1 Documenten terugvinden Uitleg over vinden van documenten.

SportCTM 2.0 Sporter

4.4 Voeg ruimtes toe Hoe ga jij te werk? 1. Over LEVIY. 4.5 Aanwezigen Zijn er aanwezigen bij de DKS-controle? 2. Algemene definities. 3.

Down The Rabbit Hole door: Maria Barmentlo Klas: Paars Versie: 31 mei 2015

Redesign RTL XL Gemist

Aan de slag met Twitter

Rosa Groot Herontwerpt de mobiele website van Milledoni. Eindopdracht M&P V januari 2014

1. Over LEVIY 5. Openen van de activiteit 2. Algemene definities 6. Inloggen op het LEVIY dashboard 3. Inloggen 6.1 Overzichtspagina 3.

Parkinson Thuis Probleemoplossing

Informatiearchitectuur P14-15 Ontwerpspecificaties Rabb-it avonden mobiele applicatie

In deze handleiding wordt de werking van het extranet beschreven

SportCTM 2.0 Startscherm trainer

Quick reference Smartflow App

Point2Share handleiding eindgebruikers Window 8

Inhoud. Handleiding Dododent. Beste tandarts of praktijkmanager,


Uitleg CMS Utrecht Your Way Button 1. Inloggen

Wat is itslearning..?

Handleiding Lucky Light App

Handleiding FOOX App. Handleiding FOOX App versie 1.1

HANDLEIDING DOIT BEHEER SYSTEEM

Uitleg MindBodyOnline

P5 Ontwerpdocument WIE IS DE MOL? Karlijn van Egmond P4 2015/2016 V1-07

Bloggen met blogdirect

Quick start handleiding versie 1.0

HANDLEIDING APP BURGERSCHOUW Versie juni 2015

Gebruikers handleiding Telgids mutaties Versie 1.2

Op de website van de N!X Ruilkring klik je in het menu op Cyclos". Rechts bovenin klik je op de knop aanmelden. Je komt dan in het inlogscherm.

De Kleine WordPress Handleiding

Inloggen. Open Internet Explorer en vul het adres: in de adresbalk in.

LinkedIn - hoe meld ik mij aan?

DB Alerts vernieuwde app voor Android gebruikers

Stap 1: Mindmap design. Wat is design volgens Marktplaats. Wat is design volgens Judith. Informatie Architectuur Design op marktplaats

U bent nu aangemeld op het Chamilo leerplatform en hebt toegang tot de tabs in de blauwe balk (Home pagina, Cursussen, enz ).

GEBRUIKERSHANDLEIDING MAAKJETRAINING.NL 1

iphone app - Rapporten

GEBRUIKERSHANDLEIDING (JULI 2015) V PUB

Hieronder vindt u een instructie over het gebruik van PasNL in combinatie met het digitaliseren van de Careyn kaart.

Ontwerprapport Fietsenrek

Handleiding Elektrocrack

Mitchel Anneveldt V Ontwerpdocument Design pattens - NS - Mitchel Anneveldt V

Information and Structure Dieet app. Bart Witting UvAID: MMIO, Informatiekunde UvA Amsterdam Sander Wehkamp

LL365. Lowlands 365! Ontwerpdocument! het ontwerp van de LL365 app

Rapportages instellen

Handleiding van de Bibliotheek. E-books lezen via de app op je tablet of smartphone

Handleiding "Van Oirschot Onderweg"-App (ipad)

Handleiding DB Alerts app

Handleiding Mijn Kerk

Web Presence Builder. Inhoud

Handleiding van de Bibliotheek: e-books lezen via de app op je tablet of smartphone

Handleiding De Sociale Monitor

Handleiding ZorgMail Secure - Webmail

REGISTREREN CONCERT IN CONCERTKALENDER

Stedelijk Museum. Ontwerpspecificatie. VMBO leerlingen interactieve rondleiding. Meesterproef Minor UXD V Jasper Bunschoten

Student: Ilayda Kucukosmanoglu Klas: V1-07 Docent: Koop Reynders Models & Processes Datum: Versie: 30 januari o

Handleiding app Sportlinked

ParkinsonThuis Studie. Installatiehandleiding

ZIVVER Gebruikershandleiding

Interactief lesgeven / presenteren met Shakespeak

Hoe heb ik de opdracht uitgevoerd?

QUESTI OPSTARTGIDS ALGEMENE INSTELLINGEN EN LVS

HANDLEIDING ZORGAANBIEDERS, LANDELIJK IMPLANTATENREGISTER FASE 2

E-books lenen bij uw bibliotheek met uw bibliotheekabonnement

Wat kan ik als cultuuraanbieder met?

PhPlist Gebruikers Handleiding

Basishandleiding WordPress

Auteur: Niels Bons. Handleiding Koepeldatabase Zakelijk toerisme: aanmelden organisatie. 2014, Provincie Fryslân. Uitgegeven in eigen beheer

Wat is de App Politiezone Het Houtsche? Hoe installeer ik deze App op mijn smartphone?

Handleiding Sdu Tijdschriften App (Stapp) Stapp Handleiding versie Meer info:

rabb-it applicatie Ontwerpdocument avv5 Eindopdracht

Website maker. Bezoek je domein om de Website maker in te stellen. De volgende melding zal zichtbaar zijn.

LegManager Mobile Handleiding

WELKOM OP STREAM! DE ONLINE COMMUNITY OVER TAAL EN ONDERWIJS IN FRYSLÂN!

Basis handleiding CMS

HANDLEIDING scoolfolio OUDER

Installatiegids voor de app van de politiezone Hazodi

Handleiding. Omschrijving Handleiding RaadDigitaal Android. Datum Versienummer 2.1

Gebruikershandleiding Activiteiten

Aan de slag met Acadin

Handleiding gebruik ledengedeelte website Amsterdamse Golf Club

psymate gebruikershandleiding PsyMate

Handleiding. HetSchoolvoorbeeld.nl. Versie juni Websites voor het onderwijs. Meest recente uitgave: www. hetschoolvoorbeeld.

Uitnodiging Profiel invullen Tijdlijnen... 6

Handleiding voor het lezen van NRC Handelsblad of nrc.next op de ipad, iphone en ipod Touch

memo Aan : V&V medewerkers Van : Servicedesk Betreft : documenten.twb.nl gebruik Datum :

Handleiding BeSocialEasy

Handleiding Hootsuite

OUTLOOK ACCOUNTS POSTVAKKEN SORTEERREGELS HANDTEKENINGEN

ERIKS bv l Postbus 280 l 1800 BK Alkmaar l T (072) l info@eriks.nl l

Transcriptie:

Rick Bierman 500692491 V1_09 30 oktober 2014 Models&Processes A.Zeh BVA.NL OP DE SMARTPHONE

INHOUD INDELING VAN HET DOCUMENT 2 INHOUDSOPGAVE en samenvatting interviews De opzet van het document en de samenvattingen in het kort 3 INleiding Een korte inleiding over de opdracht, de te beantwoorden problemen en de manier waarop dit gedaan gaat worden. 4-5 Eerste ontwerpprobleem Het specifieker kunnen zoeken. 6-7 tweede ontwerpprobleem Het snel tonen van details. 8-9 Derde ontwerpprobleem Het opslaan van een kavel. 10-11 vierde ontwerpprobleem Het opslaan van een kavel. 12-13 wireflow hele ontwerp mobiel Wireflow van mobiele wireframes. 14-15 vijfde ontwerpprobleem Berichten ontvangen op de Pebble. 16-17 zesde ontwerpprobleem Het overbieden op de Pebble. 18 wireflow hele ontwerp pebble Wireflow met alle wireframes van de Pebble 19-20 Bijlagen De interviews DE INTERVIEWS IN HET KORT Om achter de probleemstellingen te komen zijn er een aantal personen geïnterviewd. De kern lag erin om waarom vragen te stellen zodat er een duidelijk mental model zou vormen. De vragen zijn speciaal gesteld over de niet ontworpen pattern niveau s: structural en behavioural. Job Story 1: Als ik een zoekopdracht uitvoer, wil ik de resultaten kunnen zien, zodat ik een specifiek product kan vinden. Als de gebruiker iets specifieks zoekt wordt de lijst met resultaten gescant naar datgene wat hij/zij zoekt. Dit kan een poos duren als het aantal resultaten groot is. Daarom bleek uit dit gesprek dat een filteroptie erg handig zou zijn, aangezien het de zoekopdracht heel specifiek kan maken. Het leek de gebruiker handig om deze filteropties bij de zoekbalk te hebben staan, aangezien het bij het zoeken hoort verwacht de gebruiker het ook op zo een plaats. Niveau: Structural. Pattern: Filtermogelijkheden. Ontwerpprobleem: De gebruiker wilt zijn resultaten specifieker kunnen maken zodat hij sneller zijn specifieke product vindt. Job Story 2: Als ik een specifiek product heb gevonden, wil ik alle details kunnen bekijken, zodat ik een keuze kan maken of dit product interessant voor mij is. De detailpagina van een product moet volgens de gebruiker snel toonbaar zijn. De gebruiker wilt snel details kunnen zien van een product en vindt het onhandig om steeds op een nieuwe pagina te belanden. Niveau: Behavioural. Pattern: Popover. Ontwerpprobleem: De gebruiker wilt snel details kunnen zien van een specifiek product. Job Story 3: Als ik een interessante kavel heb gevonden, wil ik het kunnen opslaan, zodat ik het makkelijk terug kan vinden en op de hoogte van start veiling wordt gehouden. Na het opslaan en bekijken van een interessante kavel moet er een account aangemaakt worden, verwarrend zo vindt de gebruiker. Waarom staat dat niet eerder vermeld? De gebruiker weet vooraf dus niet dat er een account nodig is voor het bekijken van zijn opgeslagen kavels. Niveau: Behavioural. Pattern: Feedback pattern. Ontwerpprobleem: De gebruiker weet niet dat er een account nodig is voor het bekijken van zijn opgeslagen kavels. Job Story 4: Als de veiling open gaat, wil ik op het product kunnen bieden, zodat ik het kan gaan bezitten. Als er geboden kan worden drukt de gebruiker op Uw bod en vult een bedrag in. Vervolgens drukt de gebruiker op Mijn bod controleren en daarvoor is een account nodig. Het probleem in dit hele proces is de keyboard die uitschuift, er wordt onvoldoende rekening gehouden met het feit dat er een bedrag ingevuld moet worden, aangezien de gebruiker steeds heen en weer gaat tussen het keyboard en het input veld. Niveau: Structural. Pattern: Keyboard. Ontwerpprobleem: De gebruiker moet teveel heen en weer gaan m.b.t. het invullen van zijn bedrag. 30-10-14 versie:1.0 Ontwerper: Rick Bierman klas:v1_09 Studentennummer: 500692491 2

INLEIDING DE HOOFDZAKEN In dit ontwerpdocument wordt voor een klein onderdeel van de App een aantal Job stories ondersteund. Hierin komen het concept van BVA en de Look and Feel sterk terug. Dit interactie ontwerp is ontworpen voor een Apple ios en voor een webapp. Op Conceptual niveau is de dienst al bedacht, dat is dé BVA website.op Postural niveau is de interface al bedacht, het gaat hier namelijk om de zakelijke gebruiker. De tone-of-voice is daarom ook met dat gegeven in het achterhoofd erg zakelijk en net. De job stories waarvoor ontworpen wordt zijn als volgt: 1. Als ik een zoekopdracht uitvoer, wil ik de resultaten kunnen zien, zodat ik een specifiek product kan vinden. 2. Als ik een specifiek product heb gevonden, wil ik alle details kunnen bekijken, zodat ik een keuze kan maken of dit product interessant voor mij is. 3. Als ik een interessante kavel heb gevonden, wil ik het kunnen opslaan, zodat ik het makkelijk terug kan vinden en op de hoogte van start veiling wordt gehouden. 4. Als de veiling open gaat, wil ik op het product kunnen bieden, zodat ik het kan gaan bezitten. 5. Als ik overboden ben, wil ik op mijn Pebble een bericht ontvangen, zodat ik snel kan overwegen om te overbieden. 6. Als ik een overboden bericht op mijn Pebble zie, wil ik kunnen overbieden op de Pebble, zodat ik het product koop. Deze job stories worden aan een aantal personen voorgelegd, hieruit volgt een interview en daar komt een mentaal model uit met een duidelijke richting m.b.t. de te vinden patterns. Nadat de patterns gevonden zijn en de LowFi s geschetst zijn kunnen er gedetaileerde wireframes gemaakt worden. Android Apple ios Windows phone Blackberry Native app Webapp Hybrid app 30-10-14 versie:1.0 Ontwerper: Rick Bierman klas:v1_09 Studentennummer: 500692491 3

1. HET SPECIFIEKER KUNNEN ZOEKEN STRUCTURAL NIVEAU Het probleem: De gebruiker wilt zijn resultaten specifieker kunnen maken zodat hij sneller zijn specifieke product vindt. Als ik een zoekopdracht uitvoer, wil ik de resultaten kunnen zien, zodat ik een specifiek product kan vinden. NIEUWE OPLOSSINGSRICHTINGEN OPLOSSING 1 - CATEGORIE OPLOSSING 2 - SORT OPLOSSING 3 - FILTER Source: VSCO app Source: Walmart app Source: Expedia app Huidige oplossing Er worden alleen resultaten getoond uit de geselecteerde categorie. De resultaat pagina kan gesorteerd worden op prijs, nieuwe producten, beoordeling etc. Hier kan er simpel gefilterd worden op afstand, beoordeling, prijs etc. met een druk op de button. Vraag aan de gebruiker Op welke manier kun je jouw specifieke product het snelst vinden? Door te zoeken in de resultaten. Waarom scroll je naar beneden? Omdat ik het specifieke product wil vinden die ik zoek. MENTAL MODEL Nadat de gebruiker zijn zoekopdracht ingevuld heeft, bleek het dat er helaas veel gescrollt moest worden. Er kwamen teveel resultaten in de lijst zonder filter. De tweede oplossing is van toepassing na het invullen van een zoekterm, er kan op deze manier in tegenstelling tot de andere opties gesorteerd worden op criteria. De gekozen oplossing is de derde. Er kunnen meerdere filters toegepast worden en het dient de gebruiker optimaal in het specificeren van de zoekopdracht. Door hier iconen bij te gebruiken begrijpt de gebruiker sneller waar het over gaat. Waarom zoek je op deze manier naar het specifieke product? Omdat er geen filteropties op de pagina aanwezig zijn. 4 30-10-14 versie:1.0 Ontwerper: Rick Bierman klas:v1_09 Studentennummer: 500692491

1.1 NIEUWE ONTWERP VAN SPECIFIEKER ZOEKEN STRUCTURAL NIVEAU Zoekscherm, rechter button voor filteropties. Ontwerp schets 1 Ontwerp schets 2 Ontwerp Hier kan er simpel gefilterd worden met een druk op de button. De volgende ontwerpen geven verschillende oplossingen over hoe dat gaat werken. In de eerste Low Fi wordt het probleem opgelost door een speciale filterbutton aan te bieden, waarop apart gefiltert kan worden. De tweede Low Fi gaat ervan uit dat er gefilterd wordt, er verschijnt sowieso een filter schermpje. Mijn keuze gaat uit naar de eerste Low Fi omdat er meer met iconen gewerkt kan worden, i.p.v. de dropdown selector uit Low Fi 2. Annotaties Zodra er op gebruik filter gedrukt wordt komt het filtermenu tevoorschijn. De afstand van het gewenste product wordt bepaald door de eigen locatie. Hier kan een product op beoordeling gezocht worden. Er zijn een aantal prijscategoriën waar producten in kunnen staan. Elke prijscategorie verschilt per product, als de gebruiker zoekt naar een product zoals een horloge, zullen de prijzen anders ingedeeld zijn dan bij een heftruck. 30-10-14 versie:1.0 Ontwerper: Rick Bierman klas:v1_09 Studentennummer: 500692491 5

2. HET SNEL TONEN VAN DETAILS BEHAVIOURAL NIVEAU Het probleem: De gebruiker wilt snel details kunnen zien van een specifiek product. NIEUWE OPLOSSINGSRICHTINGEN OPLOSSING 1 - QUICK DETAIL VIEW OPLOSSING 2 - CONTENT HIDER OPLOSSING 3 - POPOVER Source: Path Talk app Source: Soundcloud app Source: Foursquare app Source: Path app Als ik een specifiek product heb gevonden, wil ik alle details kunnen bekijken, zodat ik een keuze kan maken of dit product interessant voor mij is. Huidige oplossing De details worden snel getoond, je kunt naar de detailpagina door bijvoorbeeld op Meer te drukken. Door op het uitklapbare driehoekje te drukken verschijnt er meer info. Door op meer te drukken ga je naar de detailpagina. Er verschijnt een popup over het scherm met een afbeelding en kort beschreven wat het product is. Vraag aan de gebruiker Wat doe jij om de details te bekijken van het specifieke product? Ik druk op het blauwe linkje of de afbeelding. Waarom druk je daarop? Om naar de detailpagina te gaan. Waarom ga je op deze manier naar de detailpagina? Omdat er geen manier is om het snel te bekijken. MENTAL MODEL De gebruiker heeft door dat er geen manier is om snel details van een product te bekijken. Daarom drukt de gebruiker logischerwijs op de afbeelding of de blauwe titel. De eerste twee oplossingen zijn pop ups maar bij de derde klapt er meer tekst uit na het drukken op de driehoek. Oplossing 3 is mijn keuze geworden omdat je heel specifiek het product kan bekijken zonder dat er een nieuwe pagina geladen hoeft te worden. De foto s kunnen in een image slider komen te staan en is daarom beter dan oplossing 2. 30-10-14 versie:1.0 Ontwerper: Rick Bierman klas:v1_09 Studentennummer: 500692491 6

2.1 NIEUWE ONTWERP SNEL TONEN VAN DETAILS BEHAVIOURAL NIVEAU Ontwerp schets 1 Ontwerp schets 1 Ontwerp In het tweede scherm kun je afbeeldingen van het product bekijken door een swipe gesture te maken. Ook kun je hier het laatste bod op het product zien (of als er nog niet geboden is, het startbod). Mijn keuze gaat uit naar Low Fi 2. De image slider geeft een goed beeld over het product. Ook is het erg handig om het laatste bod te bekijken voordat je naar de productpagina gaat. Annotaties Zodra er op een product gedrukt wordt verschijnt er een popup. Het is mogelijk om verschillende afbeeldingen te bekijken door te swipen. Een korte beschrijving van het product en bied informatie. Door te swipen of te pushen ga je naar de productpagina. 7 30-10-14 versie:1.0 Ontwerper: Rick Bierman klas:v1_09 Studentennummer: 500692491

3. HET OPSLAAN VAN EEN KAVEL BEHAVIOURAL NIVEAU Het probleem: De gebruiker weet niet dat een account nodig is voor het zien van zijn opgeslagen kavels. Als ik een interessante kavel heb gevonden, wil ik het kunnen opslaan, zodat ik het makkelijk terug kan vinden en op de hoogte van start veiling wordt gehouden. NIEUWE OPLOSSINGSRICHTINGEN OPLOSSING 1 - POINTER OPLOSSING 2 - NOTIFICATIONS OPLOSSING 3 - FEEDBACK POPUP Source: Highlight app Source: Readability app Source: Snapguide app Huidige oplossing Een pointer message wijst naar Mijn Kavels met de booschap dat er een account nodig is. Een duidelijke notificatie verschijnt in beeld met visualisaties over het inloggen of registreren. Je kunt het ook skippen. Er verschijnt een pop up met de melding dat een account nodig is. Vraag aan de gebruiker Waarom druk je op Toevoegen aan mijn kavels? Omdat ik denk dat ik op deze manier deze kavel opsla en het later terug kan vinden. Waar kun je vervolgens Mijn Kavels zien? Rechtsbovenin, vrij onhandig zo ver... MENTAL MODEL De gebruiker heeft een product gevonden en wilt die toevoegen aan Mijn Kavels. Er volgt echter een teleurstelling omdat er een account nodig is. De derde wijst richting mijn kavels en de eerste twee oplossingen zijn pop ups die een melding geven. Ik heb gekozen voor oplossing 3 omdat dit directe feedback is en het een herkenbare melding voor de gebruiker is. Wat doe je nu om jouw opgeslagen kavel te bekijken? Ik ga naar mijn kavels, hiervoor heb ik een account nodig, dat is raar. 30-10-14 versie1.0 Ontwerper: Rick Bierman klas:v1_09 Studentennummer: 500692491 8

3.1 NIEUWE ONTWERP OPSLAAN VAN EEN KAVEL BEHAVIOURAL NIVEAU Productpagina scherm, toevoegen aan mijn kavels voor melding. Ontwerp schets 1 Ontwerp schets 2 Ontwerp Het verschil tussen de oplossingen ligt in de melding. Bij de tweede staan een paar icoontjes die voor visuele feedback zorgen. De eerste is herkenbaar, duidelijk en to the point. Mijn keuze gaat naar de eerste oplossing. De oplossing zorgt voor visuele feedback en laat de gebruiker duidelijk weten dat er een account gemaakt moet zijn. Annotaties Dit hele scherm verschijnt niet als er al ingelogd is. Door op Registreer te drukken gaat de gebruiker naar het registerscherm toe. Vergeten in te loggen? Dan kan dit hier alsnog. De Login input field verschijnt in deze popup en de gebruiker kan dus direct, zonder naar andere pagina s te gaan, inloggen. 30-10-14 versie:1.0 Ontwerper: Rick Bierman klas:v1_09 Studentennummer: 500692491 9

4. HET BIEDEN OP EEN PRODUCT BEHAVIOURAL NIVEAU Het probleem: De gebruiker moet teveel heen en weer gaan m.b.t. het invullen van zijn bedrag. Als de veiling open gaat, wil ik op het product kunnen bieden, zodat ik het kan gaan bezitten. Huidige oplossing NIEUWE OPLOSSINGSRICHTINGEN OPLOSSING 1 -NOTIFICATION OPLOSSING 2 -KEYBOARD OPLOSSING 3 - FEEDBACK INPUT VELD Source: Job Requisition form Source: Apple mobile keyboard Source: LinkedIn Signup screen Het vakje kleurt rood of groen, afhankelijk van het ingevulde bedrag. Een aangepast keyboard waarbij je makkelijker een bedrag kunt kiezen. Directe feedback naast of onder het input veld. Vraag aan de gebruiker Vraag aan de gebruiker Op welke manier ga je bieden? Ik vul de velden in onder Uw bod. Wel onhandig om steeds zo in te vullen. Waarom is dat onhandig? Ik moet op het andere veld drukken, bij sommige betaalvelden gaat dat automatisch, of kan ik op z n minst een komma selecteren. MENTAL MODEL De gebruiker is een makkelijke interactie gewend m.b.t. het invullen van een bedrag. Zo verwachtte de gebruiker een ander keyboard. Ook zou het bedrag automatisch gecontroleerd kunnen worden. De tweede is vooral gefocust op de manier waarop de gebruiker input levert. De eerste en tweede leveren directe feedback. Ik heb gekozen voor oplossing 3. Door directe feedback te leveren over het ingevulde bedrag bespaart het de gebruiker tijd. Wat is de volgende stap? Ik druk op Bod controleren. Oh ik heb een account nodig. 30-10-14 versie:1.0 Ontwerper: Rick Bierman klas:v1_09 Studentennummer: 500692491 10

4.1 NIEUWE ONTWERP BIEDEN OP EEN PRODUCT BEHAVIOURAL NIVEAU Ontwerp schets 1 Ontwerp schets 2 Ontwerp Het verschil ligt in de positie van de feedback. Het kan eronder, erboven of zelfs naast het input veld komen te staan. Annotaties Na het invullen van een bedrag verschijnt er naast het bod een term. In orde, of niet in orde. Dit bedrag kan al gezien worden als de gebruiker het bedrag nog aan het invullen is via het keyboard. Dit zorgt voor directe feedback en past in de houding die de app overbrengt. Mijn keuze gaat naar de eerste LowFi. Dit omdat er dichtbij het veld feedback staat, wat de gebruiker meteen zal opvallen. 30-10-14 versie:1.0 Ontwerper: Rick Bierman klas:v1_09 Studentennummer: 500692491 11

WIREFLOW HELE ONTWERP MOBILE 1. ZOEK/FILTERPAGINA 2. RESULTATENPAGINA 3. RESULTATENPAGINA, PRODUCT POPUP 30-10-14 versie:1.0 Ontwerper: Rick Bierman klas:v1_09 Studentennummer: 500692491 12

WIREFLOW HELE ONTWERP MOBILE 4. PRODUCTPAGINA 5. PRODUCTPAGINA, REGISTER/LOGIN POPUP 6. PRODUCTPAGINA, BIEDEN GEOPEND 30-10-14 versie:1.0 Ontwerper: Rick Bierman klas:v1_09 Studentennummer: 500692491 13

5. BERICHT ONTVANGEN OP DE PEBBLE BEHAVIOURAL NIVEAU Het probleem: De gebruiker wilt een andere melding krijgen dan een trillende Pebble. Als ik overboden ben, wil ik op mijn Pebble een bericht ontvangen, zodat ik snel kan overwegen om te overbieden. NIEUWE OPLOSSINGSRICHTINGEN OPLOSSING 1 -NOTIFICATION OPLOSSING 2 -POPUP SCREEN OPLOSSING 3 - WARNING Source: Gabi app Source: Highlight app Source: Feedback screen Huidige oplossing De focus ligt hier op het verschijnen van een waarschuwingsteken. Een herkenbaar metafoor. De iphone en Pebble zijn verbonden, er is een trilfunctie op de Pebble. Vraag aan de gebruiker Er verschijnt een grote, non-interactieve, notificatie op het scherm. Er verschijnt een popup op het scherm, hierin kunnen opties gemaakt worden. Hoe zou je een melding willen ontvangen op de Pebble? Meteen een duidelijke melding, net als op de iphone gewoon. Waarom moet het meteen duidelijk zijn, je hebt dat horloge toch om je pols? Ja, maar er is een kans dat ik het niet meteen zie als ik ergens mee bezig ben. Wat vindt je van een trillende Pebble om jou op de hoogte te brengen? Klinkt alsof de batterij snel opgaat. Wat is de interactie die je zou willen maken met het bekijken hiervan? Ik denk via de knoppen aan de zijkant. Dan moet er wel een goed systeem inzitten zodat het snel kan. MENTAL MODEL De gebruiker wilt niet dat de Pebble continu trilt omdat hierdoor de baterij sneller opgaat. De derde is gefocust op een bekend metafoor naar voren brengen. De eerste biedt alleen een melding, waar de tweede ook opties biedt binnen het scherm. Ik heb gekozen voor oplossing 2. Er zitten opties in het scherm, waardoor de gebruiker direct voor een keuze staat en mogelijk naar een ander scherm kan. 30-10-14 versie:1.0 Ontwerper: Rick Bierman klas:v1_09 Studentennummer: 500692491 14

5.1 NIEUWE ONTWERP BERICHT ONTVANGEN OP PEBBLE BEHAVIOURAL NIVEAU Ontwerp schets 1 Ontwerp schets 2 Ontwerp BVA U bent overboden op item: Fiets Over bieden Sluit melding Het verschil zit in de melding. De tweede geeft meer de look and feel van een popup, de eerste neemt het hele scherm in beslag en geeft ook visuele feedback. Mijn keuze gaat naar de eerste LowFi. Dit omdat er visuele feedback gegeven wordt en de melding duidelijker is. Annotaties Met deze knoppen is het mogelijk een optie te selecteren. Met deze knop kan er een optie geselecteerd worden. Met deze knop negeer je de melding en ga je terug naar de watchface. 30-10-14 versie:1.0 Ontwerper: Rick Bierman klas:v1_09 Studentennummer: 500692491 15

6. OVERBIEDEN OP DE PEBBLE STRUCTURAL NIVEAU Het probleem: De gebruiker wilt geen onnodige tijd verliezen met het overbieden. Als ik overboden ben, wil ik op mijn Pebble een bericht ontvangen, zodat ik snel kan overwegen om te overbieden. NIEUWE OPLOSSINGSRICHTINGEN OPLOSSING 1 - CALCULATOR OPLOSSING 2 -NUMBER SLIDER OPLOSSING 3 - NUMBER WIDGET Source: Currency translator Source: Luxylight Source: Compass Huidige oplossing De iphone en Pebble zijn verbonden, er is een trilfunctie op de Pebble. Vraag aan de gebruiker Wat is de interactie die je wilt ervaren met het overbieden via de Pebble? Ik wil een interactie die handig is, dus geen moeilijk gedoe met de knoppen op de zijkant. Waarom is dat onhandig? Ik wil snel overbieden, dus er is geen tijd te verliezen. Wat voor interactie op het scherm moet er zijn? Een handige interface waardoor ik het snap. En snel kan overbieden. Via de knoppen op de zijkant ga je door de getallen, met dubbellklik kan een getal gekozen worden. MENTAL MODEL De gebruiker wilt een handige interface, die overbieden makkelijker maakt. Door de knoppen op de zijkant vast te houden gaat het getal snel omhoog, of omlaag. De eerste is een scherm die echt gebouwd is op een precies bedrag invullen. De tweede maakt gebruik van een soort slider waarbij er snel een bedrag gekozen kan worden. De derde pattern doet in principe hetzelfde, maar heeft een andere interface en maakt gebruik van een circel als meetpunt. Via de knoppen op de zijkant kan er een prijs bepaald worden door te sliden. Ik heb gekozen voor oplossing 2. Er kan een bedrag ingevuld worden die het probleem beter oplost dan de andere 2 patterns, aangezien deze het snelst en handigste is. 30-10-14 versie:1.0 Ontwerper: Rick Bierman klas:v1_09 Studentennummer: 500692491 16

6.1 NIEUWE ONTWERP OVERBIEDEN OP PEBBLE STRUCTURAL NIVEAU Ontwerp schets 1 Ontwerp schets 2 Ontwerp BVA U bent overboden, het hoogste bod is nu: 50.00 60.00 Het verschil ligt in de interface, de eerste biedt meer informatie, daar waar de tweede direct to the point is. Mijn keuze gaat uit naar de eerste oplossing, er is duidelijke informatie verschaft en biedt hetzelfde gemak als de tweede oplossing. Annotaties De bovenste button verhoogd het bod, rekening houdend met de grootte van het bod. De onderste button verlaagd het bod, rekening houdend met de grootte van het bedrag. Met deze button wordt het ingevulde bedrag gekozen en verzonden. Deze button brengt de gebruiker terug naar het vorige of watchface scherm. 30-10-14 versie:1.0 Ontwerper: Rick Bierman klas:v1_09 Studentennummer: 500692491 17

WIREFLOW HELE ONTWERP PEBBLE 1. MELDINGSSCHERM 2. OVERBIEDEN SCHERM BVA U bent overboden op item: Fiets BVA U bent overboden, het hoogste bod is nu: 50.00 Over bieden Sluit melding 60.00 INTERACTIE BUTTONS OP DE PEBBLE Door op de buttons te drukken die gehighlight zijn kan er al en bod geplaatst worden. Het eerste scherm biedt twee opties, waarbij er dus direct doorgedrukt kan worden. Vervolgens krijgt de gebruiker directe feedback door te zien wat momenteel het hoogste bod is. De gebruiker drukt op de button om het bod te verhogen en kan daarna, door op de middelste button te drukken, het bod verzenden. Back button Plus/up button Select button Minus/down button 30-10-14 versie:1.0 Ontwerper: Rick Bierman klas:v1_09 Studentennummer: 500692491 18

BIJLAGE: INTERVIEWS Naam: Paul Bierman Leeftijd: 51 jaar Opleiding: HAVO afgerond Werkervaring: ABN AMBRO Contractmanager Ervaring met digitale media: Dagelijks Ervaring met veiling websites: Op Marktplaats het één en ander gekocht en verkocht. Naam: Danny Bierman Leeftijd: 19 jaar Opleiding: HBO Technische natuurkunde Werkervaring: Geen Ervaring met digitale media: Dagelijks Ervaring met veiling websites: Geen Naam: Karin Kensmil Leeftijd: 47 jaar Opleiding: Atheneum afgerond Werkervaring: ABN AMRO Secretaresse Ervaring met digitale media: Dagelijks Ervaring met veiling websites: Wel eens producten via vakantieveilingen.nl gekocht Naam: Joran Iedema Leeftijd: 23 jaar Opleiding: HBO Toerisme 3e jaars student Werkervaring: Albert Heijn, C1000 Ervaring met digitale media: Dagelijks Ervaring met veiling websites: Geen Als ik een zoekopdracht uitvoer, wil ik de resultaten kunnen zien, zodat ik een specifiek product kan vinden. Als ik een specifiek product heb gevonden, wil ik alle details kunnen bekijken, zodat ik een keuze kan maken of dit product interessant voor mij is. Als ik een interessante kavel heb gevonden, wil ik het kunnen opslaan, zodat ik het makkelijk terug kan vinden en op de hoogte van start veiling wordt gehouden. Als de veiling open gaat, wil ik op het product kunnen bieden, zodat ik het kan gaan bezitten. Op welke manier kun je jouw specifieke product het snelst vinden? Door te zoeken in de resultaten. Waarom scroll je naar beneden? Omdat ik het specifieke product wil vinden die ik zoek. Waarom zoek je op deze manier naar het specifieke product? Omdat er geen filteropties op de pagina aanwezig zijn. Probleem: De gebruiker wilt zijn resultaten specifieker kunnen maken zodat hij sneller zijn specifieke product vindt. Mental Model: Nadat de gebruiker zijn zoekopdracht ingevuld heeft, bleek het dat er veel gescrollt moest worden. Er kwamen teveel resultaten in de lijst en het leek de gebruiker logisch dat er gescrollt moest worden, omdat hij al gezien had dat er niet gefiltert kon worden. Bijhorende pattern: Structural De oplossingsrichtingen: Filter optie Een sorteer optie Het kunnen categorieseren Wat doe jij om de details te bekijken van het specifieke product? Ik druk op het blauwe linkje of de afbeelding. Waarom druk je daarop? Om naar de detailpagina te gaan. Waarom ga je op deze manier naar de detailpagina? Omdat er geen manier is om het snel te bekijken. Probleem: De gebruiker wilt snel details kunnen zien van een specifiek product. Mental Model: De gebruiker heeft door dat er geen manier is om snel details van een product te bekijken. Daarom drukt de gebruiker logischerwijs op de afbeelding of de blauwe titel. Bijhorende pattern: Behavioural De oplossingsrichtingen: Popover mogelijkheid Quick detail view Profile pop up Waarom druk je op Toevoegen aan mijn kavels? Omdat ik denk dat ik op deze manier deze kavel opsla en het later terug kan vinden. Waar kun je vervolgens Mijn Kavels zien? Rechtsbovenin, vrij onhandig zo ver... Wat doe je nu om jouw opgeslagen kavel te bekijken? Ik ga naar mijn kavels, hiervoor heb ik een account nodig, dat is raar. Probleem: De gebruiker weet niet dat er een account nodig is voor het bekijken van zijn opgeslagen kavels. Mental Model: De gebruiker heeft een product gevonden en wilt die toevoegen aan Mijn Kavels. Er volgt echter een teleurstelling omdat er een account nodig is. Bijhorende pattern: Behavioural De oplossingsrichtingen: Feedback pattern popup Quick detail view Profile pop up Op welke manier ga je bieden? Ik vul de velden in onder Uw bod. Wel onhandig om steeds zo in te vullen. Waarom is dat onhandig? Ik moet op het andere veld drukken, bij sommige betaalvelden gaat dat automatsich, of kan ik op z n minst een komma selecteren. Wat is de volgende stap? Ik druk op Bod controleren. Oh ik heb een account nodig. Probleem: De gebruiker moet teveel heen en weer gaan m.b.t. het invullen van zijn bedrag. Mental Model: De gebruiker is een makkelijke interactie gewend m.b.t. het invullen van een bedrag. Zo verwachtte de gebruiker op z n minst een komma in het keyboard. Ook zou het bedrag automatisch gecontroleerd kunnen worden. Bijhorende pattern: Structural De oplossingsrichtingen: Feedback pattern input veld Keyboard Notification 30-10-14 versie:1.0 Ontwerper: Rick Bierman klas:v1_09 Studentennummer: 500692491 19

BIJLAGE: INTERVIEWS Naam: Arjan van Hesteren Leeftijd: 18 jaar Opleiding: HAVO afgerond Werkervaring: C1000, krantenwijk Ervaring met digitale media: Dagelijks Ervaring met veiling websites: Via Marktplaats wel eens iets gekocht Als ik overboden ben, wil ik op mijn Pebble een bericht ontvangen, zodat ik snel kan overwegen om te overbieden. Naam: Eelco van Deursen Leeftijd: 23 jaar Opleiding: MBO luchtvaart Werkervaring: Albert Heijn, KLM Ervaring met digitale media: Dagelijks Ervaring met veiling websites: Geen Als ik een overboden bericht op mijn Pebble zie, wil ik kunnen overbieden op de Pebble, zodat ik het product koop. Hoe zou je een melding willen ontvangen op de Pebble? Meteen een duidelijke melding, net als op de iphone gewoon. Waarom moet het meteen duidelijk zijn, je hebt dat horloge toch om je pols? Ja, maar er is een kans dat ik het niet meteen zie als ik ergens mee bezig ben. Wat vindt je van een trillende Pebble om jou op de hoogte te brengen? Klinkt alsof de batterij snel opgaat. Wat is de interactie die je zou willen maken met het bekijken hiervan? Ik denk via de knoppen aan de zijkant. Dan moet er wel een goed systeem inzitten zodat het snel kan. Probleem: De gebruiker wilt een andere melding krijgen dan een trillende Pebble. Mental Model: De gebruiker wilt niet dat de Pebble continu trilt omdat hierdoor de baterij sneller opgaat. Bijhorende pattern: Behavioural Wat is de interactie die je wilt ervaren met het overbieden via de Pebble? Ik wil een interactie die handig is, dus geen moeilijk gedoe met de knoppen op de zijkant. Waarom is dat onhandig? Ik wil snel overbieden, dus er is geen tijd te verliezen. Wat voor interactie op het scherm moet er zijn? Een handige interface waardoor ik het snap. En snel kan overbieden. Probleem: De gebruiker wilt geen onnodige tijd verliezen met het overbieden. Mental Model: De gebruiker wilt een handige interface, die overbieden makkelijker maakt. Bijhorende pattern: Structural De oplossingsrichtingen: Calculator Number slider Number widget De oplossingsrichtingen: Notification Popup screen Warning 30-10-14 versie:1.0 Ontwerper: Rick Bierman klas:v1_09 Studentennummer: 500692491 20