Roy Derriks 0799407
Scriptie V1.3
Mobiele User Experience
Inhoudsopgave Hoofdstuk #1 Inleiding 1.1 Inleiding …………………………………………………………………………………….. 1.2 Achtergrond informatie …………………………………………………………….. 1.3 Probleemstelling ………………………………………………………………..………. 1.4 Doelgroep …………………………………………………………………………..……… 1.5 Onderzoeksmethode ………………………………………………………….……….. 1.6 Doelstelling ………………………………………………………………………………….. 1.7 Onderzoeksvraag en deelvraag ……………………………………………..........
4 4 4 5 5 5 5
Hoofdstuk #2 User Experience & Design 2.1 Wat is User Experience en User Experience Design? ………………….. 8 -Wat is User Experience ……………………………………………………….. 9 -Wat is User Experience Design ……………………………………………. 9 2.2 User Experience Design Disciplines…………………………………………….. - Information Architecture …………………………………………………… - Interaction Design …………………………………………………………….. - Usability Engineering …………………………………………………………. - Visual Design ……………………………………………………………………… - Prototype Engineering …………………………………………………………
10 10 11 11 11 11
Usabillity en gebruikersonderzoek ………..……………………………… 2.3 User Experience Design Modellen …………………………………………………. 12 -De drie cirkels van Informatie Architectuur …………………………… 12 -The User Experience Honeycomb ……………………………………………13 - Restructuring the User Experience Honeycomb ……………………. 15 2.4 Elementen van User Experience Design ………………………………………… 17 - De Elementen……………………………………………………………………….. 21 2.5 User Experience Heuristics - User Experience Heuristics …………………………………………………… 22 Hoofdstuk #3 Mobiel 3.1 Mobiele User Experience en Context ………………………………………….. - Mobiel ………………………………………………………………………………… - Context ………………………………………………………………………………. - Beperkingen ………………………………………………………………………… - Voordelen tegenover desktop ……………………………………………… - Nadelen tegenover desktop ………………………………………………… - Ontwerpen voor mobiel ………………………………………………………
25 25 25 26 26 27 29
3.2 Gebruik van Mobiele apparaten ………………………………………………….. 30 3.3 Conclusie …………………………………………………………………………………….. 32
2
Hoofdstuk #4 Native Apps, Web Apps en frameworks, Responsive Web Design en Mobile First 4.1 Apps …………………………………………………………………………………………….. 34 4.2 Voordelen en nadelen van Native apps ………………………………………… 35 4.3 Voordelen en nadelen van Webapps ……………………………………………. 36 4.4 Mobiele Webapp Frameworks ……………………………………………………… 37 4.5 Responsive Web Design ………………………………………………………………… 38 4.6 Mobile First Responsive Web Design ……………………………………………… 40 4.7 Conclusie ……………………………………………………………………………………… 41 Hoofdstuk #5 Case 5.1 Concept Concepten…………………………………………………………………………… 43 Focusgroup 1………………………………………………………………………. 1 Keuze voor applicatie…………………………………………………………. 1 5.2 Strategy plane Strategie……………………………………………………………………………… 1 Needs………………………………………………………………………………….. 1 Psychographic profiles………………………………………………………… 1 Attitude………………………………………………………………………………. 1 Persona’s……………………………………………………………………………… 1 Bezoek open dagen……………………………………………………………… 1 Cijfers onderzoekbureau OIG………………………………………………… 1 5.3 Scope plane Requirements………………………………………………………………………… 1 Content…………………………………………………………………………………. 1 Content audit………………………………………………………………………… 1 Scenario functionaliteiten……………………………………………………… 1 5.4 Structure plane Flowchart………………………………………………………………………………. 1 Screenflows……………………………………………………………………………. 1 5.5 Skeleton plane Wireframes……………………………………………………………………………… 1 Prototype test resultaten………………………………………………………… 1 Native app, web app of responsive design……………………………… 1 Focusgroup 2 concept toetsen……………………………………………….. 1 5.6 Surface plane Visuals……………………………………………………………………………………. 1 Prototype test resultaten………………………………………………………. 1 Style guide……………………………………………………………………………… 1 Hoofdstuk #6 Bronnen 6.1 Boeken ……………………………………………………………………………………………44 6.2 Online ……………………………………………………………………………………………. 44 6.3 Afbeeldingen …………………………………………………………………………………. 46
3
Hfdst#1 Inleiding
4
Inleiding Technologische ontwikkelingen blijven maar komen in producten, interfaces en websites. Het statische medium is veranderd in een rijke interactieve experience die steeds vaker crossmediaal gaat. Alleen een website is niet meer genoeg 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. Achtergrond informatie EDG Media is opgericht in 1992 om knelpunten in de informatievoorziening in het onderwijs op te lossen. Het doel is alle schakels uit de onderwijsketen te verbinden: professionals, ouders en scholieren. Niet alleen met relevante informatie, maar ook ervaringen, projecten en meningen uitwisselen. Op veel scholen in het voortgezet onderwijs, basisscholen en kinderdagverblijven in Nederland is er een magazine van EDG Media te vinden. Naast de magazines bestaan er ook websites, webshops en lespakketten. EDG Media is een gesprekspartner voor beleidsontwikkeling en communicatie in het onderwijs. Dit doet EDG Media voor opdrachtgevers zoals ministeries, universiteiten, taakorganisaties, cito, kennisnet en NTR. Voor ouders is er het tijdschrift PrimaOuders.nl en de bijbehorende website. Hier worden de ouders geïnformeerd over ontwikkeling, opvoeding, onderwijs, ontspanning en opvang van hun kinderen. Het fysieke magazine wordt verspreid via diverse kanalen: kinderdagverblijven buitenschoolse opvang, basisscholen en huiswerkinstituten. 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 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. Scholieren worden zowel op school als thuis geholpen met loopbaanoriëntatie, examens en huiswerk. Scholieren kunnen terecht bij de offline en online media, zoals de website examens.nl, collegent.nl en TKMST.nl het daaraan verwante magazine, de gids en de test.
5
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 Voorbereidend beroepsonderwijs Hoger algemeen voortgezet onderwijs Voorbereidend wetenschappelijk onderwijs
tussen 12 en 20 van 12 tot 16 van 12 tot 17 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. Onderzoeksmethode Ik begin mijn afstudeeropdracht met het doen van onderzoek naar TKMST. Ik wil erachter komen hoe de open dagen worden aangeboden op de website van TKMST en of er ideeën, kansen en concurrentie is met betrekking tot open dagen. Ook worden er open dagen bezocht om te zien hoe het er op open dagen aan toe gaat. Om het eventuele verschil tussen de open dagen van de opleidingsniveaus te zien word er van de drie niveaus mbo, hbo en wo een open dag bezocht. Het stagebedrijf heeft ook al verschillende onderzoeken gedaan naar bijvoorbeeld de doelgroep en social media die ook gebruikt zullen worden. 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 stage komen lopen bij EDG Media. Om nog meer kennis te vergaren over User Experience Design zal ik ook literatuuronderzoek doen, dit zal voortkomen uit het lezen en verzamelen van gerelateerde boeken, artikelen, websites en blogs. Ook ga ik onderzoeken wat de verschillende opties en platformen zijn om een applicatie voor de mobiele telefoon te maken. Doelstelling Mijn scriptie is bedoeld als een eerste kennismaking met User Experience Design voor smartphones. Het is de basis die nodig is voor er wordt nagedacht en gewerkt aan 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.
6
Onderzoeksvraag en deelvraag
Hoofdvraag Wat kan EDG Media de lezers van TKMST mobiel aanbieden als hulp op open dagen?
Deelvragen -
Wat is User Experience en User Experience Design?
-
Wat is het verschil van de context en User Experience van een pc en een mobiele telefoon?
-
Voor en nadelen native apps, webapps en responsive design?
Hoe pas je User Experience Design toe in een mobiele applicatie?
-
Hoe pas je User Experience Design toe? Hoe verschilt de User Experience van een mobiel tegenover de User Experience van een desktop?
-
Het verschil van Native applicaties, Web applicaties en Responsive design? Wat zijn “ “
7
Hoofdstuk #2 User Experience en context
8
Om User Experience Design toe te passen op een product is het belangrijk om te weten wat User Experience en User Experience Design is.
Wat is User Experience en User Experience Design? User Experience User Experience is de manier waarop een persoon zich voelt over het gebruik van een product, systeem of service. User Experience benadrukt de ervaringsgerichte, emotionele, zinvolle en waardevolle aspecten van mens-computer interactie en product eigendom. Het bevat ook een persoonlijke waarneming van de praktische aspecten zoals nut, gebruiksgemak en de efficiëntie van het systeem. User Experience is subjectief, omdat het gaat over individuele gevoelens en gedachten over het systeem. User Experience is dynamisch, want het veranderd door de tijd als de omstandigheden veranderen. [7] 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 Design User Experience Design is een multidisciplinaire aanpak voor het ontwerpen van gebruiksinterfaces voor digitale producten, het definiëren van de vorm, gedrag en content. User Experience Design wordt vaak gebruikt in combinatie met termen als Interaction Design, User Centered Design, Information Architecture en Visual Interface Design. Dit klopt gedeeltelijk, er zijn raakvlakken met andere vakgebieden. User Experience Design is een overkoepelend vakgebied waarbinnen de verschillende disciplines samenkomen. 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] User Experience is dus niet iets tastbaars maar de emotie en het gevoel dat de gebruiker heeft tijdens en over het gebruik van een digitaal product.
9
Nu User Experience en User Experience Design duidelijk is komen de verschillende vakgebieden waaruit User Experience Design bestaat aan bod. Het verkennen en begrijpen van de belangrijkste vakgebieden binnen User Experience Design zorgt voor een nog beter begrip van User Experience Design en de verschillende disciplines die iemand moet beheersen om de User Experience succesvol te maken.
User Experience Design Disciplines De afbeelding laat de verschillende vakgebieden zien die samen User Experience Design vormen. Een User Experience Designer is iemand die meerdere disciplines beheerst en deze weet samen te voegen om de User Experience te vormen.
[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 afbeelding [A] Disciplines of User Experience Design van Saffer, D.te zien is zijn er nogal wat competenties binnen User Experience Design. De volgende competenties zijn de basis die iedere User Experience Designer zou moeten beheersen.
Information Architecture Information architecture gaat over hoe mensen cognitieve informatie verwerken, het vakgebied kan van toegevoegde waarde zijn bij elk product waarbij het vereist is dat de gebruiker de gepresenteerde informatie begrijpt. Dit geld voor informatie georiënteerde sites zoals informatie websites voor bedrijven maar kan een nog grotere impact hebben bij functionaliteit georiënteerde producten zoals een smartphone.
10
Information Architecture is het groeperen, verdelen en beschrijven van informatie. Het gaat niet alleen om het groeperen van items zodat een website goed werkt. Het gaat over het creëren van groepen die zinvol zijn voor de mensen die ze gebruiken. In het kort gaat Information Architecture over het organiseren van content of voorwerpen, het duidelijk beschrijven van de content of voorwerpen en het verstrekken van manieren voor mensen om bij de informatie te komen. [1][2][10] Interaction Design Interaction design houdt zich bezig met het beschrijven van mogelijk gebruikers gedrag en het definiëren van hoe het systeem zich zal aanpassen en daarop reageert. Software programmeurs hebben zich voorheen gericht op twee aspecten van software: Wat doet het? En hoe doet dat het? De aanpak was vooral gericht op wat het best werkt met de techniek die beschikbaar was. Daarna werd er gekeken naar hoe mensen de techniek gebruikten en werd software ontworpen zodat het beter werkt voor mensen en niet wat het best werkt voor de beschikbare techniek. De nieuwe discipline die hieruit is ontstaan om software programmeurs te helpen heet Interaction Design. Met behulp van persona’s, flowcharts en wireframes kan een Interaction Designer ontwerpkeuzes beargumenteren en vastleggen. Een Interaction Designer houdt zich vooral bezig met de details van pagina-elementen, presentatie en pagina-flows. [1] [10] Usability Engineering Usability is een belangrijk onderdeel van User Experience Design. Wanneer iets gebruiksvriendelijk is zorgt het voor een intuïtieve manier om zonder problemen een doel te kunnen bereiken. Een Usability Engineer houdt zich bezig met het beoordelen van de bruikbaarheid van een site of product met behulp van testmethodieken. Aan de hand van deze beoordeling en test kan er een aanbeveling komen waardoor bepaalde onderdelen verbeterd kunnen worden. [10] Visual Design Visual design draait om de communicatie. Een visual designer is in staat een site of product vorm te geven zodat de merkwaarden van het bedrijf word overgebracht en de juiste emoties worden opgeroepen. Het belangrijkste is dat de boodschap visueel overgebracht word. User Experience Design gaat over hoe het product overkomt op de gebruiker daarin is Visual Design een onmisbare competentie in het ontwerpproces. [1] [10] Prototype Engineering Een Prototype Engineer levert het prototype dat aan de voorgestelde eisen voldoet. Een prototype is een eerste versie van het product, waarmee optredende krachten, de werking of passing van onderdelen wordt getest en de productie wordt voorbereid.[26] Met het prototype kunnen gebruikerstest afgenomen worden die voor waardevolle inzichten kunnen zorgen. Als Prototype Engineer moet je op de hoogte zijn van bestaande en gebruikte UI frameworks, UI patterns en UI componenten. [7] [10]
De lezer weet welke vakgebieden binnen User Experience Design vallen, wat deze inhouden en waar kennis van opgedaan moet worden om het vakgebied User Experience Design eigen te maken.
11
De gebruikers zijn het belangrijkste onderdeel van de User Experience. Door de gebruikers te begrijpen en te betrekken tijdens het proces zijn er gebruiksonderzoeken om tot inzichten te komen en problemen op te sporen. Elk gebruiksonderzoek heeft een ander doel en word tijdens een ander onderdeel in het proces gebruikt. Om de verschillen in testen te begrijpen en er gebruik van te maken zijn deze onderzocht en beschreven.
Usability en gebruikersonderzoek Het belangrijkste aan User Experience Design zijn de gebruikers. Dit zijn de uiteindelijke eindgebruikers van de site of product. De site 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 te peilen zijn een aantal test methodes bedacht 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 gebruiker 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 Interviews User Interviews zijn één op één gesprekken met een deelnemer die behoort tot de primaire doelgroep van de site of een product. Het is nuttig omdat er toegang is tot de gebruikers maar het type gebruiker varieert door bijvoorbeeld het soort persoon of het soort telefoon die de testpersoon heeft. De uitdaging is om oprechte meningen te verzamelen, het kan moeilijk zijn informatie over attitudes en context te krijgen vooral als interviews op afstand worden afgenomen.[7]
Enquêtes Enquêtes bestaan uit een reeks vragen en worden gebruikt om patronen te identificeren bij een grote groep mensen. Het is nuttig wanneer je resultaten in kwantitieve zin wilt weten bijvoorbeeld 80% zeiden nooit online iets te kopen. De resultaten zijn meer informatie over voorkeuren dan over de prestaties. De uitdaging zit in het verkrijgen van de juiste voorkeuren. Zorg dat de vragen goed geschreven worden zodat er nauwkeurige antwoorden komen zonder de respondenten naar een bepaald antwoord te leiden. [7]
12
Contextual inquiry Refereert naar een methode waarmee men de gebruiker bezoekt en beter leert begrijpen in de context van hun dagelijkse leven. Het is nuttig wanneer er weinig informatie over de beoogde gebruikers is dit is bijvoorbeeld wanneer gebruikers in een ziekenhuis of een andere unieke omgeving werken of met complexe taken of workflows werken. De uitdaging is om toegang te krijgen tot deelnemers en de werkplek te bezoeken. Dit kan zorgen met zich meebrengen over veiligheid, intellectuele eigendom en indringendheid. Voor zakelijke toepassingen kan het makkelijker zijn de gebruikers te bezoeken op een werkdag. [7]
Focus Groups Een focus Group is een groepsdiscussie waar een moderator deelnemers leid door een aantal vragen over een specifiek onderwerp. Het richt zich op het blootleggen van de deelnemers gevoelens, houdingen en ideeën over het onderwerp. Het is nuttig wanneer de gebruikers houding een sterke invloed kan hebben op het gebruik. De uitdaging zit in het gericht vragen om de juiste informatie uit de deelnemers te krijgen. [7]
Usability Testing Usabillity testing is testen terwijl de gebruikers proberen een taak op een site of applicatie uit te voeren terwijl een begeleider observeert en in sommige gevallen vragen stelt om het gedrag van de gebruikers te begrijpen. Het is nuttig wanneer een bestaande oplossing wordt verbeterd en er een prototype is dat de gebruikers de volledige taken laat simuleren. De uitdaging zit in het kiezen van de juiste taken en bepalen hoe formeel de test word. [7]
Card sorting Card sorting werkt door deelnemers thema’s op kaarten te geven en deze te sorteren in groepen die zinvol zijn voor hen. Het is nuttig wanneer er wordt gewerkt aan inhoud met veel items en er een effectieve structuur voor de gebruikers moet komen. De uitdaging zit in het bepalen van welke onderwerpen het beste zijn om op te nemen in de test. [7]
Personas Het verzamelen van data over de gebruikers kan enorm waardevol zijn, maar soms kan het overzicht kwijt raken van de echte mensen achter al die statistieken. Gebruikers kunnen realistischer gemaakt worden door ze in een persona te veranderen. Een persona is een fictief karakter, gecreëerd om de behoefte te representeren van een grote variatie van echte gebruikers. Door een gezicht en naam te verbinden aan de resultaten van het onderzoek en de segmentatie kunnen personas helpen bij het in het achterhoofd houden van de gebruikers tijdens het ontwerp proces. Een persona bevat ook extra fictionele informatie die niet uit een onderzoek te halen is. Bijvoorbeeld hoe de gebruiker over zijn huidige werk denkt of bijvoorbeeld waarom die voor zichzelf een bedrijf wil beginnen. Deze fictionele specifieke details zorgen ervoor dat een persona meer op een realistische gebruiker lijkt.
13
De gemaakte personas representeren het bereik van de gebruikers behoefte, waarbij rekening wordt gehouden bij het maken van beslissingen over de User Experience van de site of product. De personas zorgen ervoor dat je de gebruikers niet uit het oog verliest tijdens de stappen in het project. [1]
Scenario Voor het bepalen van de benodigdheden, kunnen personas opnieuw gebruikt worden, door ze in een kort verhaal te laten acteren genaamd een scenario. 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. [1]
14
Nu User Experience, User Experience Design en de verschillende vakgebieden binnen User Experience Design duidelijk zijn is het tijd om de drie belangrijkste onderdelen van User Experience te begrijpen. Zonder de gebruiker, inhoud en context bij een product is er geen User Experience. Daarom worden de drie belangrijkste onderdelen van de User Experience uitgelegd aan de hand van de drie cirkels van information architecture.
User Experience Design modellen De drie cirkels van informatie architectuur Peter Morville heeft dit model van de drie cirkels gemaakt en is in eerste instantie gemaakt voor information architecture wat een discipline is binnen User Experience Design. Het diagram van de drie cirkels laat de balans zien tussen bedrijfsdoelen en context, users needs en gedrag en de beschikbare mix van content. [11] Het idee achter de drie cirkels is dat men de zakelijke doelstelling achter de website of product en de beschikbare middelen voor het ontwerp en de uitvoering begrijpt. En dat men bewust is van de aard en omvang van de inhoud zoals die is en hoe die misschien over een jaar is veranderd. En het begrijpen van de behoefte en informatie zoekende gedrag van de gebruikers. Een user is een eindgebruiker die gebruik maakt van een computer of een netwerk service. Gebruikers worden op grote schaal gekarakteriseerd als klasse van mensen die gebruik maken van het systeem zonder volledige technische expertise die nodig is om het systeem volledig te gebruiken. Context is de totale omgeving waarin iets zijn betekenis krijgt. Hier kan tekst worden bedoeld als een situatie of betrokken persoon. Content is de inhoud van een product, vaak word het ook gebruikt om te verwijzen naar media maar content doelt op de inhoud van het medium niet het medium zelf. De drie cirkels omvatten de belangrijkste onderdelen van de User Experience. Namelijk de user, de content en de context. Het kleine deel in het midden waar alle drie de cirkels elkaar overlappen vormen samen de User Experience.
[B] Peter Morville’s - The Three Circles of Information Architecture
15
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 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. The User Experience Honeycomb Peter Morville’s tweede 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]
[C] Peter Morville - The User Experience Honeycomb
16
Useful (Nuttig) 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 (Bruikbaar) 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 (Wenselijk) De zoektocht naar efficiëntie moet worden getemperd door een waardering voor de kracht en waarde van het beeld, identiteit en merk. Findable (Vindbaar) Er moet worden gestreefd naar het ontwerpen van bestuurbare websites en lokaliseerbare objecten, zodat gebruikers kunnen vinden wat ze nodig hebben. Accesible (Toegankelijk) 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 (Geloofwaardig) 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 (Waardevol) 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]
17
The User Experience Honeycomb is één manier om de User Experience te waarborgen en te controlleren. De beschrijving wordt op verschillende manieren geïnterpreteerd en is daarom niet altijd even duidelijk. Magnus Revang heeft daarom een herstructureerde versie gemaakt die op een andere manier uitlegt wat de verschillende facetten van User Experience zijn. 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. Wat eigenlijk een onderdeel is van het vakgebied Information Architecture, het duidelijk beschrijven van content of voorwerpen zodat de gebruikers dit begrijpen, heeft Peter Morville een beetje nagelaten in zijn User Experience Honeycomb. Ook is de indeling veranderd en is er daardoor een duidelijk begin van het proces.
[D] Restructured User Experience (Honeycomb) Magnus Revang Findability (Vindbaarheid) “Je kunt niet gebruiken wat je niet kan vinden” Accesibility (Toegankelijkheid) “Je kunt niets gebruiken waar je geen toegang tot hebt” Desirability (Wenselijk) Je ziet de interface voor je het gebruikt. Usability (Bruikbaarheid) Het moet mogelijk zijn iets te gebruiken om er iets mee te doen.
18
Crediblity (Geloofwaardigheid) Je moet een dienst vertouwen voor je jezelf verbindt tot het oplossen van een taak met die dienst. Usefulness (Nuttigheid) Een gebruiker vormt een mening over de nuttigheid wanneer de site wordt verlaten en hopelijk pas na het afronden van de taak. Value (Waarde) 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 is het ook voor mensen met kleurenblindheid te zien.
19
User Experience is niet alleen te meten aan modellen. Van begin tot het eind van het project zijn de Elementen van User Experience van J.J. Garrett een uitgangspunt om tot de facetten van de modellen te komen en te betrekken in een product.
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 de User Experience. Het doel is om de onderdelen van de 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 gedaan 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]
[E] The Elements of User Experience by Jesse James Garrett
20
Surface plane Op het oppervlak zijn een aantal series van websites of product pagina’s, gemaakt van afbeeldingen en tekst. Een aantal van de afbeeldingen kun je op klikken en voeren een bepaalde functie uit. Een aantal van de afbeeldingen zijn illustraties zoals fotografie van een product dat te koop is of het logo van het bedrijf, website of product. Skeleton plane Onder het oppervlak zit het Skeleton van de site. Het Skeleton definieert de plaatsing van de interface elementen. De plek met knoppen, foto’s en blokken tekst. Het Skeleton is ontworpen om de indeling van een aantal elementen te optimaliseren voor maximaal effect en efficiëntie. Zodat je het logo, de knoppen en functies altijd kunt vinden wanneer deze nodig zijn. Structure plane Het Skeleton is de uitdrukking van de meer abstracte structuur van de site. De structuur definieert hoe gebruikers naar die pagina zijn gekomen en waar ze heen kunnen gaan als ze klaar zijn op de bezochte pagina. Het Skeleton mag dan de plaatsing van navigatie elementen definiëren waarmee de gebruiker door de categorieën kan browsen . De structuur definieert wat die categorieën zijn. Scope plane De structuur definieert de manier waarop de verschillende kenmerken en functies van de site of product gezamenlijk passen. Wat die kenmerken en functies zijn vormt de scope van de site of product. Bijvoorbeeld een webshop onthoudt na een bestelling het afleveradres zonder dat deze opnieuw ingevoerd dient te worden. Of dat kenmerk of een andere functie erin zit is een kwestie van scope. Strategy plane De scope wordt beslist door de strategie van de site. Deze strategie bevat niet alleen wat de mensen die de site bezitten met de site willen maar ook wat de gebruikers met de site willen doen. De strategie doelstelling voor een webshop is simpel: gebruikers willen producten kopen en de webshop wil producten verkopen. Andere doelstellingen zoals de rol van adverteren en content die de gebruikers op de site plaatsen en hoe dat inspeelt op het businessmodel zijn moeilijker te verwoorden. [1]
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 loopt gevaar. 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.
21
In het volgende model zijn alle verwarrende termen in de elementen geplaatst. Door elk element op te delen in component elementen, is het eenvoudiger te zien hoe alle stukjes in elkaar passen die uiteindelijk de volledige User Experience vormen. De vakgebieden die eerder zijn besproken zijn in het model geplaatst zodat er ook duidelijk wordt welke discipline op welk vlak nodig is om de User Experience te vormen. Het linker gedeelte bevat de site of product als functionaliteit, het rechter gedeelte bevat de site of product als informatie.
[F] The Elements of User Experience by Jesse James Garrett
22
Strategy plane (Strategie) product objectives and user needs 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 ons product willen en hoe dat aansluit bij andere doelen van de gebruikers. 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 (Toepassingsgebied) Functional specifications and content requirments 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 (Structuur) Interaction design and information architecture 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 de Information Architecture, de inrichting van content elementen om het menselijke begrip te vergemakkelijken. Skeleton plane (Skelet) Interface design, navigation design and information design 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 (Oppervlakte) Sensory design 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]
23
De elementen Er zijn meer onderdelen die niet in het model voorkomen maar wel net zo belangrijk zijn. Content is de reden dat iemand op een site of bij een ander product komt, deze content moeten de gebruikers als waardevol ervaren. Technologie is net zo belangrijk, technologie en de mogelijkheden die het bied blijven ontwikkelen. De manier waarop en waar iemand het technologisch product gebruikt is ook van toepassing op de User Experience. 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 de onderliggende Navigation Design aangepast worden? Sommige problemen hebben aandacht op verschillende gebieden tegelijk nodig terwijl andere problemen buiten de lijnen van het model vallen. 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. 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. Hoewel het model in eerste instantie is gemaakt voor websites is het toe te passen op een breed scala aan producten en diensten. Als het wordt toegepast op andere vormen van technologische producten zijn er veel overeenkomsten. Zelfs wanneer het een product of dienst is dat verder niets met technologie te maken heeft, is het model toe te passen maar kunnen er bepaalde elementen afvallen of toegevoegd worden. [1]
.
24
Een bestaande site of product te evalueren en fouten of problemen op te sporen kunnen Heuristics gebruikt worden. Elke applicatie krijgt na een bepaalde tijd een update of uitbreiding, ook kan er altijd een fout of onduidelijkheid in een applicatie zitten. Daarom zijn de Heuristics onderzocht.
User Experience Heuristics User Experience problemen vinden is niet eenvoudig, het kan van een hoop verschillende factoren afhangen. Om een hulpmiddel te bieden zijn Heuristics ontstaan. De evaluatie van de Heuristics geven een goed beeld van de User Experience en de problemen van een site of product. De evaluatie wordt ook wel een site review of expert review genoemd. Bij een expert review kijken experts naar de site of product bij een gebruikerstest de gebruikers. Beide groepen geven andere inzichten. Experts richten zich meer op wat er mis is met de werking van een site of product, gebruikers stuiten meer op punten met betrekking tot de inhoud van een site of product. Made for humans (Gemaakt voor mensen) Is de site of product relevant en bruikbaar en komt het overeen met de gebruikers “mental model”. Een metal model is het beeld wat een gebruiker heeft over de taak of doelstelling die zij willen behalen met de interface. Dit moet altijd het uitgangspunt zijn bij de keuzes wanneer je een site of product ontwerpt. Het moet voor de gebruiker die het product voor het eerst gebruikt logisch zijn en niet voor de ontwerper die er al een tijd aan werkt en de site of product van binnen en buiten kent. [3] [13] Forgiving (Vergeven) Errors moeten zo veel mogelijk gereduceerd worden. Fouten belemmeren de gebruikers flow op de site of product. Wanneer er een fout voorkomt moet het systeem de gebruiker inlichten wat er fout is gegaan en hoe dit hersteld kan worden. [3] [13] [27] Accessible (Toegankelijk) Het product moet toegankelijk zijn voor de gebruikers. Ook voor de gebruikers met een beperking. 10 % van de bevolking heeft een beperking. Door veel contrast te gebruiken kunnen de gebruikers die kleurenblind zijn het product ook gebruiken. Wanneer dit niet gebeurd betekent het dat 1 op de 10 gebruikers het product niet kan gebruiken. [3] [14] Self-evident (Vanzelfsprekend) Het moet duidelijk zijn waarvoor en voor wie de site is. Is het eenvoudig om te navigeren en is de belangrijkste content prominent aanwezig. Zijn de lay-out, iconen en afbeeldingen logisch en intuïtief te gebruiken. Er moeten zo min mogelijk vraagtekens bij gebruikers opkomen tijdens het gebruik van de site of product. Een handleiding of uitleg moet zo min mogelijk tot helemaal niet nodig zijn. Een gebruiker moet in één oogopslag zien wat het product is en hoe het werkt. [3] Predictable (Voorspelbaar) Het product of de site moet een consistente lijn doortrekken en niet afwijken van welbekende conventies die voor de gebruiker voorspelbaar zijn, omdat deze worden herkend. Uniek zijn is niet altijd goed voor de User Experience. Sommige dingen worden nou eenmaal makkelijker begrepen. Je kunt ervan uit gaan dat iedereen weet dat de S op een label van een kledingstuk small betekend. Iconen, winkelwagens en formulieren zijn zo universeel geworden dat iedereen deze in één
25
oogopslag begrijpt. Ook het onthouden van de voorkeur van de gebruiker is belangrijk, niemand wil op elk formulier zijn gegevens opnieuw invoeren of iets in een winkelwagen hebben en per ongeluk weg gaan van de site en de hele inhoud verliezen. Afwijken van deze conventies of de betekenis of de manier van interacteren veranderen is onduidelijk voor de gebruiker en zal de User Experience niet verbeteren. [3] [15] Efficient (Efficiënt) Een site of product moet efficiënt zijn. Een gebruiker wil een zo kort mogelijke route afleggen om zijn doel te bereiken. Wanneer tekst, plaatjes en de structuur beknopt gehouden worden en de gebruiker terugkoppeling krijgt wanneer hij een taak uitvoert draagt dit bij aan de efficiëntie van de User Experience. De prioriteit van een site of product ligt bij de belangrijkste taak. Gebruikers blijken een site te scannen en niet eerst te lezen. Daarom moet de belangrijkste taak in beeld staan zodat deze opgemerkt kan worden en er ook gebruik van gemaakt kan worden. [3] Trustworthy (Betrouwbaar) Om als vertrouwd gezien te worden moet de site of het product geloofwaardig overkomen. Een niks zeggende tekst op een site helpt niet bij het winnen van vertrouwen en komt niet geloofwaardig over. Wanneer de content up-to-date is draagt dit ook bij aan het vertrouwen omdat de site of product constant verbeterd, uitgebreid of aangepast word. [3] Na het lezen van de User Experience Heuristics kan een bestaande site of product geëvalueerd worden aan de hand van de User Experience Heuristics. En kunnen problemen of fouten opgespoord worden binnen een site of product. De gevonden problemen worden in een site review of expert review geplaatst zodat deze zijn gedocumenteerd en er een oplossing gezocht kan worden. Conclusie Er zijn verschillende manieren om een project aan te pakken bijvoorbeeld zoals Agile of Modified approaches. User Experience Design is er één van. User Experience Design is een multidisciplinaire aanpak voor het ontwerpen van gebruikersinterfaces voor digitale producten die uitgaat van de gevoelens en emoties van gebruikers. Een User Experience Designer moet een aantal disciplines beheersen om zijn werk uit te kunnen voeren namelijk Interaction Design, Information Architecture, Usability Engineering, Visual Design en Prototype Engineering. Om een project van begin tot eind te doorlopen kunnen de Elementen van User Experience gebruikt worden. Deze werkwijze richt zich op de gebruikers en zorgt stap voor stap dat de User Experience gewaarborgd blijft. Om tijdens een project de voortgang te meten zijn de modellen van User Experience te gebruiken. De User Experience Honeycomb van Peter Morville en de geherstructureerde versie van Magnus Revang kunnen gebruikt worden om tijdens een project de voortgang te meten. Door punten als vindbaarheid, toegankelijkheid, geloofwaardigheid, bruikbaarheid en nuttigheid te blijven controleren tijdens een project zorgt ervoor dat de User Experience niet verloren gaat. Om een bestaande website of product te evalueren en problemen te vinden zijn de User Experience Heuristics in het leven geroepen. De Heuristics kunnen problemen aan het licht brengen en zo kan er op een goedkope efficiënte manier aanpassingen gedaan worden aan de site of product. In welke fase het project ook zit er zijn manieren, modellen en heuristics om de User Experience te waarborgen en te controleren in een site of product.
26
Hoofdstuk #3 Mobiel
27
User Experience is aan bod gekomen en ook verschillende manieren om de User Experience te verbeteren en in een project te betrekken. Aangezien het allemaal gaat om een mobiele applicatie en het hoe, waar, wanneer en waarom een product of dienst gebruikt word ook bij de User Experience hoort is ook de Mobiele User Experience en Context onderzocht om een duidelijk beeld te krijgen hoe, waar, wanneer en waarom een mobiel gebruikt word. Daarnaast zijn er voor en nadelen aan het gebruik van een mobiel deze zijn ook van belang om te weten wanneer er een applicatie ontwikkeld word.
Mobiele User Experience en Context 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 hoe laat het is of even 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 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. 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. 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). Fysieke context (locatie) 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 handen en ogen vrij om op je mobiele scherm te concentreren. Media context (apparaat en toegang online)
28
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 de geprinte krant niet kan geven zoals up-to-date content. Het gaat niet alleen om informatie die we ontvangen het kan ook gaan over betrokken publiek in real time. In 2009 werd 178 miljoen keer gestemd via berichtjes op American Idol terwijl er in 2008 maar 131 miljoen keer gestemd is bij de presidentiële verkiezing. Modale context (gemoedstoestand) Gedreven door willen, iets nodig hebben of verlangen zo maken mensen keuzes waardoor ze hopelijk 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] Beperkingen De grote meerderheid van mobiele apparaten heeft een klein scherm. De mobiele schermen verschillen in lengte, hoogte en pixel dichtheid. De netwerkverbinding op een mobiel kan laag zijn en wordt soms onderbroken. Sommige gebruikers hebben een lage internetverbinding waar je per megabyte voor moet betalen. Anderen hebben een onbeperkte connectie waarmee men redelijk snel kan browsen. Elke mobiel heeft een browser maar de beperkte ondersteuning voor web functionaliteiten kan per mobiel verschillen. Een mobiel heeft ook minder werkgeheugen en zal daarom langer moeten laden om pagina’s of applicatie te openen. De batterij in een mobiel gaat redelijk snel leeg. Er zijn smartphones die je dagelijks moet opladen, vooral als deze veel worden gebruikt. Het gebruik van internet en locatie bepalende applicaties hebben een grote impact op de batterij duur van een mobiel. [16] -
Klein scherm
-
Laag of onderbroken netwerk verbinding
-
Lang laden van pagina’s
-
Beperkte ondersteuning voor web functionaliteiten
-
Beperkte batterij duur
-
Grootte verschillen in mobiele apparatuur en apparaat capaciteit in de markt
Voordelen tegenover desktop - 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
29
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. - Draagbaar (makkelijk te vervoeren) Mensen dragen 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]
[G] Voor en nadelen in het gebruik van mobiele en desktop apparaten. Nadelen tegenover desktop -
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.
30
-
Langzaam internet
Een mobiel maakt gebruik van mobiele dataconnectie of een WiFi verbinding. 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. -
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. -
Invoer (typen)
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 op de browser op je mobiel wilt opzoeken. -
Multi-tasking
Smartphones kunnen multitasken maar niet zoals bij een desktop computer waar je 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. -
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.
31
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. [17] Ontwerpen voor mobiel Naast de Heuristics en de richtlijnen uit de modellen zijn er een aantal trucjes die het ontwerpen voor mobiel makkelijker kunnen maken. -
Focus op het belangrijkste. Er kan slechts één pagina getoond worden, zorg ervoor dat het belangrijkste stukje informatie dat overgebracht moet worden in het zicht staat.
-
Beperk navigatie tot een minimum. Geef zoveel informatie als mogelijk is, maar niet meer dan dat.
-
Gebruik witruimte als ontwerp tool, het toont simpelheid en geordendheid.
-
Volg niet altijd een richtlijn. In bepaalde mobiele applicaties wordt er afgeweken van de richtlijnen, maar er moet een logische reden zijn om dit te doen.
-
Ontwerp met gelimiteerde maar bruikbare afbeeldingen en woorden. [18]
Na het lezen van de Mobiele User Experience en Context ken je de verschillen in context voor een mobiele telefoon, beperkingen en de voor en nadelen van een mobiel tegenover een desktop computer.
32
Gebruik van mobiele apparaten - 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] Waar en wanneer Rond 1997 toen de smartphone geïntroduceerd werd. Werd de smartphone gepromoot als een apparaat dat de drukke, reizende zakelijke professional hielp. 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.
33
[H] Compete’s quarterly smartphone intelligence, Jan-Feb 2010
Uit het onderzoek van compete.com blijkt dat een smartphone “het apparaat dat nooit verder dan een armlengte verwijderd is” gebruikt wordt op elk moment van de dag, van de treinreis naar je werk, tot het wachten bij de dokter, tot het versturen van berichten tijdens je favorieten soap. Deze bevindingen zijn ideaal voor adverteerders en merken, het apparaat dat de gehele dag gebruikt wordt, dicht bij de eigenaar is en zelfs persoonsgebonden is levert de gebruiker allerlei types van informatie waar de adverteerders en merken op in kunnen spelen. [20]
34
Conclusie Mobiel refereert naar de gebruikers situatie niet die van het apparaat. Ontwerpen voor mobiel betekent dat de context waarin de applicatie gebruikt word ook kan veranderen. Waar iemand zich bevind heeft invloed op het gebruik net als opzettelijk handelen of een inactiviteit. Het gaat vaak over informatie die je kunt ontvangen maar ook over betrokken publiek in real time die informatie kan verzenden. Mobiel is een levensstijl, de mens is mobiel niet het apparaat. Mensen bellen niet omdat het kan maar om aan te sluiten en verband met elkaar te leggen. De mobiele technologieën zijn ontworpen om in de mobiele gebruikers levensstijl te passen. De intentie om de smartphone te gebruiken als zakelijke hulp om tijdens het reizen toegang te hebben tot email, de kalender en contacten is niet helemaal uitgekomen. Het blijkt juist dat de meerderheid het gebruikt voor persoonlijke productiviteit en entertainment. Mede daarom is de mobiele telefoon persoonsgebonden, altijd aan en nooit verder verwijderd dan een armlengte. Het gebruik is vooral tijdens vrije momenten door de dag heen, meestal tijdens het wachten. Dit komt mede door het kleine scherm, laag of onderbroken netwerk verbinding, lang laden van pagina’s en de beperkte batterij duur. Maar ook het vaak ontbreken van een tastbaar toetsenbord en het niet kunnen multi-tasken is een reden dat de mobiel nog niet ver genoeg is om als vervanger te dienen van de desktop computer.
35
Hoofdstuk #4 Native apps, webapps en responsive design
36
Om een keuze te maken voor een native app, webapp of responsive design is het belangrijk dat er duidelijk is wat het allemaal betekent. En een afweging te maken om de techniek te gebruiken die voor de gebruiker de beste User Experience oplevert.
Apps Wat zijn applicaties? Een applicatie is een computerprogramma dat bedoeld is voor eindgebruikers. Op elke mobiel en computer draait een besturingssysteem, wanneer je bent opgestart en een programma opent open je als het ware een applicatie. Wat zijn mobiele apps? Apps is de afkorting voor applicaties. De afkorting apps word vooral veel gebruikt sinds er applicaties op smartphones zijn geïntroduceerd. De apps zijn verkrijgbaar via de Android Marketplace, Nokia Ovi Store, Windows Marketplace, BlackBerry App World of de Apple App Store. Apps kunnen gratis zijn en anders kosten ze vaak minder dan een euro. Er zijn ook duurdere apps zoals Tomtom of bepaalde games die zijn vertaald naar een app. Een app word geopend door het icoon van de app op je mobiel aan te tappen. [30] Wat zijn native apps? Native apps zijn native applicaties die gebouwd zijn voor een specifiek mobiel besturingssysteem. Wanneer er een native app is ontwikkeld voor een iPhone kan deze via de Apple App Store aangeschaft worden. De applicatie zal worden gedownload en geïnstalleerd worden op het mobiele besturingssysteem en van daaruit geopend worden. Een app voor de iPhone is ook echt alleen voor de iPhone wanneer de app ook op andere mobiele besturingssystemen verlangd word zal daar een specifieke native app voor ontwikkeld moeten worden. [28] Wat zijn webapps? Webapps is een afkorting voor webapplicaties. Een webapplicatie is een programma dat op een webserver draait en via een browser kan worden benaderd. Een voorbeeld is hotmail een webapplicatie die een gebruiker in staat om e-mails te versturen en te ontvangen via een webbrowser zonder de applicatie eerst te installeren. Een webapp kan vanuit elk apparaat benaderd worden zolang deze beschikt over een browser. [29] Wat is responsive design? Responsive design is een website ontwerpen die gebruik maakt van W3C CSS3 media queries, om de lay-out aan te passen aan de omgeving waarin het word bekeken. Als gevolg hebben smartphone gebruikers een soort gelijke ervaring en zien een vergelijkbare inhoud zoals op een desktop computer. De inhoud zal worden aangepast zodat het leesbaar blijft zonder in te zoomen of de grootte van de weergave te veranderen. [22]
37
Voordelen en nadelen van Native applicaties Wanneer je ervaring hebt in web ontwikkeling kun je geïntimideerd worden door native apps. De twee vakgebieden hebben veel overeenkomsten, vooral als het gaat om de ontwikkeling van de gebruikersinterface. Wanneer de keuze valt op een smartphone webapp, doe het dan omdat dit het beste is voor de gebruikers, niet omdat het makkelijker is en meer vertrouwd voor de ontwikkelaar. Voordelen 1. 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. 2. 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. 3. Download direct – Wanneer je een native app wil proberen of aanschaffen, kun je de native app direct downloaden via de ingebouwde applicatie winkel. 4. Gemakkelijk te verkopen – Omdat de applicatie direct te downloaden is op een smartphone, is het makkelijker om een applicatie te verkopen. 5. Prestatie – Native apps verslaan webapps wanneer het gaat om prestatie. Native apps zijn meer geheugen efficiënt en maken gebruik van standaard gebruikers interfacecomponenten. Nadelen 1. Programmeertalen – Native apps zijn niet eenvoudig te bouwen, ze zijn gemaakt met een eigen complexe programmeertaal. 2. 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. 3. 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. 4. Goedkeuring proces – 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] Na het lezen weet je wat de voor en nadelen, beperkingen en mogelijkheden van een native app zijn. Met deze kennis kan er een afgewogen keuze gemaakt worden waarom een native app wel of niet een goede keuze is voor een project.
38
De voordelen en nadelen van 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. Voordelen 1. 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. 2. 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 andere Javascript goed in Webapplicaties. 3. 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. 4. Makkelijker te meten – Webapps zijn makkelijker te meten en onderhouden door content management en analytics. Omdat het als het ware een site blijft is het makkelijker om het gebruikers gedrag te meten via bijvoorbeeld Google Analytics. Nadelen 1. Moeilijk te verkopen – Google (Android Market) en Apple (App Store) zorgen voor een eenvoudige manier voor verkoop van applicaties doormiddel van hun winkels. 2. 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. 3. 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. 4. 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] Na het lezen weet je wat de voor en nadelen, beperkingen en mogelijkheden van een webapp zijn. Met deze kennis kan er een afgewogen keuze gemaakt worden waarom een webapp wel of niet een goede keuze is voor een project.
Wanneer de keuze valt voor een webapp moet er een framework gekozen worden om de app in te ontwikkelen. De technologie en hardware waar een framework gebruik van maakt zijn daarom onderzocht.
39
Mobiele Webapp Frameworks Wanneer de keuze valt op een webapp is er een framework nodig om de webapp in te ontwikkelen. De technologie en hardware zijn belangrijke punten om meer over te weten voor de keuze gemaakt word voor een webapp. De smartphone markt groeit zeer snel en word steeds complexer. Dat is niet alleen verwarrend voor de kopers, maar ook voor de aanbieders van smartphone apps. Hoe kan je efficiënt een webapplicatie ontwikkelen voor alle platformen, wanneer elk platform gebruik maakt van zijn eigen programmeertaal? Dit probleem kan opgelost worden door web technologieën te gebruiken die van toepassing zijn op veel platformen. Web technologieën 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. Ook is er een optie om webapps te laten zien in volledig scherm grootte, net als een native app. Hardware Gebruiker gegevens kunnen worden opgeslagen op apparaten met verschillende technologieën. Bijvoorbeeld, om persoonlijke instellingen op te slaan. Dit kan door lokale opslag of browser SQL databases. Wanneer de gebruiker het apparaat herstart zijn de opgeslagen gegevens nog steeds offline beschikbaar. Veel apparaten ondersteunen het openen van de huidige locatie toegang. Smartphones berekenen de huidige locatie door het verkrijgen van gegevens van de ingebouwde assisterende GPS. Dit is een combinatie van GPS-positie, W-LAN informatie en de huidig gebruikte netwerkaanbieder locatie. De huidige locatie gegevens samen met lokaal opgeslagen gegevens kunnen leiden tot voldoende scenario’s en ideeën voor webapps. Voor het ontwikkelen van Webapps kunnen verschillende frameworks gebruikt worden. De frameworks zijn momenteel beperkt tot Webkit gebaseerde browsers. BlackBerry smartphones worden ondersteund vanaf versie 6 en Windows smartphones worden ondersteund vanaf Internet Explorer mobile 9. De belangrijkste frameworks zijn jQTouch and Sencha Touch, beide frameworks bieden verschillende ontwikkelingsmodellen. Ook jQuery Mobile maakt een goede impressie, het is ontstaan uit de JavaScript-bibliotheek. [5] [16] [21]
40
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. Alles flexibel Flexibele lay-outs waren een luxe voor websites. Alleen de lay-out kolommen en tekst waren flexibel in een ontwerp. Afbeeldingen konden de hele lay-out breken. De afbeeldingen waren niet echt flexibel. Ze konden zich niet aanpassen van een groot computer scherm naar een kleiner netbook scherm. Sinds HTML5 kunnen we alles meer flexibel maken. We kunnen de grootte van de beelden automatisch laten 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 voormensen die overschakelen van portretoriëntatie op landschap of voor mensen die overstappen van een groot computerscherm naar een iPad. De grootste fout die ontwerpers kunnen maken is alles flexibel maken. Wat gebeurt er als je de website schaalt en alle groottes wijzigt in een kleinere verhouding? Je kunt het niet meer lezen, afbeeldingen lijken te klein zodat je ze niet meer kunt herkennen, en je moet naar beneden blijven scrollen om inhoud te vinden. Een lay-out kan daarom te smal of te kort lijken om er goed uit te zien. 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 landschapmodus, 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. Media Queries en Style Sheets
41
Het werkt niet wanneer alles flexibel is. Een website hoeft geen extreme wijzigingen van de grootte te krijgen. Misschien wil je de lay-out in zijn geheel veranderen, hetzij door een aparte style sheet of efficiënter, door middel van een CSS-media-query. Dit hoeft niet moeilijk te zijn de meeste stijlen blijven hetzelfde, terwijl specifieke style sheets deze stijlen kunnen erven en elementen laten bewegen door floats, breedtes en hoogtes etc. Wanneer een style sheet de lay-out te smal, kort, breed of lang maakt, kan dat gedetecteerd worden en omschakelen naar een nieuw gekoppelde style sheet. Deze nieuwe style sheet zou alles van de standaard style sheet overnemen de structuur definiëren en opnieuw inrichten. Spelen met Content Je kunt proberen om dingen proportioneel te krimpen en te veranderen wanneer dat nodig is, om alles te laten passen wanneer een scherm kleiner wordt. Het beschikbaar maken van elk stuk content van een groot scherm op een kleinere het scherm is niet altijd de beste oplossing. Er zijn een aantal richtlijnen voor de mobiele omgeving: eenvoudigere navigatie, meer gerichte content, lijsten of rijen in plaats van meerdere kolommen. Responsive web design gaat niet alleen over het creëren van een flexibele lay-out op een breed scala aan platformen en schermformaten. Ook moet het over de gebruiker gaan die content kan kiezen. Het is mogelijk om de content met behulp van CSS te verbergen. Maar als de inhoud is verborgen, moet de browser nog steeds de verborgen inhoud laden, dat is niet efficiënt voor het gegevens gebruik van de mobiele telefoon. Je wilt niet onzichtbare content laden en daarop wachten terwijl je die content nooit te zien krijgt, niet op je smartphone maar andersom ook niet op je computer. Daarom is het verbergen van content een negatief punt. Tap versus click Een ander belangrijk feit is dat touchscreen apparaten steeds populairder worden. Op dit moment zijn voornamelijk touchscreens op kleinere apparaten, maar veel laptops en desktops op de markt hebben ook touchscreen mogelijkheden en ook de tablets zijn zeer populair. Touchscreens komen met andere ontwerprichtlijnen dan de op cursor gebaseerde interactie. Beide verschillen in mogelijkheden. Een touchscreen raak je aan voor interactie met een cursor beweeg je de muis naar het punt voor interactie. 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. Ontwerpers gebruiken metaforen voor het maken van knoppen. De knop moet eruit zien alsof je er echt op kan drukken. [5] [22] [23] Na het lezen weet je wat Responsive Web Design is en hoe er gebruik van gemaakt kan worden. Ook de voor en nadelen en het verschil in interactie van een mobiel en desktop computer zijn duidelijk.
42
Responsive Web Design is aan bod gekomen, een andere optie waar onderzoek naar is gedaan is Mobile First Responsive Web Design. Een optie wanneer er nog geen bestaande website is of zoals bij TKMST het onderdeel van de applicatie zo minimaal is in vergelijking tot de bestaande website dat er eventueel een aparte losstaande website voor bij kan komen.
Mobile First Responsive Web Design Misbruik van Responsive Design heeft een enorm nadeel voor de User Experience. Kleine apparaten zoals smartphones laden dezelfde inhoud als de grote scherm varianten zoals desktopcomputers. De mobiele webapplicatie of site is ontworpen en gebouwd nadat de desktop-versie is voltooid. Dat is tegen de theorie van de mobiele User Experience. Zorg ervoor dat de kleinere apparaten minder gegevens hebben om te laden. Daarom kan er gebruik gemaakt worden van een andere techniek, de mobiele first benadering. Begin opnieuw te ontwerpen voor de kleinere, meer beperkt apparaten. Op deze manier creëer je de basis voor alle andere design varianten. Je begint met kleine resolutie beelden en pictogrammen, zodat de mobiele telefoons deze sneller kunnen laden. Voor de grotere schermen kun je deze beelden vervangen voor beelden met een hogere resolutie als de schermafmeting groter wordt. Het niet gebruiken van JavaScript is een optie op kleinere beperkt apparaten. Je kunt JavaScript wel gebruiken in de andere varianten. JavaScript zal langzaam werken op kleine beperkte mobiele apparaten en dat zal de gebruikers teleurstellen en misschien wel afschikken. Daarom begin met de lay-out van de kleine apparaten. Daarmee kan verder uitgebouwd worden voor de grotere schermen en kan de lay-out gewijzigd worden, zodat het beter past in de grotere schermen. Zorg ervoor als je begint te ontwerpen met een Mobile First aanpak, dat de focus ligt op alleen de belangrijkste gegevens en acties in een applicatie. Bij het ontwerpen van de Mobile First aanpak is het eindresultaat een belevenis gericht op de essentiële taken die gebruikers willen bereiken zonder vreemde omwegen en het zien van onnodige interface elementen. Dat is goed voor de User Experience en goed voor het bedrijf waarvan de site of product is. Nieuwe mobiele applicatie platformen met opwindende mogelijkheden laten veel desktop computer browsers achter zich. Denk na over de precieze locatie van GPS, het gebruik van een kompas voor het oriënteren van de gebruiker, meervoudige aanraak invoer van één of meerdere gebaren en apparaat positionering van de accelerometer. [24] [25]
43
Conclusie Een applicatie is een computerprogramma dat bedoeld is voor eindgebruikers. Op elke mobiel en computer draait een besturingssysteem, wanneer je bent opgestart en een programma opent open je als het ware een applicatie. Native applicaties zijn gebouwd voor een specifiek besturingssysteem en kunnen verkregen worden in de applicatie winkels van het desbetreffende besturingssysteem. Native applicaties kunnen alle functies van een mobiel gebruiken, web applicaties niet. Web applicaties staan extern opgeslagen en kunnen niet verkregen worden via een applicatie winkel. Web apps worden geopend in een browser en zijn niet specifiek gemaakt voor een besturingssysteem. Het zijn als het ware websites die aanvoelen als een applicatie. Native en web applicaties zijn beide specifiek op een mobiel gericht. 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 is niet specifiek gericht op een mobiel maar gericht op alle apparaten die over een browser beschikken. De mogelijkheid van content schalen zorgt ervoor dat het op elk schermformaat past. Door het verbergen van content blijft de User Experience gewaarborgd en zijn alleen de functies beschikbaar die in de context van gebruik voor het desbetreffende apparaat passen. Responsive Web Design is vooral goed te gebruiken wanneer er voor crossmedia ontworpen word. Wanneer er voor crossmedia ontworpen word en de mobiele versie het belangrijkste is kan Mobile First Responsive Web Design techniek uitkomst bieden. De techniek richt zich zoals de naam al verklapt eerst op de mobiele versie en word uitgebreid op grote van het schermformaat. De focus ligt op het eind resultaat wat een belevenis is gericht op de essentiële taken van de gebruikers zonder omwegen en het zien van onnodige interface elementen. Wanneer de mobiele versie af is kan de content en layout gewijzigd en aangevuld worden voor versies die gebruik maken van grotere schermen. Welke techniek gebruikt word heeft veel invloed op het eindresultaat. Elke techniek heeft voor en nadelen maar de uiteindelijke keuze moet niet afhangen van de techniek maar van de User Experience die het kan ondersteunen.
44
Hoofdstuk #5 Case
45
Case Om tot een mobiel concept te komen is eerst TKMST onderzocht en de producten en diensten die daar deel van uitmaken. Naast dat de applicatie moet passen in de visie van TKMST is het ook belangrijk voor de stakeholder om er een verdienmodel aan te hangen zodat er inkomsten gegenereerd kunnen worden. De drie meest opvallende diensten en producten van TKMST zijn de verkoop van: (1) docentenagenda’s, (2) hulp bij een vervolg opleiding kiezen (3) verslagen en examens bekijken op collegenet.nl (dit is een onderdeel van TKMST de websites linken ook naar elkaar).
Mobiele concepten EDG Media Er zijn 3 mobiele concepten uitgewerkt met 3 verschillende verdienmodellen - Verslagen applicatie (Boekverslagen/ uitreksels/recensie ) - Docentenagenda applicatie - Open dagen applicatie Er is gekeken naar: - Huidige beschikbare content - Hoe lang gebruikt de doelgroep de applicatie - Wat is er al op dit gebied in Nederland en in het buitenland - Welk verdienmodel zou er aan gekoppeld kunnen worden - Techniek: is het gecompliceerd om de applicatie technisch te ontwikkelen Doel app’s: - Verslagen applicatie: uitbrengen met gerestylde collegenet; concurrentie bieden aan scholieren.com. - Docentenagenda applicatie: vervanging papieren agenda of als extra toevoeging - Open dagen applicatie: marktpositie claimen binnen studiekeuze, concept tkmst uitbreiden; inspelen op gebruikersgedrag; 1e zijn met verzamel applicatie van opendagen.
46
#1 Verslagen Voorbeelden van bestaande applicaties die gericht zijn op het lezen en maken van verslagen. Essential Essay Pro
De applicatie helpt studenten bij het schrijven van een essay. Na het kiezen van wat voor verslag er gemaakt moet worden krijgt de student een aantal stappen te zien die helpen bij het schrijven van het verslag. Papers
De applicatie helpt studenten bij het zoeken van papers. Na het lezen kan de paper beoordeeld worden en opgeslagen worden. Als het gewenste paper of onderwerp er niet bij zit is er een optie om te zoeken op andere studie gerelateerde zoekmachines zoals Google Scholar. Concurrentie Verdienmodel Termijn gebruik Doelgroep Techniek
Successen
In Nederland is nog niet een dergelijke app Advertenties, naamsbekendheid. HTML5 web app -> meer bezoekers website 4-6 jaar, kan bij elk verslag, uitreksel, examen weer gebruikt worden Middelbare scholieren die een verslag moeten lezen, uitreksel moeten maken, examen willen naslaan Op Collegenet staan geen pdf’s maar tekst die geselecteerd kan worden daardoor zou het geen probleem moeten zijn om dit op te halen en op je telefoon te laten zien. Op examen.nl staan wel pdf’s die via een pdf viewer getoond moeten worden, of de pdf’s moeten gedownload worden. De Essay Writing Workstation (€ 19,99) door 44 scholen (U.S.A.) aangeschaft.
47
Toelichting De verslagen applicatie laat de verslagen van collegenet.nl mobiel laten zien en ook de examens van examen.nl. De student kan een verslag inzien, beoordelen en feedback geven. Maar ook persoonlijke notities in bestaande verslagen aanbrengen en tekst onderdelen highlighten. Deze aanpassingen kunnen dan via de mail en social media samen met het originele verslag verstuurd worden.
48
#2 Docentenagenda Voorbeelden van bestaande (docenten) agenda applicaties. iMaestro
De applicatie is in eerste instantie geen docentenagenda, maar bezit een hoop functies uit een agenda. De applicatie is een aanvulling van de schoolsoftware. Aanwezigheid en cijfers kunnen direct in de applicatie worden ingevoerd. Door de koppeling met de school software van dezelfde ontwikkelaar staat de data direct in het schoolsysteem.
49
Jorte
De applicatie Jorte is een digitale agenda. De agenda heeft een dag, maand en weekoverzicht en kan informatie over afspraken openen in andere applicaties. De agenda is tussen de vijf en tien miljoen keer gedownload. Concurrentie Verdienmodel Termijn gebruik Doelgroep Techniek
Successen
(i)Maestro Verkoop van digitale docentenagenda: met specifieke functionaliteiten speciaal voor docenten Één geheel schooljaar Docenten De data die in de telefoon is ingevoerd moet geëxporteerd worden naar een computer om in de software van school op te slaan. Dit kan zoals Maestro via aparte software voor school. Maar ook door het exporteren van tekstbestanden. Redelijk gecompliceerde techniek Maestro 5.000 - 10.000 keer gedownload voor android telefoons
50
De docentenagenda is de digitale versie van de docentenagenda die nu al door EDG Media verkocht wordt. De docent heeft een overzicht van zijn rooster en klassen waaraan les gegeven word. De docent kan aanwezigheid opnemen, cijfers invoeren en huiswerk opgeven. Het opgegeven huiswerk wordt direct in de agenda geplaatst en kan ook naar de studenten gestuurd worden via mail. De agenda kan per dag, week en maand bekeken worden en alle feestdagen en schoolvakanties staan al aangegeven. De docenten onderling kunnen zien wanneer iedereen tijd heeft om een bespreking in te roosteren. Aan het eind van elk kwartaal en jaar kan de docent de rekentabel gebruiken om het cijfer zelf of door de applicatie te laten uitrekenen.
51
#3 Open dagen Voorbeelden van bestaande applicaties die gericht zijn op open dagen. Erasmus Universiteit
TU Delft
VU Amsterdam
De applicaties van de opleidingen geven de bezoekende studenten alle informatie die nodig is op de open dag. Het programma, de opleidingen, de plattegrond en de route vanaf het openbaar vervoer zijn allemaal binnen handbereik.
52
Welcome to college
Een applicatie voor de iPhone waarmee de Amerikaanse student bezochte scholen kan beoordelen. De applicatie is een digitaal notitieblok om mee te nemen naar een open dag. De beoordeling kan privé gehouden worden om zelf een keus te maken tussen scholen maar kan ook online gezet worden zodat anderen de beoordeling en notities kunnen gebruiken om een keus te maken..
Concurrentie Verdienmodel Termijn Doelgroep Techniek Successen
In nederland bestaat geen verzamel- en beoordelings apps van open dagen; wel apps van de opendag zelf:VU Amsterdam, TU Delft, Erasmus Universiteit met een eigen opendag applicatie Profiel/naw scholier, koppelen van instellings app aan ‘verzamel app’of presentatiemogelijkheid van specifieke open dag op de tkmst app.-- zelfde principe als op TKMST.nl laatste jaar vo (mbo); tijdens de open dagen en het proefstuderen Laatste jaar scholieren die een vervolg opleiding zoeken. Eventueel de scholieren die nog een jaar langer moeten maar zich al willen oriënteren Tekst over opleidingen kan van website geïmporteerd worden, notities, beoordelingen en foto’s moeten in een database opgeslagen worden en/of kunnen ook op de website getoond worden. 100 – 500 downloads per open dag applicatie van elke opleidingen
53
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,
54
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.
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 laatste jaar studenten die bij EDG Media een aantal dagen op snuffelstage kwamen. 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 Na het oriënteren en onderzoeken van TKMST zijn er drie concepten uitgekomen verslagen, docenten agenda en open dagen. Er kan maar een concept uitgewerkt worden daarom is de keuze gevallen voor de open dagen applicatie. De reden hiervoor is: - Verdienmodel - Sluit het best aan bij TKMST & doelgroep - Bijna tot geen concurrentie 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 het bedrijf 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.
55
Strategy plane De basis van een succesvolle User Experience is een duidelijk geformuleerde strategie. Weten wat het product moet doen voor de organisatie en weten wat de gebruiker met het product wil bereiken informeert de beslissingen die genomen moeten worden over elk aspect van de User Experience. Voor er iets gemaakt word zijn er twee belangrijke vragen te beantwoorden. De twee vragen gaan over de doelstelling van het bedrijf en de doelstelling van de gebruiker met de applicatie. -
Wat wil het bedrijf uit dit product halen? EDG Media wil de extra informatie (programma, plattegrond, bereikbaar openbaar vervoer) in de applicatie voor opendagen verkopen aan scholen die dit in de (gebundelde) applicatie willen laten zien. Zo hoeven de scholen geen eigen applicatie te maken maar kunnen ze meedoen in een gezamenlijke applicatie die dit voor alle scholen laat zien.
-
Wat wil de gebruiker uit het product halen? De toekomstige studenten kunnen informatie verkrijgen over open dagen. Deze informatie kan de student als hulp middel gebruiken tijdens het bezoek van een opendag.
Needs Demographic criteria: VMBO -
Sekse Leeftijd Opleidingsniveau Burgelijke staat Inkomen
m/v 16-17 VMBO ongehuwd 50,- p.w.
Demographic criteria: HAVO -
Sekse Leeftijd Opleidingsniveau Burgelijke staat Inkomen
m/v 17-18 HAVO ongehuwd 60,- p.w.
Demographic criteria: VWO -
Sekse Leeftijd Opleidingsniveau Burgelijke staat Inkomen
m/v 18-19 VWO ongehuwd 60,- p.w.
56
Psychographic profiles: Jongeren van nu staan vaak positief in het leven, ze zijn in hoge mate zelfbewust en optimistisch over hun toekomst en mogelijkheden op de arbeidsmarkt. - 87% van deze jongeren weet zeker dat ze op een dag waarmaken waar ze nu van dromen. - 68% ziet zichzelf als een heel bijzonder persoon (tegenover 46% van de volwassenen). - 73% ziet zichzelf als een goede leider. Jongeren zijn doorgaans optimistisch over hun persoonlijke toekomst. Ze zijn dan ook grotendeels opgegroeid in een tijd waarin het economisch steeds beter ging. - 57% denkt dat hun eigen leven minder goed zal zijn dan dat van hun ouders. Berichten over economische crisis, vergrijzing en klimaatverandering spelen daarin waarschijnlijk een belangrijke rol. - 24% denkt dat zijn of haar eigen toekomst weinig perspectief biedt. ‘Gelukkig zijn’ is voor veel jongeren het hoogst haalbare goed. Het besef dat geluk niet alleen in materiële zaken zit, is breed doorgedrongen. Veel jongeren zijn gelukkig tot zeer gelukkig: in de periode 2006-2008 noemt - 94% van de twaalf- tot achttien jarigen zichzelf gelukkig in de periode 2006-2008 Onderhandelen De ouders van de huidige jongeren groeiden op in de jaren zestig en zeventig. De tijd van flowerpower, de eerste seksuele revolutie en democratisering. We zien binnen deze generatie wel veel nadruk op het loslaten van tradities. Er ontstond volop ruimte voor ontplooiing, het ontdekken van je eigen identiteit en het ontwikkelen van je eigen mening. In de structuur van het huidige Nederlandse gezinsleven heeft dit zijn sporen nagelaten. Jongeren krijgen steeds meer ruimte voor discussie. Jongeren accepteren hiërarchie steeds minder en kennen daar geen gezag meer aan toe. ‘Omdat ik het zeg’ is geen geldig argument meer. Jongeren zijn gewend aan gelijkwaardige relaties en willen meepraten. Extravert Maar liefst 41% van de jongeren staat graag in het middelpunt van de belangstelling (tegenover 20% van de volwassenen). ‘Gezien willen worden’ vormt een belangrijke drijfveer. Mede hierdoor zijn vrije beroepen en extraverte functies op het terrein van marketing, pr en verkoop beduidend populairder bij jongeren dan bij oudere generaties. [31]
57
Attitudes van de gebruikers over het product en de technologie: Jongeren brengen tegenwoordig gemiddeld meer dan twee uur per dag online door. Ongeveer de helft van deze tijd besteden ze aan sociale media als hyves, msn of facebook. Daarnaast bekijken ze filmpjes, surfen ze om informatie te vinden en gamen ze online De millenniumgeneratie, jongeren die geboren zijn tussen 1986 en 1995, zijn opgegroeid met internet. De jongeren worden ook wel generatie Y genoemd. Generatie Einstein, screenagers en de grenzeloze generatie zijn andere benamingen. Ze groeien op in een kennissamenleving, waarin grenzen steeds meer lijken te vervagen. Technologie maakt het mogelijk altijd met iedereen in verbinding te staan. De jongeren van generatie Y groeiden veelal op in luxe en kennen vaak grenzeloze ambities. Een eigen bedrijf, werken in het buitenland: alles is mogelijk. Niet alle jongeren kunnen zich hierin staande houden. Een groeiende groep kampt met problemen en keuzestress. Door de tijd waarin de millenniumgeneratie leeft werken veel met technologische producten. Een hoop producten zijn sinds een aantal jaar technisch geworden en geautomatiseerd. Producten die voor die tijd ook voornamelijk met de hand gebruikt en gedaan werden. Door de prijsdaling van elektronische producten en de hoeveelheid tijd die iedereen wil besparen is het een normale zaak geworden dat overal een batterij in zit of een stekker aan hangt. Jongeren doen veel op hun mobiele telefoon. Het communiceren met anderen via social media is enorm groot in Nederland. Ook de functies, het gebruiksgemak van een mobiel en de applicaties zijn als een verlengstuk van de jongeren geworden. Om de 1 á 2 jaar word een mobiel vervangen, dit is de lengte van een gemiddeld abonnement dat je kunt afsluiten bij een nieuw aangeschafte mobiele telefoon. [31]
58
Persona’s
59
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 rondgeleid door de school. Conclusie bezoek open dagen Beoordelen De presentatie over een bepaalde richting wordt door mensen beluisterd. 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 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.
60
Cijfers EDG Media heeft in het bedrijfspand een onderzoeksbureau zitten genaamd OIG die veel voor TKMST onderzoekt. OIG heeft onderzoek gedaan naar gebruik van social media onder laatste jaar studenten 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.
61
Scope plane Met een duidelijk beeld van wat de gebruikers willen, kan er uitgezocht worden hoe al die strategische doelstellingen gehaald kunnen worden. Strategie wordt Scope wanneer de behoefte van de gebruiker en product doelstellingen in specifieke eisen voor wat de content en functionaliteit het product de gebruikers aanbied. De meest productieve bron voor eisen komt altijd van de gebruikers zelf. Maar vaker nog komen eisen van stakeholders (de mensen in de organisatie die wat te zeggen hebben over wat er in het product gaat). Of er nou eisen gedefinieerd worden met de hulp van stakeholders in de organisatie of direct met de gebruikers. De eisen die eruit komen zijn onder te verdelen in drie categorieën: -
De dingen die mensen zeggen te willen hebben. Soms zijn dit duidelijk goede ideeën en zullen hun weg vinden in het eindproduct
-
Soms zijn de dingen die mensen zeggen te willen hebben, niet de dingen die ze feitelijk willen hebben. Het is een gewoonte dat als iemand een moeilijk proces tegenkomt er aan een oplossing word gedacht. Soms is die oplossing niet uit te werken of het richt zich op een symptoom in plaats van de onderliggende oorzaak van het probleem. Door de suggesties te verkennen kunnen kompleet andere eisen naar voren komen die het probleem oplossen.
-
De functie waarvan mensen niet weten dat ze die willen hebben. Deze komen vaak voort uit een brainstorm oefening waarbij deelnemers de kans krijgen om het project door te bespreken en de mogelijkheden te verkennen van het project. Als je een tijd aan een product werkt en er diep in zit zie je vaak de nieuwe richtingen die je opkunt niet meer, en raak je uit het oog welke beperkingen echt zijn en welke beperkingen een gevolg zijn van eerder gemaakte keuzes. Hiervoor is een groep brainstorm die verschillende mensen uit andere delen van de organisatie samenbrengt om de mogelijkheden te verkennen. Een ingenieur, iemand van de klantenservice en iemand van de marketing afdeling in één kamer laten praten over dezelfde website kan verhelderend zijn voor iedereen. Onbekende perspectieven aanhoren en de kans erop te reageren moedigt mensen aan om breder te denken over het probleem en de mogelijke oplossing ervan.
Het kijken naar de concurrenten kan ook als inspiratie dienen. Iedereen in dezelfde soort business is bijna zeker ook bezig de behoefte van de gebruiker te vervullen. Heeft een concurrent al een effectieve manier gevonden om deze strategische doelstellingen te halen of een probleem op te lossen.
62
Zelfs producten die geen directe concurrent zijn kunnen als vruchtbare bronnen dienen voor eventuele eisen. Deze producten hebben functies, oplossingen en kenmerken die ter inspiratie dienen of op dezelfde wijze aangepakt kunnen worden.
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. -Account -Favorieten -Deel scherm -Open dagen lijst - Presentatie opleiding - Programma - Plattegrond - Tweets over opleiding #studentenservice_HU (antwoord, vraag) - Algemene informatie school (adres, website, niveau, route/ov) & opleiding beschrijving - Opleidingen - Vestigingen - Open dagen - Kwaliteit (cijfers studentenoordeel, kosten en stads informatie)
Extra requirements Er zijn bepaalde functies in een applicatie die op het eerste oog niet zichtbaar zijn maar waar de applicatie wel gebruik van kan maken. - GPS locatiebepaling opent na bevestiging de juiste opendag bij fysieke aanwezigheid op open dag en na het openen van de applicatie - Openbaar vervoer en navigatie naar open dag - Notificatie instellen en krijgen wanneer open dag begint - Brochure aanvragen & Inschrijven open dag
63
- Hyper links naar opleiding website, telefoonnummer en de niveaus van de opleidingen
API’s Een API is een application programming interface. Dit is een bestaande op zichzelf staande functie of applicatie die aan een site of product toegevoegd kan worden. Het gaat vaak om bepaalde handige functies of applicaties bijvoorbeeld zoals google maps. Met de API van google maps kun je de functie van een routebeschrijving in je applicatie toevoegen. De applicatie heeft zo de functie van een routebeschrijving zonder dat deze zelf ontwikkeld hoeft te worden. Een voordeel is dat iedereen google maps wel kent en zo de functie in de applicatie zonder moeite kan gebruiken. - Account log-in
Open ID
API
- Openbaar Vervoer
9292ov / google maps
API
- Tweets
Twitter
API
Requirement Account Favorieten Opendagen Share Opleidingen
Opendagen
*Algemene informatie Reis informatie
Voor/op/na Altijd in Navigation bar Altijd in Navigation bar Altijd in Navigation bar Altijd in Navigation bar Voor opendag gekozen school Voor opendag gekozen school Voor opendag gekozen school Voor opendag gekozen school
Uitleg Account aanmaken om favorieten op te slaan en social media te koppelen aan het account. Opleidingen die je wilt bezoeken worden hier geplaatst Alle (heel Nederland) aankomende opendagen (filter op: mbo, hbo, wo) Deel pagina. De aankomende student kan hiermee zijn gehele scherm delen op twitter facebook of de mail. Alle verdere opleidingen van de open dag/school die is gekozen om informatie over te bekijken. Opendagen agenda van open dag/school die de student bezoekt.
adres, website, niveaus, opleidingsrichting overzicht (vakken, wat kan je worden) Dit onderdeel is ook te zien voor en na een open dag. Openbaar vervoer en navigatie naar de opendag van de gekozen school. De aankomende studenten die naar een school gaan om een opendag te bezoeken kunnen zo zien welke bus, trein of tram ze moeten nemen naar de school die ze gaan bezoeken. Ook is er de navigatie naar de open dag om met de auto of lopend te gaan.
64
*Presentatie
Kwaliteit
*Tweets
*Algemene informatie *Tweets Plattegrond Programma *Presentatie *Algemene informatie *Tweets
*Presentatie
Voor opendag gekozen school Voor opendag gekozen school Voor opendag gekozen school Bezoek opendag school Bezoek opendag school Bezoek opendag school Bezoek opendag school Bezoek opendag school Na open dag gekozen school Na open dag gekozen school Na open dag gekozen school
Hier kan de school zich presenteren naar de aankomende studenten. Dit onderdeel is ook te zien voor en na een open dag. Overzicht van cijfers over de kwaliteit van de opleiding en stad. Cijfers bevatten studentenoordeel, opleidingskosten, reistijd, stads informatie. #studentenservice_HU (antwoord, deel, vraag). Een overzicht van de student helpdesk tweets. Hier kan de aankomende student informatie zoeken en vragen bekijken/stellen. Dit onderdeel is ook al te zien voor de open dag begint en is geëindigd. adres, website, niveaus, opleidingsrichting overzicht (vakken, wat kan je worden) #studentenservice_HU (antwoord, deel, vraag). Een overzicht van de student helpdesk tweets. Hier kan de aankomende student informatie zoeken en vragen bekijken/stellen. Plattegrond van opendag gekozen school. De plattegrond toont de weg door de school waar de aankomende student de weg nog niet weet. Opendag programma van opendag gekozen school in het programma staat het rooster van de opendag. Hier kan de school zich presenteren naar de aankomende studenten. Dit onderdeel is ook te zien voor en na een open dag. adres, website, niveaus, opleidingsrichting overzicht (vakken, wat kan je worden) #studentenservice_HU (antwoord, deel, vraag). Een overzicht van de student helpdesk tweets. Hier kan de aankomende student informatie zoeken en vragen bekijken/stellen. Hier kan de school zich presenteren naar de aankomende studenten. Dit onderdeel is ook te zien voor en na een open dag.
Content Foto, audio, video en tekst die in de applicatie komt. Vaak als er wordt gesproken over content verwijst men naar tekst. Maar afbeeldingen, audio en video zijn vaak belangrijker dan de bijbehorende tekst. Deze verschillende soorten content kunnen ook samenwerken om aan een bepaalde eis te voldoen. Haal niet de indeling en het doel van de content door elkaar. Vaak hebben stakeholders het over we willen ook FAQ’s op de site. Maar FAQ’s zijn een content indeling, een simpele serie vragen met antwoorden. De echte waarde van FAQ’s zijn dat het toegang bied aan algemeen benodigde
65
informatie. Andere content eisen kunnen hetzelfde doel hebben maar wanneer de focus op het soort indeling ligt word het doel vaak vergeten. De verwachte afmeting van elke content functie heeft een grote invloed op de User Experience beslissingen die er gemaakt worden. De content benodigdheden moeten voorzien zijn van geschatte formaten van elke functie: aantal woorden in de tekst, pixel dimensies voor een afbeelding of video, volledige grote downloads en stand-alone content elementen zoals audio of pdf documenten. Deze essentiële informatie is nodig om een geschikt voertuig voor de content te ontwerpen. Een site met kleine thumbnails krijgt een ander ontwerp dan een site met foto’s op volledige grote. Er komt bestaande content in die ook al op de website aanwezig is. De content moet via content inventory geanalyseerd worden om te zien welke content geschikt is voor de applicatie. Omdat het over open dagen gaat is alleen de content over open dagen belangrijk. Deze is vastgelegd in de evaluatie van de conten inventory genaamd de content audit. -
Afbeeldingen van het logo van de opleiding (website TKMST) Film, afbeelding en tekst voor in de presentatie, plattegrond en programma (school) Tekst over informatie van een opleiding (website TKMST) Tekst data opendagen (website TKMST) Tekst beschrijving van een opleiding (website TKMST)
Content Audit Omdat de applicatie ook bepaalde content van de site gebruikt worden alleen de pagina’s geanalyseerd die betrekking hebben op open dagen. Content audit gericht op open dagen zie afbeelding hieronder
Conclusie schrijven de afbeelding komt in de bijlage
66
Scenario (functionaliteiten) Voor het bepalen van de benodigdheden, kunnen de persona’s opnieuw gebruikt worden, door ze in een kort verhaal te laten acteren genaamd een scenario. 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 -
Open dagen lijst Tijdens het lezen van het TKMST magazine scanned Jan de QR code in het magazine. 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
67
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. -
Openbaar vervoer 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 en vult zijn eigen locatie in. Jan laat de applicatie de route naar de open dag berekenen en ziet dat hij de tram vlakbij kan pakken en vlakbij de school uitstapt.
Tijdens -
Informatie opleiding 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 maal of het de juiste locatie is voor hij naar binnen wil gaan. Dan ziet Jan het icoon van het programma staan.
-
Open dag programma 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.
-
Plattegrond 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 en loopt de kantine binnen.
-
Tweets opleiding De week na de open dagen is Jan de informatie nog aan het verwerken. Jan bedenkt hij 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. De dag erna krijgt Jan antwoord op zijn vraag en kan hij het antwoord in zijn besluit meenemen om een keuze te maken.
Na
68
Structure plane Nadat de eisen zijn gedefinieerd is er een duidelijk beeld van wat er in het eindproduct komt. Er is alleen nog niet beschreven hoe deze stukjes in elkaar passen tot een samenhangend geheel. De volgende stap in het proces is het ontwikkelen van een conceptuele structuur voor de site of product.
Flowchart
69
Flowchart Open dagen applicatie
70
Wireframe screens flowchart Skeleton plane De conceptuele structuur begint vorm te krijgen aan de massa eisen die voortvloeien uit de strategy plane. Op het skeleton plane word die structuur verder verfijnd. Het identificeren van de specifieke aspecten van de interface via Navigation Design, Information Design en Interface Design zal zorgen voor een concretere structuur. Interface design Interface Design gaat over het selecteren van de juiste interface elementen voor de taak die de gebruiker probeert te bereiken. De elementen worden zo gerangschikt op het scherm zodat de gebruiker het vlug begrijpt en gemakkelijk kan gebruiken. Taken die zich uitstrekken over meerdere schermen, elke scherm bevat een andere set interface elementen waarmee de gebruiker te maken krijgt. Welke functie waar op het scherm komt is een gebied van Interaction Design. Hoe deze functies worden gerealiseerd op het scherm is het gebied van interface design. Een grote uitdaging voor het ontwerpen van een interface voor complexe systemen is het uitzoeken van welke aspecten de gebruiker niet mee om hoeft te gaan en deze reduceert in zichtbaarheid of in zijn geheel weglaat. Navigation design Navigation Design lijkt heel makkelijk: zet op elke pagina links zodat de gebruikers zich kunnen verplaatsen op alle website pagina’s. Het Navigation Design op elke site moet drie gelijktijdige doelen volbrengen: -
Navigation Design moet gebruikers voorzien van een manier om van elke pagina te linken naar elke andere pagina. Navigatie elementen worden geselecteerd om gebruikers gedrag te vergemakkelijken.
-
Navigation Design moet de relatie communiceren tussen de elementen die het bevat. Een lijst met links is niet genoeg. Wat hebben de links met elkaar gemeen? Zijn sommige belangrijker dan anderen? Wat is het relevante verschil tussen deze links? Deze communicatie is noodzakelijk voor gebruikers om te begrijpen welke keuzes er voor hun beschikbaar zijn.
-
Navigation Design moet communiceren wat de relatie is tussen de content en de pagina die de gebruiker aan het bekijken is. Wat heeft dit alles te maken met wat ik aan het bekijken ben?
Information Design Information Design komt neer op het beslissen over hoe de informatie wordt gepresenteerd zodat mensen het kunnen gebruiken en makkelijker kunnen begrijpen. Soms kan Information Design visueel zijn. Is een cirkeldiagram de beste manier om de data te presenteren of werkt een staafdiagram beter voor de gebruikers? Brengt het verrekijker icoon de boodschap over wanneer deze wordt gebruikt om op de site te zoeken of is een vergrootglas icoon beter te begrijpen. Information Design kan ook het groeperen en ordenen zijn van stukken informatie, op een manier die weerspiegelt hoe je gebruikers denken en ondersteund in de taken en doelen die de gebruiker wil volbrengen.
71
Information Design speelt een rol in interface design problemen, omdat een interface niet alleen de informatie van de gebruiker verzamelt maar ook informatie naar de gebruiker communiceert. Foutmeldingen zijn een klassiek Information Design probleem in het creëren van een succesvolle interface. De grootste uitdaging is de gebruiker zo ver te krijgen dat de instructies ook daadwerkelijk gelezen worden. Of het nou is omdat de gebruiker een fout heeft gemaakt of omdat de gebruiker net begonnen is, dat is een Information Design probleem. Wireframes Pagina opmaak is waar Information Design, Interface Design en Navigation Design samenkomen en een samenhangend skelet vormen. Een wireframe is een gedetailleerd document die aantoont hoe aan de visie zal worden voldaan. Wireframes worden aangevuld door de uitgebreide navigatie specificaties met een gedetailleerde beschrijving van elk van de verschillende navigatie componenten. Wireframes zijn een noodzakelijke eerste stap in het proces van het vaststellen van het visuele ontwerp voor de site. Iedereen in het ontwikkel proces zal de wireframes op een bepaald punt in het proces gebruiken. De mensen verantwoordelijk voor de Strategy, Scope en Structure kunnen de wireframes raadplegen om te bevestigen dat het eindproduct aan de verwachtingen voldoet. Degene die verantwoordelijk is voor het bouwen van het product kan de wireframes raadplegen om te zien hoe de site functioneert. Algemene pagina Presentatie pagina Programma pagina Plattegrond pagina Tweets pagina
Reis advies / vervoerskeuze pagina Open dagen lijst Naar de open dag Profiel pagina
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
Tabbar wanneer de opleiding niet betaald heeft om in de applicatie te komen.
94
95
Focus Group: gekozen concept toetsen bij de doelgroep Om te toetsen of het concept ook bij de doelgroep in de smaak valt zijn er gesprekken geweest met laatste jaar studenten die bij EDG Media een aantal dagen op snuffelstage kwamen. De uitkomst was dat de studenten de functies van de applicatie zouden gebruiken op een open dag. Vooral het programma en de plattegrond werden positief ontvangen door de doelgroep. De reden was dat ze zo geen uitgeprinte papieren hoeven mee te nemen of te zoeken op de open dag. De twitter feeds werden goed ontvangen vooral voor en na een open dag leek het de studenten handig om vragen te kunnen stellen aan mensen die ook echt met de opleiding te maken hebben. De meerderheid had een twitter account en zou er gebruik van maken al konden ze niet direct een vraag verzinnen om te stellen, dit kwam ook vooral doordat niemand nog een open dag had bezocht.
Usability Testing resultaten Om het concept en de indeling te testen is er een prototype ontwikkeld 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 heeft een aantal kleine veranderingen ondergaan. De veranderingen zijn: - De Back button is veranderd in de Home button wanneer je in de eerste laag van de app bent. Wanneer je dieper in de app komt is er een back button die je 1 laag terug brengt. - Share is rechts 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. - Wanneer de applicatie opent en GPS staat aan ziet de applicatie je locatie en vraagt of je direct naar de open dag wil gaan waar je fysiek aanwezig bent. - Benaming van de Tab Bar icons en de icons zelf zijn aangepast naar een duidelijkere beschrijving en uiterlijk. Het uiterlijk wordt nog wel aangepast tijdens het visueel uitwerken. - De buttons 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 de accordeon menu’s die kunnen in en uitklappen vervangen voor tabjes waardoor de content direct in beeld staat en niet alleen het menu. -De cancel en done buttons in api’s en schermen waar bevestiging voor nodig is zijn geplaatst in de Navigation Bar om niet weer pop-ups te krijgen en er direct geannuleerd of bevestigd kan worden.
96
- Het begin scherm: Favorieten wordt onder een button 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.
Native, Web app of Responsive design 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. 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 en er komen geen aanpassingen in het concept waar functionaliteiten worden weggelaten omdat deze niet mogelijk zijn in een webapplicatie. 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.
97
Surface plane Het laatste vlak van de elementen van User Experience is het surface plane. Hier word de aandacht gevestigd op de aspecten van het product die de gebruikers al eerste zullen opvallen. Hier komen content, functionaliteit en esthetiek samen om in een ontwerp dat de zintuigen behaagd bij de vervulling van alle doelstellingen van de vier voorgaande planes. Ontwerpvoorstellen Om een visueel ontwerp te kiezen zijn er een aantal voorstellen gemaakt. Het gaat hier om het kleurgebruik van het omhulsel van de applicatie zoals de Navigation bar, de Tab bar en de knoppen. De content is nog niet veel aandacht aan besteed maar word verder uitgewerkt na de keuze voor een bepaald kleurgebruik voor het uiterlijk van de applicatie. Bij het maken van de ontwerpvoorstellen is rekening gehouden met contrast en de herkenbaarheid van TKMST. De kleuren van TKMST op de website zijn geel en zwart maar er is ook wat met andere kleuren gedaan om alle opties te verkennen.
98
Gekozen ontwerp
Uitwerking applicatie open dagen
99
Applicatie icoon
100
Splash screen Wanneer de applicatie opstart komt het splash screen in beeld. Het beeld laat zien dat de applicatie aan het laden is voor het login scherm opent.
101
Login Het Login scherm biedt verschillende mogelijkheden voor nieuwe gebruikers. Onderin kan er zonder login beperkt gebruik gemaakt worden van de applicatie. Men kan zonder Login de open dagen lijst zien en een open dag openen. De beperking zonder login is het niet gebruik kunnen maken van een profiel, delen van het scherm en de optie om favorieten toe te voegen. Bovenin kan men bij Registreer een account aanmaken. Wanneer er geregistreerd is kan men bij Login de applicatie binnenkomen met het geregistreerde email adres en het wachtwoord. Met deze methode kunnen alle opties binnen de applicatie gebruikt worden. In het midden van het scherm is er de mogelijkheid om met een Facebook of Twitter account in te loggen. Hiermee word de drempel om een account aan te maken lager. Wanneer een gebruiker Facebook of Twitter heeft kan door de Open ID Login met een van deze social media platformen de applicatie volledig gebruikt worden.
102
Open dagen lijst 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 content van de open dagen, hier 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. In het midden staat een icoon die laat zien wat voor open dag het is, dit is vooral tijdens het swipen door de lijst heen handig om in één oogopslag te zien wat voor een soort open dag het is. Rechts van elke open dag staat een favorieten 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 hierop 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 word maandelijks bijgewerkt. Er komt dan nieuwe data van open dagen en de opendagen 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.
103
Algemene informatie open dag en opleiding 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.
104
Opleidingen van de instelling Wanneer men op het tabblad Opleidingen tapped komt men op het Opleidingen scherm uit. Hier staan de verschillende opleidingen van de instelling waar de open dag gehouden word. Er zijn opleidingen met verschillende niveaus, deze opleidingen kunnen filteren op MBO, HBO en WO. De opleidingen worden op alfabetische volgorde weergegeven. De lengte van de lijst hangt af van het aantal verschillende opleidingen die een instelling heeft. Het aantal opleidingen gaat van 3 stuks voor het ROC ASA tot 193 stuks voor de ROC Amsterdam. Wanneer men op een opleiding tapped opent de informatie van die opleiding.
105
Vestigingen van de instelling Wanneer men op het tabblad Vestigingen tapped komt men op het Vestigingen scherm uit. Hier staan de verschillende vestigingen van de instelling waar de open dag gehouden word. De vestigingen worden op alfabetische volgorde weergegeven. De lengte van de lijst hangt af van het aantal verschillende vestigingen die een instelling heeft. Het aantal vestigingen gaat van 1 stuk voor het Grafisch Lyceum Rotterdam tot 60 stuks voor Fontys Hogeschool. Wanneer men op een vestiging tapped opent de eerste open dag van die vestiging.
106
Open dagen van de instelling Wanneer men op het tabblad Open dagen tapped komt men op het Open dagen scherm uit. Hier staan de verschillende open dagen van de instelling waar de open dag gehouden word. De open dagen worden op volgorde van open dagen data weergegeven. De lengte van de lijst hangt af van het aantal open dagen die een instelling heeft. De data van open dagen zijn begin van het schooljaar al bekent de content word later aangevuld wanneer deze bekend is. Naast elke kalender met de data van de open dag staat de content van de open dagen, hier 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 grijze ster waar mee een open dag aan de favorieten toegevoegd kan worden. Wanneer een open dag is toegevoegd aan de favorieten kleurt de grijze ster naar geel.
107
Kwaliteit van de instelling Wanneer men op het tabblad Kwaliteit tapped komt men op het Kwaliteit scherm uit. Hier staan de verschillende cijfers en beoordelingen van de instelling waar de open dag gehouden word. Op de pagina staan de cijfers van het • • • • •
Studentenoordeel in cijfers Collegeld in cijfers Overige informatie opleiding in cijfers Vervoers informatie in cijfers Stads informatie in cijfers
108
Presentatie van de instelling 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 hebben net zoals bij het programma en de plattegrond.
109
Programma van de open dag 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, alles begint 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 het 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.
110
Plattegrond van de open dag 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.
111
Tweets van de open dag/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.
112
Favorieten Wanneer men in de Navigation bar op het icoon (de ster) favorieten tapped komt men op het favorieten scherm uit. Hier staan de open dagen die in de open dagen lijst zijn toegevoegd met behulp van de ster aan de rechter kant. De onderste open dag is al geweest en laat de naam van de instelling en de opleiding van de open dag zien. Daarnaast is het mogelijk om de tweets van de service desk te bekijken. Wanneer men op de naam van de instelling en open dag tapped opent de open dag. Boven staat de open dag die bezig is. De data, tijd en naam van de instelling en opleiding worden getoond. Het bus icoon brengt de gebruiker naar het scherm om naar de open dag te navigeren of een reisadvies te krijgen. De t brengt de gebruiker naar de twitter feeds en het kruis zorgt ervoor dat de open dag uit de favorieten wordt gehaald.
113
Vervoerskeuze pop-up Wanneer men op het bus icoon in de favorieten tapped of tapped op het adres van de instelling in het algemene informatie scherm, opent er een pop-up scherm. Hier kan men kiezen uit Navigatie en Openbaar vervoer. Navigatie opent de API van Google maps en is er de mogelijkheid om een route met de auto, fiets, lopend of alleen nog in de grote steden met het openbaar vervoer te krijgen. De Openbaar vervoer knop brengt je naar de openbaar vervoer API en daar kan je een reis met het openbaar vervoer plannen.
114
Navigatie Wanneer men in de pop-up op de knop Navigatie tapped komt men op het Navigatie scherm uit wat een API van Google maps is. Hier kan men de route naar de open dag bekijken. Men kan kiezen voor een route met de auto, openbaar vervoer (alleen in de grote steden) of lopend.
115
Openbaar vervoer reisplanner Wanneer men in de pop-up op de knop Openbaar vervoer tapped komt men op de reisplanner voor het openbaar vervoer uit. Hier kan men een reis plannen met de bus, tram, metro, trein en veerboot. De reisplanner is een API waardoor men niet uit de applicatie gaat maar de reis binnen de open dagen applicatie kan plannen.
116
Niet betaalde instelling Wanneer een instelling niet betaald om in de applicatie te komen zijn er minder opties in de tab bar. Waar bij een betaalde instelling de opties algemeen, presentatie, programma, plattegrond en tweets beschikbaar zijn, zijn er bij een niet betaalde instelling alleen de algemene en tweets opties beschikbaar.
117
Niet ingelogd geen account Wanneer men kiest voor Beperkt gebruik zonder login kan er wel gebruik gemaakt worden van de open dagen content. De opties voor de gebruiker zijn uitgeschakeld. Waar men met een account gebruik kan maken van het profiel, favorieten en de optie om het scherm te delen via social media en de mail. Zonder account is alleen de open dagen lijst in de Navigation bar beschikbaar. De andere opties zijn uitgeschakeld tot de gebruiker een account aanmaakt.
118
Prototype test resultaten Het uitgewerkte prototype in kleur is hier te vinden: http://www.royapp.site90.net/tapv0.46/vis/index.html Style guide
119
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
120
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/
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
20. ^http://blog.compete.com/2010/03/12/smartphone-owners-a-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/ Kayla Knight op Smashing Magazine 23. ^http://www.alistapart.com/articles/responsive-web-design/ - Ethan Marcotte op alistapart
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
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
121
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
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 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
122
