Het ontwikkelen van één mobiele user interface, met een user experience die gelijk is op meerdere besturingsystemen.

Transcriptie

1 Het ontwikkelen van één mobiele user interface, met een user experience die gelijk is op meerdere besturingsystemen. Deze scriptie is geschreven door Pepijn Hemelaar

2 COLOFON Auteur Studentnummer Opleidingsinstituut Major Minor Afstudeerjaar Pepijn Hemelaar Hogeschool Rotterdam Communicatie & Multimedia Design Interface & Experience Design 2012 And why do we fall, Bruce? So we can learn to pick ourselves up... Thomas Wayne Afstudeerbegeleiders HR Stagebegeleiders Appstrakt Rob van der Willigen Ellen van Gent-Spoel 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.

3 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

4 SAMENVATTING Deze scriptie gaat over het cross_os ontwerpen van een mobiele user interface (UI) met een gelijke user experience (UX). Om dit in kaart te brengen zijn eerst de kenmerken van mobiele apparaten en de 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 bewerkstelligen van een positieve UX. Daarnaast wordt de UX van applicaties bepaald door het mentale model van gebruikers. Het is voor ontwerpers van belang om erachter komen welke content meerwaarde aan de gebruiker biedt en hoe het mentale model van de gebruikers in elkaar steekt. Als ontwerper heb je daarnaast nog te maken met de eigenschappen van het systeem. De verschillende UI richtlijnen van de OS s zijn onderzocht en vergeleken 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. Door van de standaard UI elementen van OS s af te wijken ontstaat er een leermoment voor gebruikers, waardoor het gebruik ervan wordt beïnvloed. Door het gebruik van patterns is het voor ontwerpers mogelijk om de leermomenten van gebruikers te beperken. Daarnaast besteedt dit onderzoek aandacht aan de ontwikkelingen op het gebied van UI. Door technische ontwikkelingen is het gebruik van natural user interfaces (NUI) voor gebruikers toegankelijker geworden. In dit onderzoek worden gestures belicht en bekeken wat voor meerwaarde ze het te bieden hebben voor gebruikers 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. Het onderzoek zal ingaan op de invloed van deze technologie op UI s en hoe deze ingezet kan worden om een meerwaarde aan gebruikers te bieden.

5 SUMMARY This thesis is about cross operating system (OS) user interface (UI) design with a similar user experience (UX). The first step was to explore the possibilities of mobile devices and the elements that are important for the mobile UX. This showed that in mobile applications the content is very important for reaching a positive UX. Beside this, the UX is influenced by the mental model of the user. To create value it is important for a designer to know the mental model of the user is build. 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 application. Patterns are a tool for designers to restrict these learning moments of users. 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 for users. During this research, users have been observed to see what value certain gestures add to the UX. As a designer you have to cope with the properties of a particular system. The different UI guidelines of the OS s are researched and compared. This learns which UI elements are cross-os usable without harming the UX. Recognition of an element is very important for any user. When elements are recognized, the use of an application is more simple and quicker. Finally, this thesis has its focus on speech assistants. This is the latest development in the UI department. The research is about the value that is created by this technology for the users and how it can be of value for the UX.

6 INHOUDSOPGAVE 1. Inleiding 1.1 Achtergrond informatie 1.2 Probleemstelling en onderzoeksvragen 1.3 Doelstelling 1.4 Verantwoording 1.5 Onderzoeksmethode 1.6 Conceptuele model 1.7 Beschouwende conclusie 1.8 Terminologie 1.8 Meta overzicht 2. Mobiele User Experience Design 2.1 Eigenschappen van mobile devices 2.2 Verschillende soorten applicaties 2.3 Kenmerken van de Mobiele User Experience 2.4 Framework voor mobiele user experience 2.5 Bevindingen Natural User Interface (NUI) 5.1 Gestures 5.2 Ontwikkeling van de Natural User Interfaces 5.3 Bevindingen 6. Van theorie naar de praktijk: Splittr 6.1 Conceptuele model 6.2 Doelgroep 6.3 Functionaliteit 6.4 Interactiestructuur 6.5 Bevindingen 7. Case study 7.1 Probleem 7.2 Analyse: inventarisatie van de bestaande praktijk 7.3 Resultaten 7.4 Conclusie Mobiele User Interfaces 3.1 Verschillende mobiele OS 3.2 Resoluties 3.3 OS specifieke navigatie 3.4 Cross OS applicaties 3.5 Custom UI s 3.6 Bevindingen 4. Patterns 4.1 Primaire Navigatie 4.2 Secundaire navigatie 4.3 Formulieren 4.4 Zoeken 4.5 Ontwikkeling van Patterns 4.6 Bevindingen Gebruikersonderzoek 8.1 Onderzoeksopzet 8.2 Resultaten 8.3 Conclusie/Aanpassingen 9. Discussie en Conclusie 9.1 Conclusie 9.2 aanbevelingen Bibliografie Appendix Appendix I: Voorbeelden van cross OS applicaties Appendix II: Wireframes Appendix III: Gebruikersonderzoek

