Het ontwikkelen van één mobiele user interface, met een user experience die gelijk is op meerdere besturingsystemen.
Deze scriptie is geschreven door Pepijn Hemelaar
COLOFON Auteur Studentnummer E-mail Opleidingsinstituut
0813218
[email protected] Hogeschool Rotterdam
Major
Communicatie & Multimedia Design
Minor
Interface & Experience Design
Afstudeerjaar
Afstudeerbegeleiders HR
“And why do we fall, Bruce? So we can learn to pick ourselves up...” Thomas Wayne
Pepijn Hemelaar
2012
Rob van der Willigen Ellen van Gent-Spoel
Stagebegeleiders Appstrakt
Nick Verbaendert Kevin Verelst
Deze scriptie bevat een aantal quotes die betrekking hebben op het besproken onderwerp.
Pepijn Hemelaar © 2012
Dit document mag enkel na toestemming van de auteur worden
verveelvoudigd en/-of verspreid. Alle inhoud is met alle zorgvuldigheid samengesteld. Mocht u van mening zijn dat er informatie onrechtmatig gebruikt is neem dan contact op met de auteur.
VOORWOORD Deze scriptie is ontstaan vanuit mijn interesse voor mobiele applicaties, en de gebruiksvriendelijkheid ervan. Vanaf het eerste moment dat ik in aanraking kwam met applicaties was ik geïnteresseerd in de toegevoegde waarde voor gebruikers. Gedurende mijn studie ben ik dan ook veel bezig geweest met het uitwerken en ontwerpen van mobiele applicaties. Met dit onderwerp wil ik ook mijn studie Communication & Multimedia Design aan de Hogeschool Rotterdam afronden. Op de eerste plaats wil ik mijn afstudeerbedrijf Appstrakt bedanken voor de mogelijkheid om bij hen mijn studie af te ronden. Met name wil ik Kevin Verelst en Nick Verbaendert bedanken voor de begeleiding, maar ook alle andere medewerkers voor de kennis in combinatie met een goede dosis gezelligheid. Daarnaast wil ik mijn afstudeerbegeleider Rob van der Willigen bedanken voor het luisterend oor en het beantwoorden van mijn vragen. Hiermee heeft Rob mij veel nieuwe inzichten gegeven, vooral op het gebied van het uitvoeren van een gedegen onderzoek. Ook Job Breemer ter Stege voor het controleren en het verhogen van de leesbaarheid van mijn scriptie. Grote dank gaat ook uit naar mijn vrienden die mij altijd nieuwe dingen hebben laten zien, mij hebben gesteund en hebben meegedacht. Ten slotte wil ik mijn ouders en broers bedanken voor alle steun en vertrouwen dat ze mij hebben gegeven. Bedankt! Pepijn Hemelaar
SAMENVATTING Deze scriptie gaat over het cross_OS ontwerpen van een mobiele user interface
Door van de standaard UI elementen van OS’s af te wijken ontstaat er een
(UI) met een gelijke user experience (UX).
leermoment voor gebruikers, waardoor het gebruik ervan wordt beïnvloed. Door het gebruik van patterns is het voor ontwerpers mogelijk om de leermomenten van
Om dit in kaart te brengen zijn eerst de kenmerken van mobiele apparaten en de
gebruikers te beperken.
elementen die van belang zijn voor de mobiele UX onderzocht. Hieruit bleek dat op mobiele applicaties de content van applicaties een belangrijke rol speelt bij het
Daarnaast besteedt dit onderzoek aandacht aan de ontwikkelingen op het gebied
bewerkstelligen van een positieve UX. Daarnaast wordt de UX van applicaties
van UI. Door technische ontwikkelingen is het gebruik van natural user interfaces
bepaald door het mentale model van gebruikers. Het is voor ontwerpers van belang
(NUI) voor gebruikers toegankelijker geworden. In dit onderzoek worden gestures
om erachter komen welke content meerwaarde aan de gebruiker biedt en hoe het
belicht en bekeken wat voor meerwaarde ze het te bieden hebben voor gebruikers
mentale model van de gebruikers in elkaar steekt.
en hoe dit door die gebruikers wordt ervaren. Daarnaast wordt er aandacht besteed aan spraak assistenten. Dit is de nieuwste ontwikkeling op het gebied van UI’s.
Als ontwerper heb je daarnaast nog te maken met de eigenschappen van het
Het onderzoek zal ingaan op de invloed van deze technologie op UI’s en hoe deze
systeem. De verschillende UI richtlijnen van de OS’s zijn onderzocht en vergeleken
ingezet kan worden om een meerwaarde aan gebruikers te bieden.
om erachter te komen welke elementen cross- OS inzetbaar zijn zonder de UX te benadelen. Tijdens het onderzoek is gebleken dat er vooral rekening moet worden gehouden met de herkenbaarheid van elementen, zodat een applicatie eenvoudig en snel in gebruik is.
SUMMARY This thesis is about cross operating system (OS) user interface (UI) design with a similar user experience (UX).
When deviating from the way of using standard UI elements, it will create a learning moment for users, resulting in a negative influence on the use of an
The first step was to explore the possibilities of mobile devices and the elements
application. Patterns are a tool for designers to restrict these learning moments of
that are important for the mobile UX. This showed that in mobile applications the
users.
content is very important for reaching a positive UX. Beside this, the UX is influenced by the mental model of the user.
This thesis also highlights the latest development in UI’s. Thanks to technical development, the use of natural user interfaces (NUI) has become more accessible
To create value it is important for a designer to know the mental model of the user
for users. During this research, users have been observed to see what value certain
is build.
gestures add to the UX.
As a designer you have to cope with the properties of a particular system. The
Finally, this thesis has its focus on speech assistants. This is the latest development
different UI guidelines of the OS’s are researched and compared. This learns which
in the UI department. The research is about the value that is created by this
UI elements are cross-OS usable without harming the UX. Recognition of an
technology for the users and how it can be of value for the UX.
element is very important for any user. When elements are recognized, the use of an application is more simple and quicker.
INHOUDSOPGAVE 1. Inleiding
13
5. Natural User Interface (NUI)
77
1.1 Achtergrond informatie
13
5.1 Gestures
78
1.2 Probleemstelling en onderzoeksvragen
14
5.2 Ontwikkeling van de Natural User Interfaces
82
1.3 Doelstelling
16
5.3 Bevindingen
86
1.4 Verantwoording
16
1.5 Onderzoeksmethode
17
6. Van theorie naar de praktijk: Splittr
89
1.6 Conceptuele model
18
6.1 Conceptuele model
90
1.7 Beschouwende conclusie
19
6.2 Doelgroep
92
1.8 Terminologie
20
6.3 Functionaliteit
94
1.8 Meta overzicht
22
6.4 Interactiestructuur
96
6.5 Bevindingen
103
2. Mobiele User Experience Design
25
2.1 Eigenschappen van mobile devices
26
7. Case study
105
2.2 Verschillende soorten applicaties
31
7.1 Probleem
105
2.3 Kenmerken van de Mobiele User Experience
34
7.2 Analyse: inventarisatie van de bestaande praktijk
105
2.4 Framework voor mobiele user experience
45
7.3 Resultaten
106
2.5 Bevindingen
46
7.4 Conclusie
107
3. Mobiele User Interfaces
49
8. Gebruikersonderzoek
109
3.1 Verschillende mobiele OS
50
8.1 Onderzoeksopzet
109
3.2 Resoluties
51
8.2 Resultaten
109
3.3 OS specifieke navigatie
52
8.3 Conclusie/Aanpassingen
114
3.4 Cross OS applicaties
57
3.5 Custom UI’s
58
9. Discussie en Conclusie
117
3.6 Bevindingen
60
9.1 Conclusie
117
9.2 aanbevelingen
121
4. Patterns
63
4.1 Primaire Navigatie
64
Bibliografie
124
4.2 Secundaire navigatie
69
4.3 Formulieren
71
Appendix
128
4.4 Zoeken
73
Appendix I: Voorbeelden van cross OS applicaties
128
4.5 Ontwikkeling van Patterns
74
Appendix II: Wireframes
130
4.6 Bevindingen
74
Appendix III: Gebruikersonderzoek
138
1. INLEIDING 1.1 ACHTERGROND INFORMATIE Appstrakt, het bedrijf waar ik mijn afstudeerstage heb doorgebracht, ontwikkelt mobiele applicaties (apps) voor klanten. Een groot gedeelte van de apps wordt voor festivals ontwikkeld. Enkele voorbeelden daarvan zijn: Rock Werchter, Pukkelpop en Tomorrowland. Appstrakt ontwikkelt voornamelijk native apps die voor meerdere multimedia-operating systems (OS’s) worden ontwikkeld. Het gaat daarbij voornamelijk om mobiele applicaties voor iOS, Android, Windows Phone 7 en Blackberry. Voor de mobiele applicaties moet voor ieder operating system (OS) een aparte applicatie worden ontworpen en ontwikkeld. Dit om te voldoen aan de technische en user experience (UX) aspecten die per OS verschillen. Ook ontwikkelt Appstrakt apps voor desktop’s, printer’s en console’s. Dit onderzoek staat in relatie met de studie CMD. In dit onderzoek staat de gebruiker centraal, er wordt namelijk onderzocht wat belangrijk is voor de mobiele UX. Het onderzoek richt zich op het cross-OS ontwerpen van een mobiele UI. Over user interfaces (UI’s) is veel kennis beschikbaar. Door dit onderwerp te belichten zullen bedrijven en studenten inzicht krijgen in het cross-OS ontwerpen van een mobiele UI, waarbij rekening wordt gehouden met de UX. Hierbij wordt gekeken naar de eigenschappen van de verschillende mobiele OS’s UI’s, in relatie tot de UX.
13
14
INLEIDING
15
INLEIDING
1.2 PROBLEEMSTELLING EN ONDERZOEKSVRAGEN Op dit moment zijn er meer smartphones in omloop dan desktop en laptops samen. Dit resulteert automatisch in een toename van het gebruik van zowel het web als applicaties (Wroblewski, 2011). Om een zo groot mogelijk publiek te benaderen wordt een applicatie vaak op
Dit onderzoek probeert antwoord te geven op twee hoofdvragen: 1. Welke User Experience en User Interface elementen zijn van belang voor het vormgeven van mobiele cross-OS applicaties?
meerder OS’s uitgegeven. Hierbij is het belangrijk dat de user interface (UI) van de app is afgestemd op wat de gebruiker van een bepaald OS’s gewend is. Het is
2. Hoe kan een user interface designer voor de verschillende OS’s en
belangrijk dat de UI van de app voelt alsof het speciaal voor het specifieke device
verschillende resoluties zijn UI ontwerp afstemmen op de UX
ontworpen is (Fahrenkrug,2011).
verwachtingen van gebruikers?
De ontwikkeling van de UI is een onderdeel van de UX. In de UX wordt vastgesteld hoe gebruikers apps gebruiken, wat ze willen en welke functies nodig
Om deze twee hoofdonderzoeksvragen te kunnen beantwoorden zijn de deelvragen
zijn. Dit leidt uiteindelijk tot een UI waarin de UX in verweven is. De UI behoort
binnen dit onderzoek opgesteld:
tot de laatste stap in het UX design (Garrett, 2010)
Hoe verschilt mobiele UX van niet mobiele UX? Welke elementen zijn belangrijk voor de mobiele UX?
Het is voor bedrijven aantrekkelijk een UI te ontwerpen die toepasbaar is voor
Welke relatie is er tussen de UX en de UI van een applicatie?
verschillende OS’s. Het is voor bedrijven namelijk kostbaar om voor elk OS’s een aparte UI te ontwikkelen (Ginsburg, 2010). Bedrijven willen namelijk een zo groot
Welke os specifieke verschillen zijn er in mobiele UI’s?
mogelijke groep benaderen met hun apps zonder al te veel geld eraan te besteden.
Welke elementen zijn cross-os inzetbaar?
Helaas voor ontwikkelaars is de UI van applicaties niet zomaar overdraagbaar van
Welke ontwikkelingen zijn er op het gebied van mobiele UI’s?
de ene op de andere OS’s, gekeken naar de UX (Fahrenkrug, 2011). Aan de hand van bovenstaand probleem en het kennisgebied van dit onderzoek is er een onderzoeksvraag geformuleerd. Deze vraag belicht zowel de UX als de UI. De bijhorende deelvragen zijn ingedeeld aan de hand van deze twee onderwerpen om ze zo afzonderlijk te kunnen belichten.
16
INLEIDING
INLEIDING
1.3 DOELSTELLING
1.5 ONDERZOEKSMETHODE
Met dit onderzoek wil ik aantonen of het mogelijk is om een gelijkwaardige
Allereerst is er binnen dit onderzoek desk research verricht naar de onderstaande
applicatie UI te ontwerpen ongeacht het OS waar deze op draait.
onderwerpen. Daarnaast is er een diepte analyse van de mobiele UX uitgevoerd en is er
1.4 VERANTWOORDING
onderzoek naar de elementen van de mobiele UX. Ook zijn de verschillende
Dit onderzoek richt zich op de ontwikkelingen van UI’s met betrekking tot de UX.
OS’s onderzocht, evenals de verschillen in de UI en wat deze voor de gebruiker
Er komen steeds meer applicaties die op meerder OS’s aangeboden worden. Vaak
betekenen.
worden deze applicaties direct gekopieerd van het ene naar het andere OS, zonder daarbij rekening te houden met de gebruiksvriendelijkheid. Aangezien ieder OS
Vervolgens heeft er een case study plaatsgevonden. Er is een analyse van Appstrakt
zijn eigen opbouw van de UI en interacties heeft, dient hier als vanzelfsprekend
gedaan om te kijken hoe zij omgaan met het cross OS ontwerpen van UI’s van
naar gekeken te worden. Als de UI afwijkt van wat de gebruiker gewend is tast dit
applicaties, en welke knelpunten ze hierbij ervaren. Ook heeft een experiment
de ervaring met het product aan (Ginsburg, 2010; Fahrenkrug,2011).
plaatsgevonden. De UI van de applicaitie is met het oog op de UX getest. Uit de resultaten van deze test worden verbeterpunten, conclusies en aanbevelingen geformuleerd.
17
18
INLEIDING
INLEIDING
1.6 CONCEPTUEEL MODEL
1.7 BESCHOUWENDE CONCLUSIE
Het conceptuele model dat voor dit onderzoek gebruikt is, is afgeleid van het user
Door rekening te houden met elementen die in dit onderzoek worden behandeld,
binnen dit model: de gebruikers, het systeem en de ontwerper.
UX en UI. De applicatie Splittr die uit dit onderzoek is ontstaan geeft gelijke
centered model van Donald A. Norman (fig. 1). Er zijn drie groepen van belang
figuur 1, 3 mentale modellen die belangrijk zijn bij het ontwikkelen van mobiele applicaties
figuur 1 - Conceptuele model
Met de informatie uit het onderzoek zal dit model worden aangevuld met de
eigenschappen die belangrijk zijn voor het cross-OS ontwikkelen van mobiele applicaties. Dit zal in hoofdstuk 6 worden besproken.
is het mogelijk om een cross-OS applicatie te ontwikkelen met een gelijke
onderzoeksresultaten weer op drie verschillende platformen. Hierbij is er getest op een aantal elementen die uit de literatuur is gekomen.
19
INLEIDING
20 1.8 TERMINOLOGIE AFFORDANCE
INLEIDING NATURAL USER INTERFACE (NUI) De Natural User Interface is een systeem dat gebruik maakt van hand- en
Ontwerpen aan de hand van verwachtingspatronen uit de realiteit waarin de
lichaamsbeweging. Dit maakt direct manipulatie van interface en content mogelijk.
impliceren.
OPERATING SYSTEM (OS)
zintuigelijke karakteristieken van een object intuïtief zijn functionaliteit en gebruik
Het systeem waarvan een product gebruik maakt.
ANDROID Het besturingssysteem dat is ontwikkeld door Google, gebaseerd op het
PATTERNS
OpenSource platform Linux.
Standaarden voor elementen waaruit een user interface is opgebouwd, deze
GEBRUIKER
USER EXPERIENCE (UX)
Iemand die met een bepaald doel en verwachtingen gebruik maakt van een systeem.
GRAPHICAL USER INTERFACE (GUI) De Graphical User Interface is een systeem dat gebruik maakt van schermen, iconen, menu’s en pointers. Hiermee kunnen de interface-elementen worden gemanipuleerd. iOS Het besturingssysteem dat Apple aanbiedt op hun tablets en telefoons.
elementen hebben succes geboekt ten opzichte van de user experience. De ervaring die de gebruiker krijgt door het gebruik van een product. USER INTERFACE (UI) De plek waar de interactie tussen mens en machine plaatsvindt. WINDOWS PHONE 7 (WP7)
Een door Microsoft ontwikkeld besturingssysteem voor mobiele telefoons.
21
22
INLEIDING 1.9 META OVERZICHT
INLEIDING HOOFDSTUK 4 - PATTERNS
Het onderstaande overzicht geeft per hoofdstuk en paragraaf aan welke
In hoofdstuk vier zullen de patterns worden behandeld. De besproken patterns
onderwerpen binnen dit onderzoek zijn behandeld en in deze thesis zullen
zullen cross OS inzetbaar zijn. Er worden patterns behandeld voor: primaire
worden onderzocht.
navigatie, secundaire navigatie, formulieren, zoekfunctie en toolbars.
HOOFDSTUK 2 - MOBIELE USER EXPERIENCE DESIGN
HOOFDSTUK 5 - NATURAL USER INTERFACE
Dit is het onderdeel dat de volledige mobiele UX behandelt. Dit hoofdstuk wordt
In dit hoofdstuk komen de ontwikkelingen van natural user interfaces (NUI)
daarom verdeeld in een aantal paragrafen:
aan bod. Dit is een onderwerp in relatie van de NUI tot de UX. Hierbij wordt
In een paragraaf zullen de kenmerken die van belang zijn bij de ontwikkeling van
Gestures en spraakbesturing worden in dit hoofdstuk eveneens behandeld.
van mobiele applicaties.
HOOFDSTUK 6 - VAN THEORIE NAAR SPLITTR
zijn voor websites wordt er een mobiele UX beschreven. Door een aantal UX
Er wordt besproken welke keuzes er zijn gemaakt bij het maken van de cross-OS
een mobiele UX aan bod komen. Dit zijn specifieke kenmerken voor het ontwerpen
er gekeken naar de gebruiksvriendelijkheid en de inzetbaarheid binnen een UI.
Aan de hand van de kenmerken van mobile devices en de UX zoals die beschreven
In dit hoofdstuk zullen de onderzochte theorieën worden toegepast op de praktijk.
modellen te vergelijken, ontstaat een model dat de kenmerken van een mobiele UX
applicatie Splittr.
weergeeft.
HOOFDSTUK 3 - MOBIELE USER INTERFACE
HOOFDSTUK 7 - CASE STUDY In dit hoofdstuk worden de onderwerpen beschreven waarover Appstrakt
In dit hoodstuk wordt de relatie gelegd tussen de UI en de UX. Daarbij worden
onderzoek wil doen om meer te weten te komen over cross- OS ontwerpen van
De onderlinge verschillen tussen deze drie OS’s worden hier beschreven. In dit
worden gevormd.
bod komen. In dit hoofdstuk zullen de verschillen in navigatie, gestures, resoluties
HOOFDSTUK 8 - GEBRUIKERSONDERZOEK
apps die op al de drie de OS’s zijn gelanceerd: Shazam, Twitter en Spotify. Hier
van Splittr en de case study besproken. De resultaten worden in dit hoofdstuk
er drie OS’s besproken, namelijk: iOS, Android en Windows phone 7 (WP7).
hoofdstuk staat de UI centraal, maar zal de relatie met de UX ook uitgebreid aan
applicaties. Met de resultaten van dit onderzoek zal het gebruikersonderzoek
en interactiestructuren worden beschreven. Daarnaast wordt er gekeken naar drie
In dit hoofdstuk wordt het gebruikersonderzoek dat is gehouden aan de hand
aan gelinkt zit het onderdeel dat een inzicht geeft in apps die een eigen UI hebben
geanalyseerd.
ontwikkeld zonder de specifieke structuur te volgen van de specifieke OS.
HOOFDSTUK 9 - CONCLUSIE EN AANBEVELINGEN In dit hoofdstuk worden de conclusies beschreven die uit het onderzoek naar voren zijn gekomen. Tevens zal er een antwoord worden gegeven op de hoofdvraag.
23
2. MOBIELE USER EXPERIENCE Overal om je heen zie je mobile devices. Het is dan ook niet verwonderlijk dat er in 2012 meer smartphones dan desktops en notebooks tezamen op de markt zijn gebracht (Wroblewski, 2011). Dit geeft een indruk van de groei die mobile devices hebben gemaakt. Een oorzaak hiervan is de verbeterde gebruiksvriendelijkheid van deze devices: de user experience van mobile devices is sinds de komst van de iPhone sterk verbeterd. De iPhone heeft er ook voor gezorgd dat het mobiele internet toegankelijker werd. AT&T, een Amerikaanse provider met de exclusieve rechten van de iPhone, kreeg in de periode 2006 tot 2009 te maken met een groei van het mobiel internet gebruik van 4932% (Stanley, 2009). Het gebruik van het internet werd een stuk eenvoudiger en het was sneller in het gebruik. Dit geldt in zijn algemeenheid ook voor applicaties. Een applicatie zal worden gebruikt als deze gebruiksvriendelijk is en het gebruik ervan iets oplevert voor de gebruiker, in de vorm van informatie of plezier. Dit leidt tot een positieve user experience. Het volgende deel richt zich op de eigenschappen van mobile devices en de mobiele user experience die hierop aansluit.
25
26
MOBIELE UX
MOBIELE UX
2.1 EIGENSCHAPPEN VAN MOBILE DEVICES Door de bovengenoemde ontwikkeling is het interessant om te kijken hoe
Voor de gebruikerservaring is dit een groot voordeel omdat de ruimte gebruikt
naar mobile devices, aangezien mobile devices anders worden ingericht. Een
die op het scherm worden weergegeven moeten daarom voor de gebruiker de
ontwerpers de user experiences voor de desktop en laptop kunnen overbrengen van de beperkingen van een mobiel device is het kleine scherm. Daar staat
tegenover dat mobile devices tal van nieuwe mogelijkheden, en daardoor nieuwe functies hebben. De gebruiker is namelijk in staat om altijd en overal zijn
mobiel te gebruiken. Bij het ontwikkelen voor een mobiele device moet worden
bekeken welke beperkingen en mogelijkheden mobile devices aan kunnen bieden (Wroblewski, 2011). In de volgende paragrafen wordt hier een overzicht van gegeven.
kan worden voor wat de gebruiker echt nodig heeft. De informatie en functies
belangrijkste zijn (Wroblewski, 2011). De gebruiker kan namelijk maar een scherm tegelijk zien, andere applicaties worden afgesloten of draaien in de achtergrond.
Een toevoeging daarop is dat voor dat een mobiele device een klein scherm heeft, is de content ook bedoeld voor persoonlijk gebruik. In tegenstelling tot een tablet die door meerdere mensen tegelijk te bedienen is.
“Leen je telefoon maar eens uit aan je buurman Niet fijn, toch? Je mobiel is het meest intieme medium dat bestaat.”
2.1.1 KLEIN SCHERM De eerste smartphones hadden een scherm met een resolutie van 320 x 480 pixels. Dat is 20 procent van de ruimte die gebruikers gewend zijn van een desktop of laptop (fig. 2). Aangezien er minder ruimte is, moet de ruimte die wel ter
beschikking is zo efficiënt mogelijk worden gebruikt. Dus niet zoals op websites waarbij grote delen van het scherm worden gevuld met met advertenties, links, afbeeldingen en tekst.
Andrew Grill 2.1.2 CONTEXT Mobiele telefoons worden overal mee naar toe genomen. Daar moet rekening
mee worden gehouden bij het ontwikkelen van een user experience. Een mobiele telefoon is zoals de naam al aangeeft namelijk een draagbaar device dat zichzelf voorziet van energie door middel van een accu. Hierdoor kan een mobiel device
overal en altijd gebruikt worden. Smartphones worden om deze reden dan ook in andere situaties gebruikt dan desktops.
Een onderzoek dat in 2010 is uitgevoerd door Compete geeft aan wanneer mensen gebruik maken van hun smartphone. Uit dat onderzoek is af te leiden dat de
toegankelijkheid van het mobiele device is toegenomen. Zo gebruikt bijvoorbeeld 74% van de onderzoekspopulatie hun mobiele device wanneer ze in een rij of op
een afspraak aan het wachten zijn. 69% van de respondenten gebruikt hun mobiele device als ze aan het winkelen zijn en 62% van hen als ze televisie aan het kijken zijn (Bulger, 2010) (fig. 3). figuur 2 - Resolutie verschil
27
28
MOBIELE UX
MOBIELE UX types in kaart gebracht die de verschillende situaties beschrijven. Clark beschrijft drie mobiele gedragingen: micro-tasking, I’m local en I’m bored (Clark, 2010). Deze komen overheen met de drie beschrijvingen van Google: urgent now,
repetitive now en bored now (Wellman, 2007). Luke Wroblewski heeft gekeken
naar de formulering van Google en deze naast de beschrijving van Clark gelegd. Daaruit heeft hij vier interactie types geformuleerd.
Applicaties die een micro taak kunnen uitvoeren moeten snel en eenvoudig te figuur 3 - Context en functies van mobile devices
Dit geeft aan dat de context waarin een applicatie of website bezocht wordt niet van plaats of tijdstip afhankelijk is. Vaak hebben de applicaties niet de
volledige aandacht van de gebruiker. Er is dan sprake van het “one eyeball, one thumb” principe (Wroblewski, 2011). Gebruikers bedienen hun mobiele device
voornamelijk met een duim en daarbij hebben ze meestal niet de volle aandacht op het scherm gericht. De bediening van een applicatie moet dan ook simpel en
eenvoudig zijn, zodat het in iedere situatie makkelijk te bedienen is. Dit zal verder behandeld worden in het hoofdstuk over Usabillity.
De bereikbaarheid van mobile devices zorgt er ook voor dat een applicatie altijd
gebruikt kan worden. Als een gebruiker ‘s nachts wakker wordt en denkt aan een
mail die nog beantwoordt moet worden, is het makkelijker om een mobiele device dan een laptop of desktop te pakken.
Dit laatste geeft ook gelijk aan dat het gebruik van een mobiele device vaak maar een korte tijd zal
duren. Wanneer de mail is verstuurd, zal de gebruiker het device naast zich
neerleggen om weer verder te slapen. Over het algemeen wordt van een mobiel device in zogenaamde bursts gebruikt. Korte momenten waarop snel wordt gekeken of een actie wordt ondernomen (Wroblewski, 2011).
Om aan te geven hoe gebruikers omgaan met mobiele applicaties zijn er interactie
Urgente info, lokaal gebruik: in deze situatie wil de gebruiker op dit
moment een antwoord hebben. Vaak is hierbij de huidige locatie van de
gebruiker van belang. Bijvoorbeeld als een gebruiker wil weten waar de dichtstbijzijnde fietsenmaker zit.
Verveling, lokaal gebruik: hierbij heeft de gebruiker vrije tijd die hij kan
doden met afleidingen in de vorm van applicaties. Een voorbeeld hiervan is een gebruiker die op de bus staat te wachten en een game gaat spelen.
Herhalende/ micro taak: de gebruiker wil op de hoogte blijven van de
laatste ontwikkelingen en wil ook zijn update geven. Een voorbeeld hiervan is een gebruiker die een status update doet via een sociaal netwerk.
Urgente veranderingen/ micro taak: het aanpassen van iets dat niet kan
wachten op een ander moment. Een voorbeeld bij dit type is het aanpassen van een document in pages, om het daarna direct te kunnen mailen (Wroblewski, 2011).
gebruiken zijn. Dit omdat het gebruik van mobile devices in bursts gebeurt. Het komt er op neer dat een gebruiker een korte tijd geconcentreerd is. Als hij langer voor een
actie nodig heeft dan zo’n burst duurt, kan het voorkomen dat hij zijn doel niet bereikt. Applicaties die een microtaak kunnen uitvoeren hebben vaak een desktopversie die uitgebreider is qua functies. De mobiele versie moet er gericht op zijn om snel en
eenvoudig iets toe te voegen of aan te passen, ongeacht de context waarin de gebruiker zich begeeft (Clark, 2010).
29
30
MOBIELE UX
MOBIELE UX
2.1.3 FUNCTIES
2.2 VERSCHILLENDE SOORTEN APPLICATIES
Mobile devices hebben het voordeel dat ze overal en altijd benaderd kunnen
Op mobile devices kunnen gebruikers op verschillende manieren worden benaderd.
komen met de technische mogelijkheden waarover mobile devices tegenwoordig
de gebruikers hebben.
worden. Dit levert kansen op voor gebruikers. Wanneer deze kansen samen
beschikken, kunnen er innovatieve ervaringen ontstaan (Wroblewski, 2011). Op reuk en smaak na is het technische mogelijk om zintuigelijke functies te
benaderen. Zo is het mogelijk om de camera aan te sturen en via een interactieve
laag de omgeving te ontdekken. Layar is een voorbeeld van een applicatie die van
deze functie gebruik maakt. Tevens is het mogelijk om door gebruik te maken van de microfoon muziek te herkennen. Shazam is een applicatie die gebruikers hierin
voorziet. Daarnaast is het mogelijk om de locatie van het mobile device, maar ook
de omliggende locaties te bepalen. Gebruikers kunnen op deze manier bijvoorbeeld de dichtstbijzijnde geopende supermarkt traceren. Deze technische functies in
combinatie met de context bieden andere mogelijkheden voor de gebruikers, ten
opzichte van de mogelijkheden en functies van desktops en laptops (Wroblewski, 2011).
Aan de hand van de functies die een gebruiker nodig heeft kan er een keuze
worden gemaakt voor de soort applicatie. De kenmerken van de verschillende applicaties worden in de volgende paragraaf behandeld.
De keuze voor het aanbieden van een bepaalde vorm hangt af van de behoefte die
2.2.1 NATIVE APPS Native apps hebben de mogelijkheden om mobile devices optimaal te benutten. De transities en interacties in native apps zullen over het algemeen soepeler verlopen dan bij web apps. De content native apps zijn ook offline beschikbaar. Hierdoor
zal een applicatie sneller laden en werken. Dit komt de user experience ten goede,
want de gebruiker hoeft daardoor niet onnodig lang te wachten. Een native app zal voor de gebruiker aanvoelen alsof deze speciaal voor zijn apparaat is ontwikkeld.
Een probleem bij de ontwikkeling van native apps is dat voor iedere OS een aparte code geschreven moet worden. Dit zorgt ervoor dat meerdere ontwikkelaars eraan moeten werken. Dit leidt tot hogere kosten (Jones, 2012; Wroblewski, 2011).
De vindbaarheid van native apps is groter doordat deze in zogenaamde app stores
zijn opgenomen. Hierdoor zijn ze makkelijker door de gebruikers te lokaliseren. De native apps worden ook automatisch op het device geplaatst na het downloaden. Een mogelijk negatief gevolg van dit gemak is dat het kan zorgen voor een
bepaalde censuur van bepaalde applicaties doordat er een store als middelman tussen de gebruiker en applicatie in staat.
Daarnaast verschillen de interface conventies per OS. Hierdoor moeten er ook
meerdere ontwerpen worden gemaakt, om het voor de gebruikers vertrouwd aan te laten voelen (Charland, 2011). In het hoofdstuk over user interfaces wordt dieper
ingegaan op de interface verschillen van drie OS, namelijk iOS, Windows Phone 7 en Android.
31
32
MOBIELE UX
MOBIELE UX
2.2.2 WEB APPS
2.2.3 HYBRID APPS
Web apps zijn applicaties die gebruik maken van de browser waarover mobile
Hybrid apps zijn een combinatie van native- en web apps. De content wordt
web technologie (HTML/ CSS/ Javascript). Dit werkt in iedere mobiele browser en
aanwezig is. De interface die wordt gebruikt, is offline te bereiken. Tevens zijn alle
devices beschikken. Er is maar een code nodig, ze maken namelijk gebruik van
zorgt voor een groter bereik en is tevens OS onafhankelijk. Hierdoor zijn web apps te lanceren zonder goedkeuring van een van de app stores. Wanneer web apps af
ingeladen door gebruik te maken van web technologie, zoals die ook in web apps mogelijkheden aan te sturen zoals push notificaties, camera en accelerometer.
zijn, worden ze sneller dan native apps beschikbaar voor de gebruikers. Hetzelfde
Doordat de content is geschreven in webtechnologie en de interface in native code
applicatie toe te voegen aan het home screen is echter een actie door de gebruiker
afhankelijk van de prestaties die de mobiele browser kan bieden. Hybrid applicaties
geldt voor updates, die gedaan worden ten behoeven van de applicatie. Om een nodig. Dit toevoegen gebeurt niet automatisch bij het bezoeken van de pagina.
Web apps kunnen de hardware en software mogelijkheden niet volledig benutten. Web apps zijn namelijk afhankelijk van de beschikbare API’s die beschikbaar
zijn voor de browser. Hierdoor zijn in tegenstelling tot de native apps niet alle
mogelijke functies beschikbaar. Daarbij komt dat de beveiliging van web apps
gevoelig is voor onder andere spyware en botnets (Jones, 2012; Wroblewski, 2011; Charland, 2011).
geschreven dient te worden, is ontwikkeling op meerdere OS’s mogelijk. Het is wel worden via de app stores bij de gebruikers aangeboden. Dit geldt eveneens voor de updates. Als ontwerper en developer ben je wel gebonden aan de eisen van ieder OS en hun bijbehorende store (Jones, 2012). 2.2.4 KEUZE De keuze om een bepaalde applicatie te ontwikkelen hangt af van wat de
gebruikers ermee willen en wat hen kan worden geboden. Het moment waar
we nu qua ontwikkeling van applicaties zijn aanbeland, is te vergelijken met de
ontwikkeling van het web eind jaren negentig. De mobiele UX zal zich verder gaan ontwikkelen. Op dit moment leveren web apps een slagingspercentage van 64% bij het halen van het doel van de gebruiker. Dit is een kleine verbetering als men kijkt
naar het percentage van 58% op de volledige site. Native apps hebben daarentegen een veel hoger slagingspercentage namelijk 76% (Nielsen, 2011). Hier vallen
ook de hybride apps onder, aangezien ze bijna dezelfde user experience bieden als native apps (Jones,2012; Charland, 2011).
33
34
MOBIELE UX
MOBIELE UX
2.3 KENMERKEN VAN DE MOBIELE USER EXPERIENCE
2.3.2 CONTENT
Zoals in de vorige paragraaf duidelijk is geworden hebben mobile devices
De content die je aanbiedt in de app moet eveneens functioneel zijn voor de
ontwikkelen van een UX. Volgens Kelway is de UX opgebouwd uit zes cirkels.
onderzoeken welke functies en content de gebruiker verwacht. Als ontwerper kan
een aantal eigenschappen waarmee rekening moet worden gehouden bij het Deze cirkels bestaan uit: Persuasion, Behaviour, Visual Design, Usabillity,
Interaction en Content (Kelway, 2012). Garrett heeft vijf elementen over UX
design beschreven. Volgens hem bouw je een UX op uit de elementen: Surface,
Skeleton, Structure, Scope en Strategy (Garrett, 2010). Deze onderdelen zorgen ervoor dat de UX zo gebruiksvriendelijk mogelijk is. Door deze kaders te
onderzoeken en theorieën over mobile devices te bestuderen zal er een kader ontstaan voor UI ontwerpers met belangrijkste punten voor een mobiele user experience.
2.3.1 PRESTATIE VAN DE APPLICATIES
gebruiker. Door de beperkte ruimte waarover je beschikt, is het belangrijk te
je namelijk een applicatie uitgeven, maar als je niet hebt gekeken naar wat de
gebruiker wil dan zal de applicatie niet veel worden gebruikt. Als de applicatie daarna verbeterd wordt dan zijn de gebruikers hun vertrouwen er in de meeste
gevallen al in verloren. Daarom is het noodzakelijk om als ontwerper vanaf het begin goed na te denken over wat je de gebruiker wilt bieden (Clark, 2010).
Het is bij het vormgeven van de Mobiele UX belangrijk te weten wat de doelen
zijn van het product, gezien vanuit het oogpunt van de opdrachtgever in combinatie met wat de gebruiker wil en nodig heeft. Deze beide perspectieven maken
gezamenlijk deel uit van de strategie die je uitrolt voor het te ontwikkelen product
Mensen gebruiken hun mobiel om productief te zijn, voor genoegdoening en voor
(Garrett, 2010). Op deze manier voorkom je dat er een applicatie wordt ontwikkeld
hoofddoel, daarnaast moeten ze snel en betrouwbaar in gebruik zijn. Alleen op deze
interessante content is, kom je te weten door bijvoorbeeld een gebruikersonderzoek
dat een applicatie er in eerste instantie vooral goed uit moet zien. In de praktijk
persona’s en scenario’s.
de prestaties van een applicatie. Gebruikers verwachten van mobiele applicaties dat
Op mobile devices is navigatie ondergeschikt aan content. Om een optimale
is, dan zorgt dit voor een slechte UX en zal de applicatie slecht beoordeeld worden
daarvan de navigatiestructuur te vormen (Wroblewski, 2011). Als ontwerper wil
plezier. Dat kan overal en altijd. Bij mobiele apps moet de focus liggen op het
die niet bij de gebruikers aanslaat en er dus onnodig geld wordt verspild. Wat
manier kunnen applicaties waardevol zijn voor de gebruiker. Vaak wordt er gedacht
te doen en door je in hun situatie in te leven. Dit gebeurt door het ontwikkelen van
blijkt dit alleen voor de eerste indruk belangrijk. Op de lange termijn gaat het om ze snel zijn en reageren op de acties zoals de gebruiker ze bedoelt. Als dit niet zo
UX te realiseren is het belangrijker om de content te bepalen en aan de hand
en niet worden gebruikt (Weevers, 2011).
je de gebruiker meteen brengen bij de informatie die voor hem van belang is. De volgende paragraaf zal ingaan waarom iemand een bepaalde applicatie op zijn telefoon gebruikt.
35
36
MOBIELE UX
37
MOBIELE UX
2.3.3 BEWEEGREDENEN VAN DE GEBRUIKER Gebruikers kunnen op drie manieren worden beïnvloed om een applicatie al dan
niet te gebruiken, namelijk door een competitieve, samenwerkende of erkennende vorm. Een voorbeeld van een applicatie die met een erkennende vorm nieuwe
gebruikers trekt is Instagram; door foto’s te maken via Instagram, kunnen vrienden aangeven of ze de foto leuk vinden. Hierdoor kan je erkenning krijgen op hetgeen dat jij hebt gemaakt. Games maken gebruik van een competitieve vorm. Een
voorbeeld hiervan is Wordfeud; waarbij het doel is om meer punten te behalen dan
je tegenstander. Een samenwerkende vorm is een applicatie zoals DrawSomething. Hierbij draait het erom dat je samen een zo hoog mogelijk level haalt door elkaars tekeningen te raden.
Door deze vormen aan te bieden verleiden vormgevers gebruikers om een bepaalde applicatie te gaan gebruiken. Dit is een meerwaarde die je kan bieden als je de
gebruiker begrijpt. Door erachter te komen waardoor je gebruikers kan verleiden,
figuur 4 - Opbouw van het mentale model van gebruikers
kan je een hierop aansluitende applicatie lanceren (Kelway, 2012). 2.3.4 VERWACHTINGEN
Bij het ontwerpen van een interface voor een mobiele applicatie is het belangrijk
om rekening te houden met het mentale model van gebruikers (fig. 4). Het mentale model vormt het gedrag en de acties die een gebruiker maakt om bij zijn doel
te komen. Het model wordt gevormd door eerdere ervaringen van de gebruiker (Weinschenk, 2011). Ook zullen verwachtingen worden beïnvloed door de
ervaringen van anderen. Doordat het model wordt opgebouwd uit ervaringen, is
het model bij iedere gebruiker anders. Dit geldt ook voor iemand die altijd gewend is om een telefoon met Android te gebruiken en overstapt op een Windows Phone 7. De gebruiker zal een leerproces moeten doorlopen. De duur van dit proces kan
worden beïnvloed door de ervaring met een eerder vergelijkbaar systeem (Nielsen, 2010).
Het mentale model van ontwerpers is vaak verder ontwikkeld dan dat van met
een doorsnee gebruiker. Ontwerpers zijn dan ook vaak expert op het gebied van UI’s. Voor de ontwerper is het dus zaak om niet te ontwerpen op basis van hun
eigen mentale model, maar zich in te leven in het mentale model van de gebruikers en voor hun model te ontwerpen (Nielsen, 2010). Voor het bewerkstelligen van een UX moet het mentale model van gebruikers worden beïnvloed. Dit wordt
gerealiseerd door twee andere modellen toe te passen, namelijk het systeem model en het design model.
Het systeem model beschrijft hoe een systeem werkt. Op een mobile device is dat het beschikbare OS. De gebruiker staat via het systeem model in contact
met het interactie model. Het design model beschrijft hetgeen de ontwerper wil
overbrengen aan de gebruiker. Hiervoor moet hij communiceren via het systeem.
Alle interacties moeten aangepast zijn aan wat gebruikers van het systeem gewend zijn (Norman, 2002). Een ontwerper kan patterns gebruiken om zijn design model gebruiksvriendelijk te maken. Patterns die in mobiele applicaties worden gebruikt
38
MOBIELE UX
MOBIELE UX
zullen in hoofdstuk 4 worden behandeld. De meeste gebruikers zijn al gewend aan
De manier waarop een gebruiker keuzes maakt is voor ontwerpers van essentieel
volgt, zorgt dit ervoor dat de gebruiker weet wat hij met de applicatie kan en hoe
informatie te reproduceren. Alan Baddeley ontdekte dat deze regel niet is
patterns (Kelway, 2012). Als een applicatie het mentale model van de gebruiker deze moet worden bediend.
“Interfaces become more usable when people enjoy using them.” Donald Norman Het mentale model heeft ook te maken met het cognitieve geheugen van de
gebruiker. Dit is van belang voor de invulling van het scherm. Er is namelijk
maar beperkte ruimte om functies en elementen in te voeren. Om hier de UX
positief te houden is het belangrijk om naar gedragingen van gebruikers te kijken. Zoals eerder al besproken, wordt de manier van handelen beïnvloed door wat
een gebruiker al weet en zijn verwachtingen. De cognitieve mogelijkheden van
gebruikers hebben ook invloed op de UX. Deze invloed wordt besproken in het volgende onderdeel: gebruiksvriendelijkheid.
belang. Volgens Miller is het mogelijk om tussen de vijf en de negen delen
gebaseerd op onderzoek en dat Millers conclusie slechts een veronderstelling
betreft. Volgens een recent onderzoek van Cowan is het mogelijk om vier delen
informatie te reproduceren (Weinschenk, 2011). Onbewust vergelijken gebruikers de keuzemogelijkheden met elkaar. Hiervoor is het van belang dat er rekening wordt gehouden met het geheugen van gebruikers, waardoor de gebruikers
makkelijk een keuze kunnen maken en moeiteloos kunnen navigeren. De gebruiker komt dan sneller bij zijn doel en de kans dat de gebruiker wordt afgeleid is kleiner. De hoeveelheid content moet dus zo beperkt mogelijk zijn. Dit ter bevordering
van de gebruiksvriendelijkheid van de applicatie. De applicaties op mobile devices kunnen ook prettiger aanvoelen voor gebruikers, doordat er minder ruimte is voor content (Wroblewski, 2011).
Bij het maken van ontwerpkeuzes is de werking van het geheugen van de mens van belang. Gebruikers zullen namelijk eerder dingen herkennen dan herinneren. Het
herkennen van afbeeldingen verloopt sneller dan dat van teksten (Kelway, 2012). 2.3.5 GEBRUIKSVRIENDELIJKHEID
Als ontwerper is het belangrijk om herkenbare en concrete iconen te gebruiken.
Cognitieve functies richten zich op het denken en onthouden van elementen. Dit
In een onbekende omgeving zijn gebruikers op zoek naar herkenbare elementen
is het belangrijk dat een product of dienst voldoet aan de verwachtingen van een
sommige elementen is het dan ook niet nodig om het wiel opnieuw uit te vinden.
beperkt behapbaar aantal keuzemogelijkheden, zodat de gebruiker zijn taak kan
gevoegd, omdat het zo al herkenbaar genoeg is voor mensen (Krug, 2005).
snel de juiste keuze kan maken zonder dat dit al te veel moeite kost. Applicaties
gebruikt om door gebruik te maken van soortgelijke oplossingen verschillende
twee taps zijn doel heeft bereikt. Hierbij is het belangrijk om het visueel eenvoudig
hoe deze elementen zich gedragen. De voorspelbaarheid van deze elementen
zorgt voor de keuzes die gemaakt worden om een bepaald doel te bereiken. Hierbij
waar ze eerder al ervaring mee hebben gehad. Voor de herkenbaarheid van
gebruiker. Een mobiele applicatie moet worden voorzien van duidelijke en een
Bij het icoon voor een winkelwagen bijvoorbeeld, hoeft geen tekstlabel te worden
afronden zonder zijn focus te verliezen. Voor de gebruiker is het optimaal als hij
Herkenbaarheid heeft ook betrekking op patronen (patterns). Patterns worden
worden vaak kort gebruikt. De ideale situatie zou zijn als een gebruiker binnen
ontwerpproblemen op te lossen. Gebruikers raken gewend aan patterns en weten
en overzichtelijk te houden (Clark, 2010).
is groot. Patterns kunnen verschillen in uiterlijk, maar qua gedrag zijn ze
vergelijkbaar. In hoofdstuk 4 worden patterns en het gebruik verder behandeld.
39
40
MOBIELE UX
MOBIELE UX
Samenvattend, bij het creëren van een mobiele UX is het van belang om je
hoe het gebruikt moet worden. Dit kan door een tekstuele link aan de structuur en
bereikt, wat hij gewend is, wat zijn verwachtingen zijn en hoe hij omgaat met
van de juiste visuele signalen is belangrijk voor het overzicht en gebruik van een
gebruiker te leren kennen. Het is belangrijk te weten hoe de gebruiker zijn doel informatie. Deze vragen zijn van belang bij het afstemmen van de content op
het gebruik. Na deze stap kan er aandacht worden besteed om de interactie met gebruikers zo soepel mogelijk te laten verlopen. 2.3.6 INTERACTIE De manier waarop een applicatie wordt bediend, is afhankelijk van de situatie waarin de applicatie wordt gebruikt. Zo kan de gebruiker thuis op de bank
door het gevoel van een fysieke button aan de gebruiker mee te geven. Het geven applicatie (Norman, 2004).
Op mobile devices zijn er door middel van gestures een aantal interacties mogelijk. De elementen waarmee deze interactie mogelijk is, dienen gebruik te maken van duidelijke affordance. Hierdoor wordt het duidelijk dat het gaat om een tapable
element. Dit effect moet duidelijk en consistent toegepast worden in een ontwerp. Overmatig gebruik van effecten komt de leesbaarheid niet ten goede.
informatie zoeken of het nieuws bekijken in een drukke metro. In dergelijke
Controls
noemt dit ook wel het “one eyeball and one thumb” pattern (Wroblewski, 2011).
screens. Hoewel sommige mobile devices nog gebruik maken van fysieke
duim bedient, terwijl de gebruiker in veel situaties maar gedeeltelijk zijn aandacht
devices met touchscreen moeten gebruik maken van de juiste grootte en de juiste
voor eenvoudige en herkenbare elementen moeten kiezen, zodat het gebruik in
ervoor dat de gebruiker secuur moet zijn in het bedienen van de applicatie.
mobiele UX is eenvoud in design belangrijk. De interactie tussen elementen kan
tussen de 16 - 20 mm ligt. Dit is te vergelijken met 45 - 57 pixels. Mobiele
functie, de plaatsing en de grootte van interactie elementen.
oppervlak, gemiddeld 2,5 cm2. Dit komt neer op 72 pixels. Vanwege de ruimte op
Affordance
dan op mobiele telefoons.
situaties krijgt de applicatie niet de volle aandacht van de gebruiker. Wroblewski
De mobile devices van tegenwoordig maken steeds meer gebruik van touch
Dit wil zeggen dat de gebruiker het device vaak in een hand heeft en het met de
knoppen, zal het overgrote deel van de interactie gebeuren via het scherm. Mobile
op de het mobiele device gericht heeft. Dit principe zorgt ervoor dat ontwerpers
affordances, om zo gebruiksvriendelijk mogelijk te zijn. Te kleine buttons zorgen
allerlei situaties zonder problemen verloopt. Voor het bewerkstelligen van een
Uit onderzoek blijkt dat het gemiddelde oppervlak van de top van je wijsvinger
door een aantal factoren worden bepaald, namelijk: de herkenbaarheid van de
telefoons bedien je regelmatig met alleen je duim, deze heeft gemiddeld een groter
Veel voorwerpen uit het dagelijkse leven hebben geen instructie nodig, neem bijvoorbeeld een deurklink. Een deurklink maakt gebruik van affordance.
Affordances moeten het voor gebruikers duidelijk maken wat een gebruiker met een voorwerp kan (Norman, 2004). Bij het ontwerpen van interface elementen
moet het duidelijk zijn hoe een gebruiker er mee om dient te gaan. Ontwerp speelt
hierbij een belangrijke rol. Het visuele aspect moet aansluiten op het fysieke aspect (Weinschenk, 2011). Elementen op hetscherm moeten duidelijke signalen afgeven
het scherm is het makkelijker om hiermee rekening te houden op tablet devices, Als men kijkt naar het “one eyeball and one thumb” principe, dan is het
noodzakelijk dat gebruikers in iedere situatie de controls gemakkelijk kunnen
bedienen. In de guidelines van iOS staat dat de minimale grootte van buttons 44 x 44 pixels, 88 x 88 pixels (Retina) moet zijn. De Windows richtlijn heeft het over een minimale grootte van 9 milimeter x 9 milimeter. Dit geldt voor de knoppen
die regelmatig gebruikt worden. Voor knoppen die minder vaak gebruikt worden, schrijft Windows een grootte van minimaal 7 millimeter voor. Android heeft het
41
42
MOBIELE UX
43
MOBIELE UX
over 48 density-independent pixels x 48 density-independent pixels.
Uit een onderzoek uitgevoerd door MIT Touch Lab is gebleken dat de gemiddelde grootte van een vingertop 8 x 10 mm is. Dat maakt 10 milimeter x 10 milimeter
een goede minimum grootte van een touch target (fig. 5) (Hoober, 2011; Hinman, 2012). Deze maten zijn voor een gemakkelijke bediening ideaal, ook met het oog op de ruimte op een scherm. De ontwerper moet dat dan ook meenemen in zijn ontwerp.
figuur 6 - Bereik van de duim
Het is mogelijk om voor linkshandigen alles te spiegelen. Een nadeel hiervan is dat figuur 5 - Minimale grootte touch buttons
de informatie van links naar rechts moet worden verwerkt en als alles gespiegeld
wordt. Dit zal extra denkwerk opleveren. Dit denkwerk zal voor linkshandigen een
Bij de plaatsing van de knoppen moet rekening worden gehouden met het bereik
grotere last zijn dan het bedienen van een rechtshandige interface. Als ontwerper
waarschijnlijk zijn duim om deze te bedienen. Het bereik van de duim is beperkt
principe van “Don’t make me think” van Steve Krug opvolgt (Krug, 2005).
staan. Veel gebruikte buttons zullen links in het scherm staan, terwijl minder
rechterduim gebruikt, mag je dit als “normaal” beschouwen. Hetzelfde geldt voor
is er van uitgegaan dat iemand rechtshandig is. Voor linkshandigen geldt het
scherm worden geplaatst en kunnen worden gerangschikt van links naar rechts.
van onze vingers. Als de gebruiker zijn telefoon in een hand houdt gebruikt hij
wil je dat gebruikers zo min mogelijk na hoeven denken als je het usability
(fig. 6). Dat is ook de reden dat menu items en navigatie vaak onderin het scherm
Omdat het grootste gedeelte van de bevolking rechtshandig is en daardoor de
gebruikte items rechts zullen staan (Hinman,2012; Wroblewski,2011). Hierbij
de plaatsing van iconen. Primaire iconen kunnen in het midden of onderin het
omgekeerde.
 Buttons met als functie ‘annuleren’ of ‘verwijderen’ kunnen op een minder
