Student: Koen Laan Studentennummer: 500602163 Bedrijf: Mirabeau
Begeleider: Yvonne de Meij van Streefkerk
Opleiding: Communication & Multimedia Design
Instituut: Hogeschool van Amsterdam
Datum: 21 augustus 2013
1 -
Inhoudsopgave
1 - Inhoudsopgave ... 2 2 - Voorwoord ... 4 3 - Managementsamenvatting ... 5 4 - Inleiding ... 8 5 - Probleemstelling ... 9 5.1 - Skillskompas ... 9 5.2 - Aanleiding ... 9 5.3 - Oorzaak ... 9 5.4 - Doelgroep ... 11 5.5 - Gewenste eindsituatie ... 11 5.6 - Doelstellingen ... 12 5.7 - Scope ... 12 6 - Onderzoek ... 13 6.1 - Hoofdvraag ... 136.2 - Deelvraag 1: Kern van Skillskompas ... 14
6.3 - Deelvraag 2: User experience voor Skillskompas op mobile devices ... 21
6.4 - Deelvraag 3: Ontwerpen van webapplicaties voor mobile devices ... 30
6.5 - Deelvraag 4: Meerwaarde Skillskompas op mobile devices ... 33
6.6 - Deelvraag 5. Kennismaking Skillskompas B.V met Skillskompas Mobile .. 37
7 - Eindproduct ... 46 7.1 - Kern ... 46 7.1.1 - Functionaliteiten ... 47 7.2 - User experience ... 49 7.2.1 - Interface ... 49 8 - Conclusies ... 53
8.1 - Kern inzichtelijk krijgen ... 53
8.2 - Goede user experience bieden ... 53
8.3 - Meerwaarde aan het gebruik van Skillskompas Mobile ... 54
8.4 - Inzichtelijk maken ... 54
8.5 - Kanttekeningen ... 54
9 - Aanbevelingen ... 56
10 - Bibliografie ... 58
11 - BIJLAGEN ... 59
11.1 - Interview- plan en vragen ... 60
11.3 - Resultaat brainstormsessie ... 62
11.4 - Samenvatting gebruikersinterviews ... 62
11.5 - Interviews ... 64
11.6 - Persona ... 74
11.7 - Testplan met experts ... 75
11.8 - Testplan met gebruikers ... 76
11.9 - Costumer Journey Map ... 78
11.10 - Priority guide ... 79
2 -
Voorwoord
Dit document is het eindrapport van het afstudeerproject van Koen Laan, student Communication & Multimedia Design aan de Hogeschool van Amsterdam. Het project is voortgekomen uit een succesvolle stageperiode bij Mirabeau en de prettige samenwerking met Skillskompas B.V. tijdens deze periode.
Het is een leerzaam project geweest waarbij ik mij meer heb kunnen verdiepen in de interactie op mobile devices. Mede dankzij Patricia Zwiers, Carolien Koesen, Anouk van Maanen(Allen Mirabeau), Maarten Sprengers en Nico van de Berg (Skillskompas B.V.) is dit project tot een succesvol einde gebracht.
3 - Managementsamenvatting
Skillskompas is een webapplicatie waarmee bedrijven binnen verschillende branches de ontwikkeling van de medewerker en het eigen bedrijf kunnen stimuleren. Dit wordt gedaan door het laten doen van beoordelingen en de medewerkers de mogelijkheid te geven om te bekijken hoe zij zich kunnen blijven doorontwikkelen door passende opleidingen te tonen.
De Skillskompas webapplicatie is voornamelijk ontwikkeld voor desktopgebruik, iets wat duidelijk wordt wanneer je kijkt naar de user experience die op mobile devices wordt geboden. De gebruiker krijgt op deze devices namelijk precies dezelfde
webapplicatie voorgeschoteld als op desktop alleen dan uitgezoomd wat ervoor zorgt dat de gebruiker vooral aan het in en uitzoomen is om simpele taken te voltooien. Uit verkennende gesprekken met Skillskompas B.V. en andere betrokkenen binnen het Skillskompas project is gebleken dat er op mobile devices nog een inhaalslag te halen is door de user experience hierop te verbeteren en te luisteren naar de behoeften en wensen van de gebruiker.
Aan de hand van het vooronderzoek en de gestelde criteria vanuit de opleiding aan het afstudeerproject is de volgende hoofdvraag geformuleerd:
“Hoe kan ik de kern van de Skillskompas webapplicatie optimaliseren waardoor er een goede user experience op mobile devices ontstaat zodat deze
een meerwaarde levert aan het gebruik van Skillskompas en hoe kan ik Skillskompas BV hiermee kennis laten maken?”
Naast de hoofdvraag zijn er ook een aantal deelvragen opgesteld om het beantwoorden van de hoofdvraag behapbaar te maken. Deze deelvragen worden binnen dit document behandeld.
Om duidelijk te krijgen waar de huidige webapplicatie tekort schiet op mobile devices zijn er een aantal onderzoeken uitgevoerd. Als eerst is er samen met Skillskompas B.V. gekeken naar de huidige webapplicatie en is samen met hen bepaald wat zij zien als de kern van de webapplicatie op mobile devices. Naast de gesprekken met Skillskompas B.V. zijn er ook een viertal interviews afgenomen met gebruikers om erachter te komen wat zij van de huidige user experience vinden en wat zij zien als de kern van de webapplicatie.
Door literatuur- en bronnenonderzoek uit te voeren is het mogelijk geworden om een groot aantal van de deelvragen te beantwoorden. Dit onderzoek in combinatie met de gesprekken met de verschillende betrokken partijen heeft mij een helder beeld gegeven van de probleemstelling en de mogelijke oplossingen die ingezet kunnen worden om de gebruiker van Skillskompas een goede user experience te bieden op mobile devices.
Uit het onderzoek is naar voren gekomen dat de gebruiker van Skillskompas vooral van de webapplicatie gebruik maakt rondom de functioneringsgesprekken. Rond deze tijd dient hij beoordelingen af te ronden en verdiept hij zich meer in de prestaties en ontwikkelmogelijkheden ter voorbereiding op deze gesprekken met zijn
leidinggevende. De webapplicatie op mobile devices dient dit doel te ondersteunen en daarnaast ook nog een toegevoegde waarde te zijn ten opzichte van de desktopapplicatie.
Waar de gebruiker op desktop de behoefte heeft om informatie naar de webapplicatie te brengen en te halen is dit bij de webapplicatie op mobile devices niet het geval. Hier heeft de gebruiker voornamelijk de behoefte om informatie op te halen. Dit heeft als gevolg dat de kern van de applicatie op mobile devices geoptimaliseerd moet worden voor het ophalen van informatie. Een goed voorbeeld is het doen van een beoordeling, de gebruiker geeft aan dat dit een functionaliteit is die de nodige tijd en concentratie vergt waardoor hij de voorkeur geeft om dit achter zijn bureau op een desktop device te doen.
Om een goed beeld te krijgen bij de behoeften van de verschillende functionaliteiten binnen de kern van Skillskompas is er een priority guide opgesteld waar met behulp van een tekstuele hiërarchie beschreven staat welke content binnen de verschillende functionaliteiten het belangrijkst is voor de gebruiker. Nadat zowel de kern van de webapplicatie als de hiërarchie binnen de content duidelijk zijn geworden, zijn er op basis hiervan de eerste schermen ontworpen.
Deze schermen zijn vervolgens met een informatie analist binnen Mirabeau doorgenomen en met deze input is er een begin gemaakt aan een eerste prototype. Dit prototype is vervolgens getest met een viertal gebruikers van Skillskompas met als voornaamste doel het verifiëren van de genomen ontwerpbeslissingen welke op basis van het onderzoek zijn genomen.
De gebruikerstesten zijn aan de hand van een aantal scenario’s uitgevoerd waarin zowel het echte gebruik van de webapplicatie is nagebootst alsmede het aan de tand voelen van enkele twijfelpunten binnen het prototype. Uit deze gebruikerstesten zijn een aantal verbeterpunten naar voren gekomen die voornamelijk betrekking hebben op de interactie binnen het prototype. De feedback uit deze testen zijn op een rij gezet om zo deze punten te kunnen identificeren en te groeperen om vervolgens een verbeterslag door te voeren binnen het prototype.
Na deze verbeterslag is er besloten om nog een iteratie door te voeren waarbij het verbeterde prototype nogmaals aan een groep experts werd voorgelegd. Deze keer is er doormiddel van A/B testing gekeken of de verbeterslag inderdaad een verbetering voor de usability is. De verbeteringen zijn vervolgens door het gehele prototype doorgevoerd om zo tot een eindproduct te komen waarmee ik Skillskompas kennis kan laten maken met hun product op mobile devices.
Het prototype is uiteindelijk goed ontvangen en vanuit Skillskompas BV is er enthousiast gereageerd. Ondanks het feit dat ik aan heb gegeven dat het op dit moment duur zou zijn om te realiseren als je dit afzet tegenover het huidige gebruik van Skillskompas, gaf het Skillskompas BV genoeg nieuwe inzichten om het prototype mee te nemen in aankomende besprekingen met betrokken partijen. Daarnaast zijn er door Skillskompas B.V. nog een aantal verbeteringen aangegeven welke in hun ogen kunnen bijdragen aan een nog beter product.
De beweringen, resultaten en bronnen worden in dit document verder behandeld. Voor meer informatie over de verschillende onderwerpen kunt u via de inhoudsopgave eenvoudig de juiste onderwerpen opzoeken.
4 -
Inleiding
In dit document worden de resultaten van de door mij uitgevoerde onderzoeken behandeld en wordt er inzicht gegeven in de keuzes die gemaakt zijn met betrekking tot het eindproduct.
Skillskompas is een webapplicatie waarmee bedrijven binnen verschillende branches de ontwikkeling van de medewerker en het eigen bedrijf kunnen stimuleren. Dit wordt gedaan door het laten doen van beoordelingen en de medewerkers de mogelijkheid te geven om te bekijken hoe zij zich kunnen blijven doorontwikkelen door passende opleidingen te tonen.
Skillskompas wordt binnen steeds meer organisaties doorgevoerd en hierdoor stijgt ook het gebruik van de webapplicatie. Uit de Google Analytics van Skillskompas blijkt dat naast het gebruik van de applicatie op desktop devices er ook een stijgende lijn is in het gebruik op mobile devices. Dit project is gestart om onderzoek te doen naar de wensen en behoeften van de gebruikers van Skillskompas op mobile devices. De resultaten uit de gesprekken met Skillskompas B.V. en de gebruikers van de webapplicatie worden als fundament voor het ontwikkelen van een eerste interactief prototype gebruikt. De resultaten van deze gesprekken zijn terug te vinden in de bijlagen, tevens wordt er in het beantwoorden van de deelvragen(zie onderzoek)veelvuldig verwezen naar deze resultaten omdat zij een essentieel onderdeel hierin zijn geweest.
5 -
Probleemstelling
In dit hoofdstuk wordt in verschillende paragrafen aangegeven waarom er een noodzaak is om de kern van Skillskompas te optimaliseren op mobile devices.
5.1 - Skillskompas
Skillskompas BV beheert de webapplicatie Skillskompas. Skillskompas is een applicatie waarmee bedrijven de ontwikkeling van de medewerkers en het eigen bedrijf kunnen stimuleren. De applicatie toont wat er van de werknemers verwacht wordt en hoe zij zich kunnen blijven ontwikkelen. Daarnaast biedt Skillskompas een eenvoudige stap naar een gesprek over de prestaties van de werknemer met de werkgever door een inzicht op beoordelingen en doorgroeimogelijkheden te geven.
Het bekijken van een functie en opleidingen in de huidige desktop versie van Skillskompas.
5.2 - Aanleiding
Hoewel de Skillskompas applicatie voornamelijk op desktop wordt gebruikt, is er langzaam een stijgende lijn in het gebruik op mobile devices (smartphones en tablets). Doordat er tijdens de realisatie echter weinig rekening is gehouden met mobile devices laat de user experience hierop te wensen over. Om deze gebruikers toch een goede ervaring te bieden dient hier onderzoek naar gedaan te worden.
5.3 - Oorzaak
Uit de gegevens van Google Analytics blijkt dat de bezoeker via desktop gemiddeld 30 minuten actief is op de website tegen gemiddeld 3 minuten op mobile devices. Waar de gebruiker op desktop gebruik maakt van de hele applicatie valt bij het gebruik op mobile devices op dat gebruikers vaak niet verder komen dan de inlog
pagina of de landingspagina na het inloggen. Gebruikers van mobile devices krijgen dezelfde website te zien als degene op desktop, enkel is deze geschaald zodat de webapplicatie op kleinere schermen past. De huidige vorm van Skillskompas op mobile devices voegt hierdoor niets toe ten opzichte van desktop omdat er niet is gekeken naar wat de behoeften van de gebruiker zijn op mobile devices bij gebruik van de webapplicatie. Door hier wel aandacht aan te besteden kan Skillskompas op mobile devices daadwerkelijk iets toevoegen aan de algehele user experience en een goede samenwerking bieden tussen Skillskompas op mobile devices en desktop.
Het bekijken van de huidige Skillskompas applicatie op een mobile device en het niet functioneren van lightboxes
Om deze gebruikers toch de juiste ervaring te bieden binnen de webapplicatie op mobile devices is het voor Skillskompas BV van belang om in kaart te brengen wat de kern van de applicatie inhoudt op deze devices. De kern van de huidige webapplicatie bestaat uit de functionaliteiten welke gezamenlijk de gebruiker helpen bij het ontwikkelen van zichzelf binnen een bedrijven. Voorbeelden hiervan zijn:
Het ontdekken van opleidingen waarmee de gebruiker zich kan ontwikkelen binnen de huidige functie
Het verkennen van functies waar de gebruiker in de toekomst naartoe kan groeien.
Het bekijken van nieuwe ontwikkelingen die van invloed zijn op de huidige functie van de gebruiker
5.4 - Doelgroep
De Skillskompas applicatie biedt voor zowel werknemers van bedrijven als privé-gebruikers de mogelijkheid om gebruik te maken van de applicatie. Het merendeel van de gebruikers is actief in de bedrijfsvariant, dit zijn de werknemers van bedrijven, waardoor dit project zich beperkt tot de bedrijfsvariant.
Vanaf dit punt wordt er met de gebruiker, de medewerker van een bedrijf die actief is binnen de bedrijfsvariant van Skillskompas bedoeld.
De gebruiker van de bedrijfsvariant is werknemer binnen een bedrijf en heeft binnen de applicatie een functie aangewezen gekregen door zijn werkgever. De gebruiker doet beoordelingen over zichzelf of andere werknemers wanneer zijn leidinggevende hem hierom vraagt. Ook is het mogelijk voor de gebruiker om te kijken hoe hij binnen het bedrijf kan doorgroeien vanuit zijn huidige functie en welke opleidingen hierbij komen kijken om het gewenste niveau te halen.
Naast het hebben van een functie binnen het bedrijf heeft de gebruiker ook de mogelijkheid om gebruik te maken van het persoonlijk profiel. Dit persoonlijk profiel geeft de gebruiker de mogelijkheid om meer invloed uit te oefenen op zijn persoonlijke ontwikkeling. Binnen het persoonlijk profiel wordt er naar de persoonlijke eigenschappen gekeken en wordt niet alles gebaseerd op de functie die de gebruiker binnen het bedrijf bekleedt. Een belangrijk onderdeel wat hem hierbij helpt is het bijhouden van een Persoonlijk Ontwikkel Plan (POP) welke ondersteunend kan zijn in gespreken met de leidinggevende.
De gebruiker heeft dus in principe twee mogelijkheden om naar zijn ontwikkeling te kijken, vanuit zijn huidige functie of vanuit zijn persoonlijke profiel.
5.5 - Gewenste eindsituatie
Bij de start van dit project is er een gewenste eindsituatie geschetst welke door middel van gedegen onderzoek gerealiseerd moet worden
In deze gewenste situatie is het voor Skillskompas B.V. inzichtelijk geworden hoe de webapplicatie op mobile devices eruit komt te zien en hoe deze een toegevoegde waarde levert aan de bestaande desktop webapplicatie.
5.6 - Doelstellingen
Aan de volgende doelstellingen moet voldaan zijn na afloop van het project:
Creëren van een prototype op basis van de behoeften en wensen van de gebruiker
Een goede mobiele user experience bieden aan de gebruiker waardoor Skillskompas Mobile een toegevoegde waarde is aan de algehele user experience van Skillskompas.
Skillskompas B.V. een kennismaking bieden met de webapplicatie op mobile devices
5.7 - Scope
Het resultaat van het project is een prototype van Skillskompas Mobile en de bijbehorende onderzoeksdocumentatie. Het prototype geeft inzicht in de kern van de applicatie op een smartphone. Door op de kern van de webapplicatie te focussen staan de belangrijkste functionaliteiten en content centraal en kan hierbinnen een duidelijke en goede user experience geboden worden. Het inzetten van een prototype heeft als voordeel dat het geen technische beperkingen met zich meebrengt en kan Skillskompas op een snelle en eenvoudige manier een beeld schetsen van Skillskompas Mobile. Daarnaast kan het prototype effectief ingezet worden bij gebruikerstesten gedurende het onderzoek en eenvoudig worden aangepast.
Door de webapplicatie te optimaliseren voor mobile devices kan Skillskompas BV deze gebruikers een goede ervaring bieden binnen Skillskompas en kan de versie op mobile devices de desktop variant ondersteunen om zo een algeheel betere user experience te bieden.
Primair hebben de eindproducten de doelstelling om Skillskompas BV een kennismaking te bieden met de kern van de applicatie op mobile devices. Deze kennismaking houdt in dat het voor Skillskompas inzichtelijk wordt hoe de webapplicatie op mobile devices eruit kan komen te zien. Hiermee wil ik zorgen dat Skillskompas Mobile begint te leven binnen Skillskompas BV. De eindproducten kunnen ook worden gebruikt om nog eens kritisch naar de huidige desktop applicatie te kijken.
6 -
Onderzoek
6.1 - Hoofdvraag
De hoofdvraag staat centraal binnen het onderzoek en is geformuleerd aan de hand van de gestelde criteria vanuit de opleiding aan het afstudeerproject en luidt als volgt:
“Hoe kan ik de kern van de Skillskompas webapplicatie optimaliseren waardoor er een goede user experience op mobile devices ontstaat zodat deze
een meerwaarde levert aan het gebruik van Skillskompas en hoe kan ik Skillskompas BV hiermee kennis laten maken?”
Door middel van het opstellen van een vijftal deelvragen is er een antwoord gekomen op de zojuist beschreven hoofdvraag. Hieronder worden de deelvragen uiteengezet, per deelvraag wordt er aangegeven welke onderzoeksmethoden er toegepast zijn om de vraag te beantwoorden en worden de resultaten hiervan samengevat.
6.2 - Deelvraag 1: Kern van Skillskompas
Doel van deelvraag:Om Skillskompas op mobile devices aan te bieden is het belangrijk om erachter te komen wat de kern van de huidige Skillskompas applicatie is voor zowel de gebruiker als Skillskompas B.V. zelf. Hieruit wordt duidelijk wat de kern van Skillskompas op desktop is. Belangrijker is om erachter te komen wat van deze kern ook van belang is op mobile devices. Omdat er aan het begin van dit onderzoek nog geen geoptimaliseerde versie van Skillskompas beschikbaar was voor mobile devices wordt er tijdens dit onderzoek ook gekeken naar wat de wensen en behoeften van de gebruiker bij gebruik van de webapplicatie op mobile devices. Skillskompas bestaat globaal uit drie onderdelen, namelijk:
Mijn Functie – onder dit onderdeel vallen alle functionaliteiten die betrekking hebben
tot de functie van de gebruiker zoals het raadplegen van de functie en beoordelingen doen.
Mijn Gegevens – hier kan de gebruiker al zijn gegevens terugvinden
Mijn Toekomst – hier vindt de gebruiker alle functionaliteiten waarmee hij zijn
ontwikkeling kan blijven volgen.
Gebruikte onderzoeksmethoden:
Interview met de gebruikers van Skillskompas om te achterhalen wat zij zien als de kern van de applicatie.
(Zie bijlage 11.1)
User Journey Map/scenario om inzichtelijk te krijgen wat mogelijk stappen kunnen zijn van de gebruiker bij het gebruik van Skillskompas Mobile. (Zie bijlage 11.9)
Brainstorm met Skillskompas om een overzicht van functionaliteiten te krijgen welke volgens Skillskompas zelf belangrijk zijn binnen de applicatie. (Zie bijlage 11.2)
Eigen bevindingen om de discussie met Skillskompas te starten over de belangrijkste onderdelen van de applicatie op mobile devices.
De kern van de applicatie wordt in de onderstaande paragrafen uiteengezet. Het gaat om de kern volgens Skillskompas B.V. en ook om de kern in de ogen van de gebruiker. Vervolgens wordt er gekeken naar het gebruik van Skillskompas op mobile devices. En wat de wensen en behoeften van de gebruikers zijn op deze devices.
Welke functionaliteiten zijn voor de gebruiker belangrijk
binnen de huidige applicatie?
Er zijn vier interviews afgenomen met gebruikers van Skillskompas om zo een duidelijk beeld te schetsen van wat zij zien als de kern van de applicatie. Dit beeld is gebaseerd op de antwoorden die gegeven zijn tijdens de interviews (Zie bijlage 11.4 voor
resultaten interview)
De interviews zijn afgenomen met gebruikers uit de metaalbewerking en zorg sector. Kern
De gebruikers zien Skillskompas voornamelijk als een applicatie die ingezet wordt rondom de functioneringsgesprekken. Deze gesprekken worden 1 a 2 keer per jaar gevoerd tussen de werknemer en zijn leidinggevende. Skillskompas wordt door de gebruiker als hulpmiddel gezien om zich goed voor te bereiden op deze gesprekken. De onderstaande functionaliteiten worden door de gebruiker hierbij ingezet.
1. Beoordelen
De “beoordelen” functionaliteit staat centraal voor de gebruiker van Skillskompas. Wanneer zij Skillskompas opstarten is dit steevast de functionaliteit waarvan gebruik gemaakt wordt. Omdat de applicatie voornamelijk rondom de functioneringsgesprekken wordt gebruikt worden beoordelingen teruggekeken en worden er beoordelingen gedaan over collega’s wanneer de leidinggevende hierom heeft gevraagd.
Het bekijken en het doen van een beoordelingen
Door middel van het terug kijken van gedane beoordelingen door andere collega’s krijgen zij een goed beeld bij het functioneren zodat ze goed voorbereid het functioneringsgesprek aan kunnen gaan. De gebruiker heeft op deze manier bijvoorbeeld de mogelijkheid om voorafgaand aan het gesprek na te denken over op welke punten hij verbetering voor zichzelf ziet.
2. Mijn functie & opleidingen
Naast het doen en bekijken van beoordelingen is het voor de gebruiker ook van belang om naar zijn functie te kijken. Er wordt hier gekeken, in combinatie met de beoordelingen, of de gebruiker op het gewenste niveau zit en of er een mogelijkheid is om dit niveau te behalen door middel van het volgen van een opleiding. Deze opleidingen zijn voor de gebruiker inzichtelijk en worden aangeduid met een relevantie, tijdsduur en soort opleiding. Daarnaast heeft de gebruiker de mogelijkheid om deze opleiding toe te voegen aan zijn POP om in het functioneringsgesprek mee te nemen.
Helaas hebben de ondervraagde gebruikers nog niet gewerkt met een aantal nieuwe functionaliteiten welke de gebruiker kunnen helpen voor en tijdens het functioneringsgesprek. Een van deze functionaliteiten is het opstellen van een eigen persoonlijk ontwikkel plan.
Welke functionaliteiten zijn voor Skillskompas BV belangrijk
binnen de huidige applicatie?
Om te achterhalen wat voor Skillskompas B.V. de belangrijkste functionaliteiten zijn is er een brainstormsessie gehouden.(zie bijlage 11.3 voor samenvatting). In onderstaande subparagrafen worden de belangrijkste functionaliteiten volgens Skillskompas B.V. beschreven. Daarnaast is er tijdens de sessie ook besproken hoe deze functionaliteiten zich zouden kunnen vertalen naar mobile devices.
Mijn functie
Deze functionaliteit staat centraal binnen de applicatie. Het is belangrijk dat de functie van de gebruiker altijd te raadplegen is op een goede en overzichtelijke manier.
Vertaling naar mobile device
Op een mobile device geldt eveneens dat Skillskompas deze functionaliteit graag terugziet.
Opleidingen bij functie
In combinatie met het overzicht van de functie is het ook van belang dat een gebruiker de mogelijkheid moet hebben om te ontdekken op welke manier hij zich nog kan ontwikkelen binnen zijn functie. Hiervoor moet hij opleidingen kunnen verkennen die voor hem relevant zijn om door te groeien binnen zijn functie.
Vertaling naar mobile device
Op een mobile device is het van belang dat de gebruiker opleidingen moet kunnen verzamelen om later terug te kijken en wellicht in zijn POP te verwerken. Daarnaast lijkt het Skillskompas B.V. ook handig om de gebruiker op de hoogte te houden wanneer er een nieuwe relevante opleiding voor de gebruiker beschikbaar is.
Innovaties bij functie
Vanuit de branche ontstaan er steeds weer nieuwe ontwikkelingen welke van invloed kunnen zijn op het niveau van een functie. Met deze functionaliteit kunnen gebruikers hun huidige functie vergelijken met de functie waarbij ontwikkelingen en innovaties zijn meegenomen. Zo kunnen de gebruikers concluderen of bepaalde innovaties of ontwikkelingen gevolgen hebben voor de huidige functie.
Vertaling naar mobile device
Wanneer een innovatie of ontwikkeling van invloed is op de gebruiker zouden zij hierop geattendeerd kunnen worden.
Mijn favorieten en POP
De gebruiker verzamelt door de applicatie heen interessante opleidingen en functies welke hij opslaat in zijn favorieten. Wanneer de gebruiker later terugkeert om zijn POP aan te vullen heeft hij de mogelijkheid om opleidingen en functies toe te voegen uit zijn favorieten aan zijn POP. Het POP geldt als belangrijk onderdeel binnen het
functioneringsgesprek en is een handvat om de ontwikkeling van de medewerker in kaart brengen in het gesprek tussen de medewerker en de leidinggevende.
Vertaling naar mobile device
De gebruiker dient op een mobile device zijn POP te kunnen raadplegen.
Beoordeling
Ook voor de beoordelingen geldt dat deze voor de gebruiker altijd geraadpleegd moeten kunnen worden. Het gaat hierbij om beoordelingen welke door andere medewerkers over de gebruiker zijn gedaan. Naast het raadplegen hiervan is het ook belangrijk om zowel zelfbeoordelingen als beoordelingen over anderen te doen.
Vertaling naar mobile device
Op een mobile device is het voornamelijk belangrijk dat de gebruiker inzicht heeft in de beoordelingen die over hemzelf zijn gedaan. Het doen van een beoordeling is minder van belang omdat Skillskompas graag heeft dat de gebruiker de tijd en concentratie heeft om een beoordeling zorgvuldig in te vullen. Het kan hier namelijk gaan om een uitgebreide beoordeling en Skillskompas is ervan overtuigd dat het invullen van zo een uitgebreide beoordeling niet met dezelfde zorgvuldigheid gedaan kan worden op mobile devices als op desktop.
Wat zijn de behoeften en wensen van de gebruiker bij het
gebruik van de webapplicatie op mobile devices?
Er zijn interviews (zie bijlage 11.2 voor interviewopzet) afgenomen met gebruikers van
Skillskompas om er zo achter te komen wat de behoeften en wensen van de gebruikers zijn wanneer zij Skillskompas op mobile devices gebruiken. Onderstaande bevindingen zijn gebaseerd op de resultaten van de afgenomen interviews (zie bijlage 11.3 voor resultaten interview)
Algemeen mobiel gebruik
De geïnterviewde gebruikers zijn allen in het bezit van een telefoon van de zaak, een enkele gebruiker heeft een smartphone maar over het algemeen zijn dit nog de oudere featurephones. Wel waren ze allen in het bezit van een privé smartphone tijdens het werken. Tijdens het werken wordt deze gebruikt om in pauzes apps te raadplegen als Facebook en Nu.nl en wordt de privé e-mail bekeken welke in de meeste gevallen automatisch gesynchroniseerd wordt. Deze gebruikers waren in het bezit van verschillende soorten smartphones. Twee van de geïnterviewde gebruikers zijn in het bezit van een iPhone en de andere twee hebben de beschikking tot een Android toestel. Hieruit worden geen harde conclusies getrokken, het is echter wel duidelijk dat Skillskompas Mobile voor verschillende platformen beschikbaar moet zijn.
Skillskompas op mobile devices
De gebruikers van Skillskompas zijn nogal terughoudend over het gebruik van Skillskompas op hun smartphone. Het leeft nog niet echt omdat de enkele keren dat zij Skillskompas gebruiken dit voornamelijk op hun desktop computer doen. Daarnaast is het doen van een beoordeling, de voornaamste taak, een vrij intensieve klus die bij voorkeur op een groot desktop scherm gedaan wordt.
De gebruikers waren het er anoniem mee eens dat zij geen native Skillskompas zouden downloaden voor de spaarzame momenten dat zij er gebruik van zouden maken. Wel zouden zij graag relevante informatie rondom een functioneringsgesprek op een eenvoudige manier willen raadplegen via de smartphone. Bij voorkeur gaat het dan om het bezoeken van de webapplicatie zoals dit ook op desktop wordt gedaan. Echter willen zij enkel de meest relevante content snel en eenvoudig kunnen bereiken die hen ondersteunen voorafgaand aan het functioneringsgesprek.
Conclusie
Kern Skillskompas
De kern van de Skillskompas webapplicatie zit hem duidelijk in het ondersteunen van de gebruiker rondom de functioneringsgesprekken. Wanneer je kijkt naar de gebruikersinterviews en de brainstormsessie met Skillskompas zijn er een aantal functionaliteiten die beide partijen als de kern beschouwen.
Bovenstaande afbeelding geeft aan waar de belangen van Skillskompas BV en de gebruiker elkaar overlappen gebaseerd op de gebruikersinterviews en sessie met Skillskompas
Concreet gaat het hierbij om de volgende functionaliteiten Mijn functie
Opleidingen Doorgroeifuncties Ontwikkelingen
Daarnaast gaven zowel Skillskompas als de gebruiker aan dat het beoordelen centraal staat binnen het gebruik van de applicatie. Echter vinden beide partijen verschillende onderdelen van deze functionaliteit belangrijk. Er is daarom gekozen om in de lijn van de behoeften van de gebruiker enkel het bekijken en vergelijken van beoordelingen mee te nemen en niet het daadwerkelijk doen van een beoordeling. Overigens gaf Skillskompas ook al aan dat zij een voorkeur hadden om het invullen van een beoordelingen op een desktop device te laten doen.
Tijdens de functioneringsgesprekken kunnen de beoordelingen erbij gehaald worden, maar moet de nieuwe POP functionaliteit ook niet vergeten worden. Ondanks dat de gebruikers hier nog geen gebruik van hebben gemaakt is dit een functionaliteit die goed aansluit op de behoeften van de gebruiker. Met de POP functionaliteit heeft de gebruiker namelijk de mogelijkheid om interessante opleidingen en/of functies toe te voegen aan zijn persoonlijk ontwikkel plan. Door dit te verzamelen kan de gebruiker dit eenvoudig meenemen naar het functioneringsgesprek en hierover in gesprek gaan met de leidinggevende.
Skillskompas op mobile devices
Zowel in de gesprekken met de gebruikers als met Skillskompas B.V. werd aangegeven dat Skillskompas op mobile devices voornamelijk gebruikt zou worden wanneer deze draait om het ophalen van informatie en niet zozeer het invoeren van informatie zoals het doen van een beoordeling.
Daarnaast hebben de gebruikers aangeven Skillskompas niet zo snel zouden gebruiken wanneer deze als native app beschikbaar wordt op mobile devices. Hierbij is de drempel van het downloaden te groot. Als geoptimaliseerde website voor mobile devices en gericht op de behoeften van de gebruiker juichen ze het wel toe.
6.3 - Deelvraag 2: User experience voor Skillskompas op
mobile devices
Hoe kun je een goede user experience binnen Skillskompas op mobile devices bieden?
Doel van deelvraag:
De huidige Skillskompas webapplicatie is voor desktop ontworpen waarbij er met mobile devices weinig rekening is gehouden. Hierdoor is de user experience voor gebruikers op deze devices grotendeels onder de maat. Er is weinig rekening gehouden met elementen zoals touchscreen, beperkte schermgrootte en trage netwerkverbinding. Maar ook met de beleving van de gebruiker op mobile devices.
Het is daarom van belang om erachter te komen wat de huidige ervaring binnen de user experience van Skillskompas op desktop is en wat hierin verschilt wanneer de webapplicatie naar mobile devices wordt gebracht.
Gebruikte onderzoeksmethoden:
Desk research om informatie te zoeken over de verschillen tussen desktop en mobile user experiences voor webapplicaties in;
o artikelen, webinars en discussies van en tussen experts op het gebied van mobiele interactie.
Desk research om informatie te zoeken over eerdere gebruikte oplossingen om een goede user experience op mobile devices te creëren in;
o artikelen, webinars en discussies van en tussen experts op het gebied van mobiele interactie.
Interview met de gebruiker van Skillskompas om erachter te komen wat zij vinden van de huidige user experience van de webapplicatie.
(Zie bijlage 11.1)
Brainstorm met specialisten binnen Mirabeau om nieuwe ideeën op te doen en om mijn conclusies aan de tand te voelen.
Hoe is de huidige user experience van Skillskompas op mobile
devices?
Op dit moment is de Skillskompas webapplicatie te bezoeken via alle devices met een internetverbinding. Echter bestaat er maar een versie van de webapplicatie en die is gerealiseerd met de behoeften van de gebruiker op desktop devices in het achterhoofd. Uit gebruikersinterviews (zie bijlage 11.4) is echter gebleken dat deze behoeften op mobile devices anders zijn. Hieronder worden een aantal onderdelen van de huidige user experience van Skillskompas op mobile devices beschreven.1
Visuele weergave
De Skillskompas webapplicatie is erg functioneel ingesteld, met als doel de grote bak aan aangeboden informatie duidelijk en het liefst in een oogopslag aan de gebruiker te presenteren. Iedere branche heeft zijn eigen kleurenpallet, maar de verdere invulling komt in veel gevallen overeen.
Verschillende kleurpalleten bij de verschillende branches.
De website is in landscape mode op zowel smartphone als tablet redelijk overzichtelijk. Wat echter op desktop in een keer zichtbaar is moet op een smartphone door middel van scrollen bekeken worden. In portrait mode ben je als gebruiker echter voornamelijk aan het in en uitzoomen om te kunnen navigeren door de applicatie. Dit werkt niet zoals je zou verwachten en komt de user experience daarom ook niet ten goede.
1Klocek, Stefan “Fixing A Broken User Experience” Smashing Magazine - 22-05-2013
Daarnaast wordt er binnen Skillskompas veel gebruik gemaakt van lange scrollbare lijsten om de content te tonen. Ook hierbij ben je als gebruiker veel aan het in en uitzoomen om je door deze lijsten te werken, met daarnaast een groot risico dat je als gebruiker niet meer weet waar je je bevind binnen de overvloed aan data.
Visuele weergave van de huidige webapplicatie op verschillende devices
Consistentie van interactie
Omdat Skillskompas een applicatie is met veel functionaliteiten is het belangrijk dat de gebruiker zo snel mogelijk leert hoe de interactie van de verschillende functionaliteiten in elkaar steekt. Daarnaast is het belangrijk dat er bepaalde interactie patronen herhaald worden zodat er binnen de verschillende functionaliteiten herkenning ontstaat. Op deze manier maak je het voor de gebruiker gemakkelijker om met de applicatie om te leren gaan.
Een goed voorbeeld waar het binnen de webapplicatie nu nog fout gaat is bij het bekijken van veranderingen in de functie. Wanneer de gebruiker zijn huidige functie bekijkt opent deze in een lightbox. Vanuit zijn functie heeft de gebruiker vervolgens de mogelijkheid om veranderingen binnen zijn functie te bekijken. Als de gebruiker op deze optie klikt gaat hij naar een nieuw scherm zonder mogelijkheid om weer terug te keren naar zijn huidige functie. Echter, wanneer de gebruiker vanuit zijn huidige functie naar zijn opleidingsmogelijkheden kijkt verschijnt dit scherm netjes in een lightbox, en wanneer deze gesloten wordt keert hij weer terug naar zijn huidige functie.
Wanneer de gebruiker vanuit zijn huidige functie innovaties bij zijn functie wil bekijken opent er een nieuw scherm zonder mogelijkheid om terug te keren naar het vorige scherm
Wanneer de gebruiker vanuit zijn huidige functie de opleidingsmogelijkheden wil bekijken opent er lightbox met de mogelijkheid om deze te sluiten en weer terug te keren naar het vorige scherm
Wanneer de gebruiker een bewerking uitvoert wordt deze in een lightbox geopend. Als deze lightbox gesloten wordt keert de gebruiker terug op de plek van waaruit de lightbox geopend is. Zo blijft de gebruiker in de juiste flow zitten.
Wanneer de gebruiker echter veranderingen in zijn functie wil bekijken opent er geen pop-up maar wordt de gebruiker verwezen naar een nieuwe pagina. De gebruiker wordt uit zijn huidige flow getrokken en moet zelf uitzoeken hoe hij terugkeert naar het scherm waar hij vandaan komt. Naast het feit dat de flow van de gebruiker onderbroken wordt is het ook de vraag hoe efficiënt het gebruik van een lightbox op mobile devices en dan vooral een smartphone is.
Lightboxes zijn er om de user experience voor de gebruiker te verbeteren zodat wanneer zij bijvoorbeeld een afbeelding willen bekijken deze in een lightbox geopend
kan worden in plaats van in een nieuw tabblad of nieuw venster.2 Op mobile devices zijn er efficiëntere manieren om dit te voorkomen. Door bijvoorbeeld een inschuivende pagina die door een simpel druk op de knop weer wordt verborgen zodat de gebruiker weer op de vorige pagina terecht komt.
Optimalisatie van interactie
Zoals aangegeven communiceert de huidige applicatie niet de behoeften van de gebruiker op mobile devices(zie bijlage 11.4 resultaat gebruikersinterviews). Hierdoor ziet de gebruiker geen toegevoegde waarde van Skillskompas op mobile devices. Om de webapplicatie wel te optimaliseren dienen de functionaliteiten in kaart gebracht te worden waardoor er aan de behoeften van de gebruiker kan worden voldaan (zie
deelvraag 1 voor de kern van de applicatie). Vervolgens moet er gekeken worden hoe deze
functionaliteiten op dit moment functioneren en in hoeverre deze aangepast en geoptimaliseerd moeten worden om een goede user experience te bieden op mobile devices.
Wat zijn de verschillen tussen de desktop en mobile user
experience voor webapplicaties?
Onderstaand worden verschillende onderdelen besproken welke bijdragen aan het optimaliseren van de user experience van webapplicaties op mobile devices in het algemeen.
Input
Doordat het overgrote deel van de mobile devices tegenwoordig gebruik maakt van touchscreens zijn er wezenlijke verschillen ontstaan tussen de manier van input geven. Het is namelijk niet altijd duidelijk of er gebruik gemaakt wordt van analoge input in de vorm van een toetsenbord en muis of dat er gebruik wordt gemaakt van touchscreen. Om het nog lastiger te maken zijn er ook steeds meer “laptops” welke voorzien zijn van een touchscreen in combinatie met een analoog toetsenbord en/of muis. Hierdoor kun je simpelweg niet meer weg komen met het enkel optimaliseren voor analoge input.3
Schermgrootte
Schermen van mobile devices zijn een stuk kleiner dan de desktop schermen waar we jarenlang gewend zijn om mee te werken. In tegenstelling tot de grote desktop schermen waar complexe menu’s en toolbars gebruikt konden worden is deze ruimte er op mobile devices simpelweg niet. Hierdoor is het nog belangrijker geworden om keuzes te maken met betrekking tot de content en functionaliteiten. Door onderscheid tussen primaire en secundaire onderdelen te maken en deze ook zo weer te geven kun je zelfs op een klein scherm de gebruiker de gewenste ervaring bieden.
2Matt Cronin, “Modal Windows In Modern Web Design” [2009]
Smashing Magazine - 28-05-2013 http://www.smashingmagazine.com/2009/05/27/modal-windows-in-modern-web-design/
3Identitymine. “10 ways mobile UX is not like Desktop UX” Identitymine – 02-03-2013
Daarnaast zorgt de grote verscheidenheid van schermgroottes ervoor dat de verschillende devices zich beginnen te overlappen. Smartphones trekken richting tablets en tablets richting desktop schermen. Je kunt hierdoor niet meer uitgaan van een schermgrootte en deze koppelen aan een bepaald device. 45
Netwerkverbinding
De netwerkstabiliteit op mobile devices is niet altijd te garanderen. Omdat gebruikers zich praktisch overal kunnen bevinden en dus ook op plekken waar het bereik van een netwerk slecht tot niet aanwezig is. Ondanks dat gebruikers vaak te maken krijgen met langzaam ladende websites is het niet zo dat zij dit voor lief nemen. Zelfs met deze wetenschap brengt een langzaam ladende website een slechte ervaring met zich mee bij gebruikers. Daarom is het van belang om zo efficiënt mogelijk te werk te gaan en te optimaliseren voor een slechte netwerk verbinding. Daarnaast is het een bijkomend voordeel dat wanneer je van een slechte netwerkverbinding uitgaat, de website op betere en snellere verbindingen een nog betere ervaring biedt.6
Gebruikerscontext
De gedachte dat mobile devices vooral “on the go” gebruikt worden is ondertussen achterhaald. Uit onderzoek7 blijkt dat mobile devices minstens net zo veel thuis gebruikt worden als onderweg. Je kunt er daarom nooit zeker van zijn waar de gebruiker zich bevindt tijdens het gebruik van de website en daarom is het dus ook onmogelijk om je website af te stemmen op de context waar de gebruiker zich in bevindt. Er dient gekeken te worden met welk doel de gebruiker gebruik maakt van jouw website.8
Welke bestaande oplossingen om een goede user experience te
bieden binnen Skillskompas op mobile devices kunnen mogelijk
gebruikt worden?
Onderstaand worden verschillende oplossingen besproken welke kunnen bijdragen aan het optimaliseren van de user experience van Skillskompas op mobile devices.
Input
Om de verschillende manieren van input af te vangen is het verstandig om te optimaliseren voor touch input.5 Hierdoor is de webapplicatie minder gevoelig voor veranderingen en verschuivingen binnen de input op verschillende devices. Wanneer er namelijk voor touch input wordt geoptimaliseerd is het voor zowel gebruikers met
4Cerejo, Lyndon. “The Elements Of The Mobile User Experience” [2012] Smashing Magazine –
02-03-2013 http://mobile.smashingmagazine.com/2012/07/12/elements-mobile-user-experience/
5Wroblewski, Luke. “Organizing Mobile Web Experiences” [2012] User Interface Engineering –
28-03-2013
6Identitymine. “10 ways mobile UX is not like Desktop UX” Identitymine – 02-03-2013
http://www.identitymine.com/Data/Services/IM_Campaign_Mobile_Whitepaper_01A.pdf
7Wolski, Marek. “There Is No Mobile Internet!” [2012]
Smashing Magazine – 02-03-2013 http://www.smashingmagazine.com/2013/02/25/there-is-no-mobile-internet/
8Wroblewski, Luke. “Organizing Mobile Web Experiences” [2012]
User Interface Engineering – 28-03-2013
touch input als voor gebruikers met analoge input mogelijk om gebruik te maken van het product.
Wanneer het product enkel is geoptimaliseerd voor analoge input zorgt dit ervoor dat gebruikers met touch devices moeite kunnen hebben met de interface. Buttons kunnen niet goed aanklikbaar zijn en een functionaliteit zoals de “hover” waarbij de gebruiker met zijn cursor over een element beweegt en deze hierop reageert is, nog, niet beschikbaar op touch devices.
Schermgrootte
De beperkte schermgrootte op mobile devices zorgt ervoor dat er tijdens dit project efficiënt met de beschikbare ruimte om moet worden gegaan. Om de gebruiker een goede ervaring te bieden moet er gekeken worden naar de beschikbare content en functionaliteiten. Door de belangrijkste onderdelen van Skillskompas in kaart te brengen en dit te prioriteren wordt duidelijk wat er nodig is om centraal te tonen aan de gebruiker en wat er meer op de achtergrond kan verdwijnen op mobile devices. 9
10
Het voordeel van de restricties van kleine schermen is dat wanneer de user experience op deze schermen goed is, deze simpelweg doorgetrokken kan worden naar andere devices met grotere schermen. Op de grotere schermen met meer ruimte kan dan gekeken worden of de indeling van de pagina aangepast moet worden of dat er bepaalde content en functionaliteiten meer op de voorgrond kunnen treden. Maar de basis staat er dan al.
Netwerkverbinding
Skillskompas maakt gebruik van veel data waardoor de gebruiker af en toe even moet wachten voordat de data geladen is. Omdat tijdens dit project niet wordt gewerkt aan de technische optimalisatie van het ophalen van data wordt dit niet meegenomen in de ontwikkeling van het prototype. Wel wordt er rekening gehouden met content gerelateerde beslissingen die van invloed kunnen zijn op de performance. Denk hierbij aan het vermijden van zware en overbodig gebruik van afbeeldingen. 11
Gebruikerscontext
Voor dit project geldt dat er gekeken gaat worden naar het doel waarmee de gebruiker gebruik maakt van Skillskompas op mobile devices9. Het is namelijk niet mogelijk om te bepalen waar de gebruiker de webapplicatie expliciet gebruikt. Uit de gebruikersinterviews is naar voren gekomen dat de gebruiker relevante content zoekt rondom zijn functioneringsgesprek. Dit kan echter overal zijn, thuis op de bank voorafgaand aan zijn functioneringsgesprek, buiten tijdens het roken of in de kantine tijdens de pauze. Het gaat hem dus voornamelijk om het ophalen van relevante informatie om zich zo voor te bereiden op de functioneringsgesprekken.
9Cerejo, Lyndon. “The Elements Of The Mobile User Experience” [2012] Smashing Magazine –
02-03-2013 http://mobile.smashingmagazine.com/2012/07/12/elements-mobile-user-experience/
10Wroblewski, Luke. “Organizing Mobile Web Experiences” [2012] User Interface Engineering –
28-03-2013
11Identitymine. “10 ways mobile UX is not like Desktop UX” Identitymine – 02-03-2013
Uit gesprekken met Skillskompas is duidelijk geworden dat op desktop de gebruiker de tijd en concentratie heeft om belangrijke onderdelen in te vullen welke veel aandacht vragen. Hierbij moet je denken aan het invullen van lange formulieren zoals het doen van een beoordeling. Deze concentratie kan op mobile devices niet gegarandeerd worden en is in combinatie met een klein scherm niet ideaal om ingewikkelde en grote hoeveelheden input te vragen van de gebruiker zoals dit wel op desktop gedaan wordt.
6.4 - Deelvraag 3: Ontwerpen van webapplicaties voor mobile
devices
Waar moet rekening mee gehouden worden bij het ontwerpen van
webapplicaties voor mobile devices?
Doel van deelvraag:
Voordat Skillskompas Mobile ontworpen kan worden moeten er nog een aantal beslissingen genomen worden. Zo is het van belang om te weten hoe Skillskompas Mobile over verschillende devices geoptimaliseerd kan worden en wanneer dit bekend is moet er gekeken worden naar de juiste ontwerpmethode die hierbij aansluit.
Gebruikte onderzoeksmethoden:
Desk research om informatie zoeken over de verschillende
ontwerpmethoden welke toegepast kunnen worden binnen dit project. Informatie aan specialisten binnen Mirabeau vragen naar de
Hoe kan Skillskompas over verschillende devices
geoptimaliseerd worden?
Lange tijd werden websites enkel geoptimaliseerd voor grote desktop schermen, maar sinds de komst van mobile devices is dit een achterhaalde werkmethode. Door de opkomst van deze kleinere schermen werd al snel duidelijk dat de voor desktop geoptimaliseerde websites geen goede user experience konden bieden aan de gebruiker van mobile devices. Hierdoor was het nodig om andere methoden te vinden om deze gebruikers wel een goede ervaring te bieden op mobile devices. Tijdens het raadplegen van bronnen ben ik verschillende manieren tegen gekomen om de gebruiker een betere ervaring op mobile devices aan te bieden. In grote lijnen waren er drie verschillende manieren om een webapplicatie op mobile devices aan te bieden
Mobiele website
Naast de huidige webapplicatie voor desktop is er ook de mogelijkheid om een aparte mobiele website te maken. Deze website bevat enkel de meest essentiële content en functionaliteiten die de gebruiker nodig heeft. In het specifieke geval van Skillskompas is dit een goede oplossing, omdat de gebruiker op mobile devices andere behoeften heeft dan dat hij op de desktop variant van Skillskompas heeft. Een mobiele website is geoptimaliseerd voor smartphone, maar niet voor schermen tussen smartphone en desktop in. Een oplossing zou zijn om naast een mobiele website ook een tablet website te maken om de meeste devices zo af te vangen. Echter zijn er tegenwoordig veel verschillende devices welke allemaal verschillende schermgroottes hebben. Hierdoor heb je geen zekerheid dat wanneer je een aparte mobiele website maakt dit ook betekent dat deze op daadwerkelijk alle mobile devices naar behoren functioneert. 12
Native applicatie
Om er voor te zorgen dat je vol gebruik kunt maken van de functionaliteiten van een mobile device zou er een native applicatie gemaakt kunnen worden. Daarnaast bieden native applicaties over het algemeen een betere user experience wat betreft vloeiende transities en voelt het net allemaal even wat gestroomlijnder aan. Het nadeel is echter dat er voor alle besturingssystemen een aparte applicatie gemaakt zou moeten worden. Ook wordt Skillskompas binnen verschillende branches gebruikt wat zou betekenen dat er naast de verschillende besturingssystemen ook voor iedere branche een eigen app gemaakt moet worden. Daarnaast is er nog de drempel om een applicatie te downloaden voordat er gebruik gemaakt kan worden van Skillskompas en dit is voor de huidige gebruikers van Skillskompas op dit moment nog een te grote drempel (zie bijlage 11.4 gebruikersinterviews).
12 Middleton, Brian. “Responsive Design vs Mobile Site” [2012] Planet Argon 22-05-2013
Responsive Design
De laatste methode die aan bod is gekomen is het responsive maken van de website. Hierbij past de website zich aan aan het device waarop het bekeken wordt. Hierdoor kun je op alle huidige devices een goede ervaring bieden en al rekening houden met toekomstige devices. Dit is vooral goed toepasbaar wanneer je één website op verschillende schermgroottes wilt aanbieden. Echter is het in het geval van de Skillskompas webapplicatie minder praktisch. Het gaat hierbij namelijk niet om een website maar om een applicatie die andere behoeften en wensen van de gebruiker moet vervullen op mobile devices ten opzichte van desktop. Hierdoor krijg je eerder een aparte mobiele website dan dezelfde website geoptimaliseerd over verschillende devices zoals bij responsive design het geval is.13
Conclusie
Er is voor gekozen om de Skillskompas applicatie te vertalen naar mobile devices door een aparte mobiele website. Hiervoor is gekozen omdat er uit gesprekken met Skillskompas, eigen ervaringen en interviews met gebruikers naar voren is gekomen dat er op mobile devices andere behoeften zijn dan op desktop. Dit zou betekenen dat de prioriteiten op mobile devices anders liggen dan op desktop waardoor je een hele andere beleving biedt aan de gebruiker. Bij de desktop versie van Skillskompas halen gebruikers informatie op en voeren ze informatie in. Op mobile devices ligt de focus voornamelijk bij het ophalen van informatie.
Welke ontwerpmethode kan toegepast worden tijdens dit
project?
Om een complexe webapplicatie als Skillskompas te vertalen naar mobile devices is het van belang dat er een bijpassende ontwerpmethode wordt gehanteerd. De gebruiker van Skillskompas komt Skillskompas Mobile binnen en weet al wat zijn doel is namelijk het vergaren van informatie ter voorbereiding op een functioneringsgesprek. Het is daarom belangrijk om erachter te komen welke content er gecommuniceerd moet worden naar de gebruiker. Vervolgens kan dit in combinatie met de interface elkaar goed aanvullen. De aanpak die hierop goed bij aansluit is de Content First methode.14 Deze methode houdt in dat de content centraal staat binnen de ontwerpfase en deze leidend is in het maken van ontwerpbeslissingen.
De beschikbare content van de kern van de Skillskompas webapplicatie wordt in een priority guide(zie bijlage 11.10 priority guide) in tekstuele vorm gerangschikt13. Deze priority guide staat aan de basis van de verdere realisatie en is gebaseerd op de afgenomen gebruikersinterviews en gesprekken met Skillskompas. Door een tekstuele priority guide op te stellen wordt duidelijk welke content tot de kern van de webapplicatie behoort en beschrijft het de essentie waarom de gebruiker de webapplicatie op mobile devices bezoekt.
13Clemens, Drew. “Design Process In The Responsive Age” [2012]
Smashing Magazine – 25-03-2013 http://uxdesign.smashingmagazine.com/2012/05/30/design-process-responsive-age/
14Hassing, Anne-Roos. “Van mobile naar content first” [2012] Jungle Minds – 19-05-2013
6.5 - Deelvraag 4: Meerwaarde Skillskompas op mobile
devices
Hoe zorg ik ervoor dat Skillskompas op mobile devices een
meerwaarde levert ten opzichte van de desktop variant?
Doel van deelvraag:
Omdat de behoeften en wensen van de Skillskompas gebruiker op mobile devices anders is dan op desktop dient er gekeken te worden hoe deze behoeften vertaald kunnen worden. Hierdoor biedt Skillskompas Mobile een meerwaarde aan de huidige desktop webapplicatie en de algehele user experience van Skillskompas.
Gebruikte onderzoeksmethoden:
Interview met de gebruiker van Skillskompas om te achterhalen wat zij zien als de kern van de applicatie (zie bijlage 11.4 gebruikersinterviews)
Desk research om de beperkingen van een webapplicatie op mobile devices te achterhalen ten opzichte van een webapplicatie op desktop.
Gesprekken met een mobile interaction designer binnen Mirabeau om mijn bevindingen te bespreken
Wat kan de Skillskompas webapplicatie op mobile devices
toevoegen ten opzichte van desktop?
Doordat gebruikers bijna niet meer zonder smartphone de deur uitgaan15 en bijna overal gebruik maken van hun smartphone(zie afbeelding 1.0) is dit het medium bij uitstek om de gebruiker op de hoogte te houden en te informeren wanneer dit nodig is.
Afbeelding 1.0
Doordat de gebruikers en Skillskompas B.V. dit ook beamen wordt hier de focus op gelegd. Hieronder volgen toevoegingen die Skillskompas op mobile devices kan bieden in tegenstelling tot desktop.
Doelgerichte informatie
Omdat de gebruiker van Skillskompas Mobile vooral geïnteresseerd is in het raadplegen van de applicatie rondom functioneringsgesprekken is de webapplicatie op mobile devices hiervoor geoptimaliseerd. De gebruiker heeft op mobile devices onmiddellijk toegang tot belangrijke informatie zoals de beoordelingen die worden besproken, zijn persoonlijk ontwikkelingsplan en zijn huidige functie.
Reminder
Wanneer de gebruiker een nieuwe beoordeling moet doen, of een nog openstaande beoordeling heeft die de deadline nadert kan hij op zijn smartphone een reminder krijgen. Doordat de gebruiker deze grote delen van de dag bij zich draagt is hij altijd op de hoogte van de laatste veranderingen binnen Skillskompas. Naast de beoordelingen zijn er ook zaken als het verlopen van certificaten interessant om tijdig aan de gebruiker door te geven. Wanneer de gebruiker inlogt om zich bijvoorbeeld voor te bereiden op zijn functioneringsgesprek ziet hij deze reminder, of hij krijgt hier
15Google “Our mobile planet: Nederland” [mei 2012] Google – 19-05-2013
een reminder via de e-mail van. Deze mail reminder is het meest effectief wanneer de gebruiker zijn mail automatisch synchroniseert of regelmatig raadpleegt. Een voorbeeld van deze meerwaarde is zichtbaar in de user journey (zie bijlage 11.9
costumer journey map)
Wat zijn de beperkingen van de Skillskompas webapplicatie op
mobile devices in vergelijking met desktop?
Naast de toegevoegde waarde van Skillskompas op mobile devices, brengt deze versie ook beperkingen met zich mee. Deze beperkingen zijn niet per definitie slecht te noemen, immers zorgen de beperkingen ervoor dat de kern welke gewenst is op mobile devices overeind blijft staan en laat het minder relevante functionaliteiten achterwege. Hieronder staan beperkingen die door middel van sessies, desk research en ervaringen van anderen aan het licht zijn gekomen.
Focus
Ondanks dat je niet kunt bepalen wanneer en in welke context de gebruiker gebruik maakt van Skillskompas Mobile, weet je wel dat ze zich op een mobile device bevinden. Op deze devices heeft de gebruiker minder focus dan dat zij hebben wanneer ze achter een desktop device zitten(zie bijlage 11.4 gebruikersinterviews). Dit zorgt ervoor dat tijdrovende en aandacht vragende processen bij voorkeur op desktop devices gedaan worden. Dit gegeven wordt ondersteund door Skillskompas B.V. Zij zien handelingen als het doen van beoordelingen en normeren van vaardigheden, welke redelijk veel tijd en aandacht kosten, liever gedaan worden op desktop(zie bijlage 11.3 sessie met skillskompas).
Schermgrootte
Naast het feit dat er minder focus op mobile devices is heeft ook de beperkte schermgrootte zijn beperkingen. Uitgebreide beoordelingen en diepgaande boomstructuren om vaardigheden te normeren bieden lastige interactie op kleinere schermen. Hieronder staan voorbeelden van beoordelen en het normeren van voorkeuren zoals deze in de huidige applicatie worden weergegeven
Beoordelen – het gaat hierbij om lange lijsten met soms wel meer dan 100 verschillende taken welke beoordeeld moeten worden.
Voorkeuren normeren – Achter deze sliders hangen onClick functionaliteiten die weer extra informatie tonen.
Dit zijn voorbeelden van schermen welke lastig te vertalen zijn naar mobile devices omdat zij een grote set aan data bevatten en veel focus vragen.
6.6 - Deelvraag 5. Kennismaking Skillskompas B.V met
Skillskompas Mobile
Hoe kan ik Skillskompas BV kennis laten maken met Skillskompas op
mobile devices?
Doel van deelvraag:
Om Skillskompas B.V. kennis te laten maken met de webapplicatie op mobile devices wordt er een prototype opgeleverd. Dit prototype dient Skillskompas inzicht te geven hoe de kern(zie deelvraag 1: Kern van Skillskompas) van de webapplicatie er op mobile devices uit kan komen te zien.
Gebruikte onderzoeksmethoden:
Gebruikerstesten uitvoeren met behulp van de laatste versie van het prototype (Zie bijlage 11.8opzet gebruikerstesten)
Testen met experts voordat het prototype met de gebruiker wordt getest, hierdoor wil ik eventuele fouten binnen het prototype blootleggen en aanpassen(Zie bijlage 11.7 opzet testen met experts)
Welk soort prototype is geschikt om de kern van een
webapplicatie op mobile devices inzichtelijk te maken?
Om erachter te komen welk soort prototype nodig is om Skillskompas kennis te laten maken met de applicatie op mobile devices worden er een aantal belangrijke beslissingen genomen die dit bepalen.
Afbakening
Het is de bedoeling dat Skillskompas een inzicht krijgt in de kern van de webapplicatie. Daarom wordt er in het prototype vooral gefocust op de belangrijkste functionaliteiten(zie deelvraag 1: Kern van Skillskompas), te weten:
Beoordelen Mijn functie
Opleidingen bij functie Ontwikkelingen bij functie
Het prototype draait erom om deze functionaliteiten inzichtelijk te maken dus wordt er verwacht dat deze goed uitgedacht en uitgewerkt zijn.
Mate van detail
De mate van detail waarin het prototype dient te verkeren is belangrijk om te bepalen welk soort prototype er ontwikkeld dient te worden. Hieronder wordt in verschillende onderdelen de mate van detail behandeld om zo een beeld te geven van de afwegingen die zijn genomen.1617
Functioneel
Het belangrijkste onderdeel binnen het prototype is het duidelijk maken van de werking van verschillende functionaliteiten. Om hier een goed beeld van te geven is het belangrijk dat het prototype interactief is. Het moet reageren op de input van de gebruiker. Daarnaast geeft een interactief prototype ook een toegevoegde waarde wanneer het ingezet wordt bij de gebruikerstesten.
Visueel
De look & feel van het prototype zijn van minder belang. Het is natuurlijk wel de bedoeling dat de verhoudingen kloppend zijn, echter wordt er niet gestreefd naar een pixel-perfect ontwerp. Ondanks dat de visuele invulling van een prototype het meeste opvalt, draait het binnen dit prototype voornamelijk om de functionaliteit en zal er minder aandacht aan het visuele aspect besteed worden.
Content
Omdat er al een desktop versie van Skillskompas bestaat zijn er ook teksten en afbeeldingen beschikbaar welke gebruikt kunnen worden in het prototype. Er wordt
16Cerejo, Lyndon “Design better and faster with rapid prototyping” [2010] Smashing Magazine 20-05-2013 http://www.smashingmagazine.com/2010/06/16/design-better-faster-with-rapid-prototyping/ 17Hanington, Bruce. Martin, Bella. “Universal Methods of Design”. Beverly: Rockport, 2012. Print.
dus niet gekozen voor dummy teksten zoals “lorum ipsum”, maar voor echte content zoals deze ook al beschikbaar is binnen de huidige Skillskompas webapplicatie. Echter is het wel van belang dat deze content geoptimaliseerd is voor mobiel. Denk hierbij aan lange functienamen die ingekort worden en aangepaste spidergraphs voor betere weergave op mobiel. Spidergraphs zijn grafieken waar de gebruiker in een oogopslag het niveau van zijn functie kan bekijken.
Software
Om een interactief prototype te maken wordt er gebruik gemaakt van een softwarepakket om dit te realiseren. Omdat ik tijdens mijn stageperiode voornamelijk met Axure heb gewerkt is ervoor gekozen om ook dit prototype binnen Axure te ontwerpen. Simpelweg omdat ik hier het meest ervaring mee heb en weet wat de mogelijkheden zijn. Zo kun je eenvoudig je prototype uploaden op Axshare, een hosting waar je 10 prototypes kunt hosten en zo eenvoudig binnen een mobiele browser kunt bekijken. Daarnaast kun je erg gedetailleerde interacties met content uitvoeren door het gebruik van “dynamic panels” om content te verbergen, tonen, bewegen en te verplaatsen. Dit wordt allemaal met HTML en CSS(3) gedaan. Dus alles wat ik binnen Axure maak zou ook gerealiseerd kunnen worden in een mobiele website.
Ook zijn er speciale output opties voor mobiele prototypes waarbij wel gezegd moet worden dat deze voornamelijk voor iPhone zijn geoptimaliseerd. Ook draait het prototype binnen Android op Chrome.
Hoe test ik of mijn prototype voldoet aan de wensen en eisen
van Skillskompas en de gebruiker?
De gebruikerstesten worden uitgevoerd aan de hand van een opgesteld plan (zie
bijlage 11.8). Deze tests worden uitgevoerd nadat het prototype is getest met experts binnen Mirabeau. Aan de hand van de uitkomst van de tests worden de laatste wijzigingen doorgevoerd om het definitieve eindproduct voor Skillskompas B.V. inzichtelijk te maken.
Sessies met experts binnen Mirabeau
Nadat de eerste schermen samen met een informatie analist en interaction designer binnen Mirabeau zijn geanalyseerd zijn er nog een aantal wijzigingen doorgevoerd welke voornamelijk betrekking hebben op het overzichtelijk houden van de verschillende pagina’s welke veel data en content bevatten. Doordat de testgebruikers al ervaring hebben met het gebruik van Skillskompas is er ook besloten dat er gerust wat elementen in de webapplicatie mogen zitten die voor een eerste keer gebruiker in eerste instantie niet geheel duidelijk zijn maar voor de Skillskompas gebruiker wel. Er is echter wel rekening gehouden met het feit dat de Skillskompas gebruiker niet dagelijks gebruik maakt van de webapplicatie.
De belangrijkste bevindingen en beslissingen die uit deze sessie naar voren kwamen zijn hieronder opgesteld. De rest van de uitkomsten en wijzigingen aan de hand van deze sessies zijn terug te vinden in het overzicht van de iteraties (zie bijlage 11.10)
Affordance actiemenu
Er bestonden nog twijfels over de affordance van het actiemenu. Er is voor gekozen om deze te versterken door het element wat zwaarder te maken doormiddel van een dikke zwarte pijl en donkere achtergrond
Reminder
Het tonen van een reminder op de homepage kon nog verder uitgewerkt worden door middel van het verbinden van een actie aan de reminder. Wanneer er bijvoorbeeld een nieuwe opleiding voor de gebruiker beschikbaar is kan hij op de reminder drukken en zo direct naar de desbetreffende opleiding gaan.
Gebruikerstesten
De gebruikerstesten zijn uiteindelijk de belangrijkste graadmeter om te bepalen of het door mij ontworpen prototype ook aan de wensen van de gebruiker voldoet. Ondanks dat de keuzes tijdens het ontwerpproces zijn gebaseerd op de interviews met de gebruikers en gesprekken met Skillskompas, kan de uitwerking hiervan wellicht niet helemaal zijn zoals de gebruiker dit wenst.
Daarom zijn er met vier gebruikers van Skillskompas testen uitgevoerd om te kijken of het prototype voldoet aan de wensen en behoeften van deze gebruikers. Voorafgaand aan de testen zijn er verschillende scenario´s opgesteld die de gebruikers tijdens de testen moeten proberen te volbrengen(zie bijlage 11.8). Tijdens deze testen zijn notulen gemaakt en is er een videoregistratie gemaakt. De bevindingen van de testen zijn terug te vinden in het overzicht van de iteraties(zie bijlage 11.11). Hieronder volgt een overzicht van de belangrijkste bevindingen tijdens de gebruikerstesten.
Legenda en schaalverdeling
Bij de weergave van de balken bij taken en kennis en vaardigheden ontbrak er een legenda en schaalverdeling. Ik had verwacht dat de gebruiker deze content ook zonder de legenda en schaalverdeling zou begrijpen maar dit was niet het geval. Deze is nu toegevoegd aan de desbetreffende schermen.
Meer knop bij opleidingen
Bij het bekijken van de bijdrage van een opleiding aan een functie moet de gebruiker op de “meer” knop naast relevantie drukken. Drie van de vier gebruikers gingen hier de fout in of waren hier te lang naar opzoek waardoor ervoor gekozen is om dit op een andere manier aan te bieden.
Interactie bij het tonen van meer informatie
Door de gehele webapplicatie heen was het voor de gebruiker niet altijd even duidelijk hoe hij op bepaalde pagina’s terecht kon komen. Dit kwam doordat er soms verschillende manieren van interactie door de applicatie gebruikt worden. Er is daarom voor gekozen om voor twee soorten interactie te kiezen binnen de webapplicatie. De meeste pagina’s worden simpelweg ingeladen en de gebruiker heeft vervolgens de mogelijkheid om via de vorige knop terug te gaan. Wanneer de gebruiker meer informatie over het onderdeel kan ophalen kan hij op het i-icoontje drukken en schuift er een paneel in beeld met meer informatie. Deze kan de gebruiker vervolgens met en druk op de pijl weer verbergen.
