Naam Eltjan Venema S1835335
Opleiding Master Informatiekunde
Faculteit der Letteren Rijksuniversiteit Groningen Scriptiebegeleider Dr. G.M. Welling
Examinator L.M.Bosveld-de Smet
Datum December 2013
Versie 1.0
Tafeltje dekje - de APP?
Voorwoord
Voor u ligt mijn scriptie in het kader van de Masterthese van de opleiding Informatiekunde aan de Rijksuniversiteit Groningen. Mijn interesse naar optimalisering van gebruiksvriendelijkheid van interfaces in de breedste zin van het woord is begonnen tijdens de Bachelor Informatiekunde; om precies te zijn bij de erg interessante en leuke cursus ‘Computer Mediated Communication’ gegeven door Leonie Bosveld-de Smet. Na het vele wisselen van afstudeeronderwerpen en moeilijke persoonlijke omstandigheden heb ik voor, tijdens en na de zomervakantie van 2013 hard gewerkt om eindelijk af te kunnen studeren.
Langs deze weg wil ik Dr. G. M. Welling bedanken voor de goede begeleiding van de scriptie. Daarnaast wil ik Grietje Smeets bedanken voor haar betrokkenheid bij de evaluatie van het prototype en de foto op het voorblad. Verder wil ik alle elf deelnemers bedanken die aan de gebruikerstest hebben meegedaan en de enquête hebben ingevuld. In het bijzonder wil ik vrienden en familie bedanken voor het begrip in de moeilijke tijden, waardoor het werken aan deze scriptie soms tijden stil lag.
Pagina | 3
Samenvatting
De digitalisering van de samenleving en toename van de levensverwachting van mensen draagt bij aan het aantal ouderen dat niet mee kan komen met de huidige technologie. Veelal is het niet het apparaat dat deze ouderen belemmert in het begrijpen of goed kunnen gebruiken ervan, maar de software. In het bijzonder zorgen de niet aangepaste visualisatie van informatie, de interactie en uit te voeren handelingen voor problemen bij ouderen.
In deze scriptie is onderzocht of een mobiele applicatie (app) op een smartphone of tablet geschikt is voor het digitaal bestellen van een maaltijd door thuiswonende ouderen. De gebruiksvriendelijkheid van de interface van de mobiele applicatie staat hierbij centraal. Er is een interactief prototype ontwikkeld, genaamd ‘Tafeltje-dek-je’. Dit prototype wordt vergeleken met een onderzoek waarbij onderzoekers een systeem gebruiken op basis van een normale mobiele telefoon met NFC-technologie en een menukaart voorzien van RFID-tags.
Inhoud
1 INLEIDING ... 6
1.1AANLEIDING EN CONTEXT ... 7
1.1.1 Grondlegging onderzoek ... 7
1.2DOELGROEP: OUDEREN EN MINDER VALIDEN ... 9
1.3PROBLEEMSTELLING ... 9 1.3.1 Probleemstelling geformuleerd ... 10 1.3.2 Onderzoeksvragen ... 10 1.4DOEL ... 10 1.5SCOPE ... 11 1.6OPBOUW ... 11 2 THEORETISCH KADER ... 12 2.1USABILITY ... 12 2.2INTERACTION DESIGN ... 13 2.2.1 Conceptual models... 14 2.3VERGELIJKEND ONDERZOEK ... 16
2.3.1 Achtergrond problemen ouderen ... 16
2.3.2 Touchscreens ... 17 2.3.3 Interactietechnieken touchscreens ... 18 2.3.4 Tekstgebruik ... 19 2.3.5 Tekstgrootte ... 19 2.3.6 Knopgrootte en marges ... 20 2.3.7 Iconen ... 21 2.3.8 Feedback ... 21 2.3.9 Kleurgebruik ... 23 2.3.10 Portret- en landschapstand ... 24 3 PROTOTYPE ... 25 3.1BASIS FUNCTIONALITEIT ... 25 3.1.1 Basis opmaak ... 25
3.2ANIMATIES EN HET DESIGN VAN INTERACTIEVE OBJECTEN ... 26
3.3HET LAADSCHERM ... 31
3.4HET INLOGSCHERM ... 32
3.5HET INSTELLINGENSCHERM ... 33
3.6HET MAALTIJDSCHERM ... 34
3.6.1 Instructie laag voor interactietechnieken ... 34
3.6.2 Dagkeuze ... 35
3.6.3 De schermen voorgerecht, hoofdgerecht en nagerecht ... 36
Pagina | 5
4.3.3 Effectiviteit ... 46
4.3.4 Tevredenheid ... 47
4.3.5 Optionele open vragen ... 48
4.3.6 Observaties ... 50
5 DISCUSSIE ... 53
5.1GEBRUIKSVRIENDELIJKHEID PROTOTYPE TAFELTJE-DEK-JE ... 53
5.2ZIJN ALLE KNELPUNTEN ONTDEKT?EEN KRITISCHE NOOT ... 55
5.3IMPLICATIES VERBETERINGEN PROTOTYPE ... 56
6 CONCLUSIE ... 58
6.1TOEKOMST ... 59
LITERATUURLIJST ... 60
BIJLAGEN ...64
BIJLAGE 1–GESTURE RATINGS ... 65
BIJLAGE 2–THE EFFECT OF AGE AND FONT SIZE ON READING TEXT ON HANDHELD COMPUTERS ... 68
BIJLAGE 3–PARALLAX ... 69
BIJLAGE 4–TARGET AND SPACING SIZES FOR SMARTPHONE USER INTERFACES FOR OLDER ADULTS ... 70
BIJLAGE 5–PROPER USE OF COLORS, THE DON’TS ... 72
BIJLAGE 6– VIDEO STANDARDS... 74
BIJLAGE 7–ENQUÊTE ... 75
1 Inleiding
De thermostaat, die je via het internet voor thuiskomst, enkele graden omhoog ‘scrolt’ via je smartphone was 30 jaar geleden ondenkbaar. Smartphones zijn tegenwoordig overal in het straatbeeld te vinden en het smartphone bezit in Nederland groeit (Telecompaper, 2013). Ook de tabletverkopen maken een stevige opmars mee. In het tweede kwartaal van 2013 zijn in totaal 51.3 miljoen stuks internationaal verscheept (Strategy Analytics, 2013). Voor Android-tablets met het besturingssysteem van Google betekende dit bijna een verdubbeling ten opzichte van vorig jaar. Zowel voor Google apparaten, als die van Apple en Microsoft is er een catalogus met een groot aantal mobiele applicaties (ook wel ‘apps’ genoemd) die gebruikers gratis of tegen betaling kunnen instaleren.
Niet alleen de jongere generatie werkt met of is geïnteresseerd in deze technologie. De gemiddelde levensverwachting van mensen over de hele wereld neemt toe en dat heeft gevolgen voor de vraag naar en van smartphones en tablets. In Figuur 1 – toename levensverwachting is het verloop te zien van de levensverwachting van mensen uit enkele landen. De toename van de grootte van de cirkels stelt de populatiegroei voor.
Pagina | 7
1.1 Aanleiding en context
De digitalisering van de samenleving en de toenemende levensverwachting dragen bij aan het groeiend aantal ouderen dat in contact komt met technologie. Zo zien ouders hun kinderen dagelijks, soms letterlijk uren, naar het scherm van hun smartphone staren en krijgen van hen vaak informatie en advies over voordelen en leuke kanten daarvan. Sommige ouderen kiezen ervoor hierin mee te gaan, anderzijds is er een generatiekloof. Een deel van deze generatie ouderen loopt tegen moeilijkheden aan. Er zijn alleen al tal van verscheidene interactiemogelijkheden met een smartphone of tablet. Uit onderzoek naar ouderen in combinatie met software interfacedesign- en interactiemogelijkheden blijkt dat deze doelgroep een speciale aanpak verdient ten aanzien van software ontwikkeling.
1.1.1 Grondlegging onderzoek
Eén onderzoek was in zoverre interessant dat het aan de basis ligt van de keuze van het onderwerp en de probleemstelling van deze scriptie. De onderzoekers (Isomursu, Aikï, Wallin, Ailisto, 2008) bedachten een manier waarop ouderen via interactie met een menukaart en een mobiele telefoon, respectievelijk een Nokia 3220 en 5140i, een maaltijd op digitale wijze konden bestellen. Deze maaltijd werd vervolgens thuisbezorgd. De focus lag op het onderzoeken of een op touch-gebaseerde interactie geschikt is in de dagelijkse gang van zaken van ouderen. De gemiddelde leeftijd van de deelnemers lag op 76.6 jaar. Met de mobiele telefoon, die was voorzien van NFC-technologie, moesten de gebruikers een maaltijd ‘taggen’, dat wil zeggen de telefoon vlak voor een tag houden om zodoende een keuze te maken. De telefoon bevatte een speciaal ontwikkelde applicatieservice. De menukaart was voorzien van RFID-tags. Dit zijn kleine chips die vergelijkbaar zijn met barcodes, maar daarbij een radiosignaal kunnen opwekken met een unieke identificatiecode. Een bestelling werd geregistreerd wanneer de telefoon tegen één van de drie tags (A, B en C, zie Figuur 3 - menu maaltijden) werd gehouden, waarbij feedback via de telefoon plaatsvond. Deze feedback bestaat uit vier opeenvolgende schermen met informatie en is te zien in Figuur 2 - feedback telefoon. Bij het derde scherm vibreerde de telefoon als extra vorm van feedback.
Figuur 3 - menu maaltijden
(Isomursu, Aikï, Wallin, Ailisto, 2008)
Figuur 2 - feedback telefoon
De belangrijkste voordelen die dit onderzoek kent ten opzichte van reguliere telefonische bestellingen:
De mogelijkheid om maaltijden enkele dagen vooruit te bestellen bij wijziging van slechts drie RFID-tags naar de volledige menukaart met RFID-tags.
Betere en gemakkelijkere monitoring van eetgewoonten en keuzes.
Meerdere bestellingen per dag per persoon mogelijk door het automatisch overschrijven van een vorige bestelling om gebruikersfouten of veranderende wensen op te vangen. Een aantal knelpunten dat naar voren kwam in het onderzoek is hieronder opgesomd:
Het uiterlijk en design van het systeem, waardoor deelnemers bij voorbaat niet meededen na het zien van de hulpmiddelen.
Twee deelnemers trokken zich terug toen ze de applicatie-interface zagen. Het was niet wat ze ervan verwacht hadden, een specifieke reden is niet aanwezig terwijl ze beiden regelmatig een mobiele telefoon gebruikten.
Infrastructuur-, apparatuur- en servicekosten ten aanzien van de gebruiker. Infrastructuur-, apparatuur- en servicekosten ten aanzien van de leverancier. Tijd die benodigd is om gebruikers te leren het systeem te gebruiken.
De gebruikte feedback ‘label A, B en C’ op de telefoon vergt extra cognitieve inspanning. Gebruikers gaven aan liever de tekst van de maaltijd te ontvangen. Ook waren sommige proefpersonen later die dag vergeten wat ze precies hadden besteld, dit was niet terug te zien.
Sommige ouderen hadden cognitief moeite om aandacht te geven aan de menukaart in combinatie met het scherm van de telefoon.
Uitgebreide tekstuele feedback was niet mogelijk vanwege te klein lettertype.
Het onderzoek legde daarnaast enkele kwesties bloot, die alvorens de proef startte, beter geïmplementeerd konden worden:
Het zich moeten herinneren om elke dag een maaltijd te bestellen brengt stress en zorgen met zich mee voor de gebruiker.
Naast de vibratie en tekstuele feedback, kon extra feedback in de vorm van geluid misschien een voordeel betekenen.
Er zijn met de inzichten van de huidige beschikbare technologie nog enkele knelpunten toe te kennen aan dit systeem:
Een gebruiker kan alleen op de plek waar de telefoon en de menukaart beide aanwezig zijn een maaltijd bestellen en door de NFC-technologie mogen beide hulpmiddelen bij daadwerkelijk bestellen maximaal 5 centimeter van elkaar worden gehouden.
Het maaltijdmenu doorlopen in de kolommenstructuur vraagt een aantal cognitieve stappen. Bij mensen met een slechte coördinatie of slecht kortetermijngeheugen kan dit al te ingewikkeld zijn.
Pagina | 9 Van directe feedback (in milliseconden gemeten) is hoogstwaarschijnlijk geen sprake. Na het registreren van een RFID-tag wordt de applicatieservice gestart om een tag te interpreteren, code uit te voeren en informatie weer te geven op het scherm. Dit brengt vermoedelijk vertraging met zich mee. De gebruikte Nokia-telefoons zijn een stuk minder krachtig qua hardware dan smartphones en tablets van dit decennium. Mede daarom wordt ook achteraf pas duidelijk wat een gebruiker besteld heeft, want de fysieke benodigde handeling is al uitgevoerd. Hierover wordt niet gesproken in het onderzoek en is een aanname. Duidelijk is in ieder geval dat pas bij het derde scherm het extra feedback hulpmiddel vibratie wordt toegepast. Sommige gebruikers hielden de telefoon tegen de menukaart aan en wachtten op de vibratie, waarbij ondertussen de eerste schermweergaven al op de telefoon waren getoond.
Naar aanleiding van bovenstaand onderzoek en de gedachte dat ouderen moeilijk meekomen met de digitalisering van de samenleving, ontstond het idee dat een mobiele applicatie mogelijk soelaas biedt voor het bestellen van maaltijden op digitale wijze.
1.2 Doelgroep: ouderen en minder validen
De doelgroep waarop dit onderzoek is toegespitst, is behoorlijk divers. Deze bestaat uit actieve ouderen tot ouderen met een beperking die afhankelijk zijn van hulp en zorg van anderen. Er is geen strikte leeftijd gebonden aan het begrip ouderen. Zo heeft men het op de arbeidsmarkt veelal over 50-65 jarigen en in de gezondheidszorg 65-plus, bijvoorbeeld vanwege het extra risico op gezondheidsproblemen (Bron SCP/CBS, 2011). Minder validen betreft een groep mensen met een fysieke of mentale beperking zonder daar een leeftijd aan toe te kennen. Een deel van deze totale groep personen is niet in staat zelf boodschappen te doen of eten voor te bereiden, maar woont nog wel op zichzelf. Deze mensen kunnen telefonisch of via een webshop op het internet een maaltijd bestellen bij een maaltijdvoorziening in de buurt. In de volksmond staan deze maaltijdserviceleveranciers ook wel bekend als 'Tafeltje-dek-je' (Wikipedia-Tafeltje-dek-je, 2013). In het bijzonder voor de oudere personen geldt dat softwareontwikkelaars en designers met andere criteria en keuzes voor het design, de interactie en de functionaliteit van software rekenschap dienen te houden.
1.3 Probleemstelling
1.3.1 Probleemstelling geformuleerd
De probleemstelling luidt als volgt:
“Kan op basis van het onderzoek beschreven in paragraaf 1.1.1 een gebruiksvriendelijke
mobiele applicatie worden ontwikkeld voor een smartphone of tablet met touchscreen technologie, die de aangehaalde knelpunten ondervangt en waarmee thuiswonende ouderen en minder validen een maaltijd digitaal kunnen bestellen?”
De term ‘gebruiksvriendelijk’ heeft in deze stelling betrekking op een combinatie van facetten. Deze verscheidene aspecten worden in de eerste twee paragrafen van hoofdstuk 2 – Theoretisch kader kort uiteengezet.
1.3.2 Onderzoeksvragen
De probleemstelling is complex en heeft onderzoeksvragen nodig om tot een goed antwoord te komen. De onderzoeksvragen staan hieronder geformuleerd:
Welke theorie en artikelen bieden informatie over interface-, design- en interactieparadigma’s mede gericht op ouderen?
Welke vormen van feedback zijn mogelijk en bieden deze voordelen ten opzichte van de feedback in het NFC/RFID-tag systeem?
Biedt het design van de applicatie in combinatie met een smartphone of tablet voordelen ten aanzien van uiterlijk van de het NFC/RFID-tag systeem?
Biedt een mobiele applicatie dezelfde voordelen als het NFC/RFID-tag systeem ten aanzien van telefonisch een maaltijd bestellen?
o Kan een maaltijd vooruit besteld worden?
o Is monitoring van eetgewoontes en keuzes mogelijk?
o Zijn gebruikersfouten of verandering van keuzes op te vangen?
Biedt een mobiele applicatie cognitieve ontlasting ten opzichte van het NFC/RFID-tag systeem?
Biedt een mobiele applicatie voordelen in de leesbaarheid ten opzichte van de mobiele telefoon het NFC/RFID-tag systeem?
Zijn touchscreens geschikt om te gebruiken door ouderen?
Is er tijd gemoeid met gebruikers te leren omgaan met mobiele applicatie?
Van welke waarde zijn infrastructuur-, apparatuur- en servicekosten ten aanzien van de gebruiker en de leverancier?
Van welke waarde zijn de infrastructuur-, apparatuur- en servicekosten ten aanzien van de leverancier?
Welke extra voordelen biedt een mobiele applicatie?
1.4 Doel
Pagina | 11 applicatie, eenmaal daadwerkelijk gebouwd met ondersteuning van maaltijdleveranciers, van toegevoegde waarde is in het dagelijks leven van ouderen en minder validen.
De doelstelling luidt als volgt:
“Ontwerp een prototype van een gebruiksvriendelijke mobiele applicatie waarmee
thuiswonende ouderen en minder validen een maaltijd digitaal op een intuïtieve en gemakkelijke manier kunnen bestellen.”
1.5 Scope
De scope van deze scriptie is afgebakend om binnen een bepaald tijdbestek een functioneel prototype van een mobiele applicatie te creëren en antwoorden op de probleemstelling en onderzoeksvragen te vergaren.
De volgende grenzen en uitgangsposities zijn gedefinieerd:
Er wordt een interactief webbased prototype ontwikkeld. Een echte (native) iOS of Android applicatie is geen optie vanwege:
o Gebrek aan programmeerkennis en ervaring. o Het tijdbestek.
o Tools waarbij visueel ontwikkeld kan worden zijn te beperkt. Voorbeelden hiervan zijn de ‘MIT Android App Inventor’ (voorheen Google App Inventor) en ‘appery.io cloud based mobile app builder’ (voorheen Tiggzi).
Er is geen rekening gehouden met ouderen of minder validen die fysiek niet in staat zijn om een smartphone of tablet te gebruiken.
Het prototype is bedoeld voor gebruik op een touchscreen smartphone of tablet. Er is geen rekening gehouden met andere invoermogelijkheden zoals toetsenbord en muis, stylus(pen), afstandsbedieningen of andere apparaten zoals tv’s en pc’s.
Er is geen rekening gehouden met fysieke knoppen op een smartphone of tablet. Alle navigatiecomponenten worden gebruikt voor een zo universeel mogelijk ontwerp. De doelgroep beschikt al over een smartphone of tablet.
Het prototype is platform onafhankelijk. Alleen een actuele webbrowser is nodig.
1.6 Opbouw
2 Theoretisch kader
In dit hoofdstuk staan theorieën die van belang zijn voor interface- en interactiedesign. In de eerste twee paragrafen komen voornamelijk de meest basale usability en interaction design principes aan bod. Het laatste deel bestaat uit studies over gebruiksvriendelijkheid, waarbij de doelgroep van dit onderzoek tevens centraal staat.
2.1 Usability
De vraag ‘Wanneer is software of een interface gebruiksvriendelijk?’ hangt van verschillende factoren af. Het concept ‘usability’ is uiteengezet in de ISO-9241 standaard. In deel elf van deze standaard geeft men de volgende definitie:
“Usability is measured by the extent to which the intended goals of use of the overall system are
achieved (effectiveness). The resources that have to be expended to achieve the intended goals (efficiency).The extent to which the user finds the overall system acceptable (satisfaction).”
De usability web consultant Nielsen deelt usability op in vijf kernpunten (Nielsen, 1993), waarbij één extra punt ook vaak in andere bronnen voor komt:
Leerbaarheid: Het systeem moet gemakkelijk te leren zijn. Gebruikers kunnen snel taken uitvoeren.
Efficiëntie: Het systeem moet efficiënt zijn in gebruik. Wanneer de gebruiker eenmaal het systeem heeft geleerd, is een hoge mate van productiviteit mogelijk.
Effectiviteit: Gebruikers kunnen hun doelen bereiken en taken uitvoeren met het systeem (ISO-9241-11, 1998 & Sears, Jacko, 2008).
Onthoudbaarheid: Het systeem moet gemakkelijk te herinneren zijn. Na enige tijd het systeem niet gebruikt te hebben, moet een doorsnee gebruiker zijn of haar werk kunnen hervatten zonder alles opnieuw te moeten leren.
Fouten: Het systeem moet weinig fouten bevatten. Wanneer gebruikers fouten maken of wanneer er in het systeem toch een fout optreedt, moeten ze daar gemakkelijk van kunnen herstellen en hun werk kunnen voortzetten. Daarnaast mogen catastrofale fouten niet voorkomen.
Tevredenheid: Het systeem moet leuk zijn om te gebruiken en gebruikers zijn tevreden over het systeem (subjectief).
Deze kernpunten noemt men in de literatuur ook wel ‘usability goals’. Verder zijn ‘Less is more’ en ‘Details matter’ bekende slagzinnen van Nielsen. Alle interfacedesigners horen daarnaast volgens hem de volgende tien ‘usability principles’ te volgen:
Zichtbaarheid van de status van het systeem: Het systeem moet gebruikers altijd op de hoogte brengen van de actuele status van het systeem door binnen een redelijke termijn passende feedback te geven.
Pagina | 13 Controle en vrijheid voor gebruikers: Gebruikers maken soms een vergissing en zullen in een dergelijk geval een duidelijk afgebakende “nooduitgang” nodig hebben om de ongewenste situatie snel en op een logische manier te verlaten. Bied een ‘ongedaan maken’ en ‘herhalen’ mogelijkheid aan in het systeem.
Consistentie en normen: Gebruikers dienen zich niet af te vragen of de verschillende woorden, situaties of acties hetzelfde betekenen. Volg platformconventies.
Fout preventie: Nog beter dan goede foutmeldingen is een zorgvuldig ontwerp dat een probleem weet te voorkomen. Elimineer foutgevoelige voorwaarden of spoor ze op en laat de gebruiker een actie bevestigen voordat de actie daadwerkelijk uitgevoerd wordt. Herkenning in plaats van herinnering: Minimaliseer de geheugenbelasting van de
gebruiker door objecten, acties en opties zichtbaar te maken. Het moet niet zo zijn dat de gebruiker informatie uit een onderdeel van een dialoog moet onthouden voor in een ander deel van de dialoog. Instructies voor het gebruik van het systeem moeten, waar nodig, zichtbaar zijn of gemakkelijk terug te vinden zijn.
Flexibiliteit en efficiëntie van het gebruik: Accelerators en shortcuts kunnen een interactie vaak sneller maken voor de ervaren gebruiker, hierdoor kan het systeem inspelen op zowel de onervaren als ervaren gebruikers.
Esthetisch en minimalistisch design: Dialogen mogen geen informatie bevatten die irrelevant of zelden nodig is. Alle extra informatie in een dialoog concurreert met de relevante informatie en vermindert hun relatieve zichtbaarheid.
Help gebruikers fouten te herkennen, te diagnosticeren en te herstellen: Foutmeldingen moeten worden uitgedrukt in duidelijke taal (geen codes), de precieze vermelding van het probleem geven, en constructief wijzen op een oplossing.
Hulp en documentatie: Hoewel het beter is als het systeem gebruikt kan worden zonder dat daarvoor documentatie geraadpleegd hoeft te worden, kan het in sommige gevallen toch nodig zijn om hulp en documentatie aan te bieden. Dergelijke informatie moet gemakkelijk te doorzoeken zijn, gericht zijn op de taak van de gebruiker en niet te groot zijn..
2.2 Interaction design
Een concept dat centraal staat bij interaction design is ‘user experience’. De ISO-9241-210 standaard hanteert hiervoor de volgende definitie:
“user experience includes all the users' emotions, beliefs, preferences, perceptions, physical
and psychological responses, behaviors and accomplishments that occur before, during and after use.”
Usability is nauw verweven met interaction design. Usability goals zijn beter meetbaar en te evalueren dan user experience goals, omdat deze laatste erg subjectief zijn (Boy, 2011). Daarentegen bestaan er wel systemen om het begrip user experience te kwantificeren. Veelal zijn interviews hiervan de basis (Lewis, Sauro, 2012).
supportive of creativity fun emotinally fulfilling rewarding aesthetically pleasing motivating helpful enjoyable entertaining satisfying errors
Usability
Goals
satisfaction learnability effectiveness efficiency memorabilityUser Experience
Goals
Figuur 4 - usability en user experience goals (Preece, Rogers, Sharp, 2007)
2.2.1 Conceptual models
Conceptuele modellen beschrijven in termen van ideeën en concepten wat een systeem moet doen, hoe het zich gedraagt en hoe het eruitziet. Ook is het doel van het systeem begrijpelijk voor gebruikers. Er zijn verschillende modellen bestaande uit interactie types gebaseerd op activiteiten, die iemand kan hebben van een product of systeem (Preece, Rogers, Sharp, 2007). De hieronder beschreven types zijn het meest voorkomend en kunnen gelijktijdig plaatsvinden.
Interactie types gebaseerd op activiteiten:
Instructing: Dit conceptueel model beschrijft hoe gebruikers hun taken uitvoeren door het systeem te instrueren wat het moet doen. Voorbeelden hiervan zijn de instructies ‘open een link’ en ‘verwijder e-mail’. Een belangrijk voordeel van instructies is dat de interactie snel en efficiënt is. Een nadeel is dat gebruikers bijvoorbeeld sneltoetsen op den duur vergeten. Veel onderzoek is al gedaan naar de optimalisatie van instructies qua vorm, syntax en organisatie (Shneiderman, 1998).
Pagina | 15 van vragen in een zoekmachine in natuurlijke taal als prettig (Kedad, Lammari, Métais, Meziane, Rezgui, 2007). Een nadeel is dat misverstanden optreden als een systeem iets anders doet of teruggeeft dan de gebruiker verwacht.
Manipulating: Deze vorm van interactie betreft het manipuleren van objecten. Via ‘direct manipulation’ (Shneiderman, 1983) hebben gebruikers interactie met digitale objecten op een manier die ze ook in de realiteit gebruiken. Voorbeelden hiervan zijn het legen van de prullenbak op de desktop (visueel en auditief), het tekenen van een lijn met een tekentool en het drukken op knoppen. De belangrijkste voordelen zijn het helpen van gebruikers aan zekerheid en gevoel van macht over het systeem, beginners snel op weg helpen met basisfunctionaliteit en minimalisatie van fouten. Een nadeel kan zijn dat gebruikers concepten te letterlijk nemen. Een ander probleem is dat niet alle taken door objecten beschreven kunnen worden en niet alle acties of taken direct uitgevoerd worden.
Exploring: Dit model berust op de gedachte dat gebruikers zich kunnen bewegen in virtuele of fysieke omgeving en informatie kunnen opzoeken. Voorbeelden zijn (Street View) Google Maps, 3D-games en het browsen op het web. Veel aandacht gaat hier uit naar navigatie, menu’s, hyperlinks, informatiestructuren en informatievisualisatie. Gebruikers raken gemakkelijk de weg kwijt wanneer ze overspoeld raken met informatie, deze niet gestructureerd wordt gepresenteerd, of niet duidelijk is gescheiden van interfacecomponenten.
Interactie types gebaseerd op objecten:
Een ander manier om conceptuele modellen te beschrijven zijn interactie types gebaseerd op objecten. Veelal betreft dit metaforen. Het gebruik van metaforen en analogieën is handig, omdat gebruikers soortgelijke voorstellingen en begrippen zullen herkennen uit de werkelijke wereld. Voorbeelden hiervan zijn het spreadsheet en het bureaublad. Een metafoor of analogie betrekt niet altijd elk onderdeel of functie van een object. Daarom bestaan interfacemetaforen vaak uit combinaties van diverse informatie. Ook bij het ontwerpen van iconen worden vaak metaforen gebruikt, zoals bij het pictogram van de prullenbak. Bij het te letterlijk ontlenen van metaforen van een fysieke entiteit kan een designer tegen problemen oplopen. Zo is er veel ophef geweest over dat de prullenbak óp het bureaublad staat, wat cultureel en logisch gezien in de echte wereld niet het geval is (Nelson, 1990). Verder dient een designer op te letten dat usability principes niet vervallen bij het gebruik van metaforen. Zo zou het gebruik van bepaalde iconen, die weliswaar goed herkenbaar zijn voor de gebruiker, de consistentie kunnen verminderen of niet goed uitvallen voor het esthetisch design.
Concrete interactietechnieken
2.3 Vergelijkend onderzoek
Er zijn uitdagingen wat betreft het design van software voor oudere gebruikers. In deze paragraaf is te vinden welke problemen ouderen in het algemeen hebben en welke technieken en keuzes ten aanzien van interfacedesign- en interactiemogelijkheden bestaan om ouderen te helpen de digitalisering van de samenleving zo goed mogelijk te doorstaan.
2.3.1 Achtergrond problemen ouderen
Het design van gebruiksvriendelijke en bruikbare informatie en communicatietechnologie voor ouderen kan uitdagend zijn. Zeker gezien vanwege het feit dat het proces van ouder worden vaak resulteert in verslechtering van cognitieve capaciteit en behendigheid (Blythe, Monk, Doughty, 2005 & Hanson, 2010). De problemen van ouderen zijn grofweg op te delen in de categorieën Cognitie, Motivatie, Fysieke gesteldheid en Perceptie (Holzinger, Searle, Nischelwitzer, 2007).
Cognitieve complexiteit als barrière: Het gebruik van technologische applicaties heeft een
bepaald niveau van kennisprocedures nodig. Deze specifieke procedures staan in het langetermijngeheugen en helpen ons om processen uit te voeren op basis van herinneringen en ervaringen zonder ons daar vaak bewust van te zijn. Omdat de cognitieve capaciteit vermindert met de jaren, is het van belang om de complexiteit van de applicatie en de interactie te verlagen.
Motivatie als barrière: Motivatie is belangrijk voor het leerproces. Motivatie bestaat uit onder
andere een combinatie van geloof, houding, angst, bezorgdheid en acceptatie. Ouderen hebben meer moeite met het accepteren van nieuwe en onbekende technologie dan jongeren (Hertzog, Bleckley, 2001). Ouderen wijzen op de vele voordelen en voldoende informeren over het gebruik van een technologisch hulpmiddel kan de motivatie verhogen. Het is tevens belangrijk om ouderen te overtuigen dat hun betrokkenheid in het ontwikkel – en evaluatieproces gewaardeerd wordt en belangrijk is (Waycott, Pedell, Vetere, Ozanne, Kulik, Gruner, Downs, 2012). Alleen al deze betrokkenheid kan de motivatie positief beïnvloeden. Dit staat ook wel bekend als het ‘Hawthorne-effect’ (Izawa, French, Hedge, 2011).
Fysieke gesteldheid als barrière: Het is duidelijk dat de fysieke achteruitgang door het ouder
worden niet universeel gekwantificeerd kan worden. Over het algemeen hebben ouderen meer tijd nodig om een taak te leren en uit te voeren dan jongeren, maken ze eerder of vaker fouten en is hun coördinatie en flexibiliteit verminderd.
Perceptie als barrière: Naar mate mensen ouder worden zien en horen ze minder goed. Zo zien
Pagina | 17
2.3.2 Touchscreens
Met touchscreen apparatuur kijken gebruikers niet alleen naar het scherm, maar hebben ze ook interactie met de interface via directe aanrakingen met de vinger op het scherm. Dit levert een natuurlijke en boeiende ervaring (Leonardi, Albertini, Pianesi, Zancanaro, 2010). Bij een studie naar een digitaal voedsel pakket concludeerden de onderzoekers tevens dat ouderen positief gesteld zijn ten aanzien van interactie via een touchscreen en digitale informatie (Ali, Shahar, Kee, Norizan, Noah, 2012). Dit softwarepakket bestond onder andere uit een module met een quiz over de mentaliteit en kennis ten aanzien van voedsel, een module met BMI-calculator en een oefeningen- en demonstratiemodule.
Traditionele invoer(hulp)middelen vereisen een bepaalde mate van hand-oog coördinatie. Ook het gebruik van een stylus voor resistieve touchscreens verlangt dit. De eerste generatie smartphones werd met dit soort type schermen uitgerust, die tevens relatief klein waren ten opzichte van de schermen van nu. Hierdoor waren interfacecomponenten vaak klein en priegelig (zelfs in combinatie met een stylus). Voorbeelden hiervan zijn Symbian OS v9.1 UIQ 3.0 uit 2006 en Windows Mobile 5 uit 2005. Karlson en Bederson (2008) onderzochten mogelijkheden waarmee een dergelijke smartphone en interface met de duim vanuit één hand bediend kon worden. Ze ontwikkelden ‘ThumbSpace’ en ‘Shift’, welke onafhankelijk van de applicatie softwarematige interactietechnieken boden. Deze technieken zorgden voor veel meer nauwkeurigheid dan bij directe aanraking van het scherm bij objecten kleiner dan 3.6mm2. De
onderzoekers concluderen dat het moeilijk is om kleine objecten nauwkeurig met een vinger aan te raken. Tevens ondervonden ze dat gebruikers het als prettig ervaarden om beide technieken te combineren en interactietechnieken en stellen dat combinaties van interactietechnieken voor verschillende taken mogelijk voordelen biedt aan gebruikers.
Capacitieve touchscreens reageren veel beter op aanraking via vingers en deze aanraking via de vingers is de meest directe vorm van interactie en invoer (Allen, Schediwy, Faggin, 1999). De iPhone was de eerste consumenten smartphone die met een capacitief scherm op de markt kwam. Ook lijkt het dat vanaf die tijd andere smartphone fabrikanten meer rekening hielden met de interface(schillen), die goed met vingers bediend kunnen worden. Een voorbeeld hiervan is ‘Touchflow’, later ‘HTC Sense’ genoemd op het windows mobile platform. Tegenwoordig leveren veel Android-fabrikanten een eigen interfaceschil mee, zoals Samsung’s ‘TouchWiz’ en LG’s ‘Optimus UI’. Ook zijn leverancieronafhankelijke schillen te verkrijgen (AWDlauncher en LauncherPro). De gedachte achter deze schillen is gebruikers een betere en completere interface-ervaring van het besturingssysteem te geven.
2.3.3 Interactietechnieken touchscreens
Touchscreen applicatieontwikkelaars zijn gebonden aan interactietechnieken die geïmplementeerd zijn in een besturingssysteem. Er bestaan verscheidene interactietechnieken met touchscreens. De bekendste zijn te zien in Figuur 5 – interactietechnieken.
Bepaalde interactietechnieken voert een gebruiker uit zonder hulp van interfacecomponenten. Zo zijn voor ‘Taps’ hyperlinks, klik bare tekst of een knop nodig. Een ‘double tap’ betekent vaak in en/of uitzoomen van content en heeft geen interfacecomponent nodig. Het verslepen van iconen of interfacecomponenten komt overeen met het gebaar ‘Drag’. Met ‘Flick’, ‘gooit’ een gebruiker een (tekst of web) pagina snel in een bepaalde richting. Hoe snel bepaalde content in beeld is hangt af van de snelheid van het gebaar. Een variant hierop is ‘Swipe’, waarvan het symbool en beschrijving missen in deze figuur. Hiermee navigeert een gebruiker door pagina’s, tekst en afbeeldingen zonder dat daarbij content of interfacecomponenten benodigd zijn en lijkt daardoor sterk op het ‘Drag’ gebaar. Via ‘Pinch’ en ‘Spread’ schalen gebruikers tekst of afbeeldingen naar eigen smaak. ‘Press’ zorgt voor een pop-up menu ten aanzien van een interfacecomponent of content, zoals een pop-up voor het opslaan of versturen van een afbeelding. Middels ‘Press and tap’ kunnen gebruikers bijvoorbeeld een shift-knop ingedrukt houden en vervolgens een letter, waarbij na loslaten de hoofletter tevoorschijn komt.
Naar aanleiding van een grootschalig onderzoek ten aanzien van gebaren als interactietechnieken voor touchscreens (Stößel, 2012) blijkt dat ouderen hierin beter presteren dan wanneer ze fysieke knoppen gebruiken. Ouderen waren niet alleen significant sneller met het gebruik van deze technieken, ook hadden ze minder interactiestappen nodig om een taak uit te voeren. In bijlage 1 is te zien welke 10 gebaren jonge en oude deelnemers het fijnst en minst fijn vonden in gebruik met één vinger. Stößel concludeert dat zowel ouderen als jongeren voornamelijk de tap en swipe gebaren graag gebruiken. Voor bepaalde taken zijn duidelijke verschillen in voorkeuren van gebaren tussen jong en oud te zien, ook deze zijn in bijlage 1 te vinden.
Pagina | 19
2.3.4 Tekstgebruik
Het woordgebruik in een interface is de basisvorm van communicatie met de gebruiker. Doelgerichte en heldere woordkeuze leiden tot een verbeterde gebruiksvriendelijkheid. Onderzoek toont aan dat het lezen van computerschermen 25 procent langzamer is dan het lezen van papier (Nielsen, 2000). Gebruikers spenderen weinig tijd aan het lezen van grote lappen tekst. Wat ze wel doen is het scannen van tekst, waarbij woorden of zinnen opgepakt worden door hun ogen. Dit komt doordat gebruikers op de meeste (web)pagina’s slechts geïnteresseerd zijn in bepaalde onderdelen (Krug, 2005).
Als tekst gelabeld is, dient alleen de eerste letter een hoofdletter zijn. Woorden compleet in hoofdletters weergeven kost de gebruiker meer moeite om te lezen. Gebruikers neigen ernaar om woorden te identificeren naar hun vorm. Figuur 6 – tekstopmaak ondersteunt deze theorie en maakt dat vrij duidelijk zichtbaar.
Juiste labels en titels kiezen is erg belangrijk. Een experiment (Resneck, Sanchez, 2004) om de waarde van juiste labels te onderzoeken in termen van prestaties, had de volgende resultaten:
90 procent meer efficiëntie in het vinden van onderdelen. 25 procent minder klikacties om een taak uit te voeren.
Significant minder fouten (afwijkingen van het meest optimale pad). Significant meer onderdelen gevonden.
Significant hogere gebruikerstevredenheidscores.
Schermen of (web)pagina’s dienen ook een naam te hebben. Deze hoort op een adequate plaats te staan, bij voorkeur bij het frame dat een bepaalde content vertegenwoordigt. (Krug, 2005).
2.3.5 Tekstgrootte
De grootte van het lettertype is zeer belangrijk bij interfacedesign (Hutchison, Eastman, Tirrito, 2006). Keuzes in dit opzicht zijn afhankelijk van onder andere schermafmetingen (diagonaal in centimeters) en resolutie (horizontale x verticale aantal pixels), maar ook van hoeveel en welke informatie een gebruiker ziet. Dit geldt in het bijzonder voor oudere gebruikers die te maken kunnen hebben met perceptie als barrière.
ouderen, zie bijlage 2) vielen niet te lezen of deelnemers vonden ze te oncomfortabel. De verschillen in prestaties waren bij de andere groottes niet significant betreffende de nauwkeurigheid van het ontdekken van fouten of benodigde tijd bij het lezen. Desondanks prefereerden de deelnemers wél grote lettertypes. Voor jongeren was dit 8-10 punten en voor de ouderen 8-12 punten. Deze bevindingen stroken met andere studies volgens de onderzoekers.
Welke tekstgrootte gebruikt dient te worden is tot op bepaalde hoogte een subjectief gegeven. De inspanning die het de ogen en het brein kost om kleine lettertypes te lezen kan een negatieve impact hebben op motivatie van ouderen om een bepaalde applicatie te gebruiken. Overigens gebruiken de huidige topmodellen smartphones en tablets zeer hoge resolutieschermen. Hierbij is de PPI-waarde zo hoog dat alles zeer scherp oogt en kleinere lettertypes beter af te lezen zijn (Wolfcrow - Notes by Dr. Optoglass: The Resolution of the Human Eye, 2012 & Deering, Sun Microsystems, 1999). In hoeverre (oudere) mensen op dergelijke schermen kleinere lettertypes prefereren is niet bekend.
Een externe factor die ook de tekstgrootte kan bepalen is het besturingssysteem. Vanuit een besturingssysteem is vaak de algemene lettergrootte in te stellen, waardoor tekst in een applicatie tevens op- of afschaalt.
2.3.6 Knopgrootte en marges
Een touchscreen bedienen met vingers houdt in dat met minimale knopgrootte en marges rekening gehouden moet worden. Kobayashi, Hiyama, Miura, Asakawa, Hirose, en Ifukube (2011) onderzochten welke grootte ‘targets’ moesten hebben bij de activiteiten tikken, slepen en pinchen. Targets bestaan uit interactieve objecten zoals iconen, knoppen en hyperlinks. Ze maten vervolgens de snelheid van een uitgevoerde taak en waar de deelnemers precies het scherm aanraakten. Ouderen hadden veel problemen met kleine targets door ‘Parallax’ (Steinman, Garzia, 2000) en het grote contact oppervlak van vingers.
De definitie van parallax is (Oxford English Dictionary, 1989):
“Schijnbare verplaatsing, of verschil in de schijnbare positie van een object, veroorzaakt
door daadwerkelijke verandering (of het verschil) van de positie van het punt van waarneming; de hoek van deze verplaatsing of het verschil van de positie, zijnde de hoek getrokken tussen twee rechte lijnen naar het object en de twee verschillende gezichtspunten getrokken en de maat vormt voor de afstand van het object.”
Om dit effect (zie bijlage 3) zo gering mogelijk te houden dient een gebruiker de hoek (in booggraden) van een smartphone of tablet ten opzichte van het gezichtsveld zo klein mogelijk te houden. Dit is echter een externe factor waar een softwareontwikkelaar of designer geen grip op heeft. De richtlijnen voor ouderen uit dit onderzoek zijn verder:
Gebruik 8mm2 of grotere targets. Als deze targets dichtbij elkaar staan zonder marge
moeten de targets veel groter zijn.
Pagina | 21 In een andere studie (Leitão, Silva, 2012) analyseerden onderzoekers tevens tik en sleep targets om targetafmetingen en bovendien marges ten aanzien van oudere smartphone gebruikers. De deelnemers moesten een tik- en sleepspel spelen op een Samsung Nexus S met een 52.32mm bij 87.12mm scherm met een resolutie van 800 x 480, oftewel 233PPI. Volgens de onderzoekers zijn tiktargets van 14-17,5mm2 en sleeptargets groter dan 17.5mm2 het beste om te gebruiken
(zie bijlage 4). Vanaf 10.5mm2 zijn tiktargets acceptabel en sleeptargets zijn dat vanaf 14mm2.
Verder is uit het onderzoek te halen dat marges van 3.5mm tussen grenzende targets in de meeste gevallen de optimale keuze is. Dit is volgens de onderzoekers niet significant genoeg om waarde aan te hechten. Ook andere onderzoeken geven aan dat de effecten van marges geen groot effect hebben (Colle, 2004 &. Jin, Plocher, Kiff, 2007). Wel is het zo dat er een evenwichtige wisselwerking bestaat tussen snelheid en accuraatheid is bij het gebruik van verschillende marges. Grotere marges zorgen voor minder fouten, maar de reactietijd gaat omhoog. In een andere studie vonden onderzoekers wel significante verschillen tussen het gebruik van marges en de prestatie van ouderen (Hwangboa, Yoona, Jina, Hana, Jia, 2012). In dit onderzoek prefereerden ouderen 12mm2 targets en 3mm marges. Hun prestatie ging tevens omhoog bij het
gebruik van marges bij kleinere targets.
2.3.7 Iconen
Een icoon is pictografisch item dat een of meerdere objecten, concepten of functies representeert. Er zijn significante verschillen tussen ouderen en jongeren betreffende het ervaren van gebruiksvriendelijkheid van iconen (R. Leung, J. McGrenere, P. Graf, 2011). De 60 iconen waarop beide groepen deelnemers werden getest in deze studie, waren verdeeld in verschillende groepen. De mate van concreetheid en afstand van de semantische betekenis van het object dat een icoon vertegenwoordigde speelde hierin een rol. De oudere deelnemers hadden meer moeite met het identificeren en interpreteren van de betekenis van de abstracte en semantische ver afstaande iconen dan de jongere deelnemers. Wanneer de ouderen een icoon correct begrepen, was geen verschil in interpretatiezekerheid tussen jong en oud te vinden. Bij het gebruik van labels bij iconen was geen verschil te zien tussen beide groepen in herkenning en interpretatie prestaties. Wel geldt voor beide groepen dat labels veel hulp boden bij het identificeren en interpreteren van icoonobjecten. De onderzoekers adviseren om bij het design van iconen bekende metaforen en labels te gebruiken.
2.3.8 Feedback
Feedback in touchscreen interfaces is erg belangrijk (Matthew, Burnett, Skrypchuk, Wellings, Attridge, Williams, 2010). Er zijn verschillende vormen van feedback te onderscheiden. De drie meest gebruikte vormen zijn visuele feedback, auditieve feedback en aanraakgevoelige feedback.
Visuele feedback
van een icoon en label bij selectie hiervan. Voor visuele feedback op een touchscreen kan een designer tevens denken aan knoppen die van kleur veranderen bij aanraking met de vinger. Ook het verslepen van iconen en andere interfaceobjecten valt hieronder. Het doorlopen van verschillende schermen via slepen en loslaten (swipen) bevat vaak een vloeiende animatie. Hierdoor zien gebruikers duidelijker van welk scherm ze kwamen. Ook zorgt deze animatie dat gebruikers zien naar welk scherm ze navigeren. Veel van deze visuele feedback regelt het besturingssysteem al. Welke vorm van visuele feedback gebruikers zien ligt grotendeels aan de keuze van interactiemogelijkheden. Wel kunnen binnen een applicatie eigen ontworpen knoppen en visuele feedback (kleur) gebruikt worden. Andere vormen van visuele feedback zijn het geven van notificaties of (fout)meldingen via het scherm. Een andere categorie visuele feedback die afhankelijk is van de hardware in een smartphone of tablet is het gebruik van lichtstraling. Kleine LED lampjes geven informatie over ontvangen e-mail of sms’jes. Een voordeel hiervan is dat mensen op de hoogte zijn dat notificaties klaar staan, zonder daarvoor überhaupt het scherm aan te zetten. Een ander voordeel hiervan is dat gebruikers aan de kleur van het uitgestraalde licht kunnen zien wat voor soort notificatie klaar staat, wat weer implicaties heeft of een gebruiker besluit actie te ondernemen of niet. Visuele feedback is minder belangrijk door de interactietechnieken op touchscreens (Negulescu, Ruiz, Li, Lank, 2012).
Auditieve feedback
Feedback in de vorm van geluid kan mensen tevens helpen bij het werken met een interface. (Yu, Liu, 2010). Een geluidsmelding attendeert gebruikers ergens op. Hetzij als feedback op het ontvangen van notificaties, hetzij op het wijzen dat een gebruiker iets fout doet. Deze vorm van feedback is echter niet erg discreet. Ook mensen in de nabije omgeving kunnen deze ontvangen. Daarom hebben gebruikers van smartphones en tablets vaak de keuze om (bepaalde meldingsvormen van) het geluid uit te schakelen.
Haptic feedback
Aanraakgevoelige feedback biedt vele voordelen voor gebruikers bij het hebben van interactie via touchscreens (Immersion Corporation, 2010). Lee en Zhai (2009) stellen dat het missen van haptic feedback één van de grootste nadelen van touchscreens is ten opzichte van fysieke knoppen. Een trilmotor in de behuizing van een smartphone en tablet treedt in werking wanneer het besturingssysteem een aanraking registreert op het scherm. Gebruikers voelen hierdoor vibraties via de behuizing van het apparaat. Er bestaan meerdere implementaties van haptic feedback, zoals piëzo-elektrische effecten of directe oppervlakte aandrijving (Levin, Woo, 2009), maar tot op heden is de trilmotor de meest gebruikte. Nieuwe technieken op dit gebied kunnen deze ervaring verbeteren.
Pagina | 23
2.3.9 Kleurgebruik
Aan kleurgebruik en kleurervaring valt een hele studie te wijden (Bennett, 2009). Het menselijk oog kan zich maar op één van de kleuren (rood, groen/geel, of blauw) tegelijktijdig focussen en de gewaarwording ‘zien’ kost de meeste cognitieve belasting vergeleken met alle andere gecombineerde zintuigen samen (Rothrock, Martz, 1995). Mensen associëren fysieke indrukken vaak met kleur. Gewicht, afstand, concentratie en soortgelijke termen zijn met kleur over te brengen. De kleur rood associëren mensen vaak met gevaar of waarschuwingen. Groen betekent veelal ‘goed, ga door’ en geel en blauw respectievelijk ‘heet’ en ‘koud’. Deze kleuren zijn zeer geschikt om statussen aan te duiden. Het merendeel van kleurenblinden kent echter geen onderscheid tussen rood en groen (Wong, 2011), maar omdat het slechts om betrekkelijk lage percentages gaat houden veel designers hier waarschijnlijk geen rekening mee. Besteden ze hier wel aandacht aan, heeft dat gevolgen ten aanzien van het kleurgebruik in interfacedesign. Mensen hechten dus waarde aan kleur en hebben emoties ten aanzien van kleur. Dit esthetisch aspect kan belangrijker zijn dan alleen maar met zwart-wit contrasten of grijstinten te werken (Norman, 2004). Verder is kleurervaring zeer cultureel bepaald (Bortoli, Maroto, 2001).
Figuur 7 – kleurcombinaties geeft weer welke achtergrond- en voorgrondkleuren gecombineerd kunnen worden. Door hoge contrastverschillen zijn mensen met kleurenblindheid ook in staat interfacecomponenten van de voor- en achtergrond te scheiden. Daarentegen geeft Galitz ook een aanzienlijke lijst met te vermijden punten bij het gebruik van kleur, waardoor vele combinaties uit onderstaand figuur vervallen (zie bijlage 5).
2.3.10 Portret- en landschapstand
Smartphones hebben in de meeste gevallen een scherm dat verticaal langer is dan horizontaal. Dit geldt alleen als deze in de hand wordt gehouden zoals bedoel bij het bellen. In specificatielijsten is de horizontale resolutie van deze toestellen is daarom ook lager dan de verticale. Als een gebruiker de smartphone op deze manier vasthoudt wordt gesproken van portretstand. Van landschapstand is sprake wanneer de gebruiker de smartphone 90 graden links-of rechtsom draait, waarbij de horizontale resolutie hoger is dan de verticale. Tablets worden voornamelijk in landschapstand gebruikt (Hesenius, Medina, Herzberg, 2012).
Er is veel onderzoek gedaan naar gebruiksvriendelijkheid, prestaties of het bruikbare blikveld van mensen in combinatie met breedbeeldschermen of (grote) schermen met hoge resolutie (Robertson, Czerwinski, Baudisch, Meyers, Robbins, Smith, Tan, 2005, en Scialfa, Thomas, Joffe, 1994 en Goldberg, Helfman, Joffe, 2007). Of de ondervonden resultaten te spiegelen zijn op touchscreens van smartphones is niet bekend. Dit is mede omdat (bepaalde) content op smartphones en tablets schermen (automatisch) door het kantelen van het apparaat kan worden gedraaid (Sanchez, Branaghan, 2011).
Pagina | 25
3 Prototype
Het prototype ‘Tafeltje-dek-je’ wordt aan de hand van schermafbeeldingen besproken. De vertaalslag van een concept model naar concrete termen van design- en interactiekeuzes en een fysiek design is hierin direct verwerkt.
3.1 Basis functionaliteit
Voor het bestellen van een maaltijd is de volgende basisfunctionaliteit nodig:
Een laadscherm waarin een logo of afbeelding de boodschap van de applicatie uitstraalt. Een inlogscherm waarbij persoonsgegevens van gebruikers worden opgeslagen.
Een instellingenscherm waarin gebruikers bepaalde opties kunnen wijzigen.
Eén of meerdere maaltijdschermen waarin gebruikers gerechten kunnen selecteren. Een scherm dat een besteloverzicht weergeeft.
Een functie om gerechten te bestellen voor een partner of tweede persoon. Een functie om per dag te kunnen bestellen.
Een eindscherm waarna de applicatie afsluit.
De meeste basisfunctionaliteiten hebben een eigen scherm om gebruikers te behoeden voor het moeten scrollen en beperking van visuele informatie en interactiemogelijkheden te kunnen realiseren. Deze keuze moet tevens bijdragen aan optimalisaties ten aanzien van de leesbaarheid van tekst en zichtbaarheid en aanraakbaarheid van objecten. Dit wil niet zeggen dat alle schermen compleet statisch zijn. Naargelang de keuzes van een gebruiker en wisselende inhoud in de database op de server, verandert bepaalde content van een scherm. Ook zijn objecten interactief en geanimeerd. Verder is er voor de twee interactietechnieken tappen en horizontaal swipen gekozen. Het design is in eerste instantie geoptimaliseerd voor portretweergave, hoewel op geen enkel scherm gescrold hoeft te worden. De doorslaggevende reden hiervoor is dat de presentatie van alle informatie op smartphones hierbij het beste is. Voor de presentatie van alle informatie op tablets heeft deze keuze relatief weinig negatieve gevolgen, behalve dat een gebruiker een tablet tevens in de portretstand moet vasthouden.
3.1.1 Basis opmaak
De achtergrondkleur van de schermen waarin gebruikers handelingen uitvoeren is lichtblauw. Er is niet voor een witte achtergrond gekozen, hoewel daardoor een iets groter contrastverschil met voorgrondobjecten wordt gecreëerd, om de lichtintensiteit (luminantie gemeten in cd/m²) ‘s avonds iets te beperken omdat verschil in luminantie gedurende dag betere prestaties oplevert (Mantiuk, Rempel, Heidrich, 2009).
gebruikt. Alle tekst is vet gedrukt en begint met een hoofdletter om zo duidelijk mogelijk leesbaar te zijn. Een uitzondering hierop is de tekst van de geselecteerde gerechten. Deze is niet vet gedrukt en heeft een kleine inspringing om een duidelijk niveauverschil te creëren met de tekst die daar vlak boven staat. Het gebruikte schreefloze lettertype is Arial, dat prima op schermen te lezen valt.
Knoppen en interactieve gebieden zijn minimaal 58 pixels verticaal en 160 pixels horizontaal. Dit is omgerekend op een 7 inch scherm (van 153.67mm x 89.99mm) met de resolutie van 1024x600 een afmeting van 8.70mm x 23.99 mm. Als er verticaal gezien problemen met ruimte en marges waren, hebben de desbetreffende knoppen en interactieve gebieden horizontaal meer ruimte gekregen. De afmetingen van belangrijke knoppen en gebieden zijn overigens een stuk groter. De marge tussen alle knoppen is minimaal 2.55mm, maar in veel gevallen veel groter. De meeste objecten en tekst aan de randen van het scherm hebben een marge van 1.5mm om de zichtbaarheid te verbeteren.
3.2 Animaties en het design van interactieve objecten
Omdat animaties niet gemakkelijk op papier afgebeeld kunnen worden, zijn de meest gebruikte kort toegelicht in deze paragraaf. De groene balk met de tekst ‘Een moment…’ vertegenwoordigt het laden van de data in het systeemgeheugen en is te zien in figuur 8. Deze tekst pulseert van zwart naar transparant gedurende een lus van 1 seconde totdat het laden klaar is. Als verduidelijking loopt de groene balk op totdat de balk met een lichter contrast overlapt is. Zowel de groene balk, als de balk met lichter contrast gebruikt rondingen om een vriendelijkere uitstraling te geven. De groene balk heeft daarnaast een gradiënt van groen naar wit, gezien vanuit het midden, om lelijke randen (blokvorming) tegen te gaan.
Elke knop met een overeenkomende stijl als in figuur 9 vertoont een jQuery .toggle("clip") effect van 500 milliseconden. Deze tijd is kort genoeg om niet als vervelende vertraging opgevat te worden, maar ook lang genoeg om de totale animatie af te spelen. Wederom zijn rondingen en een gradiënt gebruikt om blokvorming te voorkomen en een vriendelijke uitstraling te geven. De gradiënt zorgt tevens dat het duidelijker is dat het om knoppen gaat, omdat hiermee een fictief visueel hoogteverschil ten opzichte van de achtergrond wordt gecreëerd.
Pagina | 27 De dag-icoon uit figuur 10 vertoont een jQuery .toggle("bounce") effect met een ‘easyInOutBounce’ functie en heeft een animatieverloop gedurende 300 milliseconden (figuur 11). De animatie en het animatieverloop maken de gebruikerservaring naar verwachting speelser en leuker. De animatie is te vergelijken met het stuiteren van een bal. Daarentegen kan een overdadig gebruik van dergelijke animaties de gebruikservaring juist weer negatief beïnvloeden. Voor het icoon is een vrij grote afbeelding van een kalender met de tekst ‘Dag’ gekozen. De achtergrond hiervan is transparant, zodat de afbeelding gedeeltelijk boven andere content kan staan zonder grote gevolgen te hebben voor de zichtbaarheid van de laag eronder. Dit is overigens een klein designdetail, maar draagt hopelijk bij aan een ‘frisse en dynamische look’. De ‘Bestelling verzenden’ icoon in figuur 12 gebruikt dezelfde bounce-animatie.
De aan/uit knop in figuur 13 bevat geen animatie. De twee dynamische panelen met afbeeldingen overlappen exact op pixelniveau. De cirkel ‘verplaatst’ zich om het effect na te bootsen dat een schakelaar is omgezet. De verandering van de tekstkleur en achtergrond moeten dit effect eveneens verduidelijken. Deze knop kreeg de voorkeur boven het gebruik van een check box als interactief object, omdat zowel tekst boven de knop als tekst in de knop geplaatst kon worden en hierdoor de bedoeling van de knop duidelijker over zou moeten komen.
Figuur 13 - uit/aan knop
Figuur 12 - bestelling verzenden
Berichtenmeldingen (zie figuur 14) om gebruikers ergens op te attenderen, worden vertoond door middel van het jQuery .toggle("fadeIn & fadeOut") effect met een animatieverloop van 500 milliseconden. Tussen deze animaties zit een pauze van 4.0 seconden. Dit interval is gekozen om genoeg tijd voor de gebruiker te reserveren om de korte berichten te lezen. Naarmate een bericht langer vertoond wordt, zullen gebruikers zich waarschijnlijk afvragen waarom deze melding nog te zien is en kan daarmee voor oponthoud zorgen. De ‘fade’ animatie moet bijdragen aan het discreet verschijnen en verdwijnen van een bericht. Ook de lichte achtergrond en rondingen moeten bijdragen aan het bescheiden overkomen van berichten. Afhankelijk van de ernst van de oorzaak van een melding wordt een blauwe, oranje of rode waarschuwing icoon getoond.
De volgende meldingen per scherm worden vertoond, afhankelijk van de acties van een gebruiker:
Inlogscherm
Invoerveld Naam (minimaal 2 karakters): ‘U moet een naam invullen.’
Invoerveld Wachtwoord (minimaal 6 karakters): ‘Gebruik minimaal 6 tekens.’ Invoerveld Postcode: ‘Uw postcode is niet geldig.’
Invoerveld Huisnummer: ‘Uw huisnummer is niet geldig.’
Knop inloggen (Als één of meerdere invoervelden leeg of ongeldig zijn): ‘Uw gegevens zijn niet compleet.’
Instellingenscherm
Knop instellingen opslaan: ‘Uw instellingen zijn opgeslagen.’ Hoofdgerechtscherm
In de titelbalk swipen naar links of rechts (indien nog geen dag geselecteerd is): ‘Selecteer eerst een dag.’
Een grijze knop om een dag te kiezen: ‘Het is %systeemdatum: dag%. U kunt alleen vanaf vandaag bestellen.’
De aan/uit schakelaar voor de keuze van twee personen (indien de gebruiker zelf nog geen gerecht heeft geselecteerd): ‘Maak eerst een keuze voor uzelf.’
Bestelling plaatsen knop (indien geen voorgerecht, hoofdgerecht en nagerecht is gekozen): ‘U heeft niks besteld voor deze dag.’
Pagina | 29 Voorgerechtscherm
In de titelbalk swipen naar links: ‘Swipe rechts naar het hoofdgerecht.’
De aan/uit schakelaar voor de keuze van twee personen (indien de gebruiker zelf nog geen gerecht heeft geselecteerd): ‘Maak eerst een keuze voor uzelf.’
Indien een gebruiker op de lichtblauwe achtergrond tapt: ‘De lichtblauwe achtergrond is statisch en bevat geen functies.’ Deze melding verschijnt slecht eenmaal per scherm. Nagerechtscherm
In de titelbalk swipen naar rechts: ‘Swipe links naar het hoofdgerecht.’
De aan/uit schakelaar voor de keuze van twee personen (indien de gebruiker zelf nog geen gerecht heeft geselecteerd): ‘Maak eerst een keuze voor uzelf.’
Indien een gebruiker op de lichtblauwe achtergrond tapt: ‘De lichtblauwe achtergrond is statisch en bevat geen functies.’ Deze melding verschijnt slecht eenmaal per scherm. Bestellingscherm
De knoppen Wijzig bestelling: ‘Eerdere keuzes voor deze bestelling worden gewist.’ Knop Bestelling verzenden (ná het weergeven van de laad balk): ‘Uw bestelling is
succesvol verzonden.’ Wanneer dit niet lukt: ‘Er is een fout opgetreden bij het versturen, controleer of u verbonden met het internet bent’
De titelbalk (zie figuur 15) van een maaltijdscherm heeft twee functies. Zo voorziet deze in een omschrijving van het scherm aan de hand van een icoon en een benaming. Daarnaast fungeert de balk als interactieoppervlak om tussen bepaalde schermen te navigeren. De indicator in de vorm van een licht transparante pijl geeft aan of interactie op deze wijze mogelijk is. Of links en/of rechts ‘geswiped’ kan worden ligt aan de plaatsing van deze indicator. Een linksgeplaatste indicator geeft bijvoorbeeld aan dat er zich een scherm bevindt aan de linkerzijde van het scherm dat de gebruiker op dat ogenblik ziet. Wanneer een gebruiker naar links swiped, zal het huidige scherm verschuivend verdwijnen naar rechts en het naartoe te navigeren scherm aan de linkerzijde van het scherm inschuiven. De jQuery .toggle("slide", { direction: "left"} verzorgt deze transitie. Voor het swipen naar rechts is de animatie omgedraaid. De mogelijkheid om via de titelbalk te navigeren is alleen van toepassing op de drie maaltijdschermen en het bestelscherm. De achterliggende reden dat alleen in bepaalde schermen deze manier van navigeren tussen schermen wordt aangeboden, is dat er ruimtegebrek ontstaat wanneer knoppen deze functie verzorgen. Ook zou ingeboet worden op de grootte van overige visuele informatie. Een titelbalk neemt al een bepaald aantal verticale pixels in beslag en dit aantal pixels hoefde relatief weinig verhoogd te worden om goed als interactieve oppervlakte te dienen. Een ander argument dat deze keuze verder onderbouwt is de gebruikte hoofdinterfacemetafoor voor het maaltijdscherm. Hierover valt meer te lezen in paragraaf 3.6 – Het maaltijdscherm.
Het dynamische paneel voor gerechten (zie figuur 16) is gekaderd door een dunne omlijning in een oranje-bruine kleur met een hoger contrast dan de achtergrond. Gerechten zijn zowel tekstueel als visueel zichtbaar. De tekst is verwerkt in dezelfde omlijning en heeft de vorm van een kaartenbak. Een gebruiker kan zowel naar links of naar rechts swipen in dit paneel, waarbij indicatoren dit verduidelijken in de vorm van een licht transparante pijl naar links en naar rechts. De tekst die het gerecht aanduidt verandert mee met de afbeelding. Hiervoor is geen animatie in gebruik. Wanneer een gebruiker naar links swiped, zal de huidige afbeelding links het scherm ‘aflopen’ en aan de rechterzijde van het scherm het volgende gerecht inschuiven. Wanneer een gebruiker naar rechts swiped, zal de huidige afbeelding rechts het scherm aflopen en aan de linkerzijde van het scherm het volgende gerecht inschuiven. Bij het continu blijven swipen in één bepaalde richting, zal de gebruiker uiteindelijk weer het ‘eerste’ gerecht zien. Deze animatievorm volgt als het ware de vinger van de gebruiker en voelt natuurlijk aan. Dit paneel neemt ongeveer een derde in beslag van een compleet scherm. Door de grootte van de afbeeldingen is het duidelijk te visualiseren uit welke gerechten gebruikers kunnen kiezen.
De keuze van geselecteerde gerechten wordt weergeven in een omkaderd tekstgebied, waarin de naam van de gebruiker staat en een tweede persoon (zie figuur 17). De keuze knop voor twee personen valt ook in dit omkaderd gebied, zodat duidelijk is waarop deze knop invloed heeft. Het omkaderde gebied heeft dezelfde kleur als de omkadering van de gerechten, zodat de gebruiker een link kan leggen tussen deze gebieden. De keuze voor een tweede persoon verschijnt pas in beeld als de knop ‘Twee personen’ aanstaat en verdwijnt als deze uit staat. De tekst van geselecteerde gerechten is ingesprongen en niet vet gedrukt om duidelijk niveauverschil te creëren zonder daarbij teveel in te boeten qua leesbaarheid.
Pagina | 31
3.3 Het laadscherm
Een laadscherm met logo en/of afbeelding straalt een bepaalde boodschap uit (zie figuur 18). Hiermee worden onder andere herkenbaarheid en onderscheid gecreëerd. De term tafeltje-dek-je is algemeen bekend en duidt de strekking van de applicatie goed aan. Deze term is nu gepresenteerd in de vorm tekst, maar zou ook in de vorm van een professioneel logo als vervanger voor de tekst en afbeelding kunnen dienen. Het laadscherm en het laatste scherm van de applicatie zijn de enige schermen met eenzelfde afwijkende kleur achtergrond van de overige schermen.
Tegelijktijdig geeft een visuele indicator op dit scherm aan wanneer de applicatie klaar is met opstarten, zodat gebruikers begrijpen dat de applicatie bezig is. Zodra de applicatie klaar is met laden zal het inlogscherm automatisch verschijnen. Zodra de gebruiker de keuze automatisch inloggen bij eerder gebruik van de applicatie heeft aangezet wordt het inlogscherm overgeslagen en direct naar het maaltijdscherm gegaan. De gebruiker heeft verder geen interactie met dit scherm.
3.4 Het inlogscherm
Gegevens van gebruikers zijn nodig om een gerichte service te kunnen verlenen. Een gebruiker zal hiervoor persoonsgegevens moeten opgeven bestaande uit een naam, een wachtwoord, een postcode en een huisnummer (zie figuur 19). Aan de hand van deze gegevens zal (automatisch) een beperkt aanbod van gerechten gedaan worden door maaltijdserviceleveranciers. Dit aanbod is afhankelijk van een bepaalde straal, gemeten in kilometers, van de gebruikers opgegeven postcode. Het huisnummer in combinatie met de postcode is nodig om een maaltijd op het juiste adres te bezorgen. Het wachtwoord zorgt dat oneigenlijk gebruik van de applicatie niet kan voorkomen, mits automatisch inloggen uit staat. De gebruiker heeft de optie om automatisch in te loggen na de eerste keer invullen van zijn of haar persoonsgegevens. Een gebruiker kan op een invoerveld tappen. Deze velden zijn voorzien van labels en invoermaskers. Het virtuele toetsenbord van de smartphone of tablet zal dan openen. Een invoermasker helpt gebruikers op foutieve invoer te wijzen. Wanneer de applicatie foutieve invoer aan de hand reguliere expressies ontdekt, krijgt de gebruiker een berichtmelding (zie figuur 20). Ook is te zien dat de functie automatisch inloggen aan of uit gezet kan worden. De slot-icoon draagt bij aan een verduidelijking van de paginanaam ‘inloggen’. Een knop ‘inloggen’ leidt de gebruiker naar het volgende scherm, mits alle invoer geldig is. Is de invoer alsnog niet geldig krijgt de gebruiker de melding ‘Uw gegevens zijn niet compleet of juist’. Een knop ‘instellingen’ brengt de gebruiker naar het instellingenscherm.
Pagina | 33
3.5 Het instellingenscherm
Een instellingenscherm (zie figuur 21) is handig om bijvoorbeeld de optie automatisch inloggen ongedaan te kunnen maken en de mogelijkheid van voorselectie van maaltijdserviceleveranciers in de regio aan te kunnen bieden. De aanhef ‘Beste %naam%%komma%’ wordt opgehaald uit het invoerveld van het inlogscherm, waarbij de naam wordt samengevoegd met een komma. De voorselectie wordt met behulp van een drop-down menu weergegeven (zie figuur 22) zodat ook overige informatie in dit scherm past, omdat onduidelijk is hoeveel maaltijdserviceleveranciers hierin kunnen voorkomen. Deze functionaliteit is beschikbaar, omdat gebruikers een voorkeur kunnen hebben of opbouwen voor bepaalde maaltijdleveranciers door de geleverde kwaliteit of juist het ontbreken daarvan. Deze informatie zou ook (alleen) weergegeven kunnen worden bij alle gerechten. Echter deze wijze biedt weinig extra functionaliteit, kost bruikbare schermruimte en zorgt dat gebruikers meer cognitief te verwerken hebben in schermen waar al veel informatie gepresenteerd wordt. Het drop-down menu opent wanneer een gebruiker daar op tapt. Als een selectie is gemaakt door op een maaltijdleverancier te tappen sluit dit menu en is de gemaakte selectie zichtbaar. De gereedschap-icoon draagt bij aan een verduidelijking van de paginanaam ‘instellingen’. Via de knop ‘Instellingen opslaan’ worden instellingen onthouden. De gebruiker ontvangt direct een bericht met de tekst ‘Uw instellingen zijn opgeslagen’, dat ook automatisch weer verdwijnt. Met een tweede knop ‘ga terug’ navigeert de gebruiker terug naar het inlogscherm.
Figuur 21 - Instellingenscherm
3.6 Het maaltijdscherm
Een gangbare maaltijd bestaat uit drie gerechten, waaronder respectievelijk een voorgerecht, een hoofdgerecht en nagerecht. Als hoofdinterfacemetafoor is gekozen voor een driedeling van het maaltijdscherm, waarin het middelste scherm het hoofdgerecht representeert, het linker scherm het voorgerecht en het rechterscherm het nagerecht. Voordat toelichting over deze schermen wordt gegeven, wordt eerst de instructie ‘laag’ besproken. Deze transparante laag voorziet een gebruiker van instructies over interactiegebieden en technieken.
3.6.1 Instructie laag voor interactietechnieken
Pagina | 35
3.6.2 Dagkeuze
Nadat de instructie laag verdwijnt, dient de gebruiker een dag te selecteren (zie figuur 24). De tekst ‘Selecteer een dag’ pulseert van zwart naar transparant in een lus van 1 seconde om de aandacht van gebruikers te trekken om actie te ondernemen. Een pijl onder deze tekst wijst naar de dag-icoon als verduidelijking. Dit icoon is in dit stadium licht transparant en eronder staan de tekens ‘---‘ om aan te geven dat op dat moment nog geen dag is geselecteerd. Wanneer een gebruiker hierop tapt, opent een licht transparante donkere laag waarop knoppen te zien zijn voor de keuze van een dag (zie figuur 25). De tekst ‘Selecteer dag’ krijgt een witte kleur om afleesbaar te zijn en de dag icoon verliest de transparantie om duidelijk te maken dat deze functie is geactiveerd. Grijze knoppen met doorgehaalde tekst, geven aan dat deze niet functioneel zijn. Knoppen kleuren grijs afhankelijk van de systeemdatum en tijd. Als een gebruiker toch een dergelijke knop tapt, zal deze drie keer snel pulseren en verschijnt een bericht. Deze weergave inclusief interactie en berichtmelding, verdient de voorkeur boven het simpel weglaten van dag knoppen zonder functie. Het weglaten van knoppen zonder een gebruiker daarvan op de hoogte te stellen kan verwarring veroorzaken. De huidige dag heeft twee extra indicatoren, namelijk een gele rand om de knop en een vergroot lettertype. Het geheel is gekaderd door een witte gestreepte lijn, waarboven de weekaanduiding staat. De weekaanduiding is extra informatie en daarom niet in alle schermen zichtbaar om de gebruiker te beschermen tegen een overbelasting van informatie.