7 1. INLEIDING 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.

8 14 INLEIDING INLEIDING 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 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 belangrijk dat de UI van de app voelt alsof het speciaal voor het specifieke device ontworpen is (Fahrenkrug,2011). 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? 2. Hoe kan een user interface designer voor de verschillende OS s en verschillende resoluties zijn UI ontwerp afstemmen op de UX 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 zijn. Dit leidt uiteindelijk tot een UI waarin de UX in verweven is. De UI behoort tot de laatste stap in het UX design (Garrett, 2010) Het is voor bedrijven aantrekkelijk een UI te ontwerpen die toepasbaar is voor 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 mogelijke groep benaderen met hun apps zonder al te veel geld eraan te besteden. Helaas voor ontwikkelaars is de UI van applicaties niet zomaar overdraagbaar van de ene op de andere OS s, gekeken naar de UX (Fahrenkrug, 2011). Om deze twee hoofdonderzoeksvragen te kunnen beantwoorden zijn de deelvragen binnen dit onderzoek opgesteld: Hoe verschilt mobiele UX van niet mobiele UX? Welke elementen zijn belangrijk voor de mobiele UX? Welke relatie is er tussen de UX en de UI van een applicatie? Welke os specifieke verschillen zijn er in mobiele UI s? Welke elementen zijn cross-os inzetbaar? Welke ontwikkelingen zijn er op het gebied van mobiele UI s? 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.

9 16 INLEIDING INLEIDING DOELSTELLING Met dit onderzoek wil ik aantonen of het mogelijk is om een gelijkwaardige applicatie UI te ontwerpen ongeacht het OS waar deze op draait. 1.4 VERANTWOORDING Dit onderzoek richt zich op de ontwikkelingen van UI s met betrekking tot de UX. Er komen steeds meer applicaties die op meerder OS s aangeboden worden. Vaak worden deze applicaties direct gekopieerd van het ene naar het andere OS, zonder daarbij rekening te houden met de gebruiksvriendelijkheid. Aangezien ieder OS zijn eigen opbouw van de UI en interacties heeft, dient hier als vanzelfsprekend naar gekeken te worden. Als de UI afwijkt van wat de gebruiker gewend is tast dit de ervaring met het product aan (Ginsburg, 2010; Fahrenkrug,2011). 1.5 ONDERZOEKSMETHODE Allereerst is er binnen dit onderzoek desk research verricht naar de onderstaande onderwerpen. Daarnaast is er een diepte analyse van de mobiele UX uitgevoerd en is er onderzoek naar de elementen van de mobiele UX. Ook zijn de verschillende OS s onderzocht, evenals de verschillen in de UI en wat deze voor de gebruiker betekenen. Vervolgens heeft er een case study plaatsgevonden. Er is een analyse van Appstrakt gedaan om te kijken hoe zij omgaan met het cross OS ontwerpen van UI s van applicaties, en welke knelpunten ze hierbij ervaren. Ook heeft een experiment 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.

10 18 INLEIDING INLEIDING 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, centered model van Donald A. Norman (fig. 1). Er zijn drie groepen van belang is het mogelijk om een cross-os applicatie te ontwikkelen met een gelijke binnen dit model: de gebruikers, het systeem en de ontwerper. UX en UI. De applicatie Splittr die uit dit onderzoek is ontstaan geeft gelijke figuur 1, 3 mentale modellen die belangrijk zijn bij het ontwikkelen van mobiele onderzoeksresultaten weer op drie verschillende platformen. Hierbij is er getest op applicaties een aantal elementen die uit de literatuur is gekomen. 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.

11 20 INLEIDING INLEIDING TERMINOLOGIE NATURAL USER INTERFACE (NUI) AFFORDANCE 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. zintuigelijke karakteristieken van een object intuïtief zijn functionaliteit en gebruik impliceren. OPERATING SYSTEM (OS) Het systeem waarvan een product gebruik maakt. ANDROID Het besturingssysteem dat is ontwikkeld door Google, gebaseerd op het OpenSource platform Linux. GEBRUIKER 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. PATTERNS Standaarden voor elementen waaruit een user interface is opgebouwd, deze elementen hebben succes geboekt ten opzichte van de user experience. USER EXPERIENCE (UX) 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. ios Het besturingssysteem dat Apple aanbiedt op hun tablets en telefoons.

