Scriptie V1.9
Mobiele User Experience op open dagen
Colofon
Titel
Mobiele User Experience op open dagen
Auteur
Roy Derriks
Studentnummer
0799407
Jaar van afstuderen
2012
Major
Communicatie & Multimedia Design
Minor
User Experience Design
Begeleider school #1
Rolf den Otter
Begeleider school #2
Rob van der Willigen
Stagebedrijf
EDG Media
Begeleiding bedrijf
Marjolein Nadorp
2
Inhoudsopgave Inleiding ................................................................................................................................................... 6 Probleemstelling.................................................................................................................................. 6 Doelgroep ............................................................................................................................................ 6 Onderzoeksmethode ........................................................................................................................... 7 Doelstelling .......................................................................................................................................... 7 Conceptueel model ............................................................................................................................. 7 Onderzoeksvraag en deelvragen ......................................................................................................... 8 Hoofdvraag ...................................................................................................................................... 8 Deelvragen....................................................................................................................................... 8 User Experience & Design ..................................................................................................................... 10 User Experience ................................................................................................................................. 10 User Experience Design ..................................................................................................................... 11 Usability en gebruikersonderzoek ..................................................................................................... 12 User-Centered Design methodes uit het bedrijfsleven ................................................................. 12 Methodes .......................................................................................................................................... 13 The User Experience Honeycomb ................................................................................................. 13 Restructuring the User Experience Honeycomb ........................................................................... 15 Elementen van User Experience.................................................................................................... 16 Conclusie ............................................................................................................................................... 18 Mobiel ................................................................................................................................................... 20 Mobiele Context ................................................................................................................................ 22 Verschillen in context ........................................................................................................................ 21 Context open dag .............................................................................................................................. 22 Gebruik van mobiele apparaten........................................................................................................ 23 Kenmerken mobiele telefoon............................................................................................................ 24 Voordelen mobiele telefoon ............................................................................................................. 25 Nadelen mobiele telefoon................................................................................................................. 26 De Mythen van de mobile context .................................................................................................... 28 Overwegingen bij het ontwerpen voor mobiel ................................................................................. 29 Eenvoudige mobiele navigatie ...................................................................................................... 29 Minimaliseer invoer op mobiel ..................................................................................................... 30
3
Ontwerp voor onderbroken mobiele connectiviteit ..................................................................... 30 Cross-channel en consistentie ....................................................................................................... 31 Andere overwegingen ................................................................................................................... 31 Conclusie ............................................................................................................................................... 31 Applicaties ............................................................................................................................................. 34 Native applicaties .............................................................................................................................. 34 Webapplicaties .................................................................................................................................. 35 Framework ........................................................................................................................................ 37 Responsive Web Design .................................................................................................................... 38 Conclusie ............................................................................................................................................... 39 Case ....................................................................................................................................................... 41 User Interviews: concepten bespreken ............................................................................................ 41 Keuze open dagen applicatie ............................................................................................................ 41 Onderzoek ......................................................................................................................................... 42 Needs ................................................................................................................................................. 44 Requirements .................................................................................................................................... 44 Scenario ............................................................................................................................................. 46 Flowchart ........................................................................................................................................... 47 Wireframes ........................................................................................................................................ 47 Usability Test resultaten.................................................................................................................... 48 Webapp ............................................................................................................................................. 48 Schermen open dagen applicatie ...................................................................................................... 50 Eindconclusie ......................................................................................................................................... 56 Bronnen ................................................................................................................................................. 58 Boeken ............................................................................................................................................... 58 Online ................................................................................................................................................ 58 Scripties ............................................................................................................................................. 60 Afbeeldingen ..................................................................................................................................... 60
4
5
Inleiding Technologische ontwikkelingen blijven maar komen in producten, interfaces en websites. Het onveranderlijke medium is veranderd in een rijke interactieve experience die steeds vaker op meerdere technische producten word aangeboden zoals een desktop, mobiel en zelfs op televisie. Alleen een website is niet meer genoeg anno 2012 de mogelijkheid om een product aan te bieden op verschillende platformen en de vraag erna blijft stijgt. Een product simpelweg laten werken en mooi aankleden is niet genoeg. Daarom word User Experience steeds populairder en belangrijker. User Experience Design speelt hierop in en is een ontwerpdiscipline waarbij de nadruk ligt op User Centered Design. Dit betekent dat de gebruiker centraal staat, er wordt gekeken naar de belangen en doelen van de gebruiker. Aan de hand van deze belangen en doelen worden ontwerp beslissingen genomen.
Probleemstelling EDG Media is een bedrijf dat magazines aanbied en de bijbehorende websites beheerd die studie gerelateerd zijn. Door de ontwikkeling van de smartphone zien zij kansen om studie gerelateerde zaken ook als mobiele applicatie aan te bieden. EDG Media heeft ervaring met het maken en van magazines en onderhouden van websites maar mobiel is een nieuwe tak die het bedrijf graag wil verkennen. Op de website van TKMST is het mogelijk om informatie over een opleidingen/opendag te vinden en de opleiding te beoordelen om studenten te helpen bij een studiekeuze. Er zijn ook lesideeën op de website en in het magazine van TKMST die de docent of leerling kan gebruiken om een les over studiekeuze te geven of aan te vragen. Het oorspronkelijke idee was om een print versie van een hulp formulier te maken voor leerlingen die opendagen bezoeken. De mogelijkheden van mobiel zijn veel uitgebreider dan print, denk aan interactief, meerdere pagina’s, content opvragen, altijd bij de hand, nooit vol geschreven, geen schrijf objecten nodig en content is up-to-date. Daarom wil EDG Media graag weten wat een mobiel kan toevoegen en waar de mogelijkheden liggen om in de toekomst verder te gaan in het aanbieden van mobiele diensten.
Doelgroep TKMST.nl en het bijbehorende magazine zijn gericht op de doelgroep vo-scholieren. Voortgezet onderwijs scholieren variëren in leeftijd van 12 jaar tot 20 jaar. In Nederland ga je na de basisschool naar het voortgezet onderwijs. Het voortgezet onderwijs kent vier opleidingen: Praktijkonderwijs
tussen 12 en 20
Voorbereidend beroepsonderwijs
van 12 tot 16
Hoger algemeen voortgezet onderwijs
van 12 tot 17
Voorbereidend wetenschappelijk onderwijs
van 12 tot 18
De doelgroep van TKMST.nl waar de applicatie op gericht is, zijn voortgezet onderwijs scholieren die een vervolg opleiding gaan kiezen. Dit zijn de leerlingen in de laatste klassen van het voortgezet onderwijs op elk studie niveau. Deze leerlingen behoren ook tot de bestaande doelgroep van TKMST.
6
Onderzoeksmethode Om nog meer kennis te vergaren over User Experience Design zal ik literatuuronderzoek doen, dit zal voortkomen uit het lezen en verzamelen van gerelateerde boeken, artikelen, websites en blogs. Ook de verschillende opties en platformen om een applicatie voor mobiele telefoons te ontwikkelen worden onderzocht. Er worden open dagen bezocht om te zien hoe het er op open dagen aan toe gaat en hoe een mobiel in die context gebruikt kan worden. Om het eventuele verschil tussen de open dagen van de opleidingsniveaus te zien word er van de drie niveaus mbo, hbo en wo allemaal een open dag bezocht. Het stagebedrijf heeft ook al verschillende onderzoeken gedaan naar bijvoorbeeld de doelgroep en social media die ook gebruikt gaan worden als kwantitatief onderzoek. Door gesprekken met de werknemers die al veel ervaring en ideeën hebben op het gebied van open dagen kunnen er inzichten komen net zoals bij de gesprekken met de stagairs uit het laatste jaar van het voortgezet onderwijs die geregeld snuffelstage komen lopen bij EDG Media.
Doelstelling Mijn scriptie is bedoeld als een eerste kennismaking met User Experience Design voor iedereen die wil beginnen met het maken van een mobiele applicatie. Het is de basis die nodig is voor er wordt nagedacht en gewerkt aan de uitwerking van een mobiele applicatie. Het uitgangspunt is dat de lezer bekend is binnen een multimedia vakgebied en de overstap wil maken naar applicaties voor smartphones, zoals het bedrijf waar ik mijn afstudeeropdracht mag doen. De focus van de opdracht zal vooral liggen op de User Experience en het ontwerp van de mobiele applicatie. Nadat ik onderzocht heb wat de mogelijkheden zijn wil ik me richten op het functioneel ontwerp van de mobiele applicatie. Met het onderzoek wil ik advies geven aan EDG Media, een concept neerzetten en uitwerken in een interactief prototype.
Conceptueel model
7
Om de hoofdvraag te beantwoorden: “Met welke factoren creëer je een betekenisvolle en gebruiksvriendelijke beleving voor een mobiele applicatie op een open dag?” is het theoretisch kader opgedeeld in 3 hoofdstukken. Als eerste word de manier van werken om de User Experience te vormen onderzocht. Wanneer er een keuze voor een werkwijze is gemaakt word de context waarin de open dag plaatsvindt en de factoren die het mobiel gebruik beïnvloeden op open dagen onderzocht. En als laatste onderdeel een onderzoek naar de techniek die de mobiele applicatie ondersteunt. De case study gebruikt eerdere onderzoeken uit het theoretisch kader om een concept te ontwikkelen die voor een betekenisvolle en gebruiksvriendelijke beleving op open dagen zorgt. De 3 hoofdstukken uit het theoretisch kader moeten samen met de uitwerking van de case een antwoord geven op de vraag “Met welke factoren creëer je een betekenisvolle en gebruiksvriendelijke beleving voor een mobiele applicatie op een open dag?””
Onderzoeksvraag en deelvragen Hoofdvraag - Met welke factoren creëer je een betekenisvolle en gebruiksvriendelijke beleving voor een mobiele applicatie op een open dag? Deelvragen - Welke invloed hebben de elementen van User Experience op de context van de mobiele open dagen applicatie? - Welke factoren beïnvloeden het mobiel gebruik bij het bezoek van een open dag? - Welke techniek is geschikt en ondersteund de functionaliteiten van de open dagen applicatie? De antwoorden op deze deelvragen zullen de benodigde informatie geven om de hoofdvraag te beantwoorden en het gewenste eindproduct op te leveren.
8
9
User Experience & Design Om een prettige User Experience te vormen is het belangrijk om te weten wat User Experience en User Experience Design inhoud, waar het uit bestaat en hoe deze gevormd kan worden. Maar ook hoe bedrijven User Centered Design en gebruikersonderzoek binnen een project toepassen. Dit vormt de basis om een User Experience Design methode uit te kiezen en toe te passen in de case study waar de mobiele applicatie word uitgewerkt.
User Experience User Experience vertaald naar het Nederlands betekend gebruikerservaring. Het is de ervaring die de gebruiker heeft met een product of dienst. Een gebruiker is iemand die een product of dienst gebruikt. Ervaring is kennis hebben van de gebruikelijke gang van zaken, verkregen door observatie en betrokkenheid bij bepaalde processen of toestanden. Het is een vorm van kennis of inzicht, die door ondervinding geleerd wordt. Kennis wordt hierbij wel gezien als geheel van theorie en ervaring. [32] Omvat alle aspecten van digitale producten en diensten die gebruikers direct ervaren, waarnemen, leren en gebruiken. Ook de product vorm, gedrag en inhoud spelen een rol. Het omvat ook de gebruikers merkbeleving en de reactie die ervaring oproept in hen. Belangrijke factoren die bijdragen aan de kwaliteit van de ervaring van gebruikers van producten zijn leerbaarheid, bruikbaarheid, nut en estetisch. Pabini Gabriel-Petit [8] User Experience betrekt de hele ervaring van de gebruiker voor, tijdens en na het productgebruik. Een ervaring is meer dan interactie met het product, ook de emotie en de invloed van het product op het dagelijks leven, de relatie met anderen, op het werk en op de samenleving vormen een ervaring. Een mobiele telefoon wordt gebruikt in een bepaalde fysieke omgeving en situatie met een bepaald doel voor ogen. Het gebruiken van een mobiele telefoon om informatie op te zoeken, is iets heel anders als je vriendin opbellen met diezelfde telefoon. Iedereen heeft een verwachting over hoe een product werkt zelfs voor je het product hebt gezien. Deze verwachtingen zijn gebaseerd op ervaringen met eerdere (vergelijkbare) producten. Ook het uiterlijk van het product speelt hierin een rol zoals de knoppen, de indeling en de content. De menselijke zintuigen worden ook geprikkeld door bijvoorbeeld het klik geluid dat je hoort wanneer er een foto word genomen met de camera of het knipperende lampje dat je ziet branden wanneer de batterij van de mobiele telefoon bijna leeg is. De menselijke gedachten en emoties spelen ook een rol in User Experience. Deze gedachtes en emoties kunnen voor het gebruik van de mobiele telefoon al aanwezig zijn zoals het zien van twee auto’s die op elkaar botsen en je het alarm nummer wilt bellen. Gedachten en emoties kunnen ook opgeroepen worden door het gebruik van het product bijvoorbeeld als de software vastloopt. Welke producten iemand gebruikt of koopt ligt ook aan de identiteit en imago. Wanneer je een iPhone koopt omdat die zo hip en gebruiksvriendelijk is maar hij loopt steeds vast klopt dat niet met het imago en de verwachting van het product.
10
Ook de sociale omgeving speelt een rol. Wanneer je erg tevreden ben over een product of dienst vertel je dat tegen anderen. Het kan zelfs zo zijn dat je fan op facebook word en zo je omgeving beïnvloed. Maar ook andersom is het zo dat je zelf word beïnvloed door reacties en ervaringen van anderen uit jouw omgeving.
User Experience Design User Experience Design houdt rekening met al de voorgaande kenmerken van User Experience in een product of dienst. Door vanuit de gebruiker te denken, de gebruiker te bestuderen en deze te leren begrijpen komen er bepaalde wensen vanuit de gebruikers die van wezenlijk belang kunnen zijn in het gebruik van een product of dienst. Het kan voor de ontwerper logisch zijn om de enige knop van een koffiezetapparaat geen geluid mee te geven. Het is toch duidelijk dat er maar één knop is en die is er om koffie te zetten. Maar wanneer de gebruikers niet zeker weten of na het drukken op de knop het koffiezetapparaat gaat lopen en er op de knop gedrukt blijft worden resulteert dit in een slechte User Experience. Wanneer een product of dienst kan inspelen op de verwachting en wensen van de gebruiker zal dit de User Experience ten goede komen. [1] User Experience Design is een holistische, multidisciplinaire aanpak voor het ontwerpen van gebruikersinterfaces voor digitale producten, het definiëren van de vorm, gedrag en content. User Experience Design integreert, Interaction Design, Industrial Design, Information Architecture, Information Design, Visual Interface Design, User Assistance Design en User-Centered Design en zorgt voor samenhang en consistentie in al deze ontwerp dimensies. Pabini Gabriel-Petit [8]
[A] Disciplines of User Experience Design. Saffer, D
User Experience Designers gebruiken veel technieken die afkomstig zijn uit andere vakgebieden. De meningen over wat een User Experience Designer zou moeten kunnen verschillen nogal. Zoals op de
11
afbeelding [A] Disciplines of User Experience Design van Saffer, D. te zien is zijn er nogal wat competenties binnen User Experience Design.
Usability en gebruikersonderzoek Het belangrijkste aan User Experience Design zijn de gebruikers. Dit zijn de uiteindelijke eindgebruikers van het product of de service. De service of product wordt voor de gebruikers gemaakt, daarom is het belangrijk te weten wat ze bezig houd en hoe ze over bepaalde dingen denken die uiteindelijk in de site of product komen. Daarom is het belangrijk in User Experience Design om de gebruiker te betrekken bij de site of het product. Het idee kan geweldig zijn maar als niemand het wil of door een usabillity probleem niet kan gebruiken zal het nooit slagen. Om de gebruikers te betrekken en meningen te peilen zijn een aantal test methodes ontstaan om de interesse en mening van de gebruiker te achterhalen en tot nieuwe inzichten of problemen te komen. Bepaalde gebruikers test kunnen gebruikt worden nog voor het project is gestart en er geen concept is, anderen worden tijdens een proces gebruikt of wanneer het product vorm begint te krijgen en er getest kan worden wat de doelgroep ervan vindt. Onderzoek naar de gebruiker kan van grote waarde zijn. Enquêtes, interviews of een focus groep is het beste te gebruiken om achter de algemene attitude en perceptie van de gebruikers te komen. Gebruikerstests en veldstudies zijn meer geschikt voor het begrijpen van bepaalde aspecten van gebruikers gedrag en interactie met het product. Deze vormen van onderzoek werken het effectiefst als van te voren duidelijk is welke informatie je van de gebruikers wil hebben. Wil je uitzoeken wat de gebruikers doen wanneer ze een bepaald onderdeel van het product gebruiken? Of misschien weet je dat al en wil je weten waarom ze dit doen? Hoe duidelijker je kunt beschrijven wat je wilt weten, hoe nauwkeuriger en effectiever je de vraag kan formuleren om te zorgen dat je de juiste informatie krijgt.
User-Centered Design methodes uit het bedrijfsleven Er zijn veel verschillende methodes om een project aan te pakken. User Experience Design is een Human-Centered Design methode wat betekend dat er vanuit de gebruiker gedacht word. Er is eerder onderzoek gedaan naar bedrijven die de User-Centered Methode gebruiken en welke stappen in het proces doorlopen worden. Vaak komen de stappen waarin iets gecreëerd word overeen maar de onderzoeksfase vooraf is bij veel bedrijven anders. TamTam gebruikt de AgileScrum methode. TamTam onderzoekt de doelgroep in de onderzoeksfase en maakt gebruik van respondenten en bij grote projecten echte eindgebruikers. Tijdens een brainstorm met de respondenten of eindgebruikers moet de data verzameld worden en word gepresenteerd aan de klant. Tijdens de ontwerpfase wordt er getest met gebruikers en wanneer het prototype klaar is word dit getest met een usabillity test.
12
ZichtOnline slaat bijna altijd de onderzoeksfase over, omdat veel projecten die ze doen voor klanten een laag budget hebben. Soms krijgen ze bij ZichtOnline wel kantenklare onderzoeken van de klant. Er wordt geprobeerd vanuit de gebruiker te denken maar dit gebeurd vanuit eigen inzicht. Het testen word vaak thuis gedaan met vrienden en familie. Afas werkt met de watervalmethode waarbij er geen tijdslijn is. Voordat er ontwerpen worden gemaakt organiseren ze klantsessies. Tijdens deze sessies word er een presentatie gegeven en kunnen gebruikers input geven en vragen stellen via een microfoon in de zaal. Voor het testen word er eerst een prototype gemaakt om mee te testen. Marvia neemt ideeën en ontwerpen mee naar huis om deze aan familie en vrienden voor te leggen. Daarna wordt alles verder uitgewerkt. Bij het testen van grote releases word wel nog een focusgroup georganiseerd waarin nieuwe ideeën worden besproken en er ruimte is voor feedback. Layar maakt altijd gebruik van de onderzoeksfase en besteed niets uit, omdat het juist van belang is de doelgroep zelf te spreken. De onderzoeksresultaten worden gepresenteerd aan collega’s met behulp van persona’s. Het testen gebeurd met echte gebruikers 1 op 1 om het ontwerp te verbeteren. [1A] Wat opvalt bij deze bedrijven die een User-Centered methode gebruiken is dat de gebruiker vaak niet centraal staat. Er worden wat gesprekken ingepland met gebruikers of men krijgt een onderzoek van de klant maar vaker nog wordt er gewerkt vanuit eigen inzicht. Usabillity word wel door alle bedrijven uitvoerig getest al gebeurd dit bij ieder bedrijf op een andere manier, soms met gebruikers maar ook soms met familie, vrienden en collega’s. Maar een goede usabillity alleen vormt geen goede User Experience. Op dit moment in het proces is het te laat om alles om te gooien en een andere richting in te slaan. De input van de gebruikers komt te laat, wanneer dit voor of tijdens het concept gebeurd is er de mogelijkheid om bepaalde keuzes af te wegen en te veranderen.
Methodes The User Experience Honeycomb Peter Morville’s Honeycomb model komt uit 2004. The User Experience Honeycomb illustreert de facetten van User Experience. Dit helpt bij het begrijpen waarom er verder gekeken moet worden dan alleen Usability. Welk facetten de hoogste prioriteit hebben hangt af van een unieke balans van context, content en users. De User Experience Honeycomb dient als spiegel in het proces van een digitaal product. Door de voortgang te blijven meten en in de spiegel te kijken kunnen er inzichten komen maar ook fouten herkend worden die opgelost kunnen worden. Wanneer er bijvoorbeeld veel content in een scherm staat en de gebruiker maar naar beneden kan blijven scrollen betekent dit dat de content die nodig is niet gevonden kan worden. Wanneer een gebruiker weet wat hij wil vinden kan met behulp van filters of een zoekveld sneller worden gevonden wat men zoekt en hoeft men niet eindeloos door de content heen te zoeken. [11] Om de User Experience te waarborgen en niet uit het oog te verliezen kunnen functies, ideeën en uitgewerkte schermen of wireframes gespiegeld worden aan de honeycomb. Dit zorgt ervoor dat de
13
belangrijke eigenschappen van de User Experience op elk moment getoetst kunnen worden en er direct aanpassingen of toevoegingen uit kunnen komen wanneer deze niet compleet is.
Useful Als beoefenaars, kunnen we niet tevreden zijn om te schilderen binnen de lijnen die getrokken zijn door managers. We moeten creatief zijn om producten en systemen nuttiger te maken. En onze kennis toepassen om innovatieve oplossingen te definiëren die nuttiger zijn. Usable Gebruiksgemak blijft van essentieel belang, en toch hebben de interface centered methodes en perspectieven van mens-computer interactie geen betrekking op alle dimensies van webdesign. Usability is noodzakelijk maar niet voldoende. Desirable De zoektocht naar efficiëntie moet worden getemperd door een waardering voor de kracht en waarde van het beeld, identiteit en merk. Findable Er moet worden gestreefd naar het ontwerpen van bestuurbare websites en lokaliseerbare objecten, zodat gebruikers kunnen vinden wat ze nodig hebben.
[C] Peter Morville - The User Experience Honeycomb
Accesible Net als gebouwen, liften en hellingbanen, moeten websites toegankelijk zijn voor mensen met een handicap. Het is goed en ethisch verantwoord om dit te doen aangezien 10% van de bevolking een handicap heeft. Credible Gebruikers moeten geloven wat we vertellen en wat we aanbieden. We kunnen dit besturen door de design elementen te gebruiken die van invloed zijn op de gebruikers vertrouwen. Valuable De site moet toegevoegde waarde leveren aan sponsors. Voor non-profit organisaties, de User Experience moet de missie bevorderen. Voor profit organisaties, moet de User Experience bijdragen aan het bevorderen van de klanttevredenheid. [11]
Een onderdeel van het vakgebied Information Architecture is het duidelijk beschrijven van content of voorwerpen zodat de gebruikers dit begrijpen. Dit heeft Peter Morville nagelaten in zijn User Experience Honeycomb. Er is veel onduidelijkheid over de uitleg bij de facetten en het begin en eindpunt in de User Experience Honeycomb.
14
Restructuring the User Experience Honeycomb The User Experience Honeycomb komt uit 2004 is al redelijk oud en niet gestructureerd. Magnus Revang heeft daarom de Honeycomb geherstructureerd en de uitleg bij de verschillende facetten versimpelt. Ook is de indeling veranderd en daardoor is er een duidelijk begin van het proces. De grootste verandering is het facet value. Dit is in de Honeycomb van M. Revang geen facet meer maar een resultaat van User Experience. Findability “Je kunt niet gebruiken wat je niet kan vinden” Accesibility “Je kunt niets gebruiken waar je geen toegang tot hebt” Desirability Je ziet de interface voor je het gebruikt. Usability Het moet mogelijk zijn iets te gebruiken om er iets mee te doen. Crediblity Je moet een dienst vertouwen voor je jezelf verbindt tot het oplossen van een taak met die dienst. Usefulness Een gebruiker vormt een mening over de nuttigheid wanneer de site wordt verlaten en hopelijk pas na het afronden van de taak.
[D] Restructured User Experience (Honeycomb) M.Revang
Value Waarde is een resultaat van User Experience en niet een facet. [12]
De modellen worden gebruikt bij het ontwerp proces en zijn vooral bedoeld als bron tijdens het proces. Zit je vast of weet je het even niet meer kun je altijd de modellen erbij pakken om te zien of je wel de juiste weg bewandeld en of je niet iets over het hoofd ziet. Probeer tijdens het proces regelmatig het model te bekijken, dit kan leiden tot innovatieve nieuwe ideeën of andere inzichten over het product of de service.
Een voorbeeld is Accesibillity 10% van de bevolking heeft een handicap. Kleurenblind valt hier ook onder. Wanneer het visueel uitwerken van het product begint is het goed om op het kleurencontrast te letten. Wanneer er een hoog contrast in de achtergrond kleur en de kleur van de tekst zit, is het ook voor mensen met kleurenblindheid te zien.
15
Elementen van User Experience Het User Experience Design proces houdt in dat geen aspect van de ervaring met het product gebeurt zonder bewuste intentie van de ontwerper. Dit betekent dat er rekening gehouden moet worden met alle mogelijkheden van elke actie die de gebruiker waarschijnlijk neemt en verwachtingen van de gebruiker bij elke stap door het proces. Dit klinkt als een hoop werk en in sommige opzichten is dat het ook, daarom word het werk verdeeld in verschillende elementen, hierdoor word het geheel ook duidelijker. Alle beslissingen over hoe een site of product eruit ziet, zich gedraagt en wat je met het resultaat kunt doen resulteert in User Experience. Het doel is om de onderdelen van User Experience op te delen in vijf vlakken zodat er per vlak gewerkt kan worden. Wanneer de strategie bepaald word hoef je nog niet over het uiterlijk na te denken hoe moeilijk dit ook kan zijn. Alle elementen vervolgen elkaar en er kan aan een volgend vlak gewerkt worden wanneer het vlak ervoor zo goed als afgerond is. Wanneer er aanpassingen zijn in een vlak betekend dit dat het vlak ervoor niet juist is afgerond en moet er een stap terug gedaan worden om het vorige vlak te herstellen en aanpassingen door te voeren. Daarna kan er weer verder worden gewerkt aan het volgende vlak. [1] Strategy plane De User Needs zijn de doelen voor het product die afkomstig zijn van buiten de organisatie. Specifiek zijn dat de doelen van de mensen die het product gebruiken. De User Needs is het begrijpen van de gebruikers, wat ze van een product willen en hoe dat aansluit bij andere doelen. Tegenover de behoefte van de gebruikers staan de organisaties eigen doelstellingen. Deze Product Objectives kunnen bedrijfsdoelen zijn zoals meer verkopen dit jaar of andere doelen zoals kiezers informeren over kandidaten bij de volgende verkiezing. Scope plane Aan de functionele kant is de Strategy vertaald naar Scope door het creëren van Functional Specifications van het product. Dit zijn de functionaliteiten en features die terug komen in het product. Aan de informatie kant van het product neemt Scope de vorm aan van Content Requirements. Dit is een beschrijving van de verschillende elementen die nodig zijn. Structure plane De Structure geeft de structuur aan van de functionele kant doormiddel van Interaction Design, waarin bepaald word hoe het system zich gedraagt als reactie op de gebruiker. Aan de informatie kant is Information Architecture, de inrichting van content elementen om het menselijke begrip te vergemakkelijken. Skeleton plane Het Skeleton is opgedeeld in drie onderdelen. Aan beide kanten is Information Design van toepassing. Dit is het presenteren van informatie op een manier die eenvoudig te begrijpen is. Aan de functionele kant bevat het Skeleton ook Interface Design, het inrichten van interface elementen om gebruikers in staat te stellen interactie met de functionaliteiten van het systeem aan te gaan. Aan de informatie kant staat Navigation Design een set van schermelementen die de gebruiker in staat stellen om zich door de informatie architectuur te verplaatsen. Surface plane Als laatste onderdeel komt Sensory Design. Ongeacht de functionele of informatie zijde, het doel blijft hetzelfde namelijk de zintuiglijke ervaring creëren door het eindproduct. De laatste stap in het proces draait pas om de uiterlijke kenmerken van het product. [1]
[F] The Elements of User Experience by Jesse James Garrett
Het model is opgedeeld in vlakken die ook weer onderverdeeld zijn in verschillende lagen. Dit is een handige manier van denken over het User Experience probleem. In de werkelijkheid zijn de lijnen tussen deze gebieden niet zo duidelijk getrokken als in het model. Het kan moeilijk te identificeren zijn of een probleem te verhelpen is door de plaatsing van een element of het te vervangen voor een ander element. Kan een aanwijzing in het visuele ontwerp het probleem verhelpen of moet het onderliggende Navigation Design aangepast worden? Sommige problemen hebben aandacht op verschillende gebieden tegelijk nodig terwijl andere problemen buiten de lijnen van het model vallen.
16
Het is daarom een richtlijn voor het werken aan een User Experience probleem en niet de enige vorm of volgorde voor het verhelpen van een probleem. Elk vlak hangt af van het vlak ervoor. Wanneer de keuzes tijdens een proces niet overeenkomen met de vlakken ervoor, kan het project falen, er kunnen deadlines gemist worden, kosten kunnen oplopen, en het project kan gevaar lopen. Misschien nog wel erger wanneer het product gelanceerd word, kunnen gebruikers het product niet waarderen en stoppen met het gebruik ervan, omdat de User Experience niet aan de verwachtingen voldoet. Er zijn maar weinig producten of diensten die aan één kant van het model vallen. Binnen elk vlak moeten de elementen samenwerken om het uiteindelijke doel van dat vlak te bereiken. Het onderscheid maken van het effect van één element en wat voor invloed dat heeft op de andere elementen op het vlak is erg moeilijk.
17
Conclusie De vraag “Welke invloed hebben de elementen van User Experience op de context van een mobiele open dagen applicatie?” is in dit hoofdstuk onderzocht. De invloed van de elementen van User Experience op de context van een mobiele open dagen applicatie heeft een positief effect op verschillende levels.: Het genereert duidelijke verbeteringen aan toepassingen. Dit is het meest zichtbare en verwachte resultaat in een User Centered Design proces.Het helpt ontwikkelaars prioriteiten te stellen en het structureren van technische werkzaamheden en het beheren van de workflow en werkdruk. Het genereert nieuwe ideeën met betrekking tot de technologieën. Het creëert een aanzienlijke hoeveelheid van leren op persoonlijke en organisatorische niveaus, gerelateerd op eindgebruiker oriëntatie en management. Dit resulteert in gevoeliger worden van ontwikkelaars en hun organisatie voor de standpunten van de klant. Andere effecten van UX-UCD methode: Ontwerp activiteiten zijn niet alleen voor het vinden van oplossingen voor vooraf gedefinieerde problemen, maar ook over het vinden van nieuwe problemen. In de praktijk wordt er op basis van een eerste inzicht iets ontworpen, waarna het ontwerp weer nieuwe vragen oproept. Het doel is dus niet om alleen maar te komen met voorstellen die vandaag haalbaar zijn. Het kunnen ook voorstellen zijn voor een latere toevoeging in een volgende versie. User Experience Design wordt gebruikt om de kans dat klanten het systeem als waardevol ervaren te vergroten, maar kan niet garanderen dat dit zal gebeuren. Er is geen methode die het genereren van goede ideeën, ontwerpen en User Experience kan garanderen. Een goed idee kan de dag reden zelfs wanneer er niet vanuit een methode gewerkt word. Op dezelfde manier kunnen goede ideeën serieus misgaan als gevolg van het niet goed uitvoeren van stappen in het proces. Naar mijn mening zijn de elementen van User Experience van J.J. Garrett een goed uitgangspunt om het project van begin tot eind te doorlopen. Het is niet de enige manier of de juiste manier maar zorgt dat het proces draait om de eindgebruikers en betrekt deze bij het uitwerken van het product. Voor er wordt begonnen met het creëren is er een onderzoek nodig zodat de ontwerper bekend is met de needs en wants van de gebruikers en de context van het gebruik en op basis daarvan ontwerpbeslissingen kan nemen. Bij andere werkwijzen zoals de User-Centered Design methodes uit het bedrijfsleven (beschreven in paragraaf 2.6) wordt vaak het onderzoek en de needs en wants van de gebruikers overgeslagen en begint men direct aan een concept naar eigen inzicht. Aan usabillity word wel door alle bedrijven gedacht maar usabillity alleen maakt nog geen goede user experience, usabillity is maar één van de zeven facetten die zorgt voor een goede user experience (zoals beschreven in paragraaf 2.4). Het is juist belangrijk om te weten hoe de gebruikers over het product denken en welke functies er gebruikt gaan worden en op wat voor manier deze gebruikt worden nog voor het concept vast staat. Een ontwerper moet zich inleven in de gebruikers maar wanneer er geen onderzoek is gedaan en met de doelgroep is gesproken blijft het raden naar wat de wensen zijn van de uiteindelijke gebruikers. Zelfs wanneer de ontwerper in de doelgroep valt is dit de mening van één persoon die ook nog bekend is met de techniek, ieder ander persoon kan er anders over denken en er op een andere manier gebruik van maken. Daarom is de werkwijze van de elementen van user experience daadwerkelijk een methode die de gebruiker betrekt en ook echt User-Centered Design genoemd mag worden.
18
19
Mobiele context Om tot een concept te komen die aan alle eisen van een prettige User Experience voldoet moet er rekening worden gehouden met de context van een open dag. Maar ook de context waarin een mobiele telefoon gebruikt kan worden is van belang. Hierbij zijn de kenmerken van een mobiel belangrijk voor het maken van een mobiele applicatie, daarbij horen ook de voordelen en de nadelen voor het gebruik van een mobiele telefoon. De uitkomst van de onderwerpen zijn belangrijke punten om rekening mee te houden voordat er een applicatie wordt ontwikkeld. Mobiel Mobiel refereert naar de gebruikers situatie niet die van het apparaat. Ontwerpen voor mobiel is anders dan voor een desktop, bij mobiel is het begrijpen van de context belangrijk. Het begrijpen van de context betekent hoe, waar, wanneer en waarom iemand zijn mobiel gebruikt. Het ontwerpen voor mobiel betekent dat de context waarin de applicatie gebruikt word ook kan veranderen. Alle aspecten, mogelijkheden en beperkingen moeten verkend worden. Een mobiel word voornamelijk gebruikt tijdens die momenten dat je even tijd hebt tussendoor. Wanneer je in het openbaar vervoer zit of even naar de winkel loopt om boodschappen te doen. Dit brengt ook weer beperkingen met zich mee zoals het gebruik van de mobiel met maar één hand, door het dragen van een boodschappentas in de andere hand. Ook de omgeving is van belang zoals de zon die de trein in schijnt terwijl je even op je mobiel bezig bent. De mobiele telefoon wordt tijdens korte momenten gebruikt en tijdens het gebruik word er veel gewisseld tussen applicaties, zoals even kijken naar het nieuws en een berichtje versturen. De technologie zorgt ook voor verschillen, er zijn gebruikers met een oudere mobiel terwijl anderen de nieuwste smartphone bezitten waar meer functies op zitten. [16] Context Context is informatie die gebruikt kan worden om de situatie van een entiteit te karakteriseren. Een entiteit is een persoon, plaats of object dat relevant is voor de interactie tussen een gebruiker en een toepassing, zoals de gebruiker en toepassingen zelf,en bij uitbreiding, de omgeving waarin de gebruiker en de applicatie zich begeven. [1B]
Mobile context model, giantant.com
20
In het mobiele context model zie je dat de cultuur, omgeving en activiteit een grote rol spelen. Daarbinnen zijn het de doelen, taken en aandachtsspanne van de gebruiker die een rol spelen. Als laatste gaat de aandacht uit naar het apparaat, de interface, connectie en de provider. Samen vormen al deze facetten de mobiele context.
Verschillen in context In het boek Mobile Design and Development geschreven door Brian Fling wordt context opgedeeld in verschillende soorten van context. Context met de Hoofdletter C is hoe de gebruikers waarde geven aan iets dat ze aan het doen zijn. Zoals een gebouw zien en het opzoeken op internet op je telefoon voegt Context toe aan je taak. Context met een kleine c is de mode, medium, omgeving en omstandigheden waarin we een taak proberen uit te voeren. De context met een kleine c bestaat uit drie type context. Fysieke context (locatie), media context (apparaat en toegang online) en modale context (gemoedstoestand).
Context met hoofdletter C Deze Context met hoofdletter C word ook wel “het verstrekken van Context” genoemd, omdat de verstrekte informatie je Context geeft, ook wel het beter begrijpen van wat dit moment in tijd voor de gebruiker betekend. Context zorgt voor een beter begrip van een persoon, plek, ding, situatie of een idee door er informatie aan toe te voegen.
Fysieke context Waar de gebruiker zich bevind heeft vaak invloed op het gebruik. Wanneer je in de auto rijd, heb je veel privacy, er is niemand die mee kijkt op je scherm maar ben je bezig een voertuig te besturen en op de weg te blijven rijden. In de bus is er minder privacy iedereen kan meekijken maar heb je wel handen en ogen vrij om op je mobiele scherm te concentreren.
Media context Mobiele apparaten zijn niet zo rijk in content als een krant, maar kunnen informatie in het heden geven. De mobiele context voegt waarde toe die een geprinte krant niet kan geven zoals up-to-date content leveren. Het gaat niet alleen om informatie die we ontvangen het kan ook gaan over betrokken publiek in real time. In 2009 werd er bijvoorbeeld 178 miljoen keer gestemd via berichtjes op American Idol terwijl er in 2008 maar 131 miljoen keer gestemd is bij de presidentiële verkiezing in de U.S.A.
Modale context Gedreven door willen, iets nodig hebben of verlangen zo maken mensen keuzes waardoor ze hun doel behalen. Soms door onderscheidende keuzes maar vaker wel dan niet triviale keuzes zoals wanneer je hand boven een vlam is geplaatst, als het te warm word trek je automatisch je hand weg zonder daar echt over na te denken. Modale context is de kern van een opzettelijke handeling of inactiviteit. [4]
21
Context awareness Het belang van context in de informatica is anno 2012 toegenomen, sinds computers steeds meer vertegenwoordigd worden in het dagelijks leven. Context awareness oftewel het idee dat computers kunnen aanvoelen en reageren op de situatie van de gebruiker. Het doel is vooral het leven van de gebruiker makkelijker maken door het verlichten van de taken, zoals het zoeken naar nabijgelegen winkels of openbaar vervoer. Een van de meest vertegenwoordigde apparaten in context awareness is de mobiele telefoon. De mobiliteit van het apparaat is de sleutel tot het idee van context awareness, waar de detectie en het reageren mogelijk word gemaakt en word uitgevoerd door de mobile telefoon, denk hierbij aan het zelf invullen van je fysieke locatie wanneer je bijvoorbeeld google maps opent. Wanneer een applicatie geen functies van context awareness heeft is het toch van belang om de context waarin de gebruiker zich bevind en de context waarvoor de applicatie gebruikt wordt te begrijpen.
Context open dag Om de applicatie op de behoefte van de gebruiker af te stemmen is ook de context van een open dag belangrijk. Wat komen de open dag bezoekers daar doen? Hoe past een mobiele applicatie bij dat doel? Om hier achter te komen zijn er ook open dagen bezocht. De aankomende studenten komen naar een open dag om informatie over een vervolg opleiding te krijgen en daarmee een weloverwogen keuze maken over de opleiding die ze gaan volgen na de middelbare school. Op de open dag zijn er ook bezoekers die slecht voorbereid zijn en op het laatste moment nog een andere richting willen verkennen, de applicatie moet hierop in kunnen spelen. Een mobiele telefoon wordt veel gebruikt op een open dag. Bijvoorbeeld om het groepje met wie je bent gekomen te smsen dat je al klaar bent of om tussendoor iets op te zoeken als je toch staat te wachten. De applicatie moet als mogelijkheid hebben om te wisselen tussen applicaties en toch bij terugkomst op het open dagen scherm blijven staan waar de gebruiker gebleven is. De applicatie wordt vooral binnen de school gebruikt. Een open dag speelt zich af binnenin de school. In de school is de lichtval overal verschillend. Er is kunstmatig licht van de tl balken maar ook licht of zonnestralen die door een raam naar binnen schijnen. In een gang kan het geheel door buiten verlicht zijn terwijl het in een klaslokaal geheel verlicht is door het kunstmatige licht. Op een open dag ben je niet alleen er zijn nog veel meer mensen die ook de open dag bezoeken en is te vergelijken met een gemiddelde school dag. Er zijn veel mensen die geluid maken, soms zijn mensen in groepjes waardoor er extra veel geluid is. Maar ook de manier van gebruik van de mobiele telefoon is belangrijk. Al die mensen die geluid maken lopen ook door de school heen waardoor het erg druk kan zijn. Het lopen terwijl de mobiel gebruikt word is daarom bijna niet van toepassing, de meeste open dag bezoekers gebruiken hun mobiel terwijl ze stilstaan of zitten. Dit is vooral op de momenten tussendoor als er wat tijd over is. Er is dus weinig tijd en de applicatie moet daarop inspelen. Dit kan door de applicatie zo vorm te geven dat het gemakkelijk en logisch is om snel bij een open dag te komen maar ook door locatie herkenning die meteen bij het openen van de
22
applicatie aangeeft waar de gebruiker zich bevind en of die direct naar de open dag wil gaan waar de gebruiker fysiek aanwezig is. De emotie en het moment waarin de gebruiker zich begeeft zijn ook van belang, denk aan iemand die bijna te laat is en de school komt binnen rennen maar niet weet waar hij moet zijn. Ook in dit soort situaties moet het mogelijk zijn binnen de applicatie snel naar het programma van de open dag te gaan zodat diegene weet waar die moet zijn. Een nadeel van een webapp is dat het laden langer duurt maar op een school is meestal WiFi beschikbaar waardoor de laadtijd ook sneller kan gaan.
Gebruik van mobiele apparaten Rond 1997 werd de smartphone geïntroduceerd. De smartphone werd gepromoot als een apparaat dat de drukke, reizende zakelijke professional kon gaan helpen. Het apparaat werd voornamelijk ter beschikking gesteld om toegang te krijgen tot email, de kalender en contacten wanneer iemand niet achter zijn bureau zat of aan het reizen was. De smartphone heeft zich geïntegreerd in het dagelijkse leven van alle typen gebruikers. Smartphone gebruikers geven aan de smartphone te gebruiken voor persoonlijke productiviteit en entertainment, minder voor werkgerelateerde zaken. Het ontstaan van de smartphone was vooral bedoeld voor zakelijke doeleinden, terwijl driekwart van de gebruikers tegenwoordig aangeeft het alleen voor persoonlijk gebruik te gebruiken. Mobiel is een levensstijl Mobiel is een levensstijl niet een apparaat. De waarheid hierachter is dat mensen mobiel zijn en niet hun apparaat. Mobiele telefoons zijn kleiner en lichter geworden om mee te bewegen met het tempo van het leven. Maar de mobiele telefoon heeft geen kracht, waarde of betekenis zonder mensen. Hoe beter er begrepen word over mensen hun levensstijl en doelen waardoor ze worden gedreven, hoe beter er een natuurlijke mobiele ervaring gecreëerd kan worden. Mobiel een constante natuurlijke staat De staat van het flexibel, dynamisch, onafhankelijk, open, vrij, opportunistisch en aanpasbaar zijn is de kern van alle menselijke wezens. Wanneer we deze ideeën overnemen als een set van ontwerp principes behouden we de ervaring op verschillende apparaten, kleine schermen en verdere technologie zijn ontworpen om te passen in de mobiele gebruikers levensstijl.
Het gaat over mensen. En hun mensen. Er is geen aanhoudender wens van mensen dan aan te sluiten en verband met elkaar te leggen. Deze intentie helpt bij het verklaren van een groot aantal mobiele activiteiten en ervaringen. Het verandert het landschap voor hoe we mobiele producten en diensten ontwerpen. De waarde van de nieuwe mobiliteit moet gemeten worden en ook moet er gekeken worden hoe goed het gebruikers in staat stelt om manieren te vinden om samen te komen. [19] In het boek Tapworthy beschrijft Josh Clark de mentaliteit van de mobiele gebruiker en verdeeld deze in drie groepen:
23
• Microtasking: Gebruik van de telefoon voor korte activiteit. • Lokaal: Het vinden van wat er rond de gebruiker aanwezig is. • Verveeld: Het gebruik van de telefoon voor afleiding / entertainment. [40] Houd al deze factoren in het achterhoofd bij het uitwerken van een product of service, de reden waarom en waar een gebruiker het product gebruikt is van groot belang om het concept uit te werken.
Kenmerken mobiele telefoon Ieder product heeft voor en nadelen. Een desktop computer is bijvoorbeeld vaak sneller dan een laptop maar is veel moeilijker mee te nemen, laat staan onderweg te gebruiken. Daarom is er gekeken naar de kracht en de beperkingen van een mobiele telefoon. Tap versus click Touchscreen apparaten worden steeds populairder. Touchscreens komen met andere ontwerprichtlijnen dan de op cursor gebaseerde interactie zoals op een desktop computer. Touchscreens raak je aan voor interactie, een cursor beweeg je door de muis naar het punt voor interactie te slepen. Touchscreens hebben geen mogelijkheden voor het weergeven van CSS hovers/mouse-overs. Hovers en mouse-overs worden gebruikt in websites om knoppen aan te duiden, wanneer de cursor over een knop gaat veranderd de knop van uiterlijk wat aangeeft dat erop geklikt kan worden. Op een mobiel tap je zodra de gebruiker het scherm aanraakt. Ontwerpen van interactieve elementen moet voor mobiel zeer nauwkeurig gedaan worden, om de aantrekkingskracht van de gebruiker op een knop te krijgen zodat duidelijk word dat erop getapped kan worden. Daarom worden er bij touchscreens metaforen gebruikt voor het maken van knoppen. De knop moet eruit zien alsof je er echt op kan drukken. [5] [22] [23]
Wanneer je een mobiel vast houd is het moeilijk om je duim bovenin een mobiele applicatie te krijgen simpelweg omdat je er bijna niet bij kan komen. Wanneer je rechtshandig bent is het moeilijk om links bovenin te komen, wanneer je linkshandig bent is het moeilijk om rechts bovenin te komen zoals de afbeelding Mobiele telefoon activiteit zones, D. Saffer hieronder laat zien. Daarom zijn de belangrijkste hoofdfuncties in de Tab Bar geplaatst die helemaal onderin een applicatie gevonden kan worden.
24
Mobiele telefoon activiteit zones, D. Saffer
Voordelen mobiele telefoon Locatie Mobiele apparaten kunnen locatie bewust zijn, wat de mogelijkheid geeft om content te leveren die direct relevant is voor de gebruikers context.
Massa communicatie Meer mensen in de wereld hebben internet beschikbaar op hun mobiele telefoon dan op desktop computers waardoor het een belangrijk middel van massacommunicatie is.
Persoonlijk Mensen hebben een intieme relatie met hun telefoon. Een mobiel wordt niet gedeeld zoals een desktop computer wordt gedeeld binnen een gezin. Omdat het vooral persoonlijk gebruikt word is er veel potentie op de markt in de richting van het verlangen van een individu om hun telefoon te personaliseren en zo eigen te maken.
Staat altijd aan De meerderheid van de mobiele telefoons hebben toegang tot internet, het zenden en ontvangen van e-mails en berichten ook wanneer het apparaat niet actief word gebruikt. Wanneer het apparaat niet actief word gebruikt staat het niet uit maar op stand-by.
Draagbaar
25
Mensen nemen hun mobiel overal mee naartoe. Naar het werk, tijdens de pauze, even boodschappen doen en zelfs als men zich in huis naar een andere kamer verplaatst gaat de mobiel vaak mee. [16]
Nadelen mobiele telefoon Klein scherm Een mobiel apparaat heeft een klein scherm. Dit is direct één van de grootste zichtbare verschillen ten opzichte van een desktop computer. Het kleine scherm biedt geen plaats voor onrelevante content en te grote afbeeldingen. Ontwerpers moeten veel keuzes maken en creatief met de kleine ruimte om gaan. Ook omdat er op een mobiel apparaat maar één scherm tegelijk bekeken kan worden en daar direct de meest relevante informatie op te zien moet zijn.
Onstabiel oppervlak Een mobiel wordt niet gebruikt zoals een desktop op een stabiele ondergrond zoals een tafel die afgesteld staat op de juiste kijkhoek. Een mobiel houd je in je hand terwijl je loopt, zit of staat misschien wel in de bus waardoor je mobiel in je hand heen en weer schud.
Langzaam internet Een mobiel maakt gebruik van mobiele dataconnectie of een WiFi verbinding die aanzienlijker sneller is. Zelfs de nieuwste en snelste mobiele telefoons en de browsers die daarop staan zijn niet zo snel als op een desktop. De pagina duurt daarom langer om te verwerken en renderen op een mobiele telefoon. Hoewel de kracht van een mobiele telefoon anno 2012 enorm is toegenomen blijft er een verschil in snelheid tegenover de desktop computer.
Weinig tijd Wanneer je in het verkeer deelneemt en in de file staat of moet overstappen op de trein heb je minder tijd voor andere dingen. Je staat wel stil en hebt wat tijd om informatie op te zoeken maar je blijft met je hoofdtaak bezig. Op een desktop concentreer je meer op de getoonde informatie en heb je meer tijd om achterover te leunen en te vinden waar je naar zocht.
Omgeving veranderd Een mobiel gebruik je zoals de naam al zegt mobiel. Wanneer je in een drukke ruimte ben is er meer geluid om je heen. Hierdoor kun je afgeleid worden terwijl je op je mobiel bezig ben maar ook andersom komt het voor. Mensen lopen over straat terwijl ze een mobiel gebruiken, en kunnen zo opgaan waarmee ze bezig zijn op een mobiel dat de omgeving wordt vergeten.
26
Invoer Een desktop computer of laptop heeft de beschikking over een volledig toetsenbord met 104 toetsen of meer. Een mobiel heeft vaak 2 of 3 letters op een enkele toets of in sommige gevallen een volledig on-screen toetsenbord met elke letter onder een enkele toets. Naast dat deze on-screen toetsenborden alsnog beperkt zijn met vaak op één pagina het alfabet en de andere toetsen verborgen onder een toets die een nieuw scherm laat zien met aparte tekens. Maar misschien wel het belangrijkste nadeel is de tastbaarheid, het on-screen toetsenbord is niet tastbaar waardoor typen niet zo natuurlijk en snel gaat als op een tastbaar toetsenbord van bijvoorbeeld een laptop.
Mobiel en web in één apparaat Iedereen kent het wel je bent aan het bellen en moet ondertussen wat op internet opzoeken. Op een desktop computer is dit geen probleem wanneer je met de huistelefoon of mobiel aan het bellen bent. Op een mobiele telefoon zit het web en de mobiele functies in één apparaat. Dit kan een nadeel zijn wanneer je iemand belt op je mobiel en ook wat in de browser op je mobiel wilt opzoeken.
Multi-tasking Smartphones kunnen multitasken maar niet zoals bij een desktop computer waar je bijvoorbeeld vier schermen kleiner kan maken zodat ze allemaal in het beeld passen. Op een smartphone kan er maar één scherm tegelijkertijd open staan waardoor de gebruiker tussen applicatie moet wisselen en zijn focus kan verliezen.
Batterij Een mobiele telefoon heeft een batterij die opgeladen moet worden. Anders dan bij een desktop computer die niet zonder stekker kan, omdat er stroom in het apparaat moet komen. Een mobiel heeft geen stekker maar een beperkte batterij duur. Anno 2012 gaat de gemiddelde smartphone één dag mee voordat de batterij opgeladen moet worden.
Reflecterend scherm Wanneer het zonnig is en je gebruik maakt van je mobiel kan het zonlicht op je scherm reflecteren. Binnen achter een desktop computer wordt er vaak gebruik gemaakt van kunstmatig licht om de ruimte te belichten en schijnt de zon niet direct op je scherm. [17] Niet in alle gevallen zijn dit nadelen van een mobiele telefoon. Het gaat niet altijd op, maar zijn richtlijnen van User Experience die over het algemeen van toepassing zijn op mobiele apparaten. Het kan zo zijn dat iemand achter een desktop computer enorme haast heeft en iemand die gebruikt maakt van zijn mobiel in het ziekenhuis op een stoel zit en uren te spenderen heeft voor diegene aan de beurt is. Het is wel zo dat deze voor en nadelen gelden binnen de context van de open dagen
27
applicatie. De bezoekers hebben een vast programma en tussendoor haast om naar de volgende activiteit te gaan. Mijn eigen manier van mobiel gebruik en die van mensen uit mijn directe omgeving verschilt nogal van de bovenstaande richtlijnen waar rekening mee word gehouden bij het ontwerpen voor mobiel. Toch is mijn mening dat het niet helemaal correct is wat er wordt beweerd. Een mobiel wordt zeker niet overal mee naartoe genomen ook niet binnenshuis. Het kleine scherm gaat ook niet altijd op zeker niet met de nieuwe modellen van mobiele telefoons die op de markt komen, denk hierbij aan Samsungs galaxy Note en de Galaxy III. Beide mobiele telefoons hebben een redelijk groot scherm wat met een 7”inch tablet te vergelijken is. Het langzamer laden van webpagina’s blijft een feit, maar wanneer er WiFi aanwezig is word de laadtijd aanzienlijk minder dan via een 3G netwerk. Dit maakt de mobiele telefoon al meer geschikt om niet alleen tijdens het wachten of vrije momenten te gebruiken. Bedenk zelf eens hoe vaak je in een restaurant mensen ziet die de hele avond een mobiel gebruiken en deze zelfs heen en weer doorgeven om er om beurten op te kijken of mee te spelen. Het feit is dat de mobiele telefoon zo in ons leven is ingeburgerd dat het de normaalste zaak van de wereld is om het apparaat op elk moment van de dag te gebruiken en zelfs een avond in een restaurant kan vullen met genoeg gespreksstof.
De Mythen van mobiele context In The Myths of Mobile Context heeft Josh Clark het over het veranderde gebruik en het doel van mobiele apparaten en de software die erop word gebruikt. Zoals eerder beschreven gaan de richtlijnen van mobiel gebruik en context niet altijd op en veranderd het net zo snel als de mobiele harware vooruit gaat. Het gebruik van een mobiele telefoon tijdens het wachten of tijdens de vrije momenten op een dag gaat steeds minder op. Wanneer je kijkt naar de onderzoekscijfers blijkt dat 25% van de mensen in de U.S.A. internet alleen nog maar gebruikt op een mobiele telefoon, dat komt neer op 8% van de volwassen bevolking in de U.S.A. Een belangrijk onderdeel van de gebruikscontext van een mobiele telefoon die bijna overal word vergeten of weggelaten is de “ik verveel me” context, dit betekend dat mensen absoluut niet gehaast zijn en uit verveling een paar uurtjes op de bank, in bed of in de tuin op hun mobiel spenderen. Dit varieert van een spelletje spelen tot nieuwe apps downloaden maar ook zoals velen tegenspreken zoeken en winkelen op internet. Het idee dat een persoon alleen op zijn mobiel gericht zoekt op internet is anno 2012 achterhaald en geld zeker niet voor alle mobiele gebruikers. Wat betekent dit voor applicaties en websites voor de mobiele telefoon? Het idee achter responsive design is “mobiel is minder”. Een idee wat op papier logisch lijkt maar door de nieuwe manier van het mobiel gebruik niet klopt. Voor mobiel moet ook de volledige content en functionaliteit beschikbaar zijn, alleen moet het anders weergegeven worden. Belangrijk is dat de kern van de content aanwezig is. Het draait om het organiseren en prioriteren van content en niet alleen om mobiel is minder. Het is juist zo dat een mobiel meer kan dan een desktop computer. Een mobiel beschikt over een camera, microfoon, gps, gyroscoop en een touchscreen. Daarom is het belangrijk niet te denken in platformen, de focus moet niet liggen op applicaties of websites, een app is geen strategie maar gewoon een app en is een middel om de strategie mee uit te voeren. Het product is content en is een service, alles eromheen zijn containers waar de content in word geplaatst. Er
28
worden geen pixels ontworpen maar er wordt content ontworpen. Daarom start je met content en lever je rijke complexe ervaringen voor alle contexten. [33] Zoals de wereldberoemde content strategist, user experience designer en oosterse vechtsport acteur Bruce lee al zei “Je schenkt water in een beker, en het wordt de beker”. Dit is ook het geval met mobiele content, ontwerp flexibele content die overal instroomt.
Overwegingen bij het ontwerpen voor mobiel Mobiele telefoon schermformaten zijn toegenomen, maar ook het scherm van de iPhone 4 is nog steeds klein in vergelijking met een standaard 1024 x 768 desktop afmeting. Dit wordt nog ingewikkelder door alle uiteenlopende scherm afmetingen van verschillende telefoon merken en types. Het feit dat smartphones van oriëntatie kunnen veranderen en gebruikers verwachten dat de site of applicatie mee vergroot of verkleint. Hoewel alle smartphone browsers miniatuur websites kunnen weergeven breken ze de gebruikerservaring door gebruikers te laten in-en uitzoomen. Bryan Rieger auteur op UX booth versimpeld het probleem van het ontwerpen voor meerdere beeldschermen met 4 stappen: • Definieer apparaat groepen door schermen te groeperen met vergelijkbare breedtes bij elkaar resulteert dit in een beheersbaar aantal groepen om voor te ontwerpen, • Maak een standaard referentie ontwerp dat aan te passen is aan kleinere en grotere schermen, • Definieer regels voor de content waardoor de vormgeving mee vergroot of verkleint. • Kies voor Web standaarden en een flexibele lay-out. [35] De keuze voor een ontwerp benadering is nooit goed of fout. Denk daarom na over wat beter werkt voor de situatie waarin het product gebruikt word. Ongeacht de aanpak, keuze voor een platform (Andoid, Blackberry, iPhone of Windows mobile) en de applicatie vorm (native app, webapp, mobiele site) zijn er nog andere overwegingen bij het ontwerpen voor mobiel:
Eenvoudige mobiele navigatie Zonder een muis om mee te wijzen en klikken moeten mobiele gebruikers een beroep doen op de kleine toetsenborden, trackballs en om te navigeren het scherm aanraken. Denk daarnaast aan de gebruiker en hun noodzaak om taken snel en efficiënt uit te voeren, duidelijke en intuïtieve navigatie is hierbij van cruciaal belang. Een gemeenschappelijke aanpak die werkt is een lijst van links naar de belangrijkste functies en inhoud, geprioriteerd op basis van behoeften van de gebruiker. Deze wordt vaak verticaal opgesteld. Beperk wel het aantal categorieën en niveaus van navigatie en rangschik deze op basis van prioriteit, presenteer de belangrijkste categorieën eerst. Daarnaast is het belangrijk om duidelijke, beknopte en consistente labels voor de navigatie te gebruiken. Bij het ontwerpen voor touch, zorg ervoor dat de knop afmetingen die aangeraakt moet worden voor de navigatie onderdelen minimaal (breedte of hoogte) 30 pixels is, omdat er een vinger op moet passen. Omdat er voor mobiel geen hoover gebruikt kan worden, zorg voor opvallende links en door het missen van de hoover functie is het extra belangrijk om duidelijke en onmiddellijke visuele feedback te geven om geselecteerde links of navigatie items aan de gebruiker te tonen. Plaats de
29
belangrijkste navigatie links onderin in plaats van bovenin het scherm, zodat ze herkenbaar en makkelijk te bereiken zijn en het belangrijkste onderdeel de content direct in het scherm staat in plaats van onder de navigatie links. Wanneer het product via crossmedia te gebruiken is, zorg voor een link naar de website en andersom zodat de gebruikers een keuze kunnen maken welke versie ze willen gebruiken. Zorg dat de gebruiker een scherm terug kan gaan of naar een punt kan gaan waar verder genavigeerd kan worden. [34] [36]
Minimaliseer invoer op mobiel Feature phones hebben vervelende numerieke toetsenbord voor invoer, terwijl de smartphones kleine toetsenborden hebben (on-screen of tastbaar) die weer garand staan voor dikke vinger fouten. Gebruik alternatieve input mechanismen waar mogelijk. Applicaties kunnen alle mogelijkheden van het apparaat gebruiken voor invoer waaronder locatie, beweging, camera, gyroscoop, en stem. Mobiele websites en webapps beginnen langzaam door de verbeterde techniek enkele van deze eigenschappen zoals locatie en camera te gebruiken. Beperk input voor belangrijke gebieden bijvoorbeeld als registratie vereist is, beperk dit tot de minimaal vereiste velden, en gebruik kortere alternatieven zoals een postcode in plaats van de stad en staat zo hoeft de gebruiker geen lange teksten in te voeren. Selecteer de beste mobiele input optie, gebruikers laten kiezen uit een vooraf ingestelde lijst met opties is vaak sneller dan typen op een mobiel. Gebruik slimme standaardwaarden zoals het onthouden van laatste selecties en voorkeuren zodat invoer als het moet maar één keer hoeft te gebeuren. Wanneer het nodig is voor gebruikers om in te loggen, bied de mogelijkheid om ingelogd te blijven, vooral omdat mobiele apparaten persoonlijk zijn en meestal niet worden gedeeld. [36] [37] [42]
Ontwerp voor onderbroken mobiele connectiviteit Zelfs met mobiele service providers die nieuwe G-snelheden blijven uitrollen blijft mobiele connectiviteit af en toe niet eens te benaderen, de breedbandsnelheden die iedereen zo gewend is op bedraden en draadloze verbindingen word nooit gehaald. Gebruikers betalen voor toegang tot internet op hun telefoons en niet iedereen heeft onbeperkte data-abonnementen, daarom moet er bij ontwerpen voor mobiel klein gedacht worden: Houd pagina’s klein zodat ze snel kunnen laden binnen de beperkte hoeveelheid geheugen van de meeste telefoons. Verwijder onnodige code, opmerkingen en optionele tags en beperk het gebruik van afbeeldingen en minimaliseer foto's tot een schaal en resolutie die geschikt zijn voor de kleine schermen van mobiele apparaten om de laadtijd te versnellen. [36] [39]
30
Cross-channel en consistentie Wanneer er wordt gekozen voor een product met meerdere kanalen komt daarbij de noodzaak om een consistente en geïntegreerde gebruikerservaring voor alle kanalen te creëren en te behouden. Balans tussen vorm en functie. De één heeft een minimalistische, no-nonsense aanpak met behulp van alleen een logo voor visuele branding. Anderen leuken hun mobiele product op met meer kleuren en iconen maar zorg voor continuïteit. Bijvoorbeeld winkelende gebruikers willen de optie van het bekijken en beheren hun winkelwagentje, verlanglijstjes en bekijken en volgen van orders, net zoals ze dat doen op de volledige site. Een ander voorbeeld is het toe laten om verder te lezen waar de gebruiker gebleven was, ongeacht het apparaat dat als laatst gebruikt is. Het zou ook het synchroniseren van de bibliotheek, bookmarks, notities en highlights moeten bevatten. Mobiele gebruikers moeten ook gebruiker reviews en ratings van producten kunnen opzoeken wanneer ze proberen om te beslissen tussen twee of meer producten. Bouw een consistente gebruikerservaring zodat gebruikers van de volledige site, smartphone website, webapp of native app dezelfde gebruikerservaring hebben op al deze kanalen. [36] [38]
Andere overwegingen Detecteer of gebruikers gebruik maken van een mobiele browser en verwijs ze door naar de mobiele website met een link op het scherm om over te schakelen naar de volledige site. Vertrouw niet op de technologie die niet universeel wordt ondersteund door de mobiele apparaten zoals Java en Flash. Als de gebruikers moeten swipen om door de content te gaan zorg ervoor dat het swipen door de content in slechts één richting kan, de meeste applicaties swipen verticaal door de content. [36] [39] [40]
Conclusie De aankomende studenten komen naar een open dag om informatie over een vervolg opleiding te krijgen en daarmee een weloverwogen keuze maken over de opleiding die ze gaan volgen na de middelbare school. Op een open dag ga je van activiteit naar activiteit met weinig tijd tussendoor dit beïnvloedt het gebruik, want er is weinig tijd en de informatie moet snel beschikbaar zijn. Factoren die het gebruik van een mobiel op een open dag beïnvloeden zijn het kleine scherm, de lichtval binnen de school en de veranderlijke en luidruchtige omgeving, het bewegen van het scherm tijdens het lopen of beethouden, het langer laden maar ook het feit dat een mobiel draagbaar is en naar iedere plek op een open dag meegenomen kan worden. Deze factoren beïnvloeden het gebruik van mobiel op een open dag door de context waarin de gebruiker zich begeeft. Context is hoe de gebruikers waarde geven aan iets dat ze aan het doen zijn zoals een plattegrond opzoeken als je de weg niet kan vinden. Context zorgt voor een beter begrip van een persoon, plek, ding, situatie of idee
31
door er informatie aan toe te voegen. Mobiele context voegt waarde toe die print niet kan geven zoals het up to date zijn wanneer er iets veranderd zo is altijd de laatste informatie beschikbaar. Mobiel refereert naar de gebruikers situatie niet die van het apparaat. De applicatie moet passen in de mobiele gebruikers levensstijl. Een mobiel is persoonsgebonden, staat altijd aan en is nooit meer dan een armlengte verwijderd van de gebruiker dit beïnvloed ook het gebruik van een mobiel op een open dag, er wordt door één persoon gebruik gemaakt van de applicatie en is niet ver verwijderd van de gebruiker en staat altijd aan voor direct gebruik. De applicatie moet hierop inspelen door te onthouden op welk scherm de gebruiker in de applicatie was. Wanneer de applicatie dan opnieuw geopend word komt het vorige scherm weer tevoorschijn. Met alle voorgaande factoren moet rekening gehouden worden bij het maken van een mobiele applicatie. Wanneer er met de mogelijkheden, beperkingen en context van mobiel en het gebruik rekening gehouden word zorgt dit voor een goede basis in de User Experience.
32
33
Applicaties Wanneer er een mobiele applicatie ontwikkeld word is ook de techniek van toepassing op de User Experience. Er zijn meerdere technieken beschikbaar om verschillende soorten applicaties mee te ontwikkelen zoals native applicaties, webapps en responsive design. Om een keuze te maken die voor de open dagen applicatie geschikt is zijn de grootste verschillen tussen de applicaties en de beschikbare technieken onderzocht.
Native applicaties Voordelen Gemakkelijk te vinden voor publiek Apps zijn makkelijker te vinden in de ingebouwde native applicatie winkel. Gebruikers kunnen zoeken en filteren op categorieën, populariteit, top toepassingen etc. Eerste indruk In de applicatie winkel van het platform kunnen gebruikers een indruk krijgen van de toepassing door screenshots te bekijken en de beschrijving en gebruikers reviews te lezen. Download direct Wanneer je een native app wil proberen of aanschaffen, kun je de native app direct downloaden via de ingebouwde applicatie winkel. Gemakkelijk te verkopen Omdat de applicatie direct te downloaden is op een smartphone, is het makkelijker om een applicatie te verkopen. Prestatie Native apps verslaan webapps wanneer het gaat om prestatie. Native apps zijn meer geheugen efficiënt en maken gebruik van standaard gebruikers interfacecomponenten.
Voorbeelden van native applicaties
Nadelen Programmeertalen Native apps zijn niet eenvoudig te bouwen, ze zijn gemaakt met een eigen complexe programmeertaal. Het leren van een volledige taal duurt veel te lang Ontwikkelaars van een platform kunnen meestal de taal van een ander platform lezen en begrijpen, maar de volledige taal leren kan lang duren. Uploaden naar de applicatie winkel van het platform Wanneer de ontwikkeling van een native app is afgerond moet deze in de online toepassing winkel van het platform worden geplaatst. Voor sommige app winkels moet je een geregistreerde ontwikkelaar zijn. Je wordt gevraagd om een jaarlijkse of maandelijkse betaling. Na de betaling krijg je het gereedschap om native apps te ontwikkelen, dan ben je ook in staat om native apps in de winkel te uploaden. Goedkeuring proces
34
Google heeft minder strenge regels om native apps goed te keuren dan Apple en keurt bijna alles goed wat niet illegaal is. Ook kunnen gebruikers native apps downloaden van andere plaatsen dan de Android Market. Er zijn ook bijna twee keer zoveel gratis native Android apps dan gratis native iOS apps. [5] [16] [21] Onderhoud Een applicatie ontwikkelen of laten ontwikkelen is stap één maar hoe word de applicatie bijgehouden? Wie gaat door met het onderhouden van de code wanneer er updates zijn in de applicatie, maar ook nieuwe hardware en OS updates zorgen ervoor dat de applicatie bijgewerkt moet worden. Naast het ontwikkelen van de applicatie is ook het bijhouden een lange termijn investering. [43] Een native applicatie is dus in principe een “echte” applicatie voor een mobiele telefoon. De grootste voordelen zijn de vindbaarheid in de app markets en het volledig gebruik van alle functie die een mobiele telefoon bied. Het grootste nadeel zijn de kosten zo kunnen er duizenden euro’s per pagina worden gevraagd voor het ontwikkelen, dit geld voor elk apart platform waarop de applicatie uit moet komen.
Webapplicaties Alle webontwikkelaars hebben kennis van HTML, CSS en Javascript en wanneer ze starten met het bouwen van een mobiele app willen ze niet alle kennis of vaardigheden links laten liggen. Waarom jaren van ervaring weggooien als alleen het platform is veranderd? Ontwikkelaars kunnen nu kiezen voor een specifiek Native platform voor een applicatie of een web-based framework om apps mee te creëren. Maar er zijn een aantal onmiskenbare voordelen en nadelen waaraan gedacht moet worden voor er een keuze gemaakt kan worden.
35
Voordelen Vertrouwde programmeertaal Ontwikkelaars kunnen gebruik maken van bekende web technologieën. Ontwikkelaars hoeven hun vertrouwde programmeervaardigheden niet weg te gooien. Ze kunnen werken met web technologieën zoals HTML, CSS of HTML5, CSS3 en JavaScript. Ondersteuning voor meerdere platforms De webapp draait op meerdere platformen zonder aanpassing. IOS, Android en andere platformen die gebruik maken van WebKit powered browsers. Daarom werken HTML5, CSS3 en Javascript goed in Webapplicaties. Webapps zijn altijd up-to-date Gebruikers hoeven niet handmatig de applicatie bij te werken. Distribueren en updaten kan met onmiddellijke ingang gebruikt worden door de gebruiker, door de applicatie eenvoudig opnieuw op het web te publiceren. Makkelijker te meten Webapps zijn makkelijk te meten en onderhouden door content management en analytics. Omdat het als het ware een website blijft is Voorbeelden van webapplicaties het makkelijker om het gebruikers gedrag te meten via bijvoorbeeld Google Analytics. Nadelen Moeilijk te verkopen Google (Android Market) en Apple (App Store) zorgen voor een eenvoudige manier voor verkoop van applicaties doormiddel van hun winkels. Moeilijk om publiek te bereiken Gebruikers kunnen meer native apps vinden en downloaden op hun smartphone, door de ingebouwde applicatie winkel te openen. Daar hebben ze toegang tot duizende native apps die gefilterd kunnen worden voor betere zoekresultaten en populariteit. Er is geen winkel voor toegang tot webapps. Prestatieproblemen Native apps hebben snellere prestaties dan webapps. Het openen van HTML pagina’s in een browser kost meer laad tijd en is minder geheugen efficiënt als samengestelde native code. Gebrek aan widgets iOS en Android frameworks hebben tientallen standaard gebruikersinterface componenten. Wanneer je een web app maakt kun je geen gebruik maken van deze standaard componenten. Er zijn een aantal goede frameworks voor webapps, maar deze zijn minder gepolijst dan bij de native apps. [5] [16] [21] In feite is een webapp dus een website verpakt in een omhulsel om het op een native applicatie te laten lijken. Er zijn beperkingen ten opzichte van native applicaties maar wanneer een applicatie geen gebruik maakt van de mogelijkheden van een native applicatie is een webapp misschien een betere keuze. Het grootste verschil zit hem in het aanbieden van de applicatie. Wanneer de applicatie niet in een market aangeboden kan worden moeten er slimme manieren bedacht worden om de applicatie onder de aandacht van de doelgroep te brengen. Een van deze manieren is het
36
verpakken van de webapp zodat het lijkt of er een native app word geopend maar in feite laad de browser de webapp in de verpakte native applicatie bijvoorbeeld zoals bij de Facebook applicatie het geval is.
Framework Op elke smartphone is een native browser geïnstalleerd. Dat maakt webapplicaties die geoptimaliseerd zijn voor smartphone platforms een interessant alternatief voor Native apps. Dankzij de offline gegevensopslag kunnen moderne smartphone browsers alle benodigde middelen in het cache opslaan, zodat zij in staat zijn om de pagina te openen zonder mobiele data verbinding. Webtechnologieën en smartphones hebben toegang tot je huidige locatie voor meer relevante inhoud. Je kunt ook uniek zijn door een eigen aangepaste HTML en CSS. Aanpassingen voor verschillende schermresoluties zijn mogelijk. Sommige platforms bieden ook een functie om de webapplicatie als een snelkoppeling op het startscherm te plaatsen. Voor het ontwikkelen van Webapps kunnen verschillende frameworks gebruikt worden. Twee populaire frameworks zijn jQuery Mobile en Sencha Touch. Beide frameworks werken op een andere manier en hebben andere voor en nadelen.
jQuery Mobile jQuery Mobile is een UI bibliotheek die op jQuery en jQuery UI berust voor DOM manipulatie, Ajax en andere hulpprogramma’s. Om widgets te maken is het nodig om de jQuery Mobile HTML aan te passen. jQuery Mobile werkt door het verbeteren van de HTML die door de ontwikkelaar wordt gemaakt, het is mogelijk om de eerder gemaakte HTML opnieuw te gebruiken of voor andere doeleinde te gebruiken. Simpele applicaties kunnen gecreëerd worden met alleen maar HTML zonder JavaScript code te gebruiken. jQuery Mobile heeft een relatief klein object model, waardoor het makkelijker en sneller te leren is vooral als je bekend bent met jQuery. Het legt geen codering discipline of structuur wat flexibiliteit geeft, maar kan leiden tot toepassingen die moeilijk zijn te onderhouden. jQuery Mobile is makkelijk te integreren met andere frameworks en is compatible met alle grote mobiele, tablet, e-reader en desktop platformen. jQuery Mobile is gratis te gebruiken met veel beschikbare online documentatie.
Sencha Touch Sencha Touch is een bibliotheek die alles probeert te doen van UI widgets, Dom manipulatie, Ajax en JSONP. Het is niet afhankelijk van andere bilbiotheken. Sencha Touch volgt een JavaScript aanpak, waar je verplicht bent om kleine stukjes HTML te schrijven. Het heeft een groot object model dat vele mogelijkheden geeft maar langer duurt om te leren. Sencha Touch legt een codering structuur en discipline die resulteert in goed georganiseerde code. Bied een ingebouwde server en lokale opslag abstracties, waardoor het makkelijk is om CRUD (create, release, update en delete) bewerkingen uit te voeren. Er is een ingebouwde voorziening voor het maken van iOS en Android native pakketten. Ondersteunt iOs, Android en sinds kort ook het Blackberry platform. Sencha Touch is gratis maar om bepaalde functies te gebruiken moet er betaald worden.
37
Responsive Web Design Responsive web design is de benadering die suggereert dat ontwerp en ontwikkeling moet reageren op het gebruikers gedrag, omgeving, schermgrootte, platform en oriëntatie. Responsive web design bestaat uit een mix van flexibele roosters en lay-outs, afbeeldingen en gebruik van CSS media queries. Wanneer de gebruiker van apparaat of schermresolutie wisselt, moet de website automatisch de resolutie, beeldgrootte en script vaardigheden aanpassen. Met andere woorden, de website moet over de technologie beschikken om automatisch te reageren op de voorkeur van de gebruiker. Dit elimineert de noodzaak om te ontwerpen en ontwikkelen voor verschillende platformen voor elke nieuwe gadget op de markt. Waarom zouden we een aangepast web ontwerp voor elke soort platform maken? Web ontwerp moet zich automatisch aanpassen. Het mag geen verschillende op maat gemaakte ontwerp varianten bevatten voor elke categorie van gebruikers en platformen. Responsive web design vereist een meer abstracte manier van denken. Sinds HTML5 kan alles meer flexibel gemaakt worden. De grootte van beelden konden automatisch aanpassen, er zijn een aantal tijdelijke oplossingen zodat de lay-outs nooit breken. Het is niet een complete oplossing, maar de oplossing geeft wat meer mogelijkheden. Het is ideaal voor mensen die overschakelen van portretoriëntatie op landschap of voor mensen die overstappen van een groot computerscherm naar een tablet.
Meer dan vloeiend en flexibel Responsive web design gaat niet alleen over verstelbare schermresoluties en automatisch schaalbare afbeeldingen, maar eerder over een hele nieuwe manier van denken over ontwerp. Met meer apparaten komen meer schermresoluties, definities en oriëntaties. Nieuwe apparaten met nieuwe schermformaten worden dagelijks ontwikkeld. Elk van deze apparaten kan variëren van schermresolutie, functionaliteit en zelfs kleurweergave. Smartphones kunnen ook overschakelen van portret naar landschap modus wanneer de gebruiker zijn toestel draait. Hoe te ontwerpen voor deze situaties? En meer gecompliceerd, wat als een gebruiker overschakelt van oriëntatie tijdens het laden van een nieuwe pagina? Het is mogelijk te ontwerpen voor diverse belangrijke schermresolutie groepen. Maar dat kan een enorme klus zijn om te schakelen tussen al die verschillende programmeer en style sheets.
38
Conclusie Er zijn verschillende technieken om een applicatie in uit te werken zoals een native applicatie, web applicatie en responsive design. Elke techniek heeft zijn voor en nadelen maar ook de User Experience speelt een rol in het kiezen van een techniek. Een native applicatie is specifiek voor een platform gemaakt en ieder platform heeft een eigen native applicatie nodig, dit zorgt voor enorm hoge kosten. Het voordeel is de vindbaarheid in de applicatie markets en het sneller laden van de applicatie. Responsive design is een techniek waarbij de applicatie en website in één omhulsel zitten. Wanneer de applicatie op een mobiel wordt geopend worden alleen de relevante onderdelen getoond die vooraf voor een mobiel beschikbaar zijn gemaakt. Het nadeel van responsive design is dat de bestaande website ook aangepast moet worden en de laad tijd veel langer is omdat alles wat niet word getoond wel word geladen. Een Webapp is een op zichzelf staande applicatie die niet gedownload hoeft te worden en via de browser word geopend. Een webapp kan gebruik maken van dezelfde techniek als responsive design en schaalt de applicatie voor elk scherm formaat en elk platform. De kosten van deze techniek zijn tientallen malen lager dan die van een native applicatie. Het grote voordeel is dat de applicatie online staat en word geopend in de browser dit zorgt ervoor dat de applicatie niet gedownload hoeft te worden en altijd up to date is zonder deze te downloaden. De functies van de open dagen applicatie zijn geschikt voor een webapp. De webapp hoeft niet gedownload te worden ook niet tijdens het up daten en is voor elk mobiel platform beschikbaar. Het is mogelijk de webapp in een omhulsel te plaatsen zodat er ook net zoals een native applicatie gebruik van gemaakt kan worden en de applicatie in de applicatie markets aangeboden kan worden dit zorgt voor een snellere bekendheid. Er zijn geen functies in de open dagen applicatie die alleen door een native applicatie ondersteund worden. Daarom gaat de voorkeur uit naar een open dagen webapp.
39
40
Case Inleiding Mijn case study begon met het zoeken naar een onderwerp. Het afstudeerbedrijf wilde een applicatie maar had nog geen idee wat voor een applicatie. De eerste weken stonden in het teken van een concept en hoofdvraag bedenken. Het onderzoeken van het bedrijf en de diensten die worden geleverd hebben mij gestuurd naar een drietal concepten: boek verslagen, docentenagenda en open dagen applicatie. De uiteindelijke keuze is gemaakt voor de open dagen applicatie. De applicatie is tot aan het prototype uitgewerkt en de werkwijze die gevolgd is the elements of User Experience word in de case verder besproken.
User Interviews: concepten bespreken Om te toetsen of de concepten ook bij de doelgroep in de smaak vallen zijn er gesprekken geweest met een aantal laatstejaarsstudenten die bij EDG Media een aantal dagen op snuffelstage kwamen. De keuze voor User Interviews ( beschreven in paragraaf 2.3) is gemaakt, omdat de concepten niet definitief zijn en de testpersonen zo in een open gesprek hun mening kunnen geven en er ook doorgevraagd kan worden. Er zijn drie sessies met telkens twee testpersonen tegelijk geweest. Er is gekozen voor groepen van twee, omdat de testpersonen verschillen in de leeftijd tussen 17 en 18 jaar en zich zo sneller op hun gemak voelen en zich niet inhouden. De sessies begonnen wat stroef maar zo gauw er één begon te praten en een mening durft te geven volgt de ander al snel. Op deze manier konden de testpersonen ook met elkaar in discussie gaan en zorgde ervoor dat het gesprek niet stil viel of er alleen maar vanuit de ontwerper een vragenvuur kwam waarop werd geantwoord. De uitkomst was dat geen van de studenten er iets in zag om verslagen in te kijken en een opzet voor een eigen verslag te maken op een mobiele telefoon. De studenten gaven aan dat wanneer ze een verslag schrijven als huiswerk er geen behoefte is aan een mobiel. Het verslag en ander huiswerk word gemaakt op de pc waar ze het overzicht hebben en de studenten vinden het belangrijk om in alle rust aan een verslag te werken. De open dagen applicatie is meer in trek. Het vooraf oriënteren doen ze liever achter een pc. Maar de mogelijkheid om informatie mee naar een open dag te nemen lijkt ze wel handig.
Keuze open dagen applicatie De reden voor het niet kiezen van de verslagen applicatie is vooral omdat na gesprekken met de doelgroep er niemand was die er gebruik van zou willen maken. Het scherm van een telefoon is te klein om er tekstuele aanpassingen op te doen. Daarnaast gaf de doelgroep aan dat wanneer men huiswerk maakt liever achter een computer zit. De reden voor het niet kiezen van de docenten agenda applicatie is, omdat er te veel concurrentie is. Daarnaast kunnen de kosten enorm oplopen om een agenda digitaal te maken dit komt vooral door het synchroniseren van de agenda met andere docenten en school software. Er zou naast de mobiele applicatie ook een applicatie voor het schoolsysteem moeten komen en dit is voor EDG Media en de scholen simpel weg te duur. Daar komt nog bij dat EDG Media papieren docenten agenda’s verkoopt en de inkomsten zijn te hoog om op een digitale versie over te stappen. Open dagen applicatie
41
De open dagen applicatie is ter ondersteuning van de toekomstige student en zijn keuze voor een vervolg opleiding. Er kunnen een aantal scholen geselecteerd worden waar de toekomstige student een keuze uit wil maken. Tijdens de open dag, meeloopdag of proefstuderen dient de applicatie als notitieblok en beoordelingsformulier. Er staan een aantal vragen in over de opleiding en de eerste indruk die de toekomstige student een cijfer kan geven. De beoordeling wordt bijgehouden en geeft een gemiddelde aan van alle toekomstige studenten die de opleiding beoordeeld hebben. Naast de notities en beoordelingen kan de toekomstige student de applicatie ook gebruiken als gids op een open dag, meeloopdag of bij het proefstuderen. Het dagprogramma, de opleidingen, de plattegrond, de andere data van de dagen en het bereik met het openbaar vervoer kan bekeken worden. Na het bezoek geeft de applicatie een overzicht van alle scholen die je hebt beoordeeld om te helpen een keuze te maken. Ook heeft de applicatie een twitter feed die de tweets over de opleiding laat zien en een twitter feed die de tweets van de student service desk laat zien. De student service desk is het twitter account van de opleiding waar toekomstige studenten een vraag over de opleiding kunnen stellen.
Eerste schetsen het concept de open dagen applicatie
Onderzoek Als onderzoek is er gekozen voor het bezoeken van open dagen wat valt onder contextual inquery om zo de ervaring van de verschillende open dagen op te doen en de gebruikers in de context van het gebruik van de applicatie te zien maar ook hoe de applicatie binnen de context gebruikt gaat en kan worden. Er is niet gekozen voor een focus Group, omdat dit na het bezoeken van drie open dagen en de interviews met de gebruikers veel tijd inneemt en het is maar de vraag of er ook daadwerkelijks nog iets anders uit gaat komen. Er is niet gekozen voor enquêtes de reden hiervoor is het bezwaar van de instellingen waar de open dag plaats vind. De instelling wil niet dat aankomende studenten worden lastig gevallen tijdens het maken van een keuze voor een vervolg studie. Om toch aan kwantitatieve informatie te komen zijn de cijfers uit het onderzoek van onderzoeksbureau OIG gebruikt dat in hetzelfde bedrijfspand als EDG Media zit en kwantitatief onderzoek doet voor EDG Media. Er komen
42
cijfers vanuit OIG die de voorkeuren van de gebruikers aangeven over mobiel gebruik, open dagen en social media gebruik. Bezoek open dagen Om erachter te komen hoe het er op een open dag aan toe gaat zijn er drie open dagen bezocht. De bezochte open dagen zijn van de drie verschillende niveaus mbo, hbo en wo. Op ieder niveau gaat een open dag er net iets anders aan toe. De Universiteit had alle open dagen van studie richtingen tegelijk en je kon zelf naar informatie over een richting gaan. Op het MBO werd je voor een gekozen richting in een groep rondgeleid in de school door een docent. Een open dag is geen omgeving uit het dagelijkse leven of een werkplek maar is wel de locatie waar het grootste deel van het gebruik van de applicatie plaatsvindt. Conclusie bezoek open dagen Beoordelen De presentatie over een bepaalde richting wordt door bezoekers aangehoord. Er wordt niets opgeschreven en zelfs weinig gevraagd. Het zijn vooral de ouders die een vraag stellen na afloop. De vijf a zes onderdelen die beoordeeld zouden worden liggen vers in het geheugen van de bezoekers. En worden in het geheugen van de bezoekers opgeslagen om later met een andere open dag te vergelijken. Onderdelen als “heb je genoeg informatie over de gekozen opleiding gekregen?” zijn overbodig, omdat er de mogelijkheid is een vraag te stellen als er iets nog niet duidelijk is. Ook duurt een presentatie tussen de 30 en 60 minuten. Een tijdsbestek waarin er genoeg word verteld over de opleiding en er genoeg ruimte is voor vragen. Het beoordelen van de opleiding of de open dag is daarom niet noodzakelijk en zelfs helemaal overbodig. Daarnaast bezoekt 53% 1 open dag, 33% 2 open dagen en 13% 3 of meer open dagen. Het beoordelen is daarom ook niet belangrijk voor de meerderheid van de studenten aangezien de meerderheid maar 1 open dag bezoekt. Daarbij komt dat geen open dag hetzelfde is, daarom is het moeilijk een beoordeling te geven misschien was de vorige open dag wel anders van opzet. Hierdoor zou de beoordeling niet accuraat zijn maar plaats en tijd gebonden zijn. Noteren Weinig tot geen mensen schrijven bevindingen op. Er worden weinig vragen gesteld aan studenten of werknemers van de school. De mensen die wel iets vragen hebben (meestal één dringende vraag) onthouden het antwoord op die vraag. Het is daarom niet nodig en zelfs overbodig om aantekeningen tijdens een open dag te noteren. Om deze redenen is het notities maken bij open dag niet nodig. Er zou weinig tot geen gebruik van gemaakt worden. De één of twee dringende vragen die de aankomende studenten hebben worden aan een werknemer of student gevraagd. Over deze vragen is nagedacht dus het gekregen antwoord zal niet snel vergeten worden. Enquête Omdat de beoordeling ook een zakelijk belang had is er na afloop van een open dag een functie van beoordelen toegevoegd. Na afloop van een open dag krijgt de bezoeker die naar de open dag is geweest of deze heeft toegevoegd als favoriet een notificatie met drie opties. Of de open dag goed was of slecht was of dat de gebruiker een enquête wil invullen met een aantal vragen over de open dag. De uitkomst van de enquête is niet voor de bezoekers van de open dag bedoeld maar voor de
43
opleidingen die de open dagen organiseren en hebben betaald om content zoals de plattegrond en het programma van de open dag in de applicatie te tonen.
Needs Wat willen de gebruikers dan wel Het moet mogelijk zijn om algemene informatie op te zoeken in de applicatie die de studenten ondersteunen op een open dag. Er zijn maar weinig mensen die een vraag stellen en de vragen die over het algemeen worden gesteld zijn vaak hetzelfde. Een social media feed waar de studenten vragen kunnen stellen en antwoord kunnen krijgen ook na een open dag behoort tot de mogelijkheden van de applicatie. Zo kan iedereen achteraf nog een vraag stellen ook zijn zo de vragen te bekijken en hoeft niet iedere bezoeker dezelfde vraag te stellen. Kwantitatieve cijfers In hetzelfde bedrijfspand als EDG Media is een onderzoeksbureau gevestigd genaamd OIG die veel voor TKMST onderzoekt. OIG heeft onderzoek gedaan naar gebruik van social media onder laatstejaarsstudenten van het voortgezet onderwijs. De belangrijkste conclusies zijn: Uit ondezoek van OIG naar gebruik van social media van voortgezet onderwijs scholieren blijkt dat meer dan de helft namelijk 63% gebruik maakt van social media. Op mbo niveau is dit aantal zelf hoger namelijk 73%. Een kwart van de doelgroep zet social media al in bij studiekeuze en 68% vind informatie over de open dag het belangrijkst. De helft van de mensen die het niet inzet lijkt het wel interessant om er gebruik van te maken. Ook heeft OIG voor EDG Media en TKMST een onderzoek gedaan naar social media en open dagen de belangrijkste conclusies hieruit met betrekking op de applicatie zijn: Van de jongeren die een keuze moet maken voor een vervolg studie zoekt 81% zelf informatie over open dagen. Vaak word er via school en familie ook informatie en aanbevelingen gedaan maar de meerderheid zoekt zelf naar informatie. Van de 64% die social media gebruikt heeft 10,4% social media ingezet om informatie over open dagen te zoeken en 70% daarvan heeft deze informatie ook gevonden. Uit het onderzoek blijkt dat 10,8% van de studenten graag een mobiele applicatie zou willen gebruiken om informatie over open dagen te zoeken of te ontvangen. Er zijn maar weinig studenten die meer dan drie open dagen bezoeken de meerderheid 53% van de studenten bezoekt één open dag en 33% bezoekt twee open dagen om een studiekeuze te maken.
Requirements Elke applicatie bevat bepaalde functies en onderdelen waarmee de gebruiker bepaalde informatie of acties mee uit kan voeren. Wat deze functies zijn is een combinatie van de uitkomst van de User Interviews, het verdienmodel en eigen inzichten in wat een open dagen applicatie zou moeten zijn. Requirements open dagen applicatie - Open dagen lijst met alle open dagen uit Nederland
44
- Presentatie opleiding - Programma - Plattegrond - Tweets met vraag en antwoord aan opleiding Twitter feeds Een opkomend fenomeen is de twitter service van de instellingen. Een groot deel van de instellingen heeft een service desk waar je vragen via twitter kan stellen. Facebook is ook een medium waar veel instellingen een profiel hebben en waar ook vragen gesteld kunnen worden. Het voordeel van de twitter service desk is dat deze vooral gericht is op het beantwoorden van vragen. De facebook pagina is daar niet direct voor beschikbaar gesteld. Daarom is de keuze gevallen om de vragen en antwoorden via twitter te laten gaan.
Bron twitter : Een overzicht van het gebruik van twitter in Europa, Nederland en Engeland zijn de landen waar twitter het meest gebruikt word.
45
Scenario Voor het bepalen van de benodigdheden, kunnen persona’s opnieuw gebruikt worden, door ze in een kort verhaal te laten acteren genaamd een scenario (beschreven in paragraaf 2.3). Een scenario is een kort en simpel verhaal hoe een persona zich zou kunnen gedragen tijdens het vervullen van een gebruikers behoefte. Door het proces te verbeelden waar de gebruikers doorheen moeten, kan er een potentiële eis uitkomen die de gebruiker helpt bij hun behoefte. Voor Tijdens het lezen van het TKMST magazine scanned Jan de QR code in het magazine met zijn smartphone. Volgens de beschrijving is het een open dagen applicatie. Jan opent de applicatie en maakt een account aan. Wanneer dat gedaan is opent de open dagen lijst en ziet Jan direct de open dag van de opleiding waar hij interesse in heeft. Jan tapped op de open dag naam en het scherm van de open dag opent. Jan leest de beschrijving van de opleidingsrichting en besluit de open dag toe te voegen aan zijn favorieten. Op diezelfde pagina ziet Jan de knop Inschrijven staan. Jan besluit zich direct in te schrijven om de open dag te bezoeken. De dag van de open dag is aangebroken en Jan kijkt voor de zekerheid even hoe laat de open dag ook alweer begon. Hij opent de applicatie en bekijkt zijn favorieten. Dan ziet Jan het icoon voor het openbaar vervoer. Hij tapped erop en komt in het openbaar vervoer scherm. Hij ziet dat het adres van de school al is ingevoerd net als zijn eigen locatie. Jan laat de applicatie de route naar de open dag berekenen en ziet dat hij de tram om de hoek kan pakken en vlakbij de school uitstapt. Tijdens Jan komt de tram uit en loopt richting de open dag van de opleiding. Van veraf ziet hij het schoolgebouw en hij pakt zijn telefoon erbij en opent de open dag applicatie. De applicatie weet dat Jan voor de school staat en opent automatisch de pagina van de open dag van de school die hij bezoekt. Jan bekijkt nog een keer of het de juiste locatie is voor hij naar binnen wil gaan. Dan ziet Jan in de applicatie op de open dag het programma staan. Jan tapped op Programma en het dagprogramma van de open dag van de opleiding opent. Jan heeft nog een kwartier voor de rondleiding begint en besluit vast naar binnen te lopen om de school eens van binnen te bekijken. Jan wil richting de kantine om wat te drinken te halen voor de rondleiding begint. Na een rondje te hebben gelopen pakt Jan zijn telefoon erbij en tapped op de Plattegrond. Jan ziet dat de kantine tegenover lokaal A.1.4 is en realiseert zich dat hij er al langs is gelopen. Jan keert om, loopt de kantine binnen en besteld een kopje koffie voor hij naar de informatie voorlichting van zijn gekozen opleiding gaat. Na De week na de open dagen is Jan de informatie nog aan het verwerken. Jan bedenkt zich een belangrijke vraag heeft en besluit de open dagen applicatie te openen. Jan tapt in de applicatie op Tweets en leest de vragen die al eerder gesteld zijn. Zijn vraag zit er niet tussen dus besluit Jan een vraag te stellen aan de studenten service helpdesk. Jan tapt op het berichtvlak en typt zijn vraag in. Diezelfde middag krijgt Jan antwoord op zijn vraag en kan hij het antwoord in zijn besluit meenemen om een keuze te maken.
46
Flowchart Nadat de eisen zijn gedefinieerd is er een duidelijk beeld van wat er in het eindproduct komt. Deze eisen vormen een samenhangend geheel door ze vast te leggen in een flowchart. Zo ligt de structuur van de mobiele schermen in de applicatie vast.
Wireframes De structuur ligt vast. Nu is het tijd om de functionaliteiten binnen de schermen in te delen. Elk scherm met de bijbehorende functies word in een wireframe geplaatst.
47
Usability Test resultaten Om het concept en de indeling te testen is er een prototype ontwikkeld met de wireframes waarmee een aantal gebruikerstest zijn uitgevoerd. Het prototype is hier te vinden: http://www.royapp.site90.net/tapv0.46/app/#index Het prototype is getest en niet alles was even duidelijk voor de testpersonen en daarom heeft de applicatie een aantal kleine veranderingen ondergaan. Deze veranderingen en onduidelijkheden zijn: - De Back button is veranderd in de Home button wanneer je in de eerste laag van de applicatie bent. Wanneer je dieper in de applicatie komt is er een back button die je 1 laag terug brengt. - De share knop is rechtsboven in de Navigation bar geplaatst op alle pagina’s. - Het zoeken gebeurt door “Live Jumping” waar elk getypte letter een live resultaat toont. In het zoekveld is een cancel knop gekomen die de ingevoerde tekst en gegeven zoekresultaten verwijderd. - Benaming van de Tab Bar iconen en de iconen zelf zijn aangepast naar een duidelijkere beschrijving en uiterlijk. Het uiterlijk wordt nog wel aangepast tijdens het visueel uitwerken. - De knoppen highlighten zodat je weet op welke pagina je bent. Dit is vooral voor het verder testen gedaan om het duidelijker te maken voor de test personen dit wordt verder uitgewerkt tijdens het visueel uitwerken van de applicatie. - Op de algemene pagina zijn accordeon menu’s die kunnen in en uitklappen vervangen voor een submenu pagina met de schoolinformatie. - Het begin scherm: Favorieten wordt onder een knop geplaatst. Het was de test personen niet duidelijk dat er naar de open dagen lijst genavigeerd kon worden. Het startscherm favorieten zal vervangen worden door de open dagen lijst. Wanneer de applicatie opent komt de gebruiker in de open dagen lijst waar direct favorieten toegevoegd kunnen worden.
Webapp Na het testen van het prototype is het concept voorgelegd aan de directeur van EDG Media en de werknemers van het bedrijf. Men is enthousiast maar de kosten voor de applicatie als Native applicatie zijn te hoog daarnaast zijn er maar weinig beginnende studenten met een iPhone de meerderheid heeft een Blackberry of een Android telefoon. Het gedeelte van de scriptie over Native apps, Web apps en Responsive Design waarbij de voor en nadelen aan bod komen heeft geresulteerd in een advies voor een webapplicatie. Zo kan ieder student met een smartphone de applicatie gebruiken en is er geen irritatie bij de gebruiker over de vele updates. Deze updates komen vooral uit het updaten van de content, een programma van een open dag is een aantal dagen voor de open dag bekend. Dit betekend dat er wekelijks misschien wel dagelijks updates kunnen komen. Het advies is positief opgepakt waardoor er nog een aantal kleine veranderingen zullen plaatsvinden in de indeling van de applicatie, het gaat vooral om de Navigation Bar waar een aantal knoppen aan zijn toegevoegd als het profiel, open dagen lijst, favorieten en het delen van het scherm. De functionaliteiten van de applicatie lenen zich voor een webapplicatie zodat er geen aanpassingen in het concept komen.
48
Aanpassingen van de indeling Web applicatie In de Navigation Bar komen de knoppen share, open dagen lijst, profiel en favorieten. Zo kan de gebruiker op elk gewenst moment naar een ander scherm gaan. Daarnaast komt er een knop om naar de website van TKMST te gaan. Het home scherm is niet meer de favorieten lijst maar de open dagen lijst.
Applicatie icon Iedere applicatie op een mobiele telefoon heeft zijn eigen unieke icoon. Een icoon moet in één oogopslag laten zien waar de applicatie over gaat. Door op een mobiele telefoon op het icoon te tappen opent de open dagen applicatie.
49
Schermen open dagen applicatie Open dagen lijst
Findable omdat er de mogelijkheid is om op niveau te filteren en doormiddel van de live jumping zoekfunctie, waarmee er op een zoekterm gezocht kan worden. Credible omdat er de mogelijkheid is naar de website van TKMST.nl te gaan en de up to date open dagen lijst die maandelijks word aangevuld en waar geen data tussen zit met een dag eerder dan de hedendaagse datum. Accesible omdat het kleurgebruik is afgestemd op slechtziendheid en er de mogelijkheid is om vanaf elk scherm bij de andere functies te komen.
Wanneer er is ingelogd opent de applicatie en kom je in het scherm de open dagen lijst. Hier staan de open dagen op data geordend de even weken hebben een gele kalender en de oneven weken een zwarte kalender. Naast elke kalender staat de naam van de opleiding, de richting van de open dag, data en tijdstip van de open dag en wat voor soort open dag het is. Er zijn verschillende soorten open dagen zoals open dagen, open avonden, proefstudies en ouderavonden. Rechts van elke open dag staat een ster waarmee een open dag aan de favorieten toegevoegd kan worden. Het is mogelijk de lijst te sorteren op MBO, HBO en WO niveau via de filter knoppen die boven in het midden zijn geplaatst. Rechts van de filter knoppen is de zoekknop. Wanneer de gebruiker op de zoekknop tapped zal het zoekveld tevoorschijn komen. In het zoekveld kan een zoekterm getypt worden. De resultaten worden via live jumping weergegeven. Dit betekend dat telkens wanneer er een letter bij komt de zoekresultaten direct worden weergegeven. Wanneer er op Amsterdam wordt gezocht en men typt in Am komen onderin alle zoektermen te staan waar Am in voorkomt. De Open dagen lijst wordt maandelijks bijgewerkt. Er komt dan nieuwe data van scholen en de open dagen content zelf zal gevuld worden. De content van een open dag komt een week tot een aantal dagen voor de open dag begint. Deze content wordt door de scholen geleverd zodra de content bekend is en er is betaald om in de applicatie te komen.
50
Algemene informatie open dag en opleiding
Findable omdat de algemene basis informatie van een instelling direct toegankelijk is vanaf de open dag pagina’s.
Wanneer men op een open dag is en deze heeft geopend in de open dagen lijst opent de algemene informatie van die opleiding en open dag. Hier kan men de algemene informatie zien, informatie aanvragen over de open dag en direct inschrijven voor de open dag. Bovenin staan tabbladen waarmee informatie van de opleiding bekeken kan worden. Onderin staat een beschrijving van de richting van de open dag hier staat beschreven wat de opleiding inhoud, welke vakken je krijgt en wat je na je studie kunt worden. Onderin is de tabbar waarmee men hulp kan krijgen op een open dag. De tabbar bestaat uit algemene informatie, presentatie, programma, plattegrond en tweets.
Presentatie
51
Valuable omdat de pagina toegevoegde waarde biedt aan de betalende instellingen.
Wanneer men in de tab bar op het icoon Presentatie tapped komt men op het Presentatie scherm uit. Hier staat informatie gepresenteerd waarmee een instelling een aankomende student warm kan maken om voor die instelling te kiezen. De presentatie hoort bij het verdienmodel zoals op de website van TKMST.nl, de instellingen betalen om een presentatie in de applicatie te tonen net zoals bij het programma en de plattegrond het geval is.
Programma van de open dag
52
Valuable omdat de pagina toegevoegde waarde biedt aan de betalende instellingen. Useful omdat de aankomende student het programma van de open dag bij de hand heeft.
Wanneer men in de tab bar op het icoon Programma tapped komt men op het Programma scherm uit. Hier staat het dagprogramma van de open dag. Het is zo ingedeeld dat het voor elke soort opleiding te gebruiken is. Er zijn open dagen met veel opleidingen die tegelijkertijd worden gegeven. Er is één overeenkomst met het programma op elke open dag, alle activiteiten beginnen op een bepaald tijdstip bijvoorbeeld 10:00 uur, en alleen de eindtijd van een programma onderdeel is anders. Daarom is er gekozen voor een indeling die uitgaat van de start tijd en die aangeeft naast het programma onderdeel tot hoe laat de activiteit duurt. Het programma hoort bij het verdienmodel, de instellingen betalen om een programma in de applicatie te hebben net zoals bij de presentatie en de plattegrond het geval is.
Plattegrond van de open dag
53
Valuable omdat de pagina toegevoegde waarde bied aan de betalende instellingen. Useful omdat de aankomende student de plattegrond van de open dag bij de hand heeft.
Wanneer men in de tab bar op het icoon Plattegrond tapped komt men op het Plattegrond scherm uit. Hier staat de plattegrond van de open dag. Dit is een door de opleiding aangeleverde afbeelding. De plattegrond hoort bij het verdienmodel, de instellingen betalen om een plattegrond in de applicatie te hebben net zoals bij de presentatie en het programma. Met de plattegrond kan de aankomende student de lokalen op de open dag vinden en weet zo waar de activiteiten van de open dag zich afspelen.
Tweets van en aan de instelling
54
Credible omdat de tweets draaien om de service desk van de opleiding, gebruikers zien dat het om het “echte” twitter account van de instelling.
Wanneer men in de tab bar op het icoon Tweets tapped komt men op het Tweets scherm uit. Hier staan de vragen en antwoorden aan het twitter account van de service desk van de instelling. Hier kan de gebruiker een vraag aan de instelling voorleggen en antwoord krijgen. De twitter functie is niet gericht op de gebruiker maar laat alleen vragen en antwoorden aan en van de service desk zien. De gebruiker kan zijn twitter account koppelen en een vraag stellen of eerdere vragen bekijken. Uitgewerkt prototype Het uitgewerkte prototype in kleur is hier te vinden: http://www.royapp.site90.net/tapv0.46/vis/index.html
55
Eindconclusie Met deze scriptie is geprobeerd een antwoord te geven op de hoofdvraag “ met welke factoren creëer je een betekenisvolle en gebruiksvriendelijke beleving voor een mobiele applicatie op een open dag? ” Het antwoord daarop is een applicatie die alle open dagen bundelt. Waarmee de gebruiker naar een open dag kan gaan en informatie kan opzoeken over de opleiding, het programma en de plattegrond van de open dag kan bekijken en ook voor en na een open dag een vraag kan stellen. Hierbij is rekening gehouden met de context waarin de applicatie gebruikt word en de gevoelens en emoties van de gebruiker op het moment van gebruik. De applicatie moet namelijk passen in de levensstijl van de gebruiker maar ook in de situatie waarin de gebruiker zich op dat moment bevindt. De context moet waarde geven aan iets wat de gebruiker doet zoals de plattegrond en het programma in de applicatie tijdens het bezoeken van een open dag. Dit helpt bij het beter begrijpen van een plek of situatie door er informatie aan toe te voegen. De uitkomst is gebaseerd op het onderzoek en de case study die tijdens het onderzoek is uitgevoerd. Tijdens de case study is het proces van J.J. Garrett The Elements of User Experience gevolgd en zo is er stap voor stap een concept naar voren gekomen dat aansluit bij de wensen van de gebruikers en de stakeholder. Tijdens het project zijn er meerdere gesprekken met de doelgroep geweest en zijn er open dagen bezocht om zo de context en het mobiel gebruik op een open dag in kaart te brengen. Door gesprekken en het testen van functies zijn alleen de gewenste functies voor op een open dag overgebleven. Er zijn veel bedrijven die User Centered Design aanprijzen en toepassen maar die er niet optimaal gebruik van maken (zoals beschreven in paragraaf 2.6). De methode The Elements of User Experience is een goed uitgangspunt om een product voor de doelgroep te maken die inspeelt op de eisen van de gebruikers. Daarnaast kan bijvoorbeeld The User Experience Honeycomb gebruikt worden om functies en bepaalde onderdelen binnen de interface te controleren of ze inspelen op de wensen en eisen van de gebruiker. De eerste stappen uit het proces van The Elements of User Experience hoeven niet veel geld te kosten en er hoeft niet een heel team op te zitten. Toch is het van enorm belang wanneer er een product ontwikkeld word. Daarom adviseer ik om deze eerste stappen niet over te slaan en één persoon uit het team het onderzoek, de strategie en de gebruikers eisen en verwachtingen uit te laten zoeken. Ook gespreken met de gebruikers hoeven niet duur te zijn en veel tijd te kosten. Door een aantal personen aan te spreken bij een café en in ruil voor een kopje koffie wat vragen mag stellen kunnen er nieuwe eisen naar voren komen. Net zoals bij het bezoeken van de plek waar het product wordt gebruikt. Vooral bij een mobiele applicatie is dit van groot belang omdat alles bij een mobiel draait om de mobiliteit en de context waarin de applicatie gebruikt word. Maar wat nog zwaarder weegt is dat het hele team op één lijn moet zitten. Er zijn mensen die heel goed zijn de User Experience te vormen, maar wanneer er in een team gewerkt word heeft iedereen zijn eigen taken en is verantwoordelijk voor zijn onderdeel of discipline. Daarom is het zo belangrijk om die eerste stappen te documenteren zodat het hele team op één lijn zit en altijd kan terugvallen op het document waarin alle belangrijke informatie staat.
56
57
Bronnen Boeken 1. ^ The Elements of User Experience: User-Centered Design for the Web and Beyond. Garett, J. J. (2010). 2. ^A Practical Guide to Information Architecture, Donna Spencer (2010) 3. ^ Undercover User Experience Design, Bowles, C., & Box, J. (2011) 4. ^ Mobile Design and Development, Brian Fling (2009) 5. ^ The Smashing Book #2 - Designing Mobile User Experiences (2011) 6. ^ Designing Interfaces, SecondEdition. Tidwel, J. (2010) 7. ^A project Guide to UX Design: For user experience designers in the field or in the making. Unger, R., & Chandler, C. (2009)
Online 8. ^http://en.wikipedia.org/wiki/User_experience – user experience 9. ^http://uxmatters.com/glossary/ What is User Experience? 10. ^http://www.uxmatters.com/mt/archives/2007/11/the-five-competencies-of-user-experiencedesign.php Steve Psomas, 5 november 2007 11. ^http://semanticstudios.com/publications/semantics/000029.php – Morville, P. on Semantic Studios, 06/2004 12. ^http://userexperienceproject.blogspot.com/2007/02/restructuring-user-experiencehoneycomb.html – Revang, M. on User Experience Project 13. ^http://www.useit.com/alertbox/mental-models.html - Nielsen, J. (2010). Mental Models. 14. ^http://www.alistapart.com/articles/contrast-is-king/ - Jensen-Inman, L. (2010). Contrast is King 15. ^http://www.uxbooth.com/blog/understanding-conventions-when-being-unique-is-a-bad-thing/ - Horrocks, R. (2008). Keeping Conventions: When Being Unique is a Bad Thing. 16. ^http://www.wsol.com/White_Board/Topics/Design_Advice/Mobile_Web_Site_Design__What_ You_Should_Know/ - Mobile website design, what you should know - Dennis Kardys, User Experience Designer at WSOL (11/2009) 17. ^http://www.purecaffeine.com/blog/design/the-mobile-experience-is-nothing-like-desktop/
58
18. ^http://www.systeminetwork.com/article/application-modernization/designing-a-mobile-userexperience-64718 - Greg Hintermeister, Designing a Mobile User Experience 19. ^http://punchcut.com/perspectives/mobile-not-device-it%E2%80%99s-lifestyle – mobile lifestyle 20. ^http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience/ ready and willing audience 21. ^http://mobithinking.com/native-or-web-app Mobile applications: native v webapps – what are the pros and cons? 22. ^http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/ guidelines responsive design 23. ^http://www.alistapart.com/articles/responsive-web-design/ - Ethan Marcotte responsive design 24. ^http://www.lukew.com/ff/entry.asp?933 – Jason Grigsby on the Cloud Four Blog 25. ^http://www.cloudfour.com/where-are-the-mobile-first-responsive-web-designs/ – Luke Wroblewski mobile first responsive webdesign 26. ^ http://nl.wikipedia.org/wiki/Prototype - prototype 27. ^http://www.useit.com/papers/heuristic/heuristic_list.html – Ten Usability Heuristics , J.Nielsen 28. ^http://www.dutchapplications.com/app-abc-en-veel-gestelde-vragen – app abc veel gestelde vragen over applicaties 29. ^http://nl.wikipedia.org/wiki/Web-applicatie – webapplicatie 30. ^http://nl.wikipedia.org/wiki/Applicatie – applicatie 31. ^http://webcache.googleusercontent.com/search?q=cache:GoOUtBskY0EJ:www.arbomobiel.nl/ uploads/files/TechKnowTotaal.pdf+mobiel+onderdeel+van+jongeren+leven&cd=84&hl=nl&ct=cl nk&gl=nl#10 – Jongeren anno 2011 32. ^ http://nl.wikipedia.org/wiki/Ervaring - betekenis van ervaring 33. ^ http://globalmoxie.com/jhc/prez/mobile-context-myth-fowd.pdf - mobile context myths 34. ^ http://torsionmobile.com/2011/11/09/mobile-web-best-practices-series-simplify-navigation/ simpelere navigatie
59
35. ^ http://yiibu.com/articles/rethinking-the-mobile-web/ - gedachtes over het mobiele web 36. ^ http://www.w3.org/TR/mobile-bp/ - Mobile web best practices 37. ^ http://www.dalezak.ca/2011/07/mobile-design-principles.html - mobiele ontwerp principes 38. ^ http://www.frankwatching.com/archive/2012/01/03/7-tips-voor-een-optimale-cross-channeluser-experience/ - tips voor cross-channel ux
Weer Boeken nog aanpassen in bronnen achteraf 39. ^ Designing The Mobile User Experience, Barbara Ballard (2007) 40. ^ Tapworthy: Designing Great iPhone Apps, Josh Clark (2010)
Online bronnen2 42. ^ http://uxdesign.smashingmagazine.com/2011/04/27/mobile-auto-suggest-on-steroids-tapahead-design-pattern/ - mobile auto suggest 43. ^ http://mobile.smashingmagazine.com/2011/01/26/making-it-a-mobile-web-app/ - Maak er een webapp van
Scripties 1A ^ Hoe A New Spring zijn gebruikers betrekt zonder te luisteren, Gerthilde Mastenbroek (2011) 1B ^http://repository.cmu.edu/cgi/viewcontent.cgi?article=1033&context=hcii&seiredir=1&referer=http%3A%2F%2Fscholar.google.nl%2Fscholar_url%3Fhl%3Dnl%26q%3Dhttp%3A%2 F%2Frepository.cmu.edu%2Fcgi%2Fviewcontent.cgi%253Farticle%253D1033%2526context%253Dhci i%26sa%3DX%26scisig%3DAAGBfm06YrngMVCd_-LxLwXRteYAF9fcA%26oi%3Dscholarr%26ei%3DSdWnT7P1OYiWwaBzPT3Ag%26ved%3D0CBsQgAMoADAA#search=%22http%3A%2F%2Frepository.cmu.edu%2Fcgi% 2Fviewcontent.cgi%3Farticle%3D1033%26context%3Dhcii%22 – Understanding and using context
Afbeeldingen A. ^http://www.kickerstudio.com/blog/2008/12/the-disciplines-of-user-experience/ Disciplines of User Experience Design. Saffer, D B. ^http://semanticstudios.com/publications/semantics/000029.php Peter Morville’s - The Three Circles of Information Architecture C. ^http://semanticstudios.com/publications/semantics/000029.php Peter Morville - The User Experience Honeycomb D. ^http://userexperienceproject.blogspot.com/2007/02/restructuring-user-experiencehoneycomb.html Magnus Revang - Restructuring the User Experience Honeycomb
60
E. ^The Elements of User Experience: User-Centered Design for the Web and Beyond. Garett, J. J. (2010). - The Elements of User Experience by Jesse James Garrett F. ^The Elements of User Experience: User-Centered Design for the Web and Beyond. Garett, J. J. (2010). - The Elements of User Experience by Jesse James Garrett G. ^http://www.purecaffeine.com/blog/design/the-mobile-experience-is-nothing-like-desktop/ - verschil, voor en nadelen mobiel vs desktop H. ^http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience/ Compete’s quarterly smartphone intelligence, Jan-Feb 2010
61