makkelijk te bereiken positie worden geplaatst, zoals linksboven of rechtsonder (Wroblewski, 2011).
44
MOBIELE UX
45
MOBIELE UX 2.4 FRAMEWORK VOOR MOBIELE USER EXPERIENCE
Aan de hand van de grootte en de bereikbaarheid van een button is het mogelijk om
De Mobiele UX is uit de voorgaande onderdelen opgebouwd (fig. 8). Door
Fitts law is hier van toepassing. Hieraan is af te lezen of het gebruik van een button
bewerkstelligd. Een mobiele UX moet er voor zorgen dat de gebruiker snel en
de tijd die het kost voor een gebruiker om een actie te voltooien in kaart te brengen. makkelijk verloopt. Het belang van de functie staat in contrast met de plaatsing
en grootte van de buttons. Het is duidelijk dat naast de grootte, de plaatsing ook
een belangrijke rol speelt. Dit staat in verband met de functies die belangrijk zijn voor de gebruikers. Een voorbeeld is Instagram (fig. 7), bij deze applicatie draait het om het maken en bewerken van foto’s. De camerafunctie is in het midden gepositioneerd, zodat deze gemakkelijker te benaderen is.
figuur 7 - Instagram Android UI
deze onderdelen goed in te zetten kan er een positieve mobiele UX worden
eenvoudig de content kan bereiken. Het belangrijkste is dat de gebruiker toegang heeft tot de content die voor hem op mobiel belangrijk is.
Het framework voor de mobiele user experience dat uit dit onderzoek is gekomen
is gevormd door naar de bestaande modellen voor websites te kijken en dit naast de functies die mobile devices ons kunnen bieden te leggen.
figuur 8 - Mobiele UX framework
46
MOBIELE UX 2.5 BEVINDINGEN Dit hoofdstuk geeft antwoord op de eerste drie deelvragen die betrekking hebben op mobiele UX. Namelijk:
Hoe verschilt mobiele UX van niet mobiele UX?
Welke relatie is er tussen de UX en de UI van een applicatie?
Welke elementen zijn belangrijk voor de mobiele UX?
Doordat de functies en het gebruik van mobiele apparaten anders is in vergelijking met desktops en computers, zijn er automatisch ook andere eigenschappen
waarmee rekening gehouden moet worden. Bij het ontwerpen van applicaties voor mobiele apparaten hebben ontwerpers minder ruimte beschikbaar. Hierdoor is het
belangrijk om de content aan te passen puur aan wat de gebruiker wil. Daarbij biedt een mobiel apparaat andere functies die ingezet kunnen worden om de UX positief te laten ervaren. Een voorbeeld hiervan is het vinden van het dichtstbijzijnde postkantoor zonder dat de gebruiker een straatnaam in hoeft te voeren. Dit is namelijk mogelijk via de gps- locatie van het mobiele apparaat.
Zoals in de vorige paragraaf is uitgelegd, moet een mobiele UX rekening houden met een aantal onderdelen. De laatste twee onderdelen, usability en interactie,
hebben betrekking op hoe de UI is ingedeeld. Hierin is de resolutie, de plaatsing,
het gebruik, de herkenbaarheid en het uiterlijk van interactie elementen belangrijk. Deze onderdelen worden in de volgende hoofdstukken behandeld. Er zal allereerst worden ingegaan op de kenmerken van de UI van applicaties op verschillende OS’s.
3. MOBIELE UI DESIGN Zoals eerder al is aangekaart, speelt bij het ontwerpen van een mobiele UI de UX een belangrijke rol. De UI moet namelijk duidelijk en overzichtelijk zijn, aangezien de gebruikers zich overal kunnen bevinden en op elk moment van de dag gebruik van hun mobile devices kunnen maken. De UI elementen moeten daarom snel te onderscheiden, te lokaliseren en te bedienen zijn (Hoober, 2011). Daarnaast hebben ontwerpers te maken met verschillende mobiele OS’s. Deze hebben allen hun eigen UI opbouw. Hierdoor verloopt de interactie per OS anders. Uit onderzoek blijkt dat gebruikers hun telefoon doorgaans niet op basis van de specificaties, maar op basis van het OS kiezen (Blodget, 2011; Kingsley Hughes, 2011). Als ontwerper is het belangrijk om hier rekening mee te houden. De OS moet een UX bevatten die aansluit op de behoeften van de gebruikers. Gebruikers zullen niet snel veranderen van OS, tenzij de UX niet bevalt. Bij het ontwerpen van een cross-OS UI, is het belangrijk om in de gaten te houden wat de gebruikers gewend zijn. In dit hoofdstuk zullen de verschillen tussen iOS, Android en Windows Phone 7 worden besproken. Eerst zal er kort in worden gegaan op de drie verschillende OS’s.
49
50
MOBIELE UI DESIGN
MOBIELE UI DESIGN
3.1 VERSCHILLENDE MOBIELE OS
3.2 RESOLUTIES
De grootste verschillen in UI van applicaties ontstaan door het OS waarop de
De verschillende OS’s hebben verschillende resoluties waarin hun mobiele devices
oplossingen en interactie aan. Dit zorgt ervoor dat de opbouw van de applicaties
voor de content. WP 7 devices hebben een resolutie van 800 pixels x 480 pixels
applicatie wordt aangeboden. De verschillende platforms bieden verschillende UI verschilt, maar ook dat de navigatie in applicaties anders verloopt. Dit is de
belangrijkste reden dat applicaties niet een op een overdraagbaar zijn op andere
OS’s (Fahrenkrug,2011; Ginsburg, 2010). Ieder OS beschikt over eigenschappen die invloed hebben op de opbouw en inhoud van een UI. Er zijn bijvoorbeeld
verschillende resoluties beschikbaar, waardoor de beschikbare ontwerpruimte
verschilt. Het navigeren door apps verschilt eveneens per OS. Dit is een essentieel
verkrijgbaar zijn. Dit zorgt ervoor dat een applicatie niet dezelfde ruimte heeft (Microsoft, 2012). iOS maakt gebruik van vier verschillende resoluties. Twee
van deze resoluties zijn bedoeld voor mobiele telefoons: deze zijn 320 pixels x
480 pixels voor iPhone 3g en 3gs en 640 pixels x 960 pixels voor iPhone 4 en 4s
(Apple, 2012). Schalen van het ontwerp is hierbij mogelijk, aangezien de laagste resolutie de helft bedraagt van de hoogste resolutie.
onderdeel van de UI in relatie met de UX. Niet alleen de manier van navigeren,
Meerdere fabrikanten hebben toegang tot Android. Hierdoor zijn er verschillende
hoofdstuk maakt de OS verschillen inzichtelijk.
Android heeft vier groepen resoluties ingedeeld, namelijk: xlarge (960dp x 720
maar ook de positie en het uiterlijk van de controls is per OS verschillend. Dit
resoluties beschikbaar. Met de komst van Android 4.0 zijn richtlijnen opgesteld.
dp), large (640dp x 480dp), normal (470dp x 320dp) en small (426dp x 320dp). Dp
is een andere eenheid dan de pixel. De formule om de px uit te rekenen is px = dp * (dpi / 160) (Google, 2012).
In de richtlijnen van Android wordt aangeraden om te ontwerpen op normale
grootte en vervolgens pas te schalen (Google, 2012). Voor een hogere kwaliteit is het beter om te ontwerpen voor het grootste scherm om zo eenvoudig omlaag te
kunnen schalen. Hierdoor blijft de kwaliteit van de interface vele malen beter. Bij Android heeft de resolutie ook invloed op de inhoud van de interface. Het aantal
icons in de action bar is bij een kleinere resolutie lager ten opzichte van een hogere resolutie. Hieronder volgt een schema waarin de invloed van de resolutie te zien is op de indeling van de action bar.
Het is belangrijk om de essentiële functies te benaderen, waarbij rekening dient te worden gehouden met de beschikbare ruimte (Google, 2012).
51
52
MOBIELE UI DESIGN
MOBIELE UI DESIGN
3.3 OS SPECIFIEKE NAVIGATIE
3.3.3 WP7
3.3.1 iOS
Windows Phone 7 maakt gebruik van Panorama, een navigatie control die wordt
De navigatiebar in iOS bevindt zich bovenin het scherm. Deze geeft de titel
weer van de schermweergave. De titel staat gecentreerd in de navigatiebar. Aan de linkerzijde bevindt zich een back button waarmee de gebruiker terug naar
het vorige scherm kan. Deze back-button draagt de titel van het vorige scherm.
Daarnaast is het mogelijk om maximaal één control in de navigatiebar te plaatsen om de inhoud van het scherm te ordenen. Als er meer controls nodig zijn zal er
moeten worden gekozen voor een toolbar. Met de tools in de toolbar zijn acties mogelijk die invloed hebben op de huidige weergave (Apple, 2012). 3.3.2 ANDROID De navigatie op het Android platform maakt gebruik van een Up- button en van een terugknop die zich in het systeem bevindt. Door het gebruik van de Up-
Button kom je in het hoofdscherm van de applicatie. Met de systeemknop volgt de gebruiker de weg terug zoals hij er ook is gekomen. Via de systeemknop kan de
gebruikt om door een applicatie te navigeren. De panorama is een container die ruimte biedt voor content, controls, lists, buttons en afbeeldingen (Microsoft,
2012). De panorama maakt gebruik van navigatie die groter is dan de resolutie van het scherm. Dit zorgt voor een ander gebruik in vergelijking met de applicaties die zich beperken tot de grootte van het scherm. De panorama heeft een titel die kan bestaan uit tekst of een logo. Daarnaast zijn er panorama headers die aangeven
welk panel wordt weergegeven. Panorama bestaat uit meerdere panels. Via een
swipe gesture kan tussen de verschillende panels worden genavigeerd. De panels bestaan uit een home panel en panels die van belang zijn voor de applicatie.
WP7 maakt net zoals Android gebruik van systeembuttons om terug te navigeren.
De terugknop doet hetzelfde als de terugknop op Android: het brengt de gebruiker
terug naar zijn vorige scherm. De systeembutton kan de gebruiker ook terug leiden naar een andere applicatie (Microsoft, 2012).
gebruiker de applicatie verlaten. Met de Up- button is dat niet mogelijk. Android geeft daarnaast de mogelijkheid om via een swipe gesture naar het volgende of vorige scherm te navigeren.
De navigatie bar is opgebouwd uit de Up- button die het icoon van de applicatie bevat met daarbij de titel van de pagina. Deze is links in de action bar geplaatst. Daarnaast is er een view control. Deze control kan worden gebruikt om binnen
een applicatie tussen verschillende views te navigeren. Hierbij wordt er gebruik
gemaakt van een drop-down menu, ook wel een spinner genoemd. Hiermee is het
mogelijk om views aan te passen. Om een voorbeeld te geven: de keuze tussen een dag, maand of weekweergave van een kalender (Google, 2012).
figuur 9 - standaard navigatie iOS (l), Android (m) en WP7 (r)
53
54
MOBIELE UI DESIGN
55
MOBIELE UI DESIGN
3.3.4 TAB BAR
3.3.5 BEVESTIG EN ANNULEER BUTTONS
De functie van de tab bar is op ieder OS gelijk, maar verschilt per OS in uiterlijk en
Formulieren op mobiele devices worden bevestigd met buttons. De soort en plaats
gepositioneerd (fig. 10). iOS pakt het qua UX momenteel het best aan. Onderin zijn
balk gepositioneerd en op Android onder de navigatiebalk boven in het scherm
positie. Op Android en WP7 staat deze bovenin, op iOS is deze onderin het scherm de tabs namelijk makkelijker te bedienen met de duim, zoals in het gedeelte over de controls al is aangegeven.
Ook de vormgeving van de tabbar verschilt per OS. Op iOS zijn de tabs te
onderscheiden door het gebruik van iconen. Op WP7 en Android zijn deze
tekstueel. Op WP7 zijn de woorden niet gekaderd, op Android wel. Op Android kan er eveneens een keuze gemaakt worden tussen scrollable en fixed tabs. Bij de scrollable tabs is het mogelijk om een groter aantal items beschikbaar te
van de buttons verschilt per OS. Zo zijn buttons op iOS boven in de navigatie
(fig. 11). Op Android is het eveneens mogelijk om de buttons onderin het scherm te positioneren. Op beide OS’s is de annuleer button links van de bevestig knop
gepositioneerd . Deze buttons zijn altijd zichtbaar, ook als scrollen mogelijk is op de pagina. Deze twee OS’s verschillen weinig van elkaar.
WP7 daarentegen heeft deze buttons onderin het scherm geplaatst. Daarnaast zijn de knoppen ook anders: links is ‘bevestig’ en rechts is ‘annuleer’.
stellen. Bij fixed tabs is het aantal beschikbare items beperkt tot drie. Kijkend
naar de bediening is het beter om de tabs onderin het scherm te plaatsen, zodat de bediening gebruiksvriendelijker is (Neil, 2012). De functie van tabs en de inzetbaarheid ervan komen in hoofdstuk 4 over patterns aan bod.
figuur 10 - Tabs op iOS (l), Android (m) en WP7 (r)
figuur 11 - Buttons op iOS (l), Android (m) en WP7 (r)
56
MOBIELE UI DESIGN
MOBIELE UI DESIGN
3.3.6 TOOLBAR
3.4 CROSS OS APPLICATIES
De toolbar, ookwel de action bar genoemd, beschikt over functies die betrekking
Er zijn een aantal applicaties die worden aangeboden op meerdere OS’s. De
mogelijk om de functies specifieker te maken, bijvoorbeeld: de optie om allen te
hetzelfde is opgebouwd. In dit hoofdstuk worden een aantal applicaties qua UI
hebben op de content van een scherm. Door middel van actionsheets is het
beantwoorden bij een mail. Deze action sheet moet wel in direct verband staan met de functie die de gebruiker verwacht. De toolbar staat bij ieder platform onderin
het scherm gepositioneerd. Bij Android is het mogelijk om deze in de navigatiebalk te plaatsen. iOS heeft de mogelijkheid voor vijf functies. Bij Android is het
applicaties moeten voorzien in hetzelfde doel, hetgeen niet betekent dat de UI op de verschillende OS’s vergeleken. De applicaties die zijn gebruikt om dit
te beschrijven zijn Twitter, Spotify en Shazam, dit onderdeel is opgenomen in appendix I.
afhankelijk van de resolutie van het scherm. Bij Windows zijn er maximaal vier
De UI is op deze cross OS apps nooit volledig gelijk. Op iOS en Android zijn
te voegen. Indien dit gebeurt, wordt er een icoon toegevoegd met drie punten. Via
de OS’s. De apps op WP7 hebben een heel eigen uiterlijk. Hierbij bestaat er ook
items in de toolbar. Bij zowel Android als WP7 is het mogelijk om meer items toe dit icoon komt de gebruiker bij de overige functies.
ze qua content en functies hetzelfde, maar zijn aangepast aan de richtlijnen van
verschil in de content en de functies die aangeboden worden. Ondanks het gegeven dat de applicaties dezelfde naam hebben, zijn er verschillen tussen de OS. iOS en
Android komen het dichtst bij elkaar in de buurt. WP7 is qua UI structuur compleet anders.
figuur 12 - Toolbar
57
58
MOBIELE UI DESIGN
59
MOBIELE UI DESIGN
3.5 CUSTOM UI’S Ieder OS maakt gebruik van eigen interacties. Bij de eerste mobiele applicaties
werd vooral de standaard UI van een OS ingezet. Bij Android en iOS applicaties
wordt steeds meer hiervan afgeweken. Dit worden ook wel custom UI’s genoemd. Deze zijn vaak gekoppeld aan applicaties die op meerdere platformen dienen te
draaien. Games zijn het perfecte voorbeeld van custom UI’s. Games maken gebruik van een heel eigen UI en maken geen gebruik van de standaard interacties die in de richtlijnen staan beschreven.
Games zijn een aparte categorie die niet vergelijkbaar is met andere applicaties.
Desondanks zijn in andere categorieën steeds meer custom UI’s te bekennen. Zo heeft Facebook een eigen interface ontwikkeld die op zowel iPhone en Android
gelijk is. Op WP7 maakt die gebruik van dezelfde opbouw, alleen is hij aangepast aan de standaard UI structuur. De oorzaak hiervoor is dat WP7 nog niet zo lang bestaat, waardoor er nog niet veel is geëxperimenteerd met de UI.
Een ander voorbeeld is de applicatie Instagram. Deze app heeft op Android een
andere UI dan de richtlijnen voorschrijven. Deze app is bijna rechtstreeks vanaf de iOS versie naar Android geplaatst. Dit geeft aan dat als ontwerper niet per se aan
figuur 12 - Instagram applicatie op iOS (l) en Android (r)
de richtlijnen voor de UI van het platform hoeft te voldoen. Het is belangrijker dat
De simpele stijl die door WP7 wordt gehanteerd, zie je vaker terug op de andere
Uiteraard moet de navigatie duidelijk zijn en moet de gebruikelijke manier van
Zo zijn de Clear (fig. 13) en Figure (fig. 14) beide iOS applicaties, die beïnvloed
de UX positief wordt ervaren en dat alle functies en mogelijkheden duidelijk zijn. navigeren toegepast kunnen worden. Bij Instagram is de gebruikelijke navigatie mogelijk via de navigatie via zowel hardware als software controls.
OS’s.
zijn door de stijl van WP7 (Warren, 2012; Ingraham, 2012). Dit is de zogenaamde metro stijl. Deze apps zien er qua UI totaal niet uit zoals de richtlijnen die Apple
adviseert. Doordat ze geen gebruik maken van de “standaard” elementen zijn deze applicaties mogelijk ook inzetbaar op andere devices. Dit is te vergelijken met de
ontwikkeling van websites. Eerst was de opbouw van iedere website vergelijkbaar in het gebruik van de elementen. Langzamerhand is dit steeds meer aangepast.
Deze custom interfaces zijn vaak opgebouwd uit de eerder besproken patterns, aangepast aan de content. Als deze patterns cross OS worden ingezet, ontstaan
er standaarden in UI die goed zijn voor de UX. Gebruikers hebben dan namelijk sneller de interactie door, zonder dat een leerproces moet worden doorlopen.
60
MOBIELE UI DESIGN
MOBIELE UI DESIGN Kijkend naar dit verschil is het belangrijk dat alleen de functies waar de gebruiker iets aan heeft worden aangeboden. Zo blijft de applicatie overzichtelijk, maar ook bruikbaar op de kleinere resoluties.
Het belangrijkste verschil waar ontwerpers rekening mee moeten houden als
ze een applicatie voor een mobiel toestel ontwerpen zijn de hard- en software
knoppen. Om iedere gebruiker op een voor de hand liggende manier te kunnen
laten navigeren is het belangrijk om software knoppen in te zetten. Aangezien iOS apparaten niet over hardware buttons beschikken waar WP7 en Android apparaten deze wel hebben.
Verder is het belangrijk om als ontwerper rekening te houden met de plaatsing
van de elementen. Zoals in de inleiding van dit hoofdstuk is beschreven, kiezen gebruikers voor een OS vanwege de specifieke gebruikservaring. Gebruikers
raken hieraan gewend, zoals eerder in hoofdstuk 2 naar voren is gekomen. Voor de
gebruiksvriendelijkheid is het belangrijk om deze elementen naar de richtlijnen van het OS te ontwerpen, zodat de elementen herkenbaar zijn en dus snel en eenvoudig figuur 13 - Clear iOS applicatie
figuur 14 - Figure iOS applicatie
3.5 BEVINDINGEN Dit hoofdstuk geeft inzicht in de verschillen qua UI op de diverse OS’s (iOS,
Android en WP7). Daarmee beantwoordt het gelijk de derde deelvraag. Daarnaast geeft het een start met het beantwoorden van de vierde deelvraag, welke in het volgende hoofdstuk volledig wordt beantwoord.
Tijdens het ontwerpen van een UI voor verschillende OS’s, krijgen ontwerpers
te maken met de verschillende resoluties. Android heeft de meest uiteenlopende
resoluties. Ontwerpers moeten hier rekening mee houden. De beschikbare ruimte moet namelijk zo zijn ingedeeld dat deze van waarde is voor de gebruiker, zoals
in paragraaf 2.1.1 eerder is behandeld. Hoe kleiner het scherm, hoe minder ruimte voor controls.
in gebruik.
Het is belangrijk te melden dat het ook mogelijk is om een UI te ontwerpen
die afwijkt van de richtlijnen van de producent van een specifiek OS, terwijl
de applicatie nog steeds snel en eenvoudig is voor gebruikers. Hierbij gaat het
nog steeds om herkenbaarheid. Bij het ontwikkelen van een UI waarbij er geen
rekening wordt gehouden met de OS richtlijnen, is het inzetten van patterns goed voor de gebruiksvriendelijkheid. Het gebruik van patterns wordt in het volgende hoofdstuk besproken.
61
4. PATTERNS Patterns zijn standaard elementen die ingezet kunnen worden in UI ontwerpen. Een pattern is een beschrijving van een voorkomend probleem, en biedt daarvoor een passende oplossing aan (VanderMerwe, 2012). Het ontwerpen aan de hand van patterns bespaart ontwerpers veel tijd. Voor gebruikers worden door patterns UI makkelijker in gebruik. Het mentale model van gebruikers wordt namelijk aangepast wanneer patterns vaak worden toegepast in een UI (VanderMerwe, 2012). In dit hoofdstuk worden veel gebruikte patterns beschreven. De patterns die worden behandeld, hebben betrekking op navigatie, formulieren en zoeken. Het beschrijven van deze patterns gebeurt aan de hand van de Mobile Design Pattern Gallery van Theresa Neil (Neil, 2012).
“We don’t have to reinvent the wheel, but we do need to find better ways to keep it rolling” Rian van der Merwe
63
64
PATTERNS
65
PATTERNS
4.1 PRIMAIRE NAVIGATIE
4.1.1 SPRINGBOARD
Voor primaire navigatie geldt dezelfde regel als voor website navigatie geldt,
Het springboard is een navigatie item dat op ieder OS en op ieder device hetzelfde
niet wordt opgemerkt door de gebruiker, het gebruik intuïtief is en de gebruiker
navigatie is opgebouwd uit een landingspagina waarnaar verder kan worden
namelijk een goede navigatie is een onzichtbare navigatie. Als de navigatie gemakkelijk bij zijn doel komt, is er sprake van een goede navigatie.
Er zijn vier eigenschappen van een applicatie waaraan gebruikers zich kunnen ergeren:
het crashen van een applicatie;
een onduidelijke navigatie;
het ontbreken van belangrijke functies; een verwarrend interface design
De laatste twee punten kunnen ontwerpers oplossen door gebruik te maken van
werkt. Het springboard wordt dan ook regelmatig gebruikt in applicaties. De genavigeerd (fig. 15). Het springboard maakt gebruik van het hub and spoke
pattern. Hierbij zijn de verschillende onderdelen van elkaar geïsoleerd. Er kan alleen via het springboard en terug naar het springboard worden genavigeerd
(Tidwell, 2011). Bij het ontwerp van een springboard is het gebruikelijk om een
grid indeling te gebruiken. Dit laatste is aan te raden maar niet noodzakelijk. Als
men kijkt naar de UX, is het springboard niet de meest optimale optie aangezien de gebruiker terug moet naar het beginscherm om verder te kunnen navigeren (Neil, 2012).
gebruikelijke navigatie patterns. Hierdoor zal de applicatie gebruiksvriendelijker zijn, en zal de gebruiker sneller zijn doel bereiken.
Voor de primaire navigatie zijn er een aantal patterns die kunnen worden ingezet om het gebruik te bevorderen. Zo kan er gebruik worden gemaakt van een
springboard, list menu, tab menu, gallery, dashboard, metaphor en een mega menu. In het volgende gedeelte zal het springboard, list menu, tabs en dashboard worden besproken.
figuur 15 - Springboard
66
PATTERNS
67
PATTERNS
4.1.2 LIST MENU Deze vorm van navigeren maakt eveneens gebruik van het hub and spoke
Een vaak terugkerende list stijl is een list die te bereiken is met een knop
16) beschikt over dezelfde eigenschappen als het springboard pattern, de stijl is
plaats maakt voor de list view (fig. 17). Dit pattern maakt eveneens gebruik van het
pattern. Net zoals het springboard is deze cross OS inzetbaar. Het list menu (fig. eveneens aanpasbaar (Neil, 2012). Een voorbeeld van een applicatie die met list
linksboven in het scherm, waardoor de huidige pagina verschuift naar rechts en global navigation pattern. Dit pattern is door Path geïntroduceerd.
items werkt, is de applicatie van de Nu.nl. Hierin ziet de gebruiker een overzicht
Het voordeel van dit pattern ten op zichte van die van het springboard is dat
voordeel ten opzichte van het springboard, omdat het de gebruiker minder moeite
ongeacht welke pagina wordt bezocht. Veel applicaties passen deze methode al
van het laatste nieuws, zonder een verdere keuze te hoeven maken. Dit is een kost om een overzicht te krijgen van het laatste nieuws.
de gebruiker direct toegang heeft tot content, en overal naar toe kan navigeren,
toe. Voorbeelden van applicaties die deze methode gebruiken zijn Facebook en
ING. Kijkend naar de UX is dit pattern beter geschikt voor hoofdnavigatie dan het springboard.
figuur 17 - De list view in Path figuur 16 - List menu
68
PATTERNS
69
PATTERNS
4.1.3 TABS
4.2 SECUNDAIRE NAVIGATIE
Dit is een pattern dat aangepast dient te worden aan het OS. Zoals eerder is
De primaire navigatie patterns kunnen ook moeiteloos ingezet worden als
ieder OS dezelfde functie aan. Het maakt navigeren aangenaam, doordat de content
een tabmenu bestaat en de secundaire navigatie uit een list menu. Er zijn echter
besproken verschilt de positie van de tabs. Desondanks bieden ze de gebruiker op
zichtbaar is en er zonder problemen genavigeerd kan worden naar andere pagina’s.
Als er meer tabs nodig zijn dan afgebeeld kunnen worden, kunnen er scrolling tabs worden aangeboden. Dit is een standaard op Android, maar ook geschikt voor op iOS en WP7.
secundaire navigatie. Zo gebeurt het regelmatig dat de primaire navigatie uit
navigatie patterns die niet als primaire navigatie kunnen werken, zoals de page carrousel, de image carrousel en de inline expand. Met deze elementen is het
mogelijk om meer informatie weer te geven en om te bladeren door de content zonder de pagina te verlaten (Neil, 2012). 4.2.1 PAGE CARROUSEL Bij dit pattern wordt gebruik gemaakt van de flick gesture om door pagina’s heen te navigeren. De page carrousel wordt voornamelijk gebruikt in combinatie met een
primaire navigatie. Door gebruik te maken page indicators is het voor de gebruiker
duidelijk op welke pagina hij zich bevindt en hoeveel andere pagina’s er zijn. Deze indicator is meestal subtiel vormgegeven. Zo wordt op iOS gebruik gemaakt van kleine cirkels (fig. 19).
Het is onhandig om door duizenden pagina’s heen te flicken, Als er meer dan acht mogelijkheden zijn, is het verstandig om een lijst item te ontwerpen (Neil, 2012).
figuur 18 - Tabs
figuur 19 - Page carrousel
70
PATTERNS
71
PATTERNS
4.2.2 IMAGE CARROUSEL
4.3 FORMULIEREN
De IMDB applicatie is een voorbeeld van een applicatie die gebruikt maakt van de
Er zijn verschillende redenen om een formulier in je applicatie te bouwen, zoals
Heijn. Deze functie wordt gebruikt bij het weergeven van afbeeldingen en andere
bestelling. Hiervoor zijn patterns beschreven. Desondanks bestaan er nog steeds
image carrousel. Net zoals de receptenfunctie in Appie, de applicatie van Albert
media. Belangrijk bij deze navigatie is de aanwezigheid van affordance, zodat de
gebruiker weet dat er nog meer toegankelijk is. Dit kan door gebruik te maken van pijltjes, page indicators en afgesneden afbeeldingen (fig. 20) (Neil, 2012).
het inloggen in een applicatie, een account registreren en het afrekenen van een
formulieren die niet gebruiksvriendelijk zijn. Het voordeel van mobiele applicaties met betrekking tot formulieren is de beperkte ruimte. Er is simpelweg geen ruimte voor een uitgebreid en onoverzichtelijk formulier. 4.3.1 LOG IN FORMULIER Inlog formulieren moeten zo min mogelijk input velden bavatten. Er moet een
veld zijn voor de gebruikersnaam en voor het wachtwoord. Daarnaast is een action button, wachtwoord hulp, en een optie om te registreren nodig (fig. 21). Door het
aantal invulvelden minimaal te houden, is het makkelijk om overzicht te bewaren. Een groot voordeel is dat de gebruiker weet waar hij aan toe is.
figuur 20 - Image carrousel
figuur 21 - Log in formulier
72
PATTERNS
73
PATTERNS
4.3.2 REGISTRATIE FORMULIER
4.4 ZOEKEN
Bij het registreren in een mobiele applicatie is het verstandig om overbodige
Bij het vormgeven van zoekvelden gaat het om de vindbaarheid van de resultaten.
om het e-mail adres of wachtwoord te bevestigen. Door het aantal input velden
(fig. 23). Een nadeel hiervan is dat er op de zoek button moet worden gedrukt
velden weg te laten. Hierbij kan worden gedacht aan de velden die nodig zijn
te verminderen is het makkelijker om overzicht te houden op de beperkte grootte van het scherm (fig. 22). Ook is het verstandig om verticale labels of watermark
labels te gebruiken. Dit ook weer met het oog op de beperkte ruimte. Horizontaal
geordende invulvelden nemen doorgaans te veel ruimte in, waardoor je een te klein invulveld hebt.
Dit kan worden gerealiseerd door gebruik te maken van het explicit search pattern voordat resultaten worden weergegeven. Het is voor ontwerpers dan ook raadzaam om deze te combineren met het auto complete pattern (fig. 24). Dit pattern geeft al tijdens het zoeken mogelijkheden aan, waardoor de tap op een button overbodig
is. Om aan te geven dat de applicatie bezig is met zoeken is een progress indicator handig. Hierdoor weet de gebruiker waar hij aan toe is.
Het is daarnaast aan te raden om ook een wis-alles knop aan te bieden in het
zoekveld, anders moet de gebruiker alles wissen met de backspace knop. Dit geldt ook voor de cancel button om de zoekopdracht af te breken.
Tenslotte is het bij een zoekopdracht voor de gebruiker belangrijk om feedback
te ontvangen. Hierdoor wordt de gebruiker namelijk geïnformeerd over de status van zijn zoekopdracht. Een goede informatie voorziening zorgt voor een prettig gebruik.
figuur 22 - Registratie formulier
figuur 23 - Explicit search
figuur 24 - Auto complete search
74
PATTERNS 4.5 ONTWIKKELINGEN VAN PATTERNS Patterns moeten steeds aan externe veranderingen worden aangepast. Op dit
moment is er een verandering gaande van de Graphical User Interface (GUI) naar de Natural User Interface (NUI). Ontwerpers moeten op deze trend inspelen door
hun ontwerpen aan te passen. Door deze ontwikkeling zullen er andere problemen
voorkomen die automatisch weer zorgen voor de ontwikkeling van nieuwe patterns (VanderMerwe, 2012).
4.6 BEVINDINGEN In dit hoofdstuk zijn een aantal patterns besproken die cross-OS inzetbaar zijn.
Onderzoek heeft uitgewezen dat het gebruik van patterns de gebruiksvriendelijk van applicaties op mobiele apparaten bevordert (Neil, 2012; Garrett, 2010;
Weinschenk, 2011 ). Dit hoofdstuk geeft antwoord op de vijfde deelvraag: welke elementen zijn cross-os inzetbaar?
Voor ontwerpers zijn patterns onmisbaar, het zijn namelijk richtlijnen om
interactieproblemen op te lossen. Patterns worden door gebruikers doorgaans als
prettig ervaren. Dit is goed voor de UX van de UI, omdat gebruikers al weten wat ze met deze elementen kunnen.
Doordat patterns richtlijnen zijn, is het belangrijk om ze door te ontwikkelen
en aan te passen aan de nieuwste ontwikkelingen. De nieuwste ontwikkeling is
de Natural User Interface (NUI). De ontwikkeling van NUI zal in het volgende hoofdstuk worden besproken.
5. NATURAL USER INTERFACE Als de ontwikkeling doorzet zoals we in de Clear, een op gestures gebaseerde applicatie, zien wordt er langzaam afscheid genomen van het gebruik van buttons in de UI en richten ontwerpers zich op de content in combinatie met een NUI. Dit kan ervoor zorgen dat standaarden die in de huidige applicaties beschreven zijn vervagen en plaats maken voor een UI die gericht is op ‘natuurlijke’ interactie. UI’s hebben zich ontwikkeld van text interfaces (CLI) naar Graphical user interfaces (GUI) naar de NUI (Janssen, 2009). Natural user interfaces (NUI’s) zijn interfaces die worden bediend door spraak, beweging, aanraking, schrift of zicht (Norman, 2010). Dit maakt direct manipulatie van content mogelijk door middel van gestures in plaats van bijvoorbeeld een muis. Input is mogelijk door middel van spraak, als vervanger van het toetsenbord (Hearst, 2011). Dit hoofdstuk besteedt aandacht aan UI bediening door middel van gestures en spraak.
77
78
NATURAL UI’S
79
NATURAL UI’S
5.1 GESTURES
5.1.1 GESTURES OP DE VERSCHILLENDE OS’S
Mobiele telefoons zijn steeds vaker voorzien van een touchscreen. Over een paar
Ieder OS heeft eigen richtlijnen op het gebied van gestures. De gestures die
Het voordeel van een touch interface is dat het voor de gebruiker intuïtief aanvoelt.
actie per OS verschilt. Hier volgt een visueel overzicht van de gestures en de acties
jaar zullen de meeste apparaten voorzien zijn van een touchscreen (Norman, 2011). Dit komt doordat tast misschien wel het meest natuurlijke en intieme zintuig is dat wij als mens bezitten. Vanaf jongs af aan ontdekken we op deze manier de wereld om ons heen. Met touch interfaces ontdekken we de informatie door aan te raken
(Hinman, 2012). De bediening van deze touch interfaces, ook wel NUI’s genoemd,
gebruikt worden zijn hetzelfde qua omschrijving, maar het kan voorkomen dat de per platform. TAP: Dit gebeurt door de vinger snel op en neer te bewegen op het scherm. iOS
gebeurt via gestures. Deze gestures zijn nog niet gestandaardiseerd, waardoor
drukken.
ze qua functie per OS kunnen verschillen. Deze verschillen worden later in deze paragraaf behandeld.
WP7
doorlopen om gewend te raken aan de bediening. Bij dit proces moet de gebruiker
Android
worden begeleidt door instructies of hints. Bij het uitvoeren van acties moet de
natuurlijk zijn (Norman, 2010) en daardoor verkeerd kunnen worden uitgevoerd.
Door de begeleiding zal de gebruiker een leerproces doormaken. Als gestures vaker in apps ingezet worden, zullen gebruikers gewend raken en zullen er standaarden ontstaan (Norman, 2010).
Acties uitgevoerd op een item, in een proces met twee stappen, het stoppen met scrollen van een lijst.
Gebruikers zullen bij het gebruik van een gestural interface een leercurve
gebruiker worden voorzien van feedback. Dit is van belang, omdat de gebaren niet
Dit is een gesture die wordt gebruik om op een control of link te
Activeert de standaard functie van het aangeraakte item.
DOUBLE TAP: Dit gebeurt door twee snelle achtereenvolgende taps. iOS
De functie hiervan is in of uit zoomen op content of op een afbeelding.
WP7
Het wisselen tussen een in en uit gezoomde status van een control of applicatie.
Android
Zoomt in op content en selecteert tekst
80
NATURAL UI’S
81
NATURAL UI’S
FLICK/ FLING/ SWIPE:
PINCH CLOSE – PINCH:
Dit gebeurt door de vinger snel te slepen in de gewenste richting
Het gebruik is hetzelfde als de Pinch open alleen dan andersom, dus de vingers uit elkaar en dan naar elkaar toe bewegen.
iOS
Dit is een gesture die wordt gebruikt om te scrollen of om een snelle verschuiving te veroorzaken.
WP7
Beweegt content.
Android
Scrollt content, wordt gebruikt om te navigeren tussen bepaalde
iOS
Zoomt uit of sluit een element.
WP7
Zoomt uit
Android
Zoomt uit
schermen met dezelfde hiërarchie.
TOUCH AND HOLD - PRESS DRAG: Dit wordt gedaan door de vinger op het scherm te houden en het zonder los te laten in de gewenste richting te verplaatsen. iOS
Hiermee wordt het beeld veranderd of wordt een verschuiving
Dit wordt bewerkstelligd door de vinger op het scherm te houden zonder deze te bewegen of hier vanaf te halen totdat er een actie plaatsvindt van de applicatie. iOS
specifieke content te vergroten onder de vinger of specifieke
bewerkstelligd. WP7
Beweegt content door gebruik te maken van directe manipulatie, de content zit vast aan de vinger en volgt deze.
Android
Herschikt data in een bepaald scherm, of het beweegt data naar een container.
Met deze interactie is het mogelijk om een acties weer te geven, ingebouwde acties van applicaties uit te voeren.
WP7
Laat opties voor een specifiek item zien.
Android
Zorgt ervoor dat je items kan selecteren. Het is mogelijk om een of meerdere items te selecteren.
PINCH OPEN – SPREAD:
5.1.2 NADELEN VAN GESTURES
Dit wordt gedaan door de twee vingers dicht bij elkaar op het scherm te plaatsen en dan de vingers uit elkaar te bewegen zonder ze van het scherm te halen
Eén van de nadelen van een NUI is dat het mogelijk is dat er ongemerkt of
iOS
Zoomt in op content of opent een element.
WP7
Zoomt in op content
Android
Zoomt in op content
ongewild een actie wordt uitgevoerd door een onbewuste aanraking van het
scherm. Als er geen functie is voor het herstellen van dergelijke acties zal er weinig toekomst in NUI’s zitten. Gehandicapten kunnen moeite hebben met het bedienen
ervan. Voor de toegankelijkheid van een applicatie moet er dus worden onderzocht hoe het gebruik voor mensen in deze doelgroep is (Norman, 2010).
82
NATURAL UI’S
NATURAL UI’S
5.2 ONTWIKKELING VAN DE NATURAL USER INTERFACES Bij het inzetten van NUI is het belangrijk dat we naar de basis gaan en nadenken
aan je telefoon, zoals het inplannen van afspraken, het weer bekijken en notities
komen die gebaseerd zijn op interactie principes. Vergelijkbaar met GUI moeten
spraakassistentie toegankelijker en zal het zich ook verder gaan ontwikkelen.
hoe deze het best kan worden ingezet. Er moeten gebruiksvriendelijke richtlijnen ontwerpers kijken naar de content die gebruikers willen en niet naar de OS UI
maken. Doordat er steeds meer opties komen, voor meerdere telefoons, wordt
richtlijnen (Hinman, 2012). Ontwerpers zijn nu in de fase waarin de NUI wordt
De spraak assistenten hebben toegang tot een aantal functies van mobiele devices.
heeft ook even geduurd. Doordat mobiele devices steeds meer met touch en
locatie.
ontwikkeld en gebruiksvriendelijk wordt gemaakt. De ontwikkeling van de GUI bewegingen worden bediend en de techniek toegankelijk is geworden, zal de ontwikkeling ervan snel verlopen.
“Good design should be innovative.” Dieter Rams
Zo kunnen gebruikers bijvoorbeeld: vragen hoe het weer is voor een bepaalde
Parks Associates heeft een onderzoek gedaan onder 482 Amerikaanse gebruikers
(Vascellaro, 2012) dat een beeld geeft hoe het gebruik van spraak assistenten wordt ervaren. Zo’n 75% van de gebruikers is tevreden over het gebruik van Siri. De
populairste functies via Siri zijn bellen en het sturen van een sms. De populairdere functies worden bijna dagelijks gebruikt (Vascellaro, 2012; parksassociatescom, 2012).
De mogelijkheden die spraak assistenten bieden, sluiten perfect aan op de 5.2.1 SPRAAK ASSISTENTEN Naast de UI besturing via gestures is de besturing via spraak ook een onderdeel van de NUI. Het besturen van mobiele telefoons via spraak is een logische zet, de telefoon is immers in eerste instantie bedacht om spraak op te vangen. Er is
een trend ontstaan om interfaces aan te sturen met voice commands. Het was op een aantal telefoons al het mogelijk om via spraak nummers te bellen, de laatste ontwikkeling zijn de spraak assistenten. Hierbij is het mogelijk om via spraak
opdrachten te geven aan je telefoon. Siri heeft dit bij de lancering van de iPhone 4s op de markt geintroduceerd . Dit is ook opgepakt door anderen fabrikanten. Zo is Google aan het werken aan Google assistant en heeft Samsung reeds
Voice S gelanceerd op de Samsung Galaxy S III (Savov, 2012; D’Orazio, 2012). Hiermee wordt het mogelijk om via spraak complexere commando’s te geven
mogelijkheden van mobiele telefoons. De hoofdfunctie van telefoons is bellen
en daardoor is een mobiele telefoon uitermate geschikt voor het opvangen van
spraak commando’s. Voor de gebruiker maakt het bedienen via spraak assistenten een aantal aspecten eenvoudiger. Het bedienen van een toetsenbord op een klein scherm is makkelijk, maar spraak is voor de meeste gebruikers nog makkelijker (Hearst, 2011). Als de spraak assistenten worden geoptimaliseerd, kan het de standaard worden voor berichten of het inplannen van afspraken.
Binnen iOS wordt het binnenkort mogelijk om via spraak sportuitslagen, het
starten van applicaties en het maken van een status update op Facebook of Twitter
in te spreken (AppleInc, 2012). Apple betrekt autofabrikanten bij de ontwikkeling,
zodat het mogelijk wordt om de telefoon opties te benaderen tijdens het autorijden. Met de juiste commands, kan de gebruiker zonder het beeld te bekijken de opties bedienen (AppleInc, 2012).
83
84
NATURAL UI’S
NATURAL UI’S
5.2.2 BEPERKTE RUIMTE Bij het ontwerpen van mobiele aplicaties is het handig om zo min mogelijk ruimte
Clear is een applicatie waarmee je gemakkelijk een ‘to do list’ kunt opstellen. Deze
besproken is er beperkte ruimte beschikbaar op een mobiel device. Hierdoor moet
het scherm biedt volledig te gebruiken is voor content en er geen controls hoeven
te gebruiken voor buttons en soortgelijke navigatie elementen. Zoals eerder
je als ontwerper zuinig omgaan met de beschikbare ruimte en deze gebruiken voor content. Zoals eerder aangegeven is niet de navigatie, maar de content de reden waarom een gebruiker een applicatie gebruikt.
Applicaties zoals Clear (fig. 25) en Rechner (fig. 26) voor de iPhone zijn
voorbeelden van interfaces waar weinig UI elementen worden gebruikt. Hierdoor is de UX sterk.
app is volledige te besturen met gestures. Het voordeel hiervan is dat de ruimte die te worden weergegeven.
Ditzelfde is het geval bij Rechner. Dit is een calculator die alleen de getallen en het invoer veld op het scherm toont. De wiskundige tekens moeten ingevoerd worden door middel van gestures. Hierdoor is er meer plaats voor de numerieke knoppen.
Deze applicatie is vergelijkbaar met Clear, Een nadeel is dat het voor de gebruiker meer tijd kost om alle functies en de bijbehorende gestures te onthouden (Weber, 2012).
Deze applicaties zullen niet worden gebruikt voor complexe processen en door veeleisende gebruikers. Het is namelijk niet mogelijk om deze applicatie te
gebruiken met andere applicaties, zoals bijvoorbeeld Outlook (Byford, 2012; Panzarino, 2012).
Gesture gebasseerde OS Nokia heeft in samenwerking met intel een OS ontwikkeld dat geheel is gebaseerd op gestures. Dit hebben ze Meego genoemd (Grabham, 2012). De ruimte die
normaal werd ingenomen door controls wordt ingevuld met content. Nokia zag
geen toekomst in dit OS en is uit het project gestapt en heeft zich gericht op WP7.
Achteraf blijkt dat Meego net zo succesvol is als WP7. Uit onderzoek blijkt dat een groot aantal gebruikers Meego de voorkeur geven boven WP7 (Bonner, 2012).
figuur 25 - Clear
figuur 26 - Rechner
85
86
NATURAL UI’S 5.3 BEVINDINGEN Dit hoofdstuk heeft antwoord gegeven op de laatste deelvraag; Welke
ontwikkelingen zijn er op het gebied van mobiele UI’s? UI’s zijn altijd in
ontwikkeling. Dit is belangrijk, want door het inzetten van bepaalde technieken is er ook richting de toekomst meer mogelijk. NUI’s zijn voorbeelden van een
UI die door de inzet van touchscreens verder zijn ontwikkeld en voor gebruikers toegankelijker zijn geworden.
Naar mijn inzicht worden gestures tegenwoordig steeds meer ingezet. Dit komt
doordat er mobiele apparaten op de markt zijn met touch screens. De applicaties zijn aangepast op het touch screen, maar de ontwikkeling tot een NUI heeft tijd
nodig. Nu zie je nog vaak GUI, besturing gebaseerd op aanrakingen. De gestures zijn nog niet standaard en gebruikers zijn op dit moment aan het begin van een
leerproces. Veel gebruikers moeten nog ontdekken om hier op een goede manier mee om te gaan.
Bij het inzetten van NUI’s moeten ontwerpers terug naar de basis om vanaf daar
verder te kunnen ontwikkelen. Dat zie je bij applicatie als Clear en Rechner. Deze applicaties zijn niet complex, maar de gebruiker moet er wel mee leren omgaan. Een voordeel aan gestures is dat er meer ruimte is voor content. Dit omdat er
minder knoppen en buttons nodig zijn aangezien de content zelf direct via gestures te manipuleren is.
Een ander onderdeel wat in ontwikkeling is zijn de spraak assistenten. Door
het gebruik van spraakassistenten is het mogelijk om via spraak je telefoon te
bedienen. Aangezien een telefoon gemaakt is om spraak op te vangen, is dit een logische ontwikkeling. Daarnaast zorgen spraakassistenten voor gemak voor de
gebruikers. De ontwikkeling van spraakassistenten zal de komende jaren groeien.
6. VAN THEORIE NAAR SPLITTR
Dit gedeelte gaat over de koppeling tussen de theorie en de totstandkoming van een product. Aan de hand van de theorie wordt er een UI van een applicatie ontwikkeld die geschikt is voor meerdere mobiele OS’s. Het cross-OS ontwerpen van de applicatie moet van waarde zijn voor de gebruiker. Daarom is er gekozen om een applicatie te ontwikkelen waarmee je als vriendengroep gezamenlijke kosten kan bijhouden. Deze applicatie heet Splittr. Splittr moet over een UI beschikken die er op alle OS’s hetzelfde uit ziet en op alle OS’s hetzelfde werkt. Daarbij moet de applicatie gebruiksvriendelijk zijn en voldoen aan de verwachtingen van de gebruikers. Door naar vergelijkbare diensten te kijken, zowel web als in de vorm van apps is het concept voor Splittr ontwikkeld. Er is gekeken naar websites als credeble.com, wiebetaaltwat.nl en onlinehuisrekening.nl, maar ook naar applicaties zoals Settle up.
“Make it work” Tim Gunn
89
90
SPLITTR
91
SPLITTR
6.1 CONCEPTUELE MODEL Als ontwerper lever je het concept voor de applicatie en zorg je ervoor dat alles is afgestemd op de andere groepen uit het conceptuele model. Als ontwerper
is het niet mogelijk om direct met de gebruiker te communiceren. Dit gaat via het systeem, in dit geval mobile devices. Ontwerpers hebben wel invloed op
het concept (hoofdstuk 2), de patterns die worden ingezet, (hoofdstuk 4) en het interactie ontwerp (hoofdstukken 3, 4 en 5).
De ontwerper moet via het systeem communiceren met de gebruikers. Ieder OS
heeft specifieke functies, navigatie, prestaties en een interactie structuur waarmee rekening moet worden gehouden bij het ontwerpen van een cross OS UI met eenzelfde UX. Dit is beschreven in hoofdstuk 3.
Daarnaast moet je als ontwerper van mobiele applicaties gebruikers voorzien
van een optimale UX. Hierbij staat de gebruiker centraal en is het de taak van de ontwerper om meer over de gebruikers te weten te komen. Een eigenschap van mobiele gebruikers is dat ze altijd en overal snel informatie willen. Daarom is
het voor ontwerpers van belang om een UI te ontwerpen waarbij snel de juiste
informatie te vinden is, die niet alleen herkenbaar, maar ook makkelijk te bedienen is. Zo is het belangrijk om te weten hoe een telefoon door gebruikers wordt
bediend, en wanneer en waar dit gebeurt. Ook is het voor ontwerpers belangrijk
om te weten welke verwachtingen gebruikers hebben en wat de gebruikers met de applicatie moeten kunnen. Dit staat beschreven in hoofdstuk 2.
Het conceptuele model wat in de inleiding is afgeleid van het user centered model van Donald Norman, is aangevuld met de theorie uit het onderzoek. Dit is visueel vormgegeven in figuur 27.
figuur 27 - Conceptuele model
92
SPLITTR
93
SPLITTR
6.2 DOELGROEP Zoals in de inleiding van dit hoofdstuk is aangekaart is het concept voor
Splittr ontstaan door te kijken naar vergelijkbare diensten. Op de website
onlinehuisrekening.nl werden een aantal doelgroepen beschreven. Vanuit deze
doelgroepen is er een selectie gemaakt van drie niche doelgroepen met allen hun
specifieke kenmerken. Via deze weg is er een beeld geschept waaraan de applicatie moet voldoen, om zo compleet mogelijk te worden.
Gebruik voor dagelijkse uitgave Gebruikt regelmatig een gezamenlijke uitgaven website Maakt samen gebruik van een lijst Gebruikte lijst verandert regelmatig van samenstelling Voert uitgave in via website, maar vindt dit niet altijd prettig
De niche doelgroepen die uitgewerkt zijn, zijn: studenten, teamsporters en
vrienden die uitstapjes maken. Deze groepen hebben een gezicht gekregen door er persona’s van te maken. Deze worden in de volgende paragraaf uitgelicht. Door de eigenschappen van deze persona’s is de vorm van de applicatie bepaald en is
besloten welke functies Splittr moet aanbieden wat bepalend is voor de UX, zoals in hoofdstuk 2 wordt beschreven.
GUIDO ‘Ik voetbal op een bier niveau waarbij we als team beter zijn aan de bar dan in de kantine. Het team waarin ik
speel, bestaat uit 17 man. We hebben een gezamenlijke
pot om onze uitgave voor benzine en bier te bekostigen. Deze pot houdt ik bij. Het komt regelmatig voor dat ik
6.2.1 PERSONA’S De persona’s om de doelgroep in kaart te brengen bestaan uit: Bas, Guido en Lucie
uit mijn eigen zak de pot bijvul, omdat niet iedereen
BAS
schrift, dat ik probeer mee te nemen naar de trainingen
consequent betaalt. Alle transacties houdt ik bij in een
‘Ik studeer commerciële economie in Utrecht. Ik woon
en wedstrijden. Tijdens deze momenten herinner ik
met hen probeer ik drie keer in de week samen te eten.
verschuldigd zijn. Het vervelende is dat ik dit schrift
ook geregeld mee. Het online bijhouden van uitgaven
seizoen volledig is versleten.’ .
op kamers in een huis met zeven huisgenoten. Samen
mijn teamgenoten er ook aan dat ze nog een bedrag
Dit lukt meestal wel met een groepje. Vrienden eten dan
regelmatig vergeet of kwijt raak en aan het eind van het
is gemakkelijk. Voor ons studentenhuis hebben we een aparte rekening waar alles wordt ingevoerd. Het is
gemakkelijk iedereen aan te vinken die mee heeft gegeten. Het invoeren van de uitgaven duurt altijd even, dit doe ik een keer per twee weken. Ik heb dan geen overzicht meer wie wel en niet mee heeft gegeten. Dit komt omdat ik het
vervelend vind om achter mijn laptop plaats te nemen als iedereen nog gezellig in de huiskamer zit.’
Gebruikt offline manier voor bijhouden pot Bijhouden financiële boekje team Gebruik voor wekelijkse uitgave Samenstelling van de groep blijft gedurende het seizoen constant
94
SPLITTR
SPLITTR 6.3.2 AANMAKEN VAN LIJSTEN
LUCIE ‘Twee keer per jaar ga ik samen met een aantal
Een lijst vormt de belangrijkste content van Splittr. Gebruikers beheren een lijst die
Hier gaan we heen om te winkelen en te genieten door
6.3.3 TOEVOEGEN VAN UITGAVEN
vriendinnen een weekend naar een buitenlandse stad. samen te eten en te drinken. De rekening wordt altijd
gezamenlijk betaald. Na onze reis berekenen we de kosten die we gezamenlijk hebben gemaakt. Dit levert soms veel gedoe op, vooral als we te maken hebben met vreemde valuta. Dit onderdeel van onze reis verloopt vaak niet soepel.’
Uitgave van weekendtrips Maakt geen gebruik van gezamenlijke uitgave Rekent liever afzonderlijk af Uitgaven komen halfjaarlijks voor
ze gezamenlijk hebben aangemaakt.
Aan deze lijst kunnen gebruikers uitgaven koppelen. Dit is de belangrijkste
functie van Splittr. Deze functie moet dan ook voor de gebruiker zo eenvoudig
mogelijk te benaderen zijn. Aan het toevoegen van uitgaven zijn een aantal functies gekoppeld, zoals: categorie toevoegen, beschrijving toevoegen, vrienden selecteren en valuta selecteren. Het toevoegen van specifieke vrienden is erop gebaseerd dat niet altijd iedereen mee doet aan bepaalde uitgaven. Bij het selecteren van een
valuta wordt dit bedrag, indien de gebruiker de beschikking over internet heeft,
omgerekend naar de gewenste valuta. Indien er geen internet beschikbaar is, wordt de berekening gemaakt op het moment dat er wel internet beschikbaar is. 6.3.4 VOORUIT BETALINGEN Om terugbetalen eenvoudig te maken is er gekozen om het eveneens mogelijk te
6.3 FUNCTIONALITEIT De functies van de applicatie zijn ontstaan vanuit de persona’s. Deze hebben een
inzicht gegeven hoe Splittr op een gebruiksvriendelijk manier van meerwaarde kan zijn. Om zo voor een positieve UX te zorgen. 6.3.1 FACEBOOK INTERGRATIE Door Facebook te integreren, is het mogelijk om hiermee in te loggen, zonder
een aparte account aan te maken. Deze intergratie maakt het ook eenvoudiger om vrienden aan lijsten te koppelen.
Het is ook mogelijk om van Splittr gebruik te maken zonder Facebook. De
gebruiker dient dan in te loggen via een e-mail adres. Vrienden moeten dan ook door middel van het e-mail adres worden toegevoegd. Dit kost vanzelfsprekend meer tijd dan het inloggen via Facebook.
maken om bedragen toe te voegen. Zo is het mogelijk om van te voren geld in te leggen, wat handig is in het geval van de persona Guido.
Vanuit deze functies is er een flowchart gemaakt. Aan de hand van deze flowchart
is de gehele interactie structuur in de vorm van wireframes weergegeven. Dit wordt behandeld in de volgende paragraaf.
95
96
SPLITTR
SPLITTR
6.4 INTERACTIESTRUCTUUR
6.4.1 STRUCTUUR
De interactiestructuur van Splittr is ontstaan vanuit de functies van de applicatie.
Omdat ieder OS zijn eigen interactiestructuur handhaaft, zijn er keuzes gemaakt
De gebruiker moet namelijk snel zijn doel kunnen bereiken. Om de structuur
experience. Hierbij was de bediening de belangrijkste factor. Ongeacht het OS
Een aantal functies moeten snel te benaderen zijn en eenvoudig in gebruik zijn.
inzichtelijk te maken is er een sitemap (fig. 28) ontwikkeld. Aan de hand van deze sitemap zijn de wireframes ontwikkeld, hiermee krijgt de interactie meer diepte.
tussen verschillende elementen. Hierbij is gekeken naar de invloed op de user moet voor gebruikers moet Splittr makkelijk te bedienen zijn. 6.4.2 GESTURES
Waar ik in mijn onderzoek achterkwam is dat door de invoer van gestures er meer ruimte overblijft voor content. Het was de bedoeling om in Splittr met behulp van gestures de gebruiksvriendelijkheid te verbeteren.
De gestures zijn zo ver mogelijk uitgewerkt in de ontwikkelde wireframes. Deze wireframes zijn opgenomen in Appendix II. De gestures zijn zou eenvoudig en
eenduidig mogelijk gehouden, waardoor het leerproces voor de gebruiker ook zo eenvoudig mogelijk blijft. Bij de ontwikkeling is gekeken naar reeds bestaande patterns. Daarbij viel op dat het inzetten van gestures nog niet gebruikelijk is. Complexe applicaties maken nog gebruik van buttons en iconen. Daarom is
besloten om een combinatie uit te werken, waardoor Splittr via gestures en buttons te bedienen is. In de volgende paragraaf zullen aan de hand van enkele schermen enkele keuzes worden toegelicht. figuur 28 - Sitemap
97
98
SPLITTR
SPLITTR 6.4.3 INTERACTIE KEUZES Het scherm dat de gebruiker ziet als hij de applicatie opstart is volgens het pattern list view opgebouwd (fig 29). Dit zorgt voor een overzicht per lijst; gebruikers hebben namelijk gelijk inzicht in hun balans.
Door over een lijst te “swipen” is het mogelijk om acties uit te voeren voor
die specifieke lijst. Dit om ervoor te zorgen dat gebruikers snel acties kunnen uitvoeren, zoals bijvoorbeeld het toevoegen van uitgaven.
Om lijsten herkenbaar te maken is het mogelijk om een van de vijf Splittr kleuren toe te voegen of een eigen kleur aan een lijst te koppelen. Dit is gedaan om een visueel onderscheid tussen de lijsten te maken.
Als gebruikers diepere lagen van de applicatie bezoeken moeten ze ook terug kunnen. Op Android en WP7 is dit mogelijk met de hardware button. Op iOS
alleen met een software button. Daarom is er gekozen om op de normale plek van figuur 29 - Homescreen SPLITTR
iOS een terug knop te plaatsen.
Het tab menu wordt gebruikt als secundaire navigatie (fig 30). Het is ook mogelijk door deze schermen te navigeren door te swipen. Op deze manier moet de
gebruiker ook navigeren door formulieren bij het maken en bewerken van een lijst. Het formulier bestaat namelijk uit drie stappen. Dit is gedaan om het formulier overzichtelijk te houden. figuur 30 - Tab bar en back button
Gebruikers kunnen via een toolbar uitgaven toevoegen (fig. 31), de lijst bewerken. De keuze voor de toolbar was eenvoudig, aangezien deze op ieder OS dezelfde functie en positie heeft.
figuur 31 - Toolbar
99
100
SPLITTR
SPLITTR Het invoeren van uitgaven wordt gedaan aan de hand van een calculator (fig. 32).
Dit maakt het eenvoudiger voor de gebruiker om meerdere kosten in een keer in te voeren. Het is verplicht om aan iedere uitgaven een categorie te geven.
Optionele functies zijn opgenomen in de toolbar. Deze opties zijn: vreemde
valuta toewijzen, deelnemende vrienden bewerken en het bijvoegen van een
omschrijving. Standaard is de eigen valuta geselecteerd, alle vrienden nemen deel
en is er een blanco omschrijving. Het groene vinkje is de bevestig- knop. Hiermee wordt de uitgave toegevoegd.
Voor het kiezen van een valuta is er gebruik gemaakt van een spinner (fig. 33). De keuze word bevestigd met de gereed- knop.
Deze gereed- knop komt vaker terug in de applicatie. Deze knop is ook te vinden
bij de andere drie opties bij het invoeren van de uitgave. Het formulier om een lijst figuur 32 - Calculator
aan te maken sluit ook af met een gereed- knop. Met deze bevestigt de gebruiker
een actie. Met de back knop links bovenin het scherm wordt de invoer geannuleerd. De back knop is afgeleid van Android en WP7. iOS heeft deze knop normaal gesproken bovenin het scherm staan.
figuur 33 - Valuta
101
102
SPLITTR
SPLITTR 6.5 BEVINDINGEN Momenteel (anno 2012) bestaan er voornamelijk websites die het mogelijk
maken om gezamenlijke kosten in kaart te brengen. Wat opvalt is dat geen van deze websites een goede versie voor mobiel of in de vorm van een web app
heeft ontwikkeld. Dit zorgt ervoor dat het invoeren van gegevens via mobiel niet gebruiksvriendelijk verloopt. Aan de hand van het mobile first principe
(Wroblewski, 2011) heb ik gekeken op welke manier dit concept, het gezamenlijke kosten berekenen, geschikt gemaakt kan worden voor mobiele apparaten. Hierbij was het idee om de eigenschappen van mobiel perfect in te zetten.
Aan de hand van de persona’s zijn de functies en de daarbij behorende content bepaald die de mobiele applicatie meerwaarde bieden. De functies van de
applicatie moesten eenvoudig te bereiken en bedienen zijn en de content moest figuur 34 - Lijst van uitgaven
De ingevoerde uitgaven worden weergegeven in een lijst (fig. 34). Per uitgave wordt dan de categorie, het bedrag en degene die heeft betaald weergegeven.
Het kan gebeuren dat een uitgave verkeerd wordt ingevoerd. Door op de uitgave te tappen, verschuiven de functies eronder. Hierdoor blijft zowel het bedrag van de uitgave als de functies zichtbaar. Het is alleen mogelijk om eigen uitgaven te
wijzigen. Om dit aan de gebruiker duidelijk te maken hebben eigen uitgaven een andere tint.
Het inzetten van swipes was niet mogelijk omdat deze gesture al in gebruik was bij dit scherm om te navigeren tussen tabs. Om deze reden is er voor een tap gekozen.
“To be social, you have to be on every platform.” Başak Özer
gemakkelijk te begrijpen zijn. Om dit in beeld te brengen zijn er wireframes
gemaakt. Daarna is er gekeken op welke manier de applicatie visueel aantrekkelijk kan worden gemaakt, waardoor de applicatie een eigen identiteit heeft gekregen. Uiteindelijk is de applicatie Splittr ontstaan die gebruik maakt van lijsten om
kosten te ordenen. Aan deze lijsten worden vrienden waarmee je gezamenlijke kosten maakt, gekoppeld. Aan deze lijsten worden dan specifieke kosten
toegevoegd. Op deze manier ontstaat er een overzicht van kosten die gemaakt zijn en wie wat moet betalen of ontvangen.
Voor het juiste gebruik van deze applicatie is het van belang dat de applicatie
op veel mobiele telefoons te gebruiken is. Het is belangrijk dat een grote groep
toegang heeft tot de applicatie. Vandaar dat dit concept cross-OS wordt uitgewerkt. In hoofdstuk 8 zal worden onderzocht hoe de gebruikerservaring van de applicatie is. Hieraan is dan te zien of het mogelijk is om eenzelfde UI te ontwikkelen met een gelijke UX op meerdere OS’s.
103
7. CASE STUDY Deze case study is bedoeld om een inzicht te krijgen in de problemen waar Appstrakt tegen aanloopt bij het cross-OS ontwerpen van mobiele applicaties. Deze problemen vormen de basis voor het uit te voeren gebruikersonderzoek. Dit gebruikersonderzoek moet inzicht geven in de mogelijkheden van een standaard cross-os mobiele UI. In dit hoofdstuk zullen de resultaten worden besproken. Aan de hand van deze resultaten wordt het gebruikersonderzoek samengesteld.
7.1 PROBLEEM Appstrakt moet voor iedere cross-OS app meerdere ontwerpen ontwikkelen om aan de specifieke eigenschappen van ieder OS te voldoen. In een gesprek met
Kevin Verelst (director interaction design) en Nick Verbaendert (Technical director & founding partner) (personal communication, juni, 2012), zijn er factoren naar boven gekomen waar Appstrakt tegen aanloopt bij het cross-OS ontwerpen van
mobiele interfaces. Het gaat hier om gestures binnen een interface, de interactie
structuur van de verschillende OS’s, patterns die standaard ingezet worden en de UX van mobiele applicaties. Op deze factoren is deze case study gericht.
7.2 ANALYSE: INVENTARISATIE VAN DE BESTAANDE PRAKTIJK Appstrakt ontwerpt en ontwikkelt diverse applicaties die geschikt zijn voor de
verschillende OS’s. Appstrakt levert voor ieder OS een apart UI ontwerp. Dit wordt gedaan om de UX te behouden.
Toen Appstrakt begon heeft het bedrijf de UI van iOS app zonder aanpassingen in Android apps geplaatst. Hierbij kwamen ze erachter dat dit niet de juiste methode was wat betreft de gebruiksvriendelijk en de standaarden van de OS’s.
Op dit moment worden er meerdere ontwerpen gemaakt om een applicatie cross-
OS te kunnen lanceren. Dit is kost tijd en geld. Voordeliger is het om een applicatie UI te hoeven ontwerpen die te gebruiken is op meerdere OS’s. Op dit gebied is
105
106
CASE STUDY Appstrakt geïnteresseerd in de manier waarop UI elementen invloed hebben op de UX van een app. Zoals in de theorie al naar voren is gekomen, heeft het gebruik
van een UI vooral te maken met herkenning en verwachtingen van gebruikers, en
de gebruiksvriendelijkheid. In het gebruikersonderzoek zullen deze punten dan ook worden belicht.
De punten waar Appstrakt geïnteresseerd in is, zijn: de gebruiksvriendelijkheid van gestures, de interactie structuur en het inzetten van patterns.
De manier waarop Appstrakt werkt is naast bevindingen uit de literatuur gelegd. De resultaten hiervan zijn in deze paragraaf weergegeven.
Literatuur bevindingen Als er rekening gehouden wordt met de structuur die de gebruiker gewend is zal het gebruik van de applicatie sneller verlopen. Positie van de controls zijn op alle OS gunstig geplaatst voor het gebruik met de duim.
Meerdere ontwerpen zijn noodzakelijk, om de applicatie geschikt te maken voor ieder OS
Een ontwerp voor meerdere OS’s bespaart tijd en geld.
7.3.2 PATTERNS Praktijk bij Appstrakt Maken veel gebruik van standaard patterns in hun UI ontwerpen
Literatuur bevindingen Patterns komen de gebruiksvriendelijkheid ten goede, doordat ze herkenbaar zijn voor gebruikers. Doorontwikkeling van patterns is noodzakelijk
Het springboard (dashboard) pattern wordt veel gebruikt in apps van Appstrakt
Praktijk bij Appstrakt
Literatuur bevindingen
Alleen gebruik van standaard gestures in WP7
Er zijn geen gesture standaarden die cross-OS inzetbaar zijn
Te complexe apps voor inzetbaarheid, in samenhang met de gebruiksvriendelijkheid
leerproces voor gebruikers
Navigatie wordt gebruikt zoals bij een GUI
Ruimte over voor content in plaats van navigatie
Over de onderdelen interactie structuur, patterns en gestures wil Appstrakt meer te weten komen. Het gebruikeronderzoek zal zich dan ook op deze onderdelen richten. Bij de interactie structuur is het vooral interessant om te kijken hoe
gebruikers reageren op een afwijkende structuur, omdat deze vaak OS specifiek
7.3.1 INTERACTIESTRUCTUUR De wordt aangepast aan de richtlijnen van de OS’s
7.3.3 GESTURES
7.4 CONCLUSIE
7.3 RESULTATEN
Praktijk bij Appstrakt
107
CASE STUDY
Content niet direct benaderbaar voor de gebruikers. Betere optie is list menu, zoals Path heeft geïntroduceerd.
zijn ingericht. Op het gebied van patterns is het interessant om te zien hoe het gebruikt wordt, en wat er gebeurt als het er anders uit ziet. Appstrakt is ook
benieuwd naar de inzetbaarheid van gestures in complexere applicaties en de werking op kleinere beeldschermen.
In het gebruikersonderzoek, dat in hoofdstuk 8 behandeld wordt, zal de nadruk
liggen op deze onderdelen. De resultaten die daaruit komen zijn dan waardevol voor Appstrakt maar ook bedrijven met vergelijkbare ervaringen.
8. GEBRUIKERSONDERZOEK De bedoeling van dit onderzoek is om erachter te komen of het mogelijk is om een gegeven applicatie zo te implementeren dat de gebruiksvriendelijkheid en UX onafhankelijk van het OS vergelijkbare resultaten oplevert. Het gebruikersonderzoek gericht op navigatie structuur, gestures en patterns. De resultaten van dit onderzoek leiden tot conclusies en aanbevelingen die richtlijnen vormen voor het vormgegeven van een cross-OS applicatie met een gelijke UX.
8.1 ONDERZOEKSOPZET Aan de hand van een testscript dat is gebaseerd op het testscript van Steve Krug (Krug, 2009) wordt er gestart met het onderzoek. Zo weten de testpersonen wat ze te wachten staan. Op alle gestelde vragen kon een oordeel gegeven worden
tussen de 1 en de 5, 1 betekend helemaal niet mee eens en 5 betekend helemaal
mee eens. Hierdoor zijn de resultaten makkelijk te vergelijken. Het testscript met
bijbehorende scenario’s en vragenlijsten is te vinden in Appendix III. Uiteindelijk moeten de belangrijkste interactie keuzes die zijn beschreven in hoofdstuk 6.5 worden getest.
8.2 RESULTATEN De algemene ervaring van gebruikers met Splittr is positief. De drie personen op Android en de drie op iOS hebben een score geven van 4. Op WP7 gaven de 2
personen een gemiddelde score van 3,5 aan de applicatie (fig. 35) . Gebruikers ervaren de applicatie als prettig en de functies kwamen overeen met hun
verwachtingen. Op WP7 was de ervaring minder dan op Android en iOS. Op WP7 is de ervaring als minste ervaren. De reden hiervoor ligt aan het feit dat WP7
applicatie UI’s niet afwijken van de OS richtlijnen. Ze komen minder in contact met andere vormen van interactie elementen.
109
110
GEBRUIKERSONDERZOEK
111
GEBRUIKERSONDERZOEK
ervaring
ervaring
5
5
4
4
3
3 indien het er aan af te lezen is, snel hoe ze een element kunnen gebruiken (fig. 36).
2
2
1
1
8.2.1 INTERACTIESTRUCTUUR De interactiestructuur is op ieder platform positief ervaren. Dit ondanks de het
combineren van OS specifieke interactie eigenschappen. Gebruikers begrijpen,
8.2.2 PATTERNS Aan de resultaten is af te lezen dat de elementen in Splittr niet herkenbaar waren voor gebruikers. Een aantal elementen was nieuw, en dit leverde af en toe een
0 hapering op. Door trial and error ontdekten gebruikers toch hoe iets werkt (fig. 38).
0 Android 1 = negatief
WP7
iOS
OS
Android
Algemene ervaring
5 = positief
GESTURES 1 8.2.3 = negatief 5 = positief
WP7
iOS
OS
Gestures
Gestures worden als prettig ervaren als ze worden toegepast in een UI. Op WP7
figuur 35 - Algemene ervaring Splittr
was de gemiddelde score 5, op iOS en Android werd er op beide OS’s gemiddeld
een 4 gegeven (fig. 37). Gebruikers hebben hier wel begeleiding nodig in de vorm ervaring
ervaring
van een tutorial of affordance. Het gebruik van gestures is nog niet voor iedere
5 gebruiker normaal, en als ze erachter komen dat ze iets met een gesture kunnen bedienen, gebeurt dit vaak door toeval. Dit was ook om te kijken hoe het is om via
5 4
4 swipe bij een menu onderdeel te komen zoals in Splittr is geïntegreerd.
3
3 De resultaten die uit het onderzoek zijn gekomen liggen dicht bij elkaar. Daaraan
is af te lezen dat de applicatie op verschillende OS’s hetzelfde wordt ervaren. 2 Daarnaast vallen de resultaten positief uit, wat duidelijk maakt dat het mogelijk
2 1
1
0
0 Android 1 = negatief
5 = positief
WP7
iOS
OS
ervaring van de structuur figuur 36 -Ervaring van de structuur
is om een positieve UX te bewerkstelligen met het ontwerpen van een UI voor meerdere OS’s.
Wel zijn er punten in de observatie naar voren gekomen die aangepast moeten
worden om Splittr nog gebruiksvriendelijker te maken en de gebruikservaring van OS Android WP7 iOS de applicatie verder te verbeteren. Het gaat hierbij om de duidelijkheid van iconen,
1 de = negatief 5 = positief duidelijkheid van de
Herkenbaarheid formulieren, de feedback- functie, het toevoegen van
112
GEBRUIKERSONDERZOEK
GEBRUIKERSONDERZOEK
ervaring
5
kosten en het selecteren van vrienden. Deze aanpassingen zullen in de volgende paragraaf aan bod komen.
4 3
Al met al is er positief gereageerd op de applicatie. Alleen op herkenbare
2
een 3, op WP7 was dit gemiddeld een 4. Gebruikers wisten echter snel hoe deze
1
andere manier, namelijk visueel of qua functie. Dit zorgde voor de haperingen in
elementen is er minder gescoord. Gebruikers op iOS en Android gaven gemiddeld elementen werkten. Een aantal patterns waren namelijk wel ingezet maar op een
gebruik. Deze haperingen verdwenen snel, nadat gebruikers gewend raakten aan
0 Android 1 = negatief
WP7
iOS
OS
Gestures
5 = positief
figuur 37 - Ervaring van gestures
ervaring
5 4 3 2 1 0 Android 1 = negatief
5 = positief
WP7
iOS
OS
Herkenbaarheid figuur 38 -Herkenbaarheid van SPLITTR
de applicatie. Een voordeel hiervan is dat er niet veel tijd nodig was om aan de
applicatie te wennen.Splittr zal op een aantal punten moeten worden aangepast om nog beter te worden.
113
114
GEBRUIKERSONDERZOEK 8.3 CONCLUSIE/AANPASSINGEN Een aantal aanpassingen zijn vereist om de UI duidelijker te maken en Splittr completer te maken. De aanpassingen moeten er voor zorgen dat sommige onderdelen duidelijker zijn en dat Splittr gebruiksvriendelijker wordt. De
onderdelen die aangepast moeten worden zijn: gesture hinting, iconen, formulier, vrienden selectie, feedback uitgave toevoegen en de afreken functie. 8.3.1 GESTURE HINTING Uit het onderzoek is gebleken dat gebruikers niet meteen doorhadden dat ze op het
homescreen de list items konden swipen. Door middel van een animatie of hint kan dit worden verholpen. In het ontwerp van Splittr is dit verholpen door gebruik van een pijl in de richting van de swipe. 8.3.2 ICONEN De gebruikte iconen moesten gedetaileerder zijn. Tijdens het onderzoek bleek het
icoon voor het bewerken niet duidelijk genoeg. De set iconen in Splittr is aangepast om de functies van de buttons duidelijker te maken. 8.3.3 FORMULIER LIJST AANMAKEN Het formulier voor het toevoegen of bewerken van een lijst bestaat uit drie stappen. De titels van deze stappen zijn zichtbaar in het tekstuele tab menu. Het was voor een aantal gebruikers niet duidelijk dat schermen met elkaar te maken hadden.
Door de namen te wijzigen in stap 1, 2 en 3 moet dit duidelijker worden. Daarnaast zal op ieder scherm een hint komen in de vorm van een pijl die aangeeft dat er nog meer content is.
GEBRUIKERSONDERZOEK 8.3.4 VRIENDEN SELECTIE Het selecteren van vrienden verliep voor een aantal gebruikers onwennig. Ze
hadden niet door wanneer iemand geselecteerd was of niet. Door het inzetten van een ‘vinkje’ moet dit worden verholpen. Dit is ook standaard in de meeste UI’s 8.3.5 FEEDBACK BIJ HET TOEVOEGEN VAN DE UITGAVE Na het toevoegen van de uitgave(n), was het voor een aantal gebruikers onduidelijk
of de uitgave nu wel of niet was toegevoegd. Door het geven van feedback moet dit duidelijker worden. Als gebruikers via de actie op het homescreen kosten toevoegt
zal er feedback gegeven worden door middel van een melding bovenin het scherm. Wordt de uitgave toegevoegd in de lijst zelf, dan zal de uitgave door middel van een animatie zichtbaar worden. 8.3.6 AFREKEN FUNCTIE Deze functie was geplaatst bij het bewerken van een lijst. Dit bleek uit het
onderzoek geen logische plaats. Uit dat oogpunt is er voor gekozen om deze functie links in de toolbar en swipe bar op te nemen.
115
9. DISCUSSIE 9.1 CONCLUSIE Door middel van dit onderzoek is getracht een antwoord te vinden op de volgende onderzoeksvragen:
Welke User Experience en User Interface elementen zijn van belang voor het vormgeven van mobiele cross-OS applicaties? Is het als user interface designer mogelijk voor de verschillende OS’s en verschillende resoluties een ontwerp af te stemmen op de UX verwachtingen van gebruikers? De voorgaande hoofdstukken hebben belicht wat belangrijk is voor mobiele UX en wat de verschillen per OS in UI zijn. Door het ontwikkelen, ontwerpen en
onderzoeken van de cross-OS applicatie Splittr is onderzocht wat de invloed op de UX is van een UI toegepast op meerdere OS.
Door het ontwikkelen van een UI, rekening houdend met de UX elementen voor
meerdere OS’s, is onderzocht hoe een cross-OS UI is ervaren door gebruikers. Uit de resultaten van dit onderzoek zijn conclusies getrokken:
Een belangrijk element waar rekening mee moet worden gehouden is de content die je als ontwerper aan gaat bieden. Door de beperkte beschikbare ruimte is het van belang om na te denken wat voor de gebruiker belangrijk is. Als de content
is bepaald, kan de manier van navigeren worden bepaald. Content staat namelijk
boven de navigatie. Dit is anders in vergelijking met websites (Wroblewski, 2011). Bij de interactie met de applicatie draait het om herkenning van elementen. Als een gebruiker een element eerder heeft gezien, zal hij het gebruik ervan sneller begrijpen. Dit beschrijft de werking van het mentale model van de gebruiker.
117
118
DISCUSSIE
DISCUSSIE
Gebruikers van een bepaald OS zijn ook gewend aan specifieke interactie
Een element waar rekening mee moet worden gehouden bij de ontwikkeling van
doel bereiken, aangezien de gebruiker in dat geval weet wat er gebeurt als hij een
telefoons niet allemaal even groot zijn, is er geen sprake van gelijke resoluties.
elementen. Als ontwerpers hier niet van afwijken zal de gebruiker sneller zijn bepaald element bedient ( Nielsen, 2010; Kellway, 2012; Krug, 2005).
Door patterns in te zetten wordt een applicatie prettiger in het gebruik. Patterns zijn interactie elementen die hun gebruiksvriendelijkheid hebben bewezen (Krug, 2005; Neil, 2012). Tevens zijn ze herkenbaar wat weer in relatie staat met het mentale
model van gebruikers. Omdat UI’s steeds in ontwikkeling zijn, is het noodzakelijk dat deze patterns ook worden doorontwikkeld om zo mee te kunnen gaan met de
een applicatie is de resolutie (Wroblewski, 2011). Omdat schermen van mobiele Vaak zijn de ontwerpen van applicaties te schalen naar een bepaalde resolutie.
Hierbij moet rekening worden gehouden met de indeling van de UI. De ruimte
voor content en interactie elementen verschilt nogal. Dit heeft te maken met het systeem model zoals is beschreven in het conceptuele model. Het systeem staat vast, en het is de enige manier voor de ontwerper om te communiceren met de gebruiker. Daarom moet dit ook zijn afgestemd op het systeem.
ontwikkeling (vanderMerwe, 2012).
Het inzetten van gestures zorgt voor minder interactie elementen waardoor er meer
Voor de bediening van applicaties is het belangrijk dat er rekening wordt
zo te bedienen. Ze moeten alleen een leerproces doorgaan om de interactie te
gehouden in wat voor situatie de applicatie wordt gebruikt. Zo moeten de knoppen gemakkelijk met de duim te bedienen zijn. Hiervoor hebben ze een minimale
grootte van 10 pixels bij 10 pixels nodig. Daarnaast is de positie van de buttons in een applicatie belangrijk. Niet het gehele oppervlak van een mobiele telefoon is
namelijk gemakkelijk bereikbaar. Bevestig- buttons moeten makkelijker bereikbaar zijn dan de annuleer buttons. Kijkend naar het conceptuele model behoort dit tot
het design model. De ontwerper moet hier keuzes maken, maar moet wel rekening
houden met het mentale model van gebruikers (Wroblewski, 2011; Norman, 2004; Weinschenk, 2011).
ruimte overblijft voor content. Gebruikers vinden het ook prettig om applicaties
begrijpen. Gestures moeten daarom simpel en logisch in gebruik zijn. Hoe meer
gestures ingezet zullen worden, hoe eerder gebruikers interacties zullen herkennen (Norman, 2010).
Kortom, het is mogelijk om een UI te ontwerpen voor meerdere OS’s met een gelijke UX. Gebruikers begrijpen de verschillende interactie elementen zolang er rekening wordt gehouden met het mentale model van de gebruikers en de eigenschappen van het systeem. Om dit te doen is het gebruik van patterns verstandig. Als ontwerper is het wel belangrijk om deze verder te ontwikkelen, om innovatie te bewerkstelligen.
119
120
DISCUSSIE
DISCUSSIE
Gedurende deze scriptie ben ik erachter gekomen dat het voor ontwerpers zeer
9.2 AANBEVELINGEN
moet de applicatie waardevol, begrijpelijk en prettig in gebruik zijn. Het ontwerp
aanbevelingen voor het ontwikkelen van een UI voor een cross-OS applicatie die
belangrijk is om als ontwerper het ontwerp voor de gebruikers te maken. Voor hen kan alleen worden overgebracht via het systeem. Daarom is het van belang om
rekening te houden met de eisen van het systeem. Voorbeelden hiervan zijn: de verschillende resoluties, de interactie structuur en de prestaties van apparaten. Door dit onderzoek is het gelukt om de twee hoofdvragen te beantwoorden.
Dit onderzoek geeft een beeld van de elementen die van belang zijn voor het
ontwerpen voor verschillende mobiele OS’s. Er zijn veel elementen die invloed
Aan de hand van dit onderzoek volgen hier een aantal praktisch gerichte dezelfde UX aanbiedt.
Samen met de richtlijnen die uit het onderzoek naar voren zijn gekomen voor het ontwikkelen van een mobiele UX, zijn deze bruikbaar voor het ontwikkelen van
een UI, ongeacht het OS. Het beschrijft elementen die belangrijk zijn voor zowel de gebruiker, als de gebruiksvriendelijkheid en innovatie op het gebied van UI’s.
1. Het is belangrijk dat er wordt gekeken of het inzetten van een cross-OS
hebben op de UX, ik ben erin geslaagd om de elementen die van belang zijn voor
applicatie ook daadwerkelijk een meerwaarde oplevert voor zowel de gebruiker als
Op deze manier hebben zowel UI als UX ontwerpers van mobiele applicaties
om een applicatie op meerdere OS’s uit te brengen, om zo min mogelijk mensen uit
mobiele UI’s te beschrijven.
baat bij de informatie in deze scriptie. Vooral het hoofdstuk over NUI kan leiden
tot nieuwe inzichten van ontwerpers. Er word namelijk aandacht besteed aan een ontwikkeling die nodig is om de UX hiervoor te optimaliseren.
de opdrachtgever. Als het gaat om een sociale applicatie is het zeker aan te raden te sluiten. Dit geldt ook indien de opdrachtgever een zo’n groot mogelijke groep wil bereiken.
Voor CMD is deze scriptie van belang omdat het inzicht geeft in het afleveren van
2. Het mentale model van gebruikers is op het gebied van NUI nog niet ver
UX, wat zeer relevant is voor CMD om beide te ontwikkelen.
het systeem, kan het mentale model verder worden ontwikkeld. Hierbij gaat het
een ontwerp voor meerdere mobiele OS’s. Hierbij word zowel de UI belicht als de Daarnaast is het onderdeel NUI een onaangebroken onderwerp voor CMD-ers waar toch veel winst uit gehaald kan worden voor de UX van de UI.
ontwikkeld. Door de juiste innovatie en keuzes in combinatie met de eisen van
ook om durf, om dingen anders te doen. Alleen op die manier worden UI’s verder ontwikkeld.
3. Het is aan te raden om de functie van applicaties zo beperkt mogelijk te
houden. Een applicatie moet simpel en snel in gebruik zijn. Op deze manier zal
de gebruiker de applicatie als positief ervaren en vaker gebruiken. Het testen van
de applicatie op interactieniveau levert ook nieuwe inzichten, die van belang zijn
voor het gebruik. Als het gebruik van een applicatie tegenvalt zal deze niet gebruikt worden, ook al wordt de applicatie in een later stadium nog verbeterd. Om tot een prettige applicatie te komen moet het testen tijdens het ontwerpproces worden
gedaan. Daarom is het verstandig om bij nieuwe elementen interactie onderzoek te doen, of om patterns in te zetten.
121
122
DISCUSSIE 4. Patterns zijn ideaal om interactie problemen op te lossen. Omdat je als
ontwerper expert bent op het gebied van interactie is het ook verstandig om
hiermee te experimenteren om zo de patterns te blijven innoveren. Dit kan ten goede komen voor de gebruiksvriendelijkheid en gebruik van UI’s.
Zoals in dit onderzoek is beschreven is een voorbeeld daarvan de NUI.
5. Bij het ontwikkelen van één cross-OS UI moet er rekening gehouden worden
met de verschillende resoluties waardoor het lastig is om een ontwerp te maken. Er zullen altijd kleine aanpassingen nodig zijn om een applicatie te ontwikkelen die op een groot aantal apparaten gebruiksvriendelijk is. Daarnaast is het aan te
raden om rekening te houden met de structuur van de UI zoals beschreven in de
richtlijnen van de OS’s. Op deze manier is de UI voor gebruikers sneller duidelijk.
6. Het uitwerken van gestures in een UI geeft op dit moment wat meer denkwerk
op, gebruikers ervaren gestures als prettig. Dat is de taak voor ontwerpers om het gebruik hiervan in applicaties te stimuleren ondanks het extra denkwerk.
7. Naar de inzetbaarheid van spraakassistenten moet ook gekeken worden. Dit
is de nieuwste ontwikkeling op het gebied van NUI’s. Deze ontwikkeling heeft al positieve resultaten opgeleverd voor de UX. Als het mogelijk wordt om
spraakassistenten te implementeren in applicaties, kan dit een positieve invloed
hebben op de UX van een aantal applicaties. Ontwerpers moeten op dit moment al bezig zijn hoe ze deze technologie kunnen inzetten binnen hun applicatie om een grotere meerwaarde te kunnen bieden aan hun gebruikers.
BIBLIOGRAFIE
124
125
Apple. (2012). MobileHIG, 1-184.
Google (2012a, april 10). Android Design. developer.android.com.
Apple Inc. (2012, juni 11). Apple - iOS 6 Preview - Siri. apple.com.
Google (2012b, april 10). Android Design - Gestures. developer.android.com.
Blodget, H., & Goldman, L. (2011, april 18). SMARTPHONE SURVEY: Why
Grabham, D. (2012, februari 15). Intel and Nokia merge Moblin and Maemo to
People Choose Android vs iPhone. businessinsider.com.
form MeeGo. techradar.com.
Bonner, P. (2012, februari 20). Nokia N9 Outscores Lumia 800 in Terms of Market
Hearst, M. A. (2011). “Natural” search user interfaces. Communications of the
Response, Reports Internet Marketing Services. prweb.com.
ACM, 54(11), 60. doi:10.1145/2018396.2018414
Bulger, D. (2010, maart 12). Smartphone Owners: A Ready and Willing Audience.
Hinman, R. (2012, juni 6). Excerpt From The New Book “The Mobile Frontier” |
blog.compete.com.
UX Magazine. uxmag.com.
Byford, S. (2012, februari 15). Clear for iOS: unique gesture-based task
Hoober, S., & Berkman, E. (2011). Designing Mobile Interfaces (p. 584). O’Reilly
management (hands-on video) | The Verge. theverge.com.
Media.
Charland, A., & LeRoux, B. (2011a). Mobile application
Ingraham, N. (2012, april 4). Figure by Propellerhead is a simple, fast, and
development. Communications of the ACM, web vs. native, 54(5), 49.
beautiful music creation app | The Verge. theverge.com.
doi:10.1145/1941487.1941504
Janssen, F. (2009, mei 30). Surface: Rijke ervaringen met Natural User Interface -
Charland, A., & LeRoux, B. (2011b). Mobile application
Frankwatching. frankwatching.com.
development. Communications of the ACM, web vs. native, 54(5), 49.
Jones, A. (2012, januari 9). BuildMobile | Native, Hybrid or Web Apps
doi:10.1145/1941487.1941504
buildmobile.com.
Clark, J. (2010). Tapworthy: Designing Great iPhone Apps, 1st edition. Tapworthy:
Kelway, J. (2012). Six Circles. An experience design framework (p. 1-51).
Designing Great iPhone Apps, 1st edition. O’Reilly Media, Inc.
Kingsley-Hughes, A. (2011, juli 11). Why do people choose Android smartphones?
D’Orazio, D. (2012, maart 3). Google Assistant listens and responds to voice like
| ZDNet. zdnet.com.
Siri, to be company’s main focus of 2012? | The Verge. theverge.com.
Krug, S. (2005). Don’t make me think. A Common Sense Approach to Web
Fahrenkrug, J. (2011, november 12). Thoughts on Mobile UI Design.
Usability (second. p. 216). New Riders.
springenwerk.com.
Krug, S. (2009). Rocket Surgery Made Easy: The Do-It-Yourself Guide to Finding
Garrett, J. J. (2010). The Elements of User Experience: User-Centered Design
and Fixing Usabili. Macmillan Computer Pub.
for the Web and Beyond (2nd Edition) (Voices That Matter) (2e ed., p. 192). New
Microsoft. (2012, maart 22). User Experience Design Guidelines for Windows
Riders Press.
Phone. msdn.microsoft.com.
Ginsburg, S. (2010, september 6). Android & iPhone App Design: Is it twice the
Neil, T. (2012). Mobile Design Pattern Gallery: UI Patterns for Mobile
work? | Johnny Holland. johnnyholland.org.
Applications (p. 284). O’Reilly Media.
126
BIBLIOGRAFIE
BIBLIOGRAFIE
127
Nielsen, J. (2010, oktober 18). Mental Models (Jakob Nielsen’s Alertbox). useit.
Stanley, M. (2009, oktober 20). Economy + Internet Trends. morganstanley.com. San Fransisco.
com.
Tidwell, J. (2011). Designing Interfaces (Second Edition. p. 576). O’Reilly Media.
Nielsen, J. (2011, september 26). Mobile Usability Update (Jakob Nielsen’s
van der Merwe, R. (2012, juni 6). Design Patterns: When Breaking The Rules Is OK. uxdesign.
Alertbox). useit.com.
smashingmagazine.com.
Norman, D. (2002a). Emotion & design: attractive things work better. interactions,
Vascellaro, J. E. (2012, maart 25). Apple’s Siri Gains Traction–For Some Things. blogs.wsj.com.
9(4), 36-42. ACM. doi:10.1145/543434.543435
Warren, C. (2012, januari 31). Clear To Do App Has Some Surprising Design Inspirations.
Norman, D. A. (2002b). The Design of Everyday Things (p. 272). Basic Books.
mashable.com.
Norman, D. A. (2004, juli 30). Don Norman’s jnd.org / Affordances and Design.
Weber, H. (2012, maart 15). This Gesture-Based Calculator. thenextweb.com, Makes Math Sexy.
jnd.org.
Weevers, I. (2011, juli 18). Seven Guidelines For Designing High-Performance Mobile User
Norman, D. A. (2010). Natural user interfaces are not natural. interactions,
Experiences | Smashing UX Design. uxdesign.smashingmagazine.com.
17(3). ACM Request Permissions. doi:10.1145/1744161.1744163
Weima, K. (2012). Verdiende aandacht. Handboek voor sociale merkcommunicatie en -activatie
Norman, D. A., & Nielsen, J. (2010). Gestural interfaces: a step
(1e ed., p. 259). Utrecht: A.W. Bruna Uitgevers B.V.
backward in usability. interactions, 17(5). ACM Request Permissions.
Weinschenk, S. A. (2011). 100 Things Every Designer Needs to Know about People [100
doi:10.1145/1836216.1836228
THINGS EVERY DESIGNER NEED] [Paperback]. New Riders Publishing.
Panzarino, M. (2012, februari 15). Clear is a Simple List App With Big Potential
Wellman, S. (2007, april 11). Google Lays Out Its Mobile User Experience Strategy.
for Multitouch. thenextweb.com.
informationweek.com.
parksassociates.com. (z.d.). parksassociates.com. parksassociates.com.
Wroblewski, L. (2010, april 20). Touch Gesture Reference Guide. lukew.com.
Savov, V. (2012, mei 24). Siri vs. S Voice:. theverge.com, battle of the robot-voiced
Wroblewski, L. (2011). Mobile First.
assistants.
APPENDIX
128
129
APPENDIX I: VOORBEELDEN VAN CROSS OS APPLICATIES
nummers. Hierbij wordt er gebruik gemaakt van de panorama view en dit is ook
Twitter
het enige waaruit de applicatie bestaat. Op Android en iOS zit een sociale functie,
De applicatie van Twitter bevat eigenlijk alle functies die de webversie ook heeft. Met deze applicatie is het een en ander mogelijk, zoals het typen van een bericht maar ook berichten toevoegen aan favorieten. De navigatie op Android en iOS is in de toolbar geplaatst, en op Android bovenin het scherm. Op iOS is dit onderin. Daarnaast beschikt Android over een zoekfunctie in het beginscherm, maar niet op iOS. Via een swipe gesture
waarmee je getagde muziek van je vrienden kan zien. Daarnaast kan je populaire muziek in je eigen land bekijken. Waar op WP7 het een basic muziek herkennings applicatie is, is het een sociale app op Android en iOS. Daarnaast zijn de drie UI verschillend, zowel qua ontwerp als qua indeling. Ook verschillen de functies van elkaar. De richtlijnen van het OS zijn gevolgd om zo weinig af te wijken van wat de gebruiker gewend is.
is het mogelijk om meerdere opties te zien voor een bericht. De interface op WP7 verschilt veel met die van de andere twee platformen. In deze versie van de applicatie houden de ontwerpers zich sterk aan de richtlijnen die Microsoft voorschrijft. Deze versie van de applicatie maakt gebruik van de panoramaview. Hierin is een list verwerkt. Door horizontaal te scrollen kom je bij andere onderdelen. Hierdoor is het niet mogelijk om een swipe gesture in te zetten om meerdere functies weer te geven. Daardoor moet er op het bericht getapt worden. Dit zorgt ervoor dat de gebruiker extra tijd kwijt is vanwege het inladen van een
Spotify Spotify is een muziek service waarmee het mogelijk is om muziek via streaming te luisteren. De drie versies voor de drie OS’s verschillen aanzienlijk. Op Android en iOS wordt wel gebruik gemaakt van een tab bar onderin het scherm. Hierin staan echter niet dezelfde functies. Op WP7 maakt deze applicatie gebruik van de richtlijn om een
nieuwe pagina.
panorama view te gebruiken. Via deze functie is het mogelijk om te navigeren door
Shazam
aangepast aan het OS van het device. De applicatie bevat op ieder OS dezelfde
Shazam is een applicatie waarmee door middel van de microfoon muzieknummers
de applicatie. Spotify maakt dus per applicatie gebruik van een eigen interface, functies, alleen zijn deze aan wat de gebruiker gewend is van het OS aangepast.
worden herkend. Zo kan de gebruiker zien welk nummer er wordt afgespeeld.
Wat op ieder OS hetzelfde is, is dat je de swipe gesture kan gebruiken om het
De applicatie van Shazam bevat op WP7 veel minder functies dan de versie voor
Deze zouden in principe weggelaten kunnen worden waardoor meer ruimte voor
Android en iOS. De iOS applicatie heeft de meeste functies. Op WP7 is het alleen mogelijk om nummers te herkennen en je eigen geschiedenis te zien van getagde
volgende of vorige nummer af te spelen. De buttons hiervoor zijn ook aanwezig. content over blijft.
130
APPENDIX
APPENDIX
APPENDIX II: WIREFRAMES
Homescreen
Door middel van de hier genoemde wireframes zijn de functies uit het concept
De applicatie start met dit scherm totdat
omgezet naar interacties. Op deze manier ontstaat er een beeld hoe de applicatie moet gaan aanvoelen en wat hij aan de gebruiker biedt. Bij ieder scherm zit een beschrijving en zijn de functies en interacties uitgelicht. Log in De applicatie start met dit scherm totdat er is ingelogd. Tenzij de gebruiker uitlogt, zal het scherm daarna worden overgeslagen. Het is mogelijk om met Facebook of met een e-mail in te loggen. Indien er met een e-mail wordt ingelogd is een registratieprocedure noodzakelijk. 1. Logo van de applicatie
er is ingelogd. Tenzij de gebruiker uitlogt, zal het scherm daarna worden overgeslagen. Het is mogelijk om met Facebook of met een e-mail in te loggen. Indien er met een e-mail wordt ingelogd is een registratieprocedure noodzakelijk. 1. Logo van de applicatie 2. Inlog button voor Facebook 3. invoerveld e-mail, e-mail toetsenbord 4. wachtwoord, verborgen tekst 5. Registreer button 6. Login button met e-mail adres
2. Inlog button voor Facebook 3. invoerveld e-mail, e-mail toetsenbord 4. wachtwoord, verborgen tekst 5. Registreer button 6. Login button met e-mail adres
Settings Via dit scherm kunnen gebruikers uitloggen of inloggen. 1. Software back button 2. Naam en afbeelding (indien met Facebook) ingelogde persoon 3. Button voor het uitloggen van Facebook indien ingelogd
131
132
APPENDIX
APPENDIX
Formulier lijst maken/bewerken
3. Overzicht
Dit formulier bestaat uit drie stappen,
1.Geselecteerde kleur voor de lijst
namelijk het
2. Ingevoerde titel van de lijst
invoeren van de eigenschappen van de
3. Alfabetisch overzicht van toegevoegde
lijst, het toevoegen van vrienden aan de
vrienden, deze kunnen hier worden
lijst en een overzicht van de gemaakte
verwijderd
keuzes. Navigeren is mogelijk met de secundaire navigatie, maar eveneens met
4. Gereed knop die wordt gebruikt om te bevestigen
behulp van swipe gesture. 1. Details
Balans
1. Secundaire navigatie, tekstueel tab
Dit scherm geeft de gebruiker een
menu 2. Invoerveld voor de naam van de lijst normaal toetsenbord 3. Selectie voor de keuze van een kleur.
weergave van de balans voor een lijst. Het is een overzicht van wat iedereen nog ontvangt of moet betalen. De hoofdgebruiker kan voor zijn account zien wie hem nog moet betalen of wie hij
2. Vrienden
moet terugbetalen.
1.E-mail invoerveld, e-mail toetsenbord
1.Titel van de lijst
2. Zoekveld Live-search
2. Details voor de hoofdgebruiker,
3. Alfabetisch voornaam geordende Facebookvrienden, afbeelding en naam
uitklapbaar door tap, gebruiker krijgt een terugbetaaloverzicht voor zijn uitgave 3. Details van vrienden 4. Toolbar 5. Button om de lijst te bewerken 6. Button om uitgave toe te voegen
133
134
APPENDIX
APPENDIX
Uitgaven
Valuta menu
In dit scherm ziet de gebruiker de
Dit scherm wordt bereikt als men een
uitgaven die er zijn geweest.
vreemde valuta aan uitgaven toevoegt.
Eigen uitgaven zijn tapable, hierdoor
Het is een spinner waar de gebruiker
schuift er een actie menu uit de
doorheen kan flicken. De valuta in het
uitgave met twee opties: bewerken of
midden wordt geselecteerd. De valuta’s
verwijderen.
zijn alfabetisch geordend.
1.Categorie icoon
1. Naam valuta
2. Tapable indien eigen uitgave
2. Tapable, wanneer een valuta getapt
3. Optionele omschrijving van de uitgave
wordt, wordt deze geselecteerd en verschuift deze naar het midden van
Kosten Dit scherm is om uitgave toe te voegen.
het scherm 3. Symbool van de valuta
De verplichte items kunnen hier worden ingevoerd zoals bedrag en categorie.
Vrienden selecteren
De optionele acties zijn toegevoegd in
Via dit menu kan de gebruiker vrienden
de toolbar, waaronder: valuta, vrienden
toevoegen waarmee de uitgave is
selecteren en omschrijving bijvoegen.
gedeeld. Deze lijst bestaat uit vrienden
1. Bedrag input met de calculator
die deelnemen aan de lijst waar de
2. Categorie keuze aan de hand van
uitgave aan wordt toegevoegd. Standaard
iconen
is iedereen geselecteerd, door te tappen
3.Calculator
wordt deze selectie ongedaan gemaakt.
4. Button om te wissen, herstellen
1. Afbeelding van de persoon
5. Button om de uitgave te bevestigen
2. Tapable, naam van de gebruiker
6. Button valuta menu
3. Tapable, naam van deelnemende
7. Button vrienden menu 8. Button omschrijving menu
vriend
135
136
APPENDIX Omschrijving toevoegen Via dit scherm kunnen gebruikers een omschrijving toevoegen aan de uitgave. Hier is alleen tekst invoer mogelijk. 1. Input veld 2. Toetsenbord 3. Button om de omschrijving te bevestigen
Afreken overzicht Dit is een overzicht wanneer er is gekozen om een lijst af te rekenen. Deze lijst bevat dan details over wie aan wie moet betalen en wat het totaal bedrag per persoon is. 1. Naam van de gebruiker 2. Saldo + of 3. Details wie betaalt moet worden of wie moet betalen
138
APPENDIX
APPENDIX
APPENDIX III: VOORBEELDEN VAN CROSS OS APPLICATIES
Testopstelling
Doelstelling
Voor de gebruikerstesten zullen er scenario’s uitgeschreven worden om de
De doelstelling van dit onderzoek is om erachter te komen of het mogelijk is om een gegeven applicatie zo te implementeren, dat de usability en user experience vergelijkbare resultaten oplevert, onafhankelijk van het OS. Dit gebeurt aan de hand van een gebruikersonderzoek. Dit gebruikersonderzoek is voornamelijk
gebruikers op weg te helpen. De scenario’s zijn opgebouwd uit taken die in relatie staan met de resultaten van mijn case study. Aan de hand van de scenario’s moeten de testpersonen door het product navigeren.
gericht op UI elementen. Dit is een aspect van de UX.
Dit navigeren zal op Android en iPhone op hun eigen device gebeuren. WP7
De uitkomsten van dit onderzoek leiden tot conclusies en aanbevelingen op
interface zullen bedienen op een ander mobiel device. De reden hiervan is om de
basis van hoe het te ontwikkelen product moet worden vormgegeven. Het moet duidelijkheid geven in het cross-os vormgeven van een app. Testpersonen Het onderzoek zal worden gedaan aan de hand van het product Splittr. Het onderzoek zal op ieder OS plaatsvinden, iOS, Android en WP7. Op ieder OS zullen er drie personen zijn die deelnemen aan het onderzoek (Krug, 2009). Voor het gehele onderzoek zal het panel negen leden omvatten. Deze leden zullen de test uitvoeren op hun eigen OS. Dit om inzicht te krijgen in
ondersteunt niet alle functies van het prototype, waardoor deze gebruikers de mobiele experience te laten ervaren aan de testpersoon. Tijdens het onderzoek zal er worden geobserveerd hoe de gebruikers tijdens het gebruik van de UI reageren. Afsluitend volgt een vragenlijst waarop de onderzoekspersonen kunnen aangeven wat ze van specifieke elementen vonden en hoe de ervaringen ervan waren. Op een psychofysische schaal worden de antwoorden gegeven om deze later te verwerken in visualisaties. Voorafgaand aan het onderzoek is de ideale uitkomst van het onderzoek bepaald, dit ideaal is eveneens visueel inzichtelijk gemaakt.
hetgeen de gebruikers gewend zijn. En ze te testen in hun gewende omgeving. Analyse De resultaten uit het onderzoek worden verzameld, gebundeld en visueel inzichtelijk gemaakt. Hierna worden de onderzoeksresultaten vergeleken met de ideale situatie. Hieruit volgt een analyse van de resultaten, hierin worden de eventuele verschillen besproken en word er een verklaring gegeven. Indien nodig wordt er aan de hand van het resultaat het product aangepast. Deze aanpassingen worden eveneens onderzocht d.m.v. hetzelfde gebruikersonderzoek.
139
140
APPENDIX
APPENDIX
Testscript
verwerken in mijn scriptie. Door hieronder uw initialen te schrijven gaat u hiermee
Voordat we met de testsessie beginnen, wil ik u hierbij informeren over de manier
akkoord.
waarop er wordt getest. Initialen ________ geteste OS U heeft waarschijnlijk al enig idee wat we zometeen gaan doen, maar ik zal het
________
hierbij nog even kort uitleggen. Het is de bedoeling dat u zo de Splittr applicatie gaat gebruiken. Momenteel werk ik aan deze applicatie. Door dit onderzoek kom ik
Dit script is gebaseerd op het test script van Steve Krug uit Rocket Surgery Made
erachter of het werkt zoals ik voor ogen heb. Deze sessie zal ongeveer een kwartier
Easy
duren. Hierbij loopt u ten eerste door een drietal scenario’s die u kennis laten maken met de applicatie. Hierdoor krijgt u een beeld van wat u met de applicatie
Scenario’s
kan en welke mogelijkheden er zijn. Hierna volgt een vragenlijst over hoe u de applicatie heeft ervaren.
Er zijn drie scenario opdrachten die u moet doorlopen. Deze staan hieronder uitgeschreven. Na deze kennismaking met de applicatie verzoek ik u om de
Het eerste wat duidelijk moet zijn is dat we de applicatie testen en niet u! U kunt
vragenlijst in te vullen.
niets fout doen. Het is vandaag waarschijnlijk de enige plek waar u zich geen zorgen hoeft te maken over het maken van fouten.
Scenario 1 Je gaat de app voor de eerste keer gebruiken, het doel van het eerste gebruik is het
Tijdens het gebruik van de applicatie verzoek ik u om zoveel mogelijk hardop na
aanmaken van een vrienden lijst. Hiervoor moet je inloggen in de app. Als je dit
te denken. Vertel waar u naar kijkt en wat u erbij denkt. Wees eerlijk, dit onderzoek
hebt gedaan, is het aan jou de taak om een lijst aan te maken. Dit formulier moet je
is bedoeld om de applicatie te verbeteren, en daarvoor hebben we het meest aan
op een voor jou logische manier doorlopen.
eerlijke reacties. Scenario 2 Wanneer u met een vraag zit, stel deze gerust. Ik ben alleen niet in staat om altijd
Nadat je een lijst heb toegevoegd is het mogelijk om kosten toe te voegen. Aan
antwoord te geven, aangezien we willen weten hoe de applicatie wordt uitgevoerd
de lijst La Plagne moet je een uitgave toevoegen, inclusief drie vrienden die mee
zonder hulp. Heeft u na afloop nog vragen, dan zal ik mijn best doen deze te
hebben gedaan aan de kosten.
beantwoorden. Met uw toestemming wil ik audio opnemen van wat er tijdens het
Nu je aan deze lijst kosten hebt toegevoegd wil je hetzelfde doen voor de lijst van
gebruik van de applicatie wordt gezegd. Tevens wil ik beeldmateriaal om dit te
de EK finale 2012 zonder het start scherm te verlaten.
141
142
APPENDIX
143
APPENDIX
Scenario 3
Ik begrijp hoe ik de app moet bedienen.
Nu is het de opdracht om je eigen balans te weten te komen voor de lijst van La
Volledig mee oneens 1
2
3
4
5 Volledig mee eens
Plange. Wie moet jij of wie moet jou terugbetalen? Hierna moet je aan deze lijst een persoon toevoegen.
De manier van navigatie is voor mij niet vreemd. Volledig mee oneens 1
2
3
4
5 Volledig mee eens
Vragenlijst Het is duidelijk wat er gebeurt als ik op een button druk. De applicatie start met een launch scherm? Volledig mee oneens 1
2
3
Volledig mee oneens 1 4
2
3
4
5 Volledig mee eens
5 Volledig mee eens Het gebruik van gestures om te navigeren vind ik prettig.
Het gebruik van de app is prettig. Volledig mee oneens 1
2
Volledig mee oneens 1 3
4
2
3
4
5 Volledig mee eens
5 Volledig mee eens Het settings icon staat rechts boven in het scherm?
De app sluit aan op mijn verwachtingen. Volledig mee oneens 1
2
3
Volledig mee oneens 1 4
2
3
4
5 Volledig mee eens
5 Volledig mee eens Een tutorial waarin de gestures worden uitgelegd zou ik handig vinden.
De functies van de app zijn duidelijk. Volledig mee oneens 1
2
3
Volledig mee oneens 1 4
2
3
4
5 Volledig mee eens
5 Volledig mee eens De manier waarop ik de app moet bedienen is duidelijk.
In de app zitten herkenbare elementen die ik eerder heb gezien, waardoor ik weet hoe het werkt. Volledig mee oneens 1
2
3
4
5 Volledig mee eens
Volledig mee oneens 1
2
3
4
5 Volledig mee eens