12 22 INLEIDING INLEIDING META OVERZICHT 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 Dit is het onderdeel dat de volledige mobiele UX behandelt. Dit hoofdstuk wordt daarom verdeeld in een aantal paragrafen: In een paragraaf zullen de kenmerken die van belang zijn bij de ontwikkeling van een mobiele UX aan bod komen. Dit zijn specifieke kenmerken voor het ontwerpen van mobiele applicaties. Aan de hand van de kenmerken van mobile devices en de UX zoals die beschreven zijn voor websites wordt er een mobiele UX beschreven. Door een aantal UX modellen te vergelijken, ontstaat een model dat de kenmerken van een mobiele UX weergeeft. HOOFDSTUK 3 - MOBIELE USER INTERFACE In dit hoodstuk wordt de relatie gelegd tussen de UI en de UX. Daarbij worden er drie OS s besproken, namelijk: ios, Android en Windows phone 7 (WP7). De onderlinge verschillen tussen deze drie OS s worden hier beschreven. In dit hoofdstuk staat de UI centraal, maar zal de relatie met de UX ook uitgebreid aan bod komen. In dit hoofdstuk zullen de verschillen in navigatie, gestures, resoluties en interactiestructuren worden beschreven. Daarnaast wordt er gekeken naar drie apps die op al de drie de OS s zijn gelanceerd: Shazam, Twitter en Spotify. Hier aan gelinkt zit het onderdeel dat een inzicht geeft in apps die een eigen UI hebben ontwikkeld zonder de specifieke structuur te volgen van de specifieke OS. HOOFDSTUK 5 - NATURAL USER INTERFACE In dit hoofdstuk komen de ontwikkelingen van natural user interfaces (NUI) aan bod. Dit is een onderwerp in relatie van de NUI tot de UX. Hierbij wordt er gekeken naar de gebruiksvriendelijkheid en de inzetbaarheid binnen een UI. Gestures en spraakbesturing worden in dit hoofdstuk eveneens behandeld. HOOFDSTUK 6 - VAN THEORIE NAAR SPLITTR In dit hoofdstuk zullen de onderzochte theorieën worden toegepast op de praktijk. Er wordt besproken welke keuzes er zijn gemaakt bij het maken van de cross-os applicatie Splittr. HOOFDSTUK 7 - CASE STUDY In dit hoofdstuk worden de onderwerpen beschreven waarover Appstrakt onderzoek wil doen om meer te weten te komen over cross- OS ontwerpen van applicaties. Met de resultaten van dit onderzoek zal het gebruikersonderzoek worden gevormd. HOOFDSTUK 8 - GEBRUIKERSONDERZOEK In dit hoofdstuk wordt het gebruikersonderzoek dat is gehouden aan de hand van Splittr en de case study besproken. De resultaten worden in dit hoofdstuk geanalyseerd. 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.

13 2. MOBIELE USER EXPERIENCE 25 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.

14 26 MOBIELE UX MOBIELE UX EIGENSCHAPPEN VAN MOBILE DEVICES Door de bovengenoemde ontwikkeling is het interessant om te kijken hoe ontwerpers de user experiences voor de desktop en laptop kunnen overbrengen naar mobile devices, aangezien mobile devices anders worden ingericht. Een 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 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. Voor de gebruikerservaring is dit een groot voordeel omdat de ruimte gebruikt kan worden voor wat de gebruiker echt nodig heeft. De informatie en functies die op het scherm worden weergegeven moeten daarom voor de gebruiker de 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 CONTEXT Leen je telefoon maar eens uit aan je buurman Niet fijn, toch? Je mobiel is het meest intieme medium dat bestaat. Andrew Grill 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

15 28 MOBIELE UX MOBIELE UX 29 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).

16 30 MOBIELE UX MOBIELE UX FUNCTIES 2.2 VERSCHILLENDE SOORTEN APPLICATIES Mobile devices hebben het voordeel dat ze overal en altijd benaderd kunnen worden. Dit levert kansen op voor gebruikers. Wanneer deze kansen samen komen met de technische mogelijkheden waarover mobile devices tegenwoordig 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. Op mobile devices kunnen gebruikers op verschillende manieren worden benaderd. De keuze voor het aanbieden van een bepaalde vorm hangt af van de behoefte die de gebruikers hebben 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.

17 32 MOBIELE UX MOBIELE UX WEB APPS HYBRID APPS Web apps zijn applicaties die gebruik maken van de browser waarover mobile devices beschikken. Er is maar een code nodig, ze maken namelijk gebruik van web technologie (HTML/ CSS/ Javascript). Dit werkt in iedere mobiele browser en 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 zijn, worden ze sneller dan native apps beschikbaar voor de gebruikers. Hetzelfde geldt voor updates, die gedaan worden ten behoeven van de applicatie. Om een applicatie toe te voegen aan het home screen is echter een actie door de gebruiker 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). Hybrid apps zijn een combinatie van native- en web apps. De content wordt ingeladen door gebruik te maken van web technologie, zoals die ook in web apps aanwezig is. De interface die wordt gebruikt, is offline te bereiken. Tevens zijn alle mogelijkheden aan te sturen zoals push notificaties, camera en accelerometer. Doordat de content is geschreven in webtechnologie en de interface in native code geschreven dient te worden, is ontwikkeling op meerdere OS s mogelijk. Het is wel afhankelijk van de prestaties die de mobiele browser kan bieden. Hybrid applicaties 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) 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).

18 34 MOBIELE UX MOBIELE UX KENMERKEN VAN DE MOBIELE USER EXPERIENCE 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 een aantal eigenschappen waarmee rekening moet worden gehouden bij het gebruiker. Door de beperkte ruimte waarover je beschikt, is het belangrijk te ontwikkelen van een UX. Volgens Kelway is de UX opgebouwd uit zes cirkels. onderzoeken welke functies en content de gebruiker verwacht. Als ontwerper kan Deze cirkels bestaan uit: Persuasion, Behaviour, Visual Design, Usabillity, je namelijk een applicatie uitgeven, maar als je niet hebt gekeken naar wat de Interaction en Content (Kelway, 2012). Garrett heeft vijf elementen over UX gebruiker wil dan zal de applicatie niet veel worden gebruikt. Als de applicatie design beschreven. Volgens hem bouw je een UX op uit de elementen: Surface, daarna verbeterd wordt dan zijn de gebruikers hun vertrouwen er in de meeste Skeleton, Structure, Scope en Strategy (Garrett, 2010). Deze onderdelen zorgen gevallen al in verloren. Daarom is het noodzakelijk om als ontwerper vanaf het ervoor dat de UX zo gebruiksvriendelijk mogelijk is. Door deze kaders te begin goed na te denken over wat je de gebruiker wilt bieden (Clark, 2010). onderzoeken en theorieën over mobile devices te bestuderen zal er een kader ontstaan voor UI ontwerpers met belangrijkste punten voor een mobiele user Het is bij het vormgeven van de Mobiele UX belangrijk te weten wat de doelen experience. 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 PRESTATIE VAN DE APPLICATIES 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 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 hoofddoel, daarnaast moeten ze snel en betrouwbaar in gebruik zijn. Alleen op deze interessante content is, kom je te weten door bijvoorbeeld een gebruikersonderzoek 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 dat een applicatie er in eerste instantie vooral goed uit moet zien. In de praktijk persona s en scenario s. blijkt dit alleen voor de eerste indruk belangrijk. Op de lange termijn gaat het om de prestaties van een applicatie. Gebruikers verwachten van mobiele applicaties dat Op mobile devices is navigatie ondergeschikt aan content. Om een optimale 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 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 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.

19 36 MOBIELE UX MOBIELE UX 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, kan je een hierop aansluitende applicatie lanceren (Kelway, 2012) 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). figuur 4 - Opbouw van het mentale model van gebruikers 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

20 38 MOBIELE UX MOBIELE UX 39 zullen in hoofdstuk 4 worden behandeld. De meeste gebruikers zijn al gewend aan patterns (Kelway, 2012). Als een applicatie het mentale model van de gebruiker volgt, zorgt dit ervoor dat de gebruiker weet wat hij met de applicatie kan en hoe 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 GEBRUIKSVRIENDELIJKHEID Cognitieve functies richten zich op het denken en onthouden van elementen. Dit zorgt voor de keuzes die gemaakt worden om een bepaald doel te bereiken. Hierbij is het belangrijk dat een product of dienst voldoet aan de verwachtingen van een gebruiker. Een mobiele applicatie moet worden voorzien van duidelijke en een beperkt behapbaar aantal keuzemogelijkheden, zodat de gebruiker zijn taak kan afronden zonder zijn focus te verliezen. Voor de gebruiker is het optimaal als hij snel de juiste keuze kan maken zonder dat dit al te veel moeite kost. Applicaties worden vaak kort gebruikt. De ideale situatie zou zijn als een gebruiker binnen twee taps zijn doel heeft bereikt. Hierbij is het belangrijk om het visueel eenvoudig en overzichtelijk te houden (Clark, 2010). De manier waarop een gebruiker keuzes maakt is voor ontwerpers van essentieel belang. Volgens Miller is het mogelijk om tussen de vijf en de negen delen informatie te reproduceren. Alan Baddeley ontdekte dat deze regel niet is 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). Als ontwerper is het belangrijk om herkenbare en concrete iconen te gebruiken. In een onbekende omgeving zijn gebruikers op zoek naar herkenbare elementen waar ze eerder al ervaring mee hebben gehad. Voor de herkenbaarheid van sommige elementen is het dan ook niet nodig om het wiel opnieuw uit te vinden. Bij het icoon voor een winkelwagen bijvoorbeeld, hoeft geen tekstlabel te worden gevoegd, omdat het zo al herkenbaar genoeg is voor mensen (Krug, 2005). Herkenbaarheid heeft ook betrekking op patronen (patterns). Patterns worden gebruikt om door gebruik te maken van soortgelijke oplossingen verschillende ontwerpproblemen op te lossen. Gebruikers raken gewend aan patterns en weten hoe deze elementen zich gedragen. De voorspelbaarheid van deze elementen is groot. Patterns kunnen verschillen in uiterlijk, maar qua gedrag zijn ze vergelijkbaar. In hoofdstuk 4 worden patterns en het gebruik verder behandeld.

21 40 MOBIELE UX MOBIELE UX 41 Samenvattend, bij het creëren van een mobiele UX is het van belang om je gebruiker te leren kennen. Het is belangrijk te weten hoe de gebruiker zijn doel bereikt, wat hij gewend is, wat zijn verwachtingen zijn en hoe hij omgaat met 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 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 informatie zoeken of het nieuws bekijken in een drukke metro. In dergelijke situaties krijgt de applicatie niet de volle aandacht van de gebruiker. Wroblewski noemt dit ook wel het one eyeball and one thumb pattern (Wroblewski, 2011). Dit wil zeggen dat de gebruiker het device vaak in een hand heeft en het met de duim bedient, terwijl de gebruiker in veel situaties maar gedeeltelijk zijn aandacht op de het mobiele device gericht heeft. Dit principe zorgt ervoor dat ontwerpers voor eenvoudige en herkenbare elementen moeten kiezen, zodat het gebruik in allerlei situaties zonder problemen verloopt. Voor het bewerkstelligen van een mobiele UX is eenvoud in design belangrijk. De interactie tussen elementen kan door een aantal factoren worden bepaald, namelijk: de herkenbaarheid van de functie, de plaatsing en de grootte van interactie elementen. Affordance 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 hoe het gebruikt moet worden. Dit kan door een tekstuele link aan de structuur en door het gevoel van een fysieke button aan de gebruiker mee te geven. Het geven van de juiste visuele signalen is belangrijk voor het overzicht en gebruik van een 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. Controls De mobile devices van tegenwoordig maken steeds meer gebruik van touch screens. Hoewel sommige mobile devices nog gebruik maken van fysieke knoppen, zal het overgrote deel van de interactie gebeuren via het scherm. Mobile devices met touchscreen moeten gebruik maken van de juiste grootte en de juiste affordances, om zo gebruiksvriendelijk mogelijk te zijn. Te kleine buttons zorgen ervoor dat de gebruiker secuur moet zijn in het bedienen van de applicatie. Uit onderzoek blijkt dat het gemiddelde oppervlak van de top van je wijsvinger tussen de mm ligt. Dit is te vergelijken met pixels. Mobiele telefoons bedien je regelmatig met alleen je duim, deze heeft gemiddeld een groter oppervlak, gemiddeld 2,5 cm2. Dit komt neer op 72 pixels. Vanwege de ruimte op het scherm is het makkelijker om hiermee rekening te houden op tablet devices, dan op mobiele telefoons. 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

22 42 MOBIELE UX MOBIELE UX 43 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 figuur 5 - Minimale grootte touch buttons Bij de plaatsing van de knoppen moet rekening worden gehouden met het bereik van onze vingers. Als de gebruiker zijn telefoon in een hand houdt gebruikt hij waarschijnlijk zijn duim om deze te bedienen. Het bereik van de duim is beperkt (fig. 6). Dat is ook de reden dat menu items en navigatie vaak onderin het scherm staan. Veel gebruikte buttons zullen links in het scherm staan, terwijl minder gebruikte items rechts zullen staan (Hinman,2012; Wroblewski,2011). Hierbij is er van uitgegaan dat iemand rechtshandig is. Voor linkshandigen geldt het omgekeerde. Het is mogelijk om voor linkshandigen alles te spiegelen. Een nadeel hiervan is dat 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 grotere last zijn dan het bedienen van een rechtshandige interface. Als ontwerper wil je dat gebruikers zo min mogelijk na hoeven denken als je het usability principe van Don t make me think van Steve Krug opvolgt (Krug, 2005). Omdat het grootste gedeelte van de bevolking rechtshandig is en daardoor de rechterduim gebruikt, mag je dit als normaal beschouwen. Hetzelfde geldt voor de plaatsing van iconen. Primaire iconen kunnen in het midden of onderin het scherm worden geplaatst en kunnen worden gerangschikt van links naar rechts. Buttons met als functie annuleren of verwijderen kunnen op een minder makkelijk te bereiken positie worden geplaatst, zoals linksboven of rechtsonder (Wroblewski, 2011).

23 44 MOBIELE UX MOBIELE UX 45 Aan de hand van de grootte en de bereikbaarheid van een button is het mogelijk om de tijd die het kost voor een gebruiker om een actie te voltooien in kaart te brengen. Fitts law is hier van toepassing. Hieraan is af te lezen of het gebruik van een button 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. 2.4 FRAMEWORK VOOR MOBIELE USER EXPERIENCE De Mobiele UX is uit de voorgaande onderdelen opgebouwd (fig. 8). Door deze onderdelen goed in te zetten kan er een positieve mobiele UX worden bewerkstelligd. Een mobiele UX moet er voor zorgen dat de gebruiker snel en 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 7 - Instagram Android UI figuur 8 - Mobiele UX framework

24 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 elementen zijn belangrijk voor de mobiele UX? Welke relatie is er tussen de UX en de UI van een applicatie? 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.

25 3. MOBIELE UI DESIGN 49 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.

26 50 MOBIELE UI DESIGN MOBIELE UI DESIGN 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 applicatie wordt aangeboden. De verschillende platforms bieden verschillende UI verkrijgbaar zijn. Dit zorgt ervoor dat een applicatie niet dezelfde ruimte heeft 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 verschilt, maar ook dat de navigatie in applicaties anders verloopt. Dit is de (Microsoft, 2012). ios maakt gebruik van vier verschillende resoluties. Twee belangrijkste reden dat applicaties niet een op een overdraagbaar zijn op andere van deze resoluties zijn bedoeld voor mobiele telefoons: deze zijn 320 pixels x OS s (Fahrenkrug,2011; Ginsburg, 2010). Ieder OS beschikt over eigenschappen 480 pixels voor iphone 3g en 3gs en 640 pixels x 960 pixels voor iphone 4 en 4s die invloed hebben op de opbouw en inhoud van een UI. Er zijn bijvoorbeeld (Apple, 2012). Schalen van het ontwerp is hierbij mogelijk, aangezien de laagste verschillende resoluties beschikbaar, waardoor de beschikbare ontwerpruimte resolutie de helft bedraagt van de hoogste resolutie. verschilt. Het navigeren door apps verschilt eveneens per OS. Dit is een essentieel 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 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. hoofdstuk maakt de OS verschillen inzichtelijk. Android heeft vier groepen resoluties ingedeeld, namelijk: xlarge (960dp x 720 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).

27 52 MOBIELE UI DESIGN MOBIELE UI DESIGN OS SPECIFIEKE NAVIGATIE ios 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) 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 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 WP7 Windows Phone 7 maakt gebruik van Panorama, een navigatie control die wordt 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). 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)

28 54 MOBIELE UI DESIGN MOBIELE UI DESIGN TAB BAR BEVESTIG EN ANNULEER BUTTONS De functie van de tab bar is op ieder OS gelijk, maar verschilt per OS in uiterlijk en positie. Op Android en WP7 staat deze bovenin, op ios is deze onderin het scherm gepositioneerd (fig. 10). ios pakt het qua UX momenteel het best aan. Onderin zijn 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 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. Formulieren op mobiele devices worden bevestigd met buttons. De soort en plaats van de buttons verschilt per OS. Zo zijn buttons op ios boven in de navigatie balk gepositioneerd en op Android onder de navigatiebalk boven in het scherm (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. figuur 10 - Tabs op ios (l), Android (m) en WP7 (r) figuur 11 - Buttons op ios (l), Android (m) en WP7 (r)

29 56 MOBIELE UI DESIGN MOBIELE UI DESIGN 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 hebben op de content van een scherm. Door middel van actionsheets is het applicaties moeten voorzien in hetzelfde doel, hetgeen niet betekent dat de UI 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 beantwoorden bij een mail. Deze action sheet moet wel in direct verband staan met op de verschillende OS s vergeleken. De applicaties die zijn gebruikt om dit de functie die de gebruiker verwacht. De toolbar staat bij ieder platform onderin te beschrijven zijn Twitter, Spotify en Shazam, dit onderdeel is opgenomen in het scherm gepositioneerd. Bij Android is het mogelijk om deze in de navigatiebalk appendix I. te plaatsen. ios heeft de mogelijkheid voor vijf functies. Bij Android is het 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 items in de toolbar. Bij zowel Android als WP7 is het mogelijk om meer items toe ze qua content en functies hetzelfde, maar zijn aangepast aan de richtlijnen van 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 dit icoon komt de gebruiker bij de overige functies. 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

30 58 MOBIELE UI DESIGN MOBIELE UI DESIGN 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 de richtlijnen voor de UI van het platform hoeft te voldoen. Het is belangrijker dat de UX positief wordt ervaren en dat alle functies en mogelijkheden duidelijk zijn. Uiteraard moet de navigatie duidelijk zijn en moet de gebruikelijke manier van navigeren toegepast kunnen worden. Bij Instagram is de gebruikelijke navigatie mogelijk via de navigatie via zowel hardware als software controls. figuur 12 - Instagram applicatie op ios (l) en Android (r) De simpele stijl die door WP7 wordt gehanteerd, zie je vaker terug op de andere OS s. Zo zijn de Clear (fig. 13) en Figure (fig. 14) beide ios applicaties, die beïnvloed 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.

31 60 MOBIELE UI DESIGN MOBIELE UI DESIGN 61 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. 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 eerder is behandeld. Hoe kleiner het scherm, hoe minder ruimte voor controls. 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 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.

32 4. PATTERNS 63 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

33 64 PATTERNS PATTERNS PRIMAIRE NAVIGATIE 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 namelijk een goede navigatie is een onzichtbare navigatie. Als de navigatie werkt. Het springboard wordt dan ook regelmatig gebruikt in applicaties. De niet wordt opgemerkt door de gebruiker, het gebruik intuïtief is en de gebruiker navigatie is opgebouwd uit een landingspagina waarnaar verder kan worden gemakkelijk bij zijn doel komt, is er sprake van een goede navigatie. genavigeerd (fig. 15). Het springboard maakt gebruik van het hub and spoke Er zijn vier eigenschappen van een applicatie waaraan gebruikers zich kunnen pattern. Hierbij zijn de verschillende onderdelen van elkaar geïsoleerd. Er kan ergeren: alleen via het springboard en terug naar het springboard worden genavigeerd het crashen van een applicatie; (Tidwell, 2011). Bij het ontwerp van een springboard is het gebruikelijk om een het ontbreken van belangrijke functies; grid indeling te gebruiken. Dit laatste is aan te raden maar niet noodzakelijk. Als een onduidelijke navigatie; men kijkt naar de UX, is het springboard niet de meest optimale optie aangezien de een verwarrend interface design gebruiker terug moet naar het beginscherm om verder te kunnen navigeren (Neil, 2012). De laatste twee punten kunnen ontwerpers oplossen door gebruik te maken van 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

34 66 PATTERNS PATTERNS LIST MENU Deze vorm van navigeren maakt eveneens gebruik van het hub and spoke pattern. Net zoals het springboard is deze cross OS inzetbaar. Het list menu (fig. 16) beschikt over dezelfde eigenschappen als het springboard pattern, de stijl is eveneens aanpasbaar (Neil, 2012). Een voorbeeld van een applicatie die met list items werkt, is de applicatie van de Nu.nl. Hierin ziet de gebruiker een overzicht van het laatste nieuws, zonder een verdere keuze te hoeven maken. Dit is een voordeel ten opzichte van het springboard, omdat het de gebruiker minder moeite kost om een overzicht te krijgen van het laatste nieuws. Een vaak terugkerende list stijl is een list die te bereiken is met een knop linksboven in het scherm, waardoor de huidige pagina verschuift naar rechts en plaats maakt voor de list view (fig. 17). Dit pattern maakt eveneens gebruik van het global navigation pattern. Dit pattern is door Path geïntroduceerd. Het voordeel van dit pattern ten op zichte van die van het springboard is dat de gebruiker direct toegang heeft tot content, en overal naar toe kan navigeren, ongeacht welke pagina wordt bezocht. Veel applicaties passen deze methode al 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

35 68 PATTERNS PATTERNS TABS Dit is een pattern dat aangepast dient te worden aan het OS. Zoals eerder is besproken verschilt de positie van de tabs. Desondanks bieden ze de gebruiker op ieder OS dezelfde functie aan. Het maakt navigeren aangenaam, doordat de content 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 WP SECUNDAIRE NAVIGATIE De primaire navigatie patterns kunnen ook moeiteloos ingezet worden als secundaire navigatie. Zo gebeurt het regelmatig dat de primaire navigatie uit een tabmenu bestaat en de secundaire navigatie uit een list menu. Er zijn echter 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) 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

36 70 PATTERNS PATTERNS IMAGE CARROUSEL De IMDB applicatie is een voorbeeld van een applicatie die gebruikt maakt van de image carrousel. Net zoals de receptenfunctie in Appie, de applicatie van Albert Heijn. Deze functie wordt gebruikt bij het weergeven van afbeeldingen en andere 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). 4.3 FORMULIEREN Er zijn verschillende redenen om een formulier in je applicatie te bouwen, zoals het inloggen in een applicatie, een account registreren en het afrekenen van een bestelling. Hiervoor zijn patterns beschreven. Desondanks bestaan er nog steeds 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 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

37 72 PATTERNS PATTERNS REGISTRATIE FORMULIER Bij het registreren in een mobiele applicatie is het verstandig om overbodige velden weg te laten. Hierbij kan worden gedacht aan de velden die nodig zijn om het adres of wachtwoord te bevestigen. Door het aantal input velden 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. 4.4 ZOEKEN Bij het vormgeven van zoekvelden gaat het om de vindbaarheid van de resultaten. Dit kan worden gerealiseerd door gebruik te maken van het explicit search pattern (fig. 23). Een nadeel hiervan is dat er op de zoek button moet worden gedrukt 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

38 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.

39 5. NATURAL USER INTERFACE 77 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.

40 78 NATURAL UI S NATURAL UI S GESTURES GESTURES OP DE VERSCHILLENDE OS S Mobiele telefoons zijn steeds vaker voorzien van een touchscreen. Over een paar jaar zullen de meeste apparaten voorzien zijn van een touchscreen (Norman, 2011). Het voordeel van een touch interface is dat het voor de gebruiker intuïtief aanvoelt. 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, Ieder OS heeft eigen richtlijnen op het gebied van gestures. De gestures die gebruikt worden zijn hetzelfde qua omschrijving, maar het kan voorkomen dat de actie per OS verschilt. Hier volgt een visueel overzicht van de gestures en de acties per platform. TAP: Dit gebeurt door de vinger snel op en neer te bewegen op het scherm. gebeurt via gestures. Deze gestures zijn nog niet gestandaardiseerd, waardoor ze qua functie per OS kunnen verschillen. Deze verschillen worden later in deze paragraaf behandeld. ios Dit is een gesture die wordt gebruik om op een control of link te drukken. WP7 Acties uitgevoerd op een item, in een proces met twee stappen, Gebruikers zullen bij het gebruik van een gestural interface een leercurve doorlopen om gewend te raken aan de bediening. Bij dit proces moet de gebruiker worden begeleidt door instructies of hints. Bij het uitvoeren van acties moet de gebruiker worden voorzien van feedback. Dit is van belang, omdat de gebaren niet 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). het stoppen met scrollen van een lijst. Android 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

41 80 NATURAL UI S NATURAL UI S 81 FLICK/ FLING/ SWIPE: Dit gebeurt door de vinger snel te slepen in de gewenste richting ios Dit is een gesture die wordt gebruikt om te scrollen of om een snelle verschuiving te veroorzaken. PINCH CLOSE PINCH: Het gebruik is hetzelfde als de Pinch open alleen dan andersom, dus de vingers uit elkaar en dan naar elkaar toe bewegen. ios Zoomt uit of sluit een element. WP7 Beweegt content. WP7 Zoomt uit Android Scrollt content, wordt gebruikt om te navigeren tussen bepaalde Android Zoomt uit schermen met dezelfde hiërarchie. 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 bewerkstelligd. TOUCH AND HOLD - PRESS 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 Met deze interactie is het mogelijk om een acties weer te geven, specifieke content te vergroten onder de vinger of specifieke ingebouwde acties van applicaties uit te voeren. WP7 Beweegt content door gebruik te maken van directe manipulatie, de content zit vast aan de vinger en volgt deze. WP7 Laat opties voor een specifiek item zien. Android Herschikt data in een bepaald scherm, of het beweegt data naar een container. Android Zorgt ervoor dat je items kan selecteren. Het is mogelijk om een of meerdere items te selecteren. PINCH OPEN SPREAD: 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 ios WP7 Android Zoomt in op content of opent een element. Zoomt in op content Zoomt in op content NADELEN VAN GESTURES Eén van de nadelen van een NUI is dat het mogelijk is dat er ongemerkt of 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).

42 82 NATURAL UI S NATURAL UI S ONTWIKKELING VAN DE NATURAL USER INTERFACES Bij het inzetten van NUI is het belangrijk dat we naar de basis gaan en nadenken hoe deze het best kan worden ingezet. Er moeten gebruiksvriendelijke richtlijnen komen die gebaseerd zijn op interactie principes. Vergelijkbaar met GUI moeten ontwerpers kijken naar de content die gebruikers willen en niet naar de OS UI richtlijnen (Hinman, 2012). Ontwerpers zijn nu in de fase waarin de NUI wordt ontwikkeld en gebruiksvriendelijk wordt gemaakt. De ontwikkeling van de GUI heeft ook even geduurd. Doordat mobiele devices steeds meer met touch en bewegingen worden bediend en de techniek toegankelijk is geworden, zal de ontwikkeling ervan snel verlopen. Good design should be innovative. Dieter Rams 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 aan je telefoon, zoals het inplannen van afspraken, het weer bekijken en notities maken. Doordat er steeds meer opties komen, voor meerdere telefoons, wordt spraakassistentie toegankelijker en zal het zich ook verder gaan ontwikkelen. De spraak assistenten hebben toegang tot een aantal functies van mobiele devices. Zo kunnen gebruikers bijvoorbeeld: vragen hoe het weer is voor een bepaalde locatie. 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 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).

43 84 NATURAL UI S NATURAL UI S BEPERKTE RUIMTE Bij het ontwerpen van mobiele aplicaties is het handig om zo min mogelijk ruimte te gebruiken voor buttons en soortgelijke navigatie elementen. Zoals eerder besproken is er beperkte ruimte beschikbaar op een mobiel device. Hierdoor moet 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. Clear is een applicatie waarmee je gemakkelijk een to do list kunt opstellen. Deze app is volledige te besturen met gestures. Het voordeel hiervan is dat de ruimte die het scherm biedt volledig te gebruiken is voor content en er geen controls hoeven 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

44 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.

45 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. 89 Make it work Tim Gunn

46 90 SPLITTR SPLITTR 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