1
Inhoudsopgave Inleiding ....................................................................................................................................... 4 Voorwoord................................................................................................................................... 5 Debriefing .................................................................................................................................... 6 Het Concept ................................................................................................................................. 7 Doelgroep: ................................................................................................................................... 8 Inleiding van begrippen: Engagement en participatie .................................................................... 9 Pressure Cooker Week................................................................................................................ 10 Opbouw naar het concept .......................................................................................................... 11 Structuur website van Traintool ........................................................................................................ 11 Test huidige website...................................................................................................................... 11 Aanpassingen................................................................................................................................. 11 Nieuwe structuur ............................................................................................................................... 12 Aanpassingen................................................................................................................................. 13 Knelpunten verhelpen ................................................................................................................... 14 Schermen 1 .................................................................................................................................... 14 Test nieuwe concept: .................................................................................................................... 16 Schermen 2 .................................................................................................................................... 16 Test nieuwe concept: .................................................................................................................... 18 Visuele eindresultaat ..................................................................................................................... 18 De groepspagina ............................................................................................................................... 19 De uitwerkingen ............................................................................................................................ 19 Groep week 1 ................................................................................................................................ 22 Eeuwige balk.................................................................................................................................. 22 Tekstveld ....................................................................................................................................... 23 Verdere uitleg ................................................................................................................................ 23 Groep week 3 ................................................................................................................................ 23 Het progressieschild ................................................................................................................... 25 Badges ............................................................................................................................................... 28 De ontwikkeling ............................................................................................................................. 28 Badgespagina .................................................................................................................................... 33 Badgespagina week 1........................................................................................................................ 34 Badgespagina week 3........................................................................................................................ 35 Leaderboardpagina ........................................................................................................................... 36 Cursus ................................................................................................................................................ 38 Eindresultaat .............................................................................................................................. 39 Getting Started .................................................................................................................................. 39 2
Groepspagina .................................................................................................................................... 42 Progressie Schild ................................................................................................................................ 43 Badges ............................................................................................................................................... 44 Badgespagina .................................................................................................................................... 45 Leaderboard ...................................................................................................................................... 47 Cursus ................................................................................................................................................ 49 Test............................................................................................................................................ 51 Interviewpersoon: ......................................................................................................................... 51 Testresultaten – mogelijke veranderingen ........................................................................................ 51 Nawoord .................................................................................................................................... 52 Bijlage ........................................................................................................................................ 53 Sitemaps ............................................................................................................................................ 53 Website structuur: ............................................................................................................................. 53 Huid Getting Started.......................................................................................................................... 53 Structuur van nieuwe concept ........................................................................................................... 53 Landingspagina ................................................................................................................................. 54 Huidige structuur landingspagina training .................................................................................... 54 Voorstel nieuwe structuur landingspagina training ...................................................................... 54 Uitwerking badges............................................................................................................................. 55 Groep Badges .................................................................................................................................... 55 Individuele badges ............................................................................................................................. 56 Hidden badges ................................................................................................................................... 57 Test .................................................................................................................................................... 58 Getting Started – Schermen .............................................................................................................. 58 Homepagina ...................................................................................................................................... 60 Home: Het is een aantal weken verder ............................................................................................. 61 Cursus ................................................................................................................................................ 61 Badgespagina .................................................................................................................................... 62 Badgespagina: aantal weken later.................................................................................................... 63 Bronnen ..................................................................................................................................... 65
3
Inleiding Wij zijn Peergroup, bestaande uit Sylvana van ‘t Erve, Esther de Goede, Evaline van de Helder en Douwe Zijlstra. Deze periode van Nieuw Dingen Doen hebben wij een project voor Traintool gedaan. De opdracht luidt: de e-learning van Traintool voor winkelmedewerkers aantrekkelijker maken. Door onze toepassing zal de e-learning leuker en uitdagender worden om te doen. De mensen verrijken zichzelf met de training in plaats dat zij dit alleen voor de baas doen. In dit verslag kunt u het onderzoek, de onderbouwing van het concept lezen en de verdere uitwerking van het concept met behulp van de ontwerpen.
4
Voorwoord Deze periode zijn we bezig met het verbeteren van de online cursus van Traintool. Met z’n vieren vormen wij Peergroup. Onze vakgebieden zijn zeer gevarieerd binnen onze opleiding. We bestaan uit een visual designer, twee user experience designers en een content designer. Aangezien deze opdracht is gericht op het verzinnen van een vernieuwend en origineel concept, kunnen we goed uit de voeten met de kennis die het team in petto heeft.
Douwe Zijlstra is de content designer en project manager. Als content designer een overkoepelende rol en mengt zich met alle vlakken van het project. Heeft hij altijd een scherpe gerichte mening en is niet bang om te vertellen wat hij denkt. Waar Esther zich vooral richt op het management van de planning, richt Douwe zich voornamelijk op de inhoud van het project. Hij zorgt er voor dat het duidelijk is wie wat doet en dat wat er gemaakt wordt niet teveel afwijkt van wat de bedoeling is.
Sylvana van ´t Erve is de visual designer en houdt zich voornamelijk bezig met het ontwerpen en uitwerken van de visuals. In het design proces zijn alle details belangrijk en zorgt ze er voor dat er niks vergeten wordt. Haar kritische vragen zorgen voor een controle dat het concept nog steeds duidelijk is. Als het op ontwerpen aan komt houdt ze niet van teveel gedoe en wil eigenlijk zo snel mogelijk aan de slag zodra het helder is wat de bedoeling is.
Evaline van den Helder is een user experience designer. Ze richt zich voornamelijk op het uitdenken van ideeën en onderzoeken of deze ook de juiste waren en we niks hebben gemist. Het helder maken en in schema brengen van uitwerkingen is waar ze zich voornamelijk mee bezig houdt. Hiervoor heeft ze ook de specialisatie content design afgerond waardoor ze qua specialisatiegerichte kennis een extra steentje kan bijleggen.
Esther de Goede is user experience designer. Tijdens dit project heeft zij het groepsproces bijgehouden alle basis ideeën en schetsen uitgewerkt tot testbare prototypes om deze vervolgens te testen. Ze organiseerde alle gegevens en daarbij de agenda. Tijdens het ontwikkelproces bleef zij vragen stellen om erachter te komen of beslissingen met een goede reden genomen werden. Dit zorgde ervoor dat de ideeën beter werden onderbouwd.
5
Debriefing Al een goed aantal weken zijn wij aan de slag met de opdracht die we hebben gekregen van Traintool. Deze website houdt zich bezig met het maken en aanbieden van online cursussen. Hun huidige cursus voldoet aan de verwachtingen, maar ze vonden de cursus nog wat ‘saai’ en ‘droog’. Aan ons de taak om hier een blik op te werpen en de cursus een stuk leuker, interactiever en spannender te maken. Met behulp van persuasive design en gamification willen ze de website interactiever maken en er voor zorgen dat de bezoeker het leuk vindt om weer terug te komen voor de cursus.
6
Het Concept We willen de cursus van Traintool als geheel verbeteren doormiddel van twee slagzinnen waar we al onze uitwerkingen op hebben gebaseerd. Het kernwoord: zelfverrijking, en onze slagzin: samenwerken aan jezelf, staan hier centraal. Zelfverrijking: Zelfverrijking is de kreet waar alle randzaken aan moeten voldoen. Het uiteindelijke doel is om zelf kennis te vergaren door deel te nemen aan de cursus. Zelfverrijking is een persoonlijke ontwikkeling. Het moet (als cursist) om jou, jezelf en jouw vaardigheden draaien. Elk aspect van ontwikkeling tijdens de cursus moet op de cursist zijn gericht en zijn uitgewerkt. Samenwerken aan jezelf: Ons motto: ‘Samenwerken aan jezelf’ slaat op ons concept waarbij we met behulp van je teamgenoten meer uit je cursus willen halen. Op school leer je het meeste van je groepsgenoten en het proces om samen de eindstreep te behalen. Doordat je samenwerkt aan een project leer je van je teamgenoten waar je goed in bent en waar je nog aan kan werken. Dit zijn vaak punten waar je zelf nog geen besef van hebt omdat je er eerder niet mee geconfronteerd bent. Andersom werkt het natuurlijk ook. Doordat jij anderen helpt wordt jij ook geholpen, zodoende werkt de groep samen om de eindstreep te behalen. Wat wij gedurende het hele proces hebben gedaan is kijken in hoeverre de ideeën gekoppeld kunnen worden aan het woord zelfverrijking en samenwerken aan jezelf. Uiteindelijk is het doel van de cursus om de eindstreep te halen.
7
Doelgroep: Traintool wil een brede doelgroep bereiken om de e-learning op elk niveau haalbaar maar ook interessant te maken. De doelgroep is globaal gericht op winkelmedewerkers tussen 16 en 67 jaar. Uit vacatures en cv’s op internet voor winkelmedewerker blijkt uit het volgende rijtje waar winkelmedewerkers bij sollicitaties aan dienen te voldoen. Wat houdt het beroep van een winkelmedewerker in? Abstracte functie, omgeving is essentieel voor de invulling van het vak Dienstverlenend beroep Administratieve functies als voorraden bijhouden Verantwoordelijkheid onderhoud in winkel Eerste aanspreekpunt klanten Voorbeeld kwaliteitseisen winkelmedewerker: Zelfstandigheid, enthousiast, klantgericht/klantvriendelijk, teamwerk/collegiaal, gedrevenheid, stressbestendig, vriendelijk, sociaal, georganiseerd, ontwikkelen. Minimaal LBO/MBO werk- en denkniveau.
8
Inleiding van begrippen: Engagement en participatie Waarom zjin engagement en participatie van personeel en werknemers belangrijk? Het is belangrijk is bij het behalen van de organisatiedoelstellingen. Het kan bijdragen aan het trekken van bezoekers, het verhogen van conversie en bezoekers binden. 1 Waarom is engagement belangrijk? ‘’Content is gold’’ (Scott Stratten) Het gaat om engagement, en niet om aanwezigheid. We moeten niet blind tools gebruiken, simpelweg omdat ze er zijn. ‘’You would be out of business the next day if you would not answer 95% of your Phone calls’’ (Scott Stratten, marketingspecialist) Hoe kan persuasive design bijdragen aan engagement? Engagement krijgt vorm door niet teveel te focussen op de tools, maar op goede content die een emotie losmaakt. (Scot Stratten).2 Persuasive design is onder andere het toevoegen van deze psychologische aspecten en engagement strategy. 3 Waarom is participatie belangrijk? De aanname is dat bedrijven gamification toepassen om zo de gebruikersparticipatie te verhogen. Hoe kan gamification bijdragen aan participatie? Spelelementen kunnen gezien worden als een uitdaging of goed voor de ontwikkeling van een vaardigheid tijdens het participeren. En het feit dat een bezoeker participeert (met de aanwezigheid van) voor een beloning.4
1
http://www.frankwatching.com/archive/2011/09/20/de-inzet-van-gamification-voor-webwinkels/
2
http://www.frankwatching.com/archive/2012/03/26/b2b-marketing-hoe-realiseer-je-onlineengagement/ 3
http://uxmag.com/articles/persuasion-in-design
4
http://www.frankwatching.com/archive/2011/09/20/de-inzet-van-gamification-voor-webwinkels/
9
Pressure Cooker Week In the Pressure Cooker Week gingen we een hele week aan de slag om een volledig concept te bedenken. Dit deden we door verschillende brainstormtechnieken te gebruiken en schetsen van de ideeën te maken. Het was een intensieve week waarbij we tot het concept zijn gekomen. De belangrijke richtingen vanuit de briefing waren persuasive design, gamification en een nieuw gevoel aan de cursus geven. We hebben een analyse gemaakt van de website om knelpunten te vinden. Op deze knelpunten zijn we dieper in gegaan om verbeteringen aan te kunnen brengen en zodat we effectieve en gebruikersvriendelijke elementen kunnen toepassen om de positieve ervaring van de elearning te verhogen. Tijdens deze Pressure Cooker week hebben we een kern gevonden wat de uitwerking van het concept beschrijft. Deze kern bestaat uit: ‘samenwerken aan jezelf’ en ‘zelfverrijking’.
10
Opbouw naar het concept In dit onderdeel leggen we uit hoe we tot de verschillende onderdelen binnen het concept zijn gekomen.
Structuur website van Traintool Toen we zelf de training doorliepen, zijn ons een paar dingen opgevallen. De gebruiker heeft de keuze om vanaf de eerste keer de e-learning in te loggen, vanaf het inloggen na twee kliks, gelijk te beginnen aan de training (onderste blok is homepagina), zonder eerst langs de Getting Started te hoeven gaan zonder enige informatie te krijgen. De gebruiker heeft wel de keuze om het profiel aan te maken of de Getting Started te volgen, maar deze keuze is vrij. Sitemap huidige traintool tot en met de trainingspagina.
Test huidige website Testpersoon: Naam: Sandra van der Pol Leeftijd: 54 Het was in eerste instantie de vraag of de training op de werkvloer uitgevoerd moet worden of thuis. De e-learning werd op de iPad geopend, maar de gebruiker had niet gezien dat onder de pagina een uitleg stond die aangaf dat dit niet mogelijk was, in verband met de benodigde Adobe Flash Player. Vervolgens is een mondelinge introductie gewenst, om kennis te maken met de hele e-learning. Het werd dan ook gewaardeerd dat de managers een introductiefilm hadden geplaatst, want zo voelde het alsof de managers dichtbij de werknemers staan. Ze laten namelijk zien dat ze moeite doen om de e-learning aan te bieden. Wanneer zelf de webcam moet worden gebruikt voor een oefening is dit wat onwennig. Het wordt wel uitgevoerd en maakt dit aan de ene kant spannend, een andere kant de maakt het de gebruiker nieuwsgierig omdat het iets nieuws is. Er wordt afgevraagd of er een beloning is aan het einde van de training, of wat het certificaat precies inhoudt. Het wordt ook niet echt duidelijk wie controle heeft over de e-learning. Praxis of Traintool? Vragen horen daarbij als ‘wie het controleert als het ingeleverd wordt? Wat er gebeurt als je de training niet doet en wie bepaalt of je de e-learning hebt voltooid aan het einde? Verder werd het motiveren van de gebruiker belangrijk bevonden, zodat de training niet vooruitgeschoven wordt. Verder gaf Traintool gaf zelf aan dat de vragen die binnenkomen voornamelijk vragen zijn over de instellingen van de webcam. Aanpassingen Door bovenstaande test en een sitemap te maken van de huidige website (zie bijlage) kwamen we erachter dat er een duidelijke structuur mist voor de gebruiker. Aan de hand van het drie klik systeem hebben we een nieuwe structuur voor de website gemaakt. Het idee van een drie kliksysteem houdt in dat je binnen drie keer klikken bij het doel moet zijn. De training die wij bedacht hebben bestaat uit een aantal schermen. De home-, de badge-, de leaderboardpagina en de cursus pop-up. Z dat deze functies allemaal bereikbaar zijn binnen drie kliks. 11
Nieuwe structuur
De verdere structuur van de verschillende pagina’s is te zien in de bijlage: Sitemaps
12
Getting Started
Traintool heeft in de e-learning een Get Started. Dit houdt in dat de gebruiker kennismaakt met de cursus. De Get Started is in de huidige cursus niet verplicht om dit te doen daarnaast bleek vanuit de toelichting van Traintool dat er veel vragen waren over de camera- en geluidsinstellingen. Om deze vragen te voorkomen hebben wij een duidelijke structuur toegevoegd hoe een gebruiker de cursus moet beginnen. Aanpassingen We gaan ervan uit dat de e-learning op de werkvloer wordt uitgevoerd, omdat vandaag de dag er mensen zijn die geen computer of webcam thuis hebben. Om aan de training te beginnen willen we de knelpunten die uit de test zijn gekomen eruit halen. Zaken die kunnen stuiten op knelpunten zoals Adobe Flash Player en de instellingen van de webcam willen we verwerken in de Getting Started. Zodra de Getting Started is doorlopen kan zonder problemen aan de training begonnen worden. Dit verwerken we in een centraal icoon (button), het vraagteken. Om vragen en/of knelpunten te voorkomen om de dingen die wel in de Getting Started worden behandeld efficiënter te maken, willen we de gebruiker welkom heten door een bestaande managervideo. Zo kunnen ze kennismaken met de webcam, de werking van de training doornemen en een welkomstboodschap en profielfoto maken. Dit willen we in korte, vaste stappen visualiseren, die doorlopen moeten worden voor aanvang van de training. Later in de training kan teruggekeerd 13
worden naar de Getting Started om terug te kijken. De Getting Started is de eerst voltooide taak/week. Knelpunten verhelpen Informatie duidelijk in beeld zonder te hoeven scrollen Mondelinge introductie naar voren halen Zorgen dat informatie niet wordt overgeslagen Weghalen van overbodige informatie Een duidelijk pad aanbieden Mogelijke vragen indekken (vraagteken icoon) Aan de hand van deze informatie hebben we nagedacht over herstructurering van de ‘’Get Started’’. Door de gebruiker een pad aan te bieden door de Getting Started, is het als het ware een onderdeel dat wordt voltooid en beloond wordt. Net als bij de huidige cursussen, die later aan bod komen. Heb je hier allen de mogelijkheid om eraan te beginnen, er stap voor stap mee door te gaan en om af te sluiten. Op deze manier willen we de vragen beperken omtrent de webcam doordat de gebruiker geen keuze heeft om deze belangrijke informatie over te slaan. Schermen 1
14
15
Test nieuwe concept: Knelpunten: De badge rechts boven werd niet gezien als badge, maar als button. De mogelijkheid om opnieuw of meerdere foto’s te maken was niet duidelijk. Als de foto niet is gelukt is weet ze niet hoe deze verwijderd moet worden. Daarnaast was het niet duidelijk dat de profielfoto meteen wordt geüpload naar als thumbnail voor je profiel rechts bovenin. Er heerst een gevoel van overkill aan schermen door elke stap een nieuw scherm te geven. De need support tool moet consistent blijven op dezelfde plaats. De button voor ‘verder’ staat buiten het kader waar eigenlijk alle acties plaatsvinden. Bij de profielfoto wordt verwacht al in het beeldscherm jezelf te zien, aangezien de camerainstellingen ingesteld zijn op standaard. Na uitleg van de boodschap en de oefening, werd het handiger bevonden om deze apart van elkaar te houden. Zodat er een duidelijke scheiding is tussen de uitleg en de oefening om jezelf voor te stellen met de webcam. Aanpassingen Met deze informatie hebben we de structuur aangepast. De schermen worden een pop-up, zodat de gebruiker het idee heeft in hetzelfde scherm aan het werk te zijn, terwijl er in de pop-up dan meerdere kleine schermen doorlopen worden. De badge is verwijderd. Deze komt wel later terug naarmate de Getting Started is doorlopen. Alle functionaliteiten zitten nu binnen het scherm, aangezien het scherm is gecomprimeerd tot een pop-up, daarvoor hebben we de knop ‘verder’ verplaatst. De pop-up voorkomt dat de Getting Started wordt overgeslagen, met als doel om vragen over instellingen of over de training voor te zijn. De Getting Started moet doorlopen worden om aan de training te kunnen beginnen. Bij profielfoto hebben we duidelijke patterns geplaatst waarmee gekozen kan worden om een gemaakte foto te verwijderen of up te loaden. Voor de keuze uploaden is er een stukje tekst geplaatst om het simpel duidelijk te maken wat er met de foto gebeurt. Er is bij de helpfunctie tekst toegevoegd om mogelijke problemen met het maken van een foto te verhelpen. Bij profielfoto met camerainstellingen is de persoon in beeld omdat de camera goed is ingesteld. De boodschap en de oefening van de coach hebben we over twee pop-upschermen verdeeld. Bij het eerste scherm komt de uitleg van de training, en in het volgende scherm kom de oefening waar de gebruiker zichzelf voorstelt aan de groep. Schermen 2
16
17
Test nieuwe concept: Knelpunten: Het is nog onduidelijk wanneer vermeld wordt dat de gebruiker in een groep zin, in welke groep die zit en hoe dit in elkaar steekt. En nog onduidelijk is dat je een boodschap moet inspreken, alleen weet de gebruiker niet precies waarvoor. Aanpassingen Hier moet de content aangepast worden. Waar eerst de uitleg wordt gegeven, moet duidelijker aangegeven wat de groep is, waarom je in een groep zit en wat je in de opvolgende oefening gaat doen. Wanneer de gebruiker bij de oefening komt, moet duidelijk zijn dat hij aan de oefening begint, wat hem te wachten staat. De coach die in beeld staat moet een duidelijk voorbeeld geven hoe deze boodschap in te vullen. Dit wordt verder uitgewerkt in het hoofdstuk: Testen.
Visuele eindresultaat Dit is de visuele uitwerking van de Getting Started. Hierin hebben we ervoor gekozen om grijze tinten aan te houden voor een neutraal en breed inzetbaar geheel. De belangrijkste knoppen zijn blauw om ze meer te benadrukken. Verder is de stijl neutraal.
18
De groepspagina Op de homepagina staat een overzicht waar de groepsleden elkaar vragen kunnen stellen en feedback kunnen geven. De groep staat centraal op de homepagina omdat dit een belangrijk deel is van de cursus. Het draai allemaal om “Samenwerken aan jezelf”. Deze groep is er omdat de cursisten elkaar zo kunnen stimuleren zodat elke cursist de cursus goed afrond. De manier die wij gekozen hebben om met elkaar in contact te blijven is het format van Facebook. Dit zal de cursist herkennen aangezien dit een bekend platform is binnen social media. Verschillende voorbeelden als Facebook en Twitter hebben ditzelfde format. De nieuwste berichten en filmpjes komen in het midden van het scherm te staan. Later kwamen we erachter dat we, net als bij Facebook, de cursisten ook elkaar vragen willen kunnen laten stellen. Daarom hebben we nu daarboven een tekstveld waar de cursist zelf een bericht kan schrijven aan de groep. Daarnaast is dit een goede manier om up to date te blijven van de laatste vorderingen binnen de groep. In een latere fase van het project bedachten wij ook dat het een goed idee is om de coach hierin aanwezig te laten zijn. Indien er vragen zijn of men feedback wil. De uitwerkingen
Een schets van de homepagina waar met een cirkel aangegeven staat waar de groepsvragen, filmpjes kunnen komen te staan.
19
Dit is een wireframe van de homepagina. Hier zie je al een voorbeeld hoe de Coach zich kan laten zien aan de cursisten dat hij aanwezig is.
Dit is de eerste visual van het homescherm die vanuit de wireframe is gekomen. Over deze uitwerking waren we niet tevreden omdat de cursist te sterk aanwezig was en de groep daardoor wegviel.
20
Vervolgens zijn we verder gaan ontwikkelen met een ontwerp waarbij het eigen profiel minder prominent aanwezig is en linksboven wordt geplaatst. Verder is er een kleine menu structuur. De badges zijn te vinden onder jouw profiel. Dit werkte echter niet naar behoren door de overlap op andere informatie.
Weer een aantal stappen vooruit zit de structuur beter in elkaar. Echter storen de ‘vlakken’. Deze zouden eigenlijk niet nodig hoeven zijn. 21
Groep week 1
Dit scherm komt uit week 1. Dat betekend dat er een badge behaald is en de boodschap geplaatst is. Je ziet ook dat de andere weken van de cursus nog niet beschikbaar zijn. Verder zijn er nog geen vorderingen in het behalen van socialpoints in het progressieschild Eeuwige balk De menubalk is in elk scherm van de cursus terug te vinden “de eeuwige balk”. Zo is vanuit elk scherm de mogelijkheid een andere pagina te kiezen. De stijl van het menu moet diepte uitstralen en neutraal zijn. Rechts bij je naam kun je de instellingen vinden. Dit is overgenomen van de verschillende Social media. Met dit fenomeen is de doelgroep al bekend. De balk bevatte eerst de profielfoto door de komst van het Progressieschild kan daar de profielfoto beter geplaatst worden aangezien dit een overzicht is van jouw voortgang.
De verandering van het profiel op de eeuwige balk.
22
Tekstveld Bij het tekstveld om een vraag te stellen aan de groep, hebben wij een extra knop bedacht voor de coach. Hierop kan de gebruiker drukken als hij of zij feedback wil van de coach bij deze vraag.
Tekstveld met knop Verdere uitleg Verder kun je de ster voor de social points ook al zien. Mensen komen door een reactie te plaatsen erachter wat het icoontje doet. Het sterretje ‘vliegt’ dan naar het progressieschild bij je profielfoto. Verder kun je bij je profielfoto 4 badges laten zien. Verder is er een voortgangsbalk voor je sociale punten en voor de voortgang in de cursus. Daaronder kun je de cursus starten en zie je hoeveel weken de training zal gaan duren. Ook hebben we de support gelaten zoals hij is. Op de achtergrond zal altijd een foto te vinden zijn die past bij het bedrijf. De blauwe zweem die erover ligt kan ook aangepast worden. Deze is nu zo gekozen om het neutraal en fris te houden. Alles is in dezelfde tinten om rust te houden in het platform. De namen zijn rood gemaakt, deze kleur is gehaald uit het logo van het bedrijf en kan dus ook aangepast worden. Ook hier zijn de knoppen blauw. Groep week 3
23
Dit is dezelfde homepagina te zien alleen in week 3. In de menubalk kun je zien dat er activiteit is bij je badges. Je hebt er een behaald die niet getoond wordt gehaald. Het is gebaseerd om ‘Facebook’ en ‘iPhone notificaties’. Verder kun je zien dat de progressiebalken gevuld zijn. Blauw voor het sociale gedeelte, wat over een komt met de ster kleur en de groene kleur voor de progressie in de cursus. Groen is gekozen omdat dat positiviteit uitstraalt en blauw is daarbij een rustige, niet schreeuwerige kleur. Dit omdat door de badges het geheel al hel kleurrijk kan worden. Deze mogen schreeuwerig zijn, de balken minder. Verder zijn de weken die voltooid zijn ook groen gekleurd. Deze zijn voltooid en dus helemaal groen.
24
Het progressieschild Verder komen in de cursus is waar het bij de cursist om gaat. Het voltooien van de cursus en het behalen van de toets is het uiteindelijke doel van de cursist. Ook willen we dat de cursisten als team elkaar helpen, ondersteunen en samen de eindfinish behalen (samenwerken aan jezelf). We kennen twee vormen van progressie op de cursus: Het behalen van de cursus en het assisteren van je groepsgenoten tijdens deze cursus. Deze twee vormen zijn relatief snel omgebouwd tot twee vormen die we vanaf de pressure cooker in de mond hebben genomen: Social Points en individuele progressie. Samen de creatie van de badges wilden we een algemeen platform waarop alle gegevens te vinden waren. Denk hierbij aan een balk of figuur die alle informatie compact zou beheren.
We kwamen vrij snel met de eerste schets die afgeleid was uit de gameindustrie. Denk hierbij aan een balk waarbij meters een overzicht geven van de progressie. Vaak zijn deze attributen aangekleed met extra details om meer gegevens weer te geven. Wij wilden eigenlijk hetzelfde, maar dan geïmplementeerd voor de cursus: een overzicht van alle persoonlijke gegevens waarbij badges en progressie de hoofdtoon zijn. Dit maakt deze collectieve balk vol badges en gegevens behoorlijk persoonlijk. Dit sluit perfect aan op de briefing van Traintool om de cursus persoonlijk te maken. Vanuit dit gegeven dachten we weer verder en besloten om de badges een persoonlijke draai te geven. We wilden deze balk als een showreel laten dienen waarbij de cursist zijn eigen badges kan laten showen. Je kan op die manier zelf je eigen badges verdienen en zelf bepalen welke je aan de rest wil laten zien door middel deze progressie “balk”. Hiernaast biedt deze vorm je ook aan om je foto als “avatar” te laten dienen waardoor jouw gezicht aan jouw gegevens gekoppeld worden en de gehele vorm NOG persoonlijker zal zijn. Eerste uitwerking Dit idee zijn we gaan uitwerken in een wireframe waarbij we al snel achter een paar praktische problemen kwamen. De doorloopbaarheid van de website is een stuk lastiger als een grote balk veel 25
ruimte zal innemen. We hebben de balk uitgewerkt in een digitale vorm en zijn gaan kijken hoe we dit passend konden maken. We hebben het alsnog uitgewerkt tot een digitale vorm We hadden op dit punt de eerste wireframes uitgewerkt tot een volwaardige scherm die als voorbeeld moest dienen voor het centrale scherm op de website. Hier zouden al je persoonlijke gegevens komen te staan. Hier zou je groep in verwerkt worden en had je altijd toegang (en overzicht) tot je cursus. De positie van deze balk was echter te prominent aanwezig. De groep moest een belangrijker onderdeel dan de cursist zijn gegevens zijn. Het klopte niet meer met ons visie: samenwerken aan jezelf. Op dit moment was het: zelf werken aan de groep. Redesign Na bijna twee weken discussiëren over deze balk kwamen we er achter dat er eigenlijk geen logische plek was voor een object van deze grootte. We gooiden een balletje op om het complete design te vergeten, het idee vast te houden maar een nieuwe vorm te geven. We zijn gaan kijken naar games die hetzelfde concept gebruiken, maar anders vorm geven. Na een aantal uur inspiratie te hebben opgedaan zijn wij gaan schetsen om een vorm te vinden die voor ons te gebruiken was. We moesten namelijk een hoop gegevens in een kleine pasvorm weten te verwerken. We wilden een compacte kleine vorm die alle informatie kon vasthouden. We zaten al vrij snel aan een vorm te denken waarbij de profielfoto centraal zou 26
staan. Beide de progressiebalken aan de zijkant geplaatst zouden worden en de badges er boven zouden zweven. De uitwerking van deze vorm was binnen een week gerealiseerd tot het huidige progressieschild. Deze nieuwe vorm was duidelijker helderder en gaf een goed overzicht van de cursist zijn gegevens. Het geeft de Social Points, de individuele progressie, zijn profielfoto en badges weer. Dit alles in een simpel, maar effectief design die overigens ook nog overeenstemt met het design van de badges. Qua kleuren waren we het er niet helemaal over eens. We wilden het “schild” prominent naar voren laten komen, maar term “bij” werd een paar keer genoemd door de kleuren die werden gebruikt. We hebben een aantal kleine aanpassingen gemaakt wat ons naar het huidige ontwerp brengen. Het vernieuwde ontwerp is misschien op zichzelf wat grauwer, maar zodra we het op de webpagina hadden geplaatst oogde het een stuk rustiger. De felle kleuren waren vervangen door rustige grijze tinten waardoor de progressiebalken en de badges een stuk beter opvallen.
27
Badges In de huidige traintool training is er geen beloning voor gedane acties. Wel is het belangrijk om een trigger te stellen zodat mensen een doel hebben waar ze naartoe kunnen werken. Onbewust zijn mensen nog “jagers en verzamelaars”. Het onbewuste heeft een behoefte om verzamelingen compleet te maken. Denk maar aan het verzamelen van flippo’s en spaaracties van de Albert Heijn. Het verzamelen van badges is hier een goed voorbeeld van. Vaak wil je alle mogelijke opdrachten voltooien. De badges hebben we aantrekkelijk gemaakt door het diepte te geven, leuke kleuren te geven en door goede iconen te gebruiken naast de namen. We willen zorgen dat de mensen ze willen verzamelen. Door gebruik te maken van “hidden” (verstopte) badges, die minder gerelateerd aan de cursus zijn, willen we de badges meer exclusief maken. Wanneer iemand zo’n hidden badge vindt, willen we dat deze persoon dat bijzonder ervaart en ermee gaat pronken en zo laat zien dat hij gemotiveerd bezig is. Deze zijn leuk en onverwacht, omdat ze niet uitgelegd worden hoe je ze kan vinden. Welke badges er zijn en hoe je ze kan verdienen hebben we via een lijst aangegeven. Dit omdat dit herkenbaar is en vaker bij badges zo gedaan wordt. Het is overzichtelijk ingedeeld. Door het uitklap systeem maken we beter gebruikt van de ruimte. Je hoeft hierdoor niet eerst de hele lijst door te lopen om bij een bepaalde badge te komen. Als jij wilt zien welke hidden badges er zijn, hoef je niet eerst alle andere badges door te lopen, maar klap je deze gewoon uit. De ontwikkeling De ontwikkeling van de badges gebeurde in een redelijke soepele manier. Van het verzinnen van de toegevoegde waarde van badges, tot het ontwerpen van de uiteindelijke badges, het was een proces die een aantal keerpunten heeft gekend die een beter eindresultaat hebben geleverd. De vorm Voordat we definitieve keuzes hadden gemaakt rondom de toegevoegde waarde van de badges zijn we gaan nadenken over de vorm. Badges komen in vele vormen en wij wilden een simpel en duidelijk design waarbij we genoeg vrijheid hebben om de vorm makkelijk aan te passen. We zijn van cirkels naar ovalen, naar driehoeken en sterren gegaan. Uiteindelijk zijn we tot een simpele vorm gekomen die als een “schild” herkent kan worden (niet te verwarren met het progressie schild). We kwamen vrij snel met een digitale schets van de vorm. Een vierkante top met een ronding aan de onderkant. Het zou een prettige vorm zijn om mee te werken en in onze latere schetsen was het ook de beste vorm om op de site te plaatsen. We hebben toen onderscheid gemaakt tussen twee vormen van badges: de persoonlijke en groepsbadges. We wilden twee varianten van badges om de ervaring van de badges zowel persoonlijk te maken, maar ook het groepsgevoel te versterken. De stimulans om de groepsprogressie te versterken konden we op deze manier versterken (samenwerken aan jezelf). 28
De verwerking van de badges op de website bracht ons tot het volgende punt. Hoe verwerken we de badges in een overzichtelijke vorm zonder teveel ruimte in beslag te nemen? De bijbehorende schets bracht ons het volgende idee: Wat als we progressie in de badges verwerken? Wat als we mensen niet pas op het einde belonen met een badge, maar ze de hele route door belonen met “ranken” van hetzelfde type badge? Dit idee vonden we dusdanig goed dat we het zijn gaan uitwerken. Het resultaat was een badge (zie afbeelding links) zoals een feedback badge. Tijdens de hele cursus wordt er van de cursist verwacht dat hij of zij feedback zal geven aan zijn of haar groepsgenoten. Om ze aan het einde van de cursus pas te belonen met een badge als deze voelt een beetje als mosterd na de maaltijd. We willen ze een doel voor ogen geven en ze gaandeweg belonen met een aantal vormen van badges. Progressie badges Zodra de progressie badges ter sprake kwamen zijn we gaan kijken naar welke vorm we er op konden toepassen. Veel games gebruiken medailles, badges, trophies en achievements. Ze komen in vele vormen en maten, maar het belangrijke is om te kijken wat voor ons van toepassing is. Er zijn verschillende games waar we inspiratie hebben kunnen opdoen. World of Warcraft is hier een voorbeeld van, maar ook games als Starcraft 2, Trials Evolution, The Sims, verschillende Free To Play games en de website waar Douwe werkt: InsideGamer. We zijn gaan kijken hoe dit in zijn werking gaat en hebben alle elementen gebundeld tot een vorm waar de cursus gebruik van kan maken. Twee games kwamen hier het meeste naar voren waar we wat mee konden doen. Trials Evolution is een motorcross stuntbike game waarbij je verschillende medailles kan halen. De afbeelding links laat de drie standaard medailles zien, maar er is nog een vierde “ultieme” badge te winnen: de platina badge. Wij vonden deze vorm uitermate geschikt en leenden de progressie methode van World of Warcraft om eisen te stellen om de verschillende badges te kunnen halen. We kwamen na een aantal weken er vrij snel achter dat zilver en platina behoorlijk lastig zijn om van elkaar te onderscheiden. Na korte discussie hebben we het idee gereduceerd een verzameling van drie badges waarvan de gouden de ultieme badge is. Dit hebben we besloten door onder andere te kijken naar bestaande elementen; noem hier de Olympische spelen of andere sporten waar medailles of bekers worden uitgedeeld. We hebben nu drie ranken bij de progressie badges die te onderscheiden zijn in de volgende vormen: Brons Goud Zilver 29
Verschillende soorten badges Nu we de progressiebadges hebben wilden we ook badges die je door middel van een enkele of een paar badges kon vrijspelen. Door “statische” badges toe te voegen verbreden we de diversiteit van de badges. Zeker qua design zouden (alleen) bronzen, zilveren en gouden kleuren wat karig ogen en wilden we de cursist ook belonen voor acties die mogelijk wat unieker zijn dan simpelweg feedback geven of de oefeningen afronden. Nu we ook statische badges hebben om specifiekere acties te belonen kwamen we met het idee om “hidden” badges toe te voegen. Deze badges zijn in eerste instantie niet bedoelt om meteen te kunnen halen. De titel van de badge (denk hierbij aan de ‘Nightowl’ moet een hint geven wat je moet doen om de badge te behalen. Zodra de eerste eis van de badge is behaald unlock je de beschrijving en kan je lezen wat de eisen precies zijn en wat je nog moet doen om de badge te behalen. We hebben nu de volgende type badges:
Progressieve badges Statische badges
Die weer onder te verdelen zijn in:
Individuele badges Groeps badges
Groepsbadge De groepsbadge heeft een kleine ontwikkeling ondergaan die belangrijk is om te vermelden. We begonnen met een vorm (zie eerdere ontwerpen) die de groepsbadge in vieren deelt. Het oorspronkelijke idee was dat de badge aangevuld zou worden met een kwart zodra een groepslid een onderdeel zou hebben gehaald. Animatietechnisch en vormtechnisch kwamen we niet tot een ontwerp waar we allemaal tevreden over waren. We hebben toen besloten om een vorm uit te kiezen die vast zou staan. Gewoon een unieke badge die bij dat specifieke groepsonderdeel hoort.
30
Badgedesign Deze ontwikkeling ging redelijk rap toen we alle details wisten. We hadden een vorm die flexibel ingevuld kon worden en we konden qua opvulling genoeg diversiteit aanbieden zodat de cursist elke badge goed kon onderscheiden. We zijn eerst alle badges gaan uitschrijven. Welke willen we hebben en wat doet welke badge. Na deze uitwerking zijn we ze vorm (en kleur) gaan geven. We kwamen na de eerste “schetsen” op een vorm die we passend vonden en zijn gaan uitwerken. Door het slim gebruiken van gradiënts geven we de badge een gevoel van diepte (een vorm van het fysiek maken van het object) en kunnen we met lichte kleurtinten de badge een stuk meer naar voren laten komen. Ze springen er op deze manier meer uit. Belangrijk was dat de badges veel detail kennen zodra ze groter zijn en nog goed te zien (herkennen) zijn zodra ze klein op het scherm worden weergegeven. Toen we dit voor elkaar hadden gekregen zijn we de individuele badges gaan uitwerken tot een uiteindelijk resultaat waarbij detail, unieke zijn en herkenbaarheid van belang zijn. Eén van de keuzes die we in één lijn hebben doorgetrokken zijn de kleuren. Progressiebadges: Brons, zilver en goud zijn de kleuren voor alle progressiebadges. Zodra de achtergrond zwart is hebben we het over groepsbadges. Hebben ze een gekleurde achtergrond dan zijn het individuele badges. Statische badges: De statische badges krijgen allemaal een unieke kleuren op uitzondering van één badge na. Er is één groepsbadge die statisch is en deze krijgt een zwarte achtergrond. De rest zal unieke vormen en kleuren krijgen.
31
Badges verdienen
Wanneer je de “Getting Started” doorlopen hebt wordt je geconfronteerd met je allereerste badge. Het komt als een leuke verassing in beeld, met een soort halo erachter. Dit om het effect van ‘goed gedaan’ te versterken. Er staat duidelijk beschreven welke badge je hebt behaald. De badge is groen omdat het een positief gevoel moet geven. Verder is hij een beetje glimmend om hem meer ‘waarde’ te geven. Het icoon heeft te maken met wat je net hebt gedaan. De vorm is gekozen zodat het niet als een standaard schild is maar wel daar naar refereert. Rond vonden we te saai en te veel afgekeken van “Foursquare” We hebben hiervan dus een combinatie gemaakt en een vorm genomen die nog niet zo voor een badge gebruikt wordt en zo wordt hij dus uniek.
32
Badgespagina Dit is de plek waar alle badges samenkomen. De reden voor een badgespagina is omdat de gebruiker zo kan zien welke badges er zijn en hoe hij deze behalen kan. Hier zie je ons proces van schets, naar wireframe en uiteindelijk naar de visuele resultaten.
33
Badgespagina week 1
Hier zie je de badges pagina direct na dat je van de Getting Started af komt. Je kan zien dat je de Getting Started badge gehaald hebt. Deze is helder van kleur en de progressiebalk is groen gekleurd en je ziet dat de stappen doorlopen zijn, stap 1 van 1. De rest van de badges zijn nog gesloten. Dit is te zien aan het slot en aan de grijze kleur ervan. We hebben voor een lijst gekozen omdat dit duidelijk en overzichtelijk is en bij andere programma’s met badges ook zo gedaan wordt. Verder hebben we er uitklap menu’s van gemaakt om zo ruimte te besparen. Het pijltje wijst naar beneden als je hem naar beneden kan klappen en wijst naar boven wanneer deze in geklapt kan worden. Bij de “hidden” badges is nog niet te zien welke handeling je moet doen om deze te behalen. Hier moet je zelf achter komen.
34
Badgespagina week 3
Dit is de badges pagina in week 3. Je ziet dat je meerdere badges hebt behaald. Ook kun je nu zien dat je van bepaalde badges brons, zilver en goud kan behalen. De progressie balk geeft aan hoe ver je daarmee bent en je kan zien hoeveel en welke handeling je moet uitvoeren om deze te behalen. Voor elke badge is een bijpassend icoon en naam.
35
Leaderboardpagina Uit onderzoeken naar gamification blijkt dat het toevoegen van bijvoorbeeld een (high)scorelijst of leaderboard kan zorgen voor competitief gedrag bij spelers. Met dit element kunnen degene die minder hun best doen toch motiveren om te gaan deelnemen. De groep moet elkaar motiveren en helpen zodat ze beter worden dan de andere groepen in het filiaal. De sociale druk komt hier sterk naar voren. De groepsleden moeten elkaar helpen en niet per se individueel beoordeeld worden. Wanneer dit wel individueel gedaan wordt kan dit als negatief ervaren worden, door dat individuele weg te halen en het per groep te doen, zal dit minder zijn.
Wireframe
36
Visueel
Hier is de ‘Leaderboard” pagina te zien. Het is een overzichtelijke lijst van alle groepen. Er is te zien op welke positie zij staan en wie er in de groep zitten. De bedoeling is dat de lijst de groepen moet gaan motiveren. Het blauwe komt weer overeen met de voortgang in de cursus van de leden en het blauwe zijn de sociale activiteiten van die groep. Als jouw groep op de 11 plaatst staat, vallen de groepen tussen 4 en 11 weg. Je ziet altijd 5 groepen, maar je kunt wel door de lijst heen scrollen.
37
Hier is een uitsnede te zien van wat er gebeurt als je over een van de leden heen gaat met de muis. Je ziet dan de badges die hij/ of zij behaalt heeft. Dit om mensen te motiveren om ook die badges te gaan behalen en zo de mensen de cursus beter te laten doorlopen. Hier zijn alleen de badges nodig omdat de foto er al staat en de voortgang is niet van belang hier voor de rest van de groepen. Dan gaat het alleen over de groepsvoortgang en niet die van de mensen persoonlijk.
Cursus Vanuit de Getting Started schermen hebben wij de schermen van de cursus afgeleid. De content hebben we afgeleid van de huidige cursus en de vormgeving is gebaseerd op de Getting Started schermen. Hieronder staan de voorbeeldschermen van de cursus. Onderin het scherm zie je een voortgangsbalk die verder loopt als je door de cursus heen gaat. Uit de test is gebleken dat het fijn was om een voortgangsbalk te hebben, zo heb je overzicht.
Testpersoon Na de test met Sandra van der Pol hebben een aantal aanpassingen gedaan. De testpersoon vond dat het niet duidelijk was wat er gebeurd als je op verstuur naar de groep drukt. Daarom hebben we er een vink-systeem van gemaakt. Hierdoor kun je alles aanvinken wat je naar de groep verstuurd. Uit een latere test bleek dat Marieke het zag alsof ze alles goed had gedaan. Ze leest namelijk de bovenstaande tekst niet. We zouden dit nog kunnen veranderen door het vinkje niet aan te klikken als je op de pagina komt. Of een andere kleur zodat het niet meteen groen is goed betekent.
38
Eindresultaat Getting Started Een belangrijk onderdeel van gamification is een gebruikersvriendelijke uitleg van het systeem zonder dat de gebruiker er eigenlijk besef van heeft. Een zogeheten ´tutorial´ die in het systeem verwerkt is zonder dat het specifiek een apart onderdeel is. Om dit iets specifieker uit te leggen hebben we een systeem ontworpen rondom het instellen van je camera en je microfoon. Een hoop onderdelen die al in de cursus zijn verwerkt hebben wij tot één enkel onderdeel verwerkt genaamd: Getting Started. Wat is het? Getting Started is een pop-up scherm die je voor de cursus moet doorlopen. Het bevat een introductie van de managers van je bedrijf (een welkomstbericht), een korte route om je camera en geluid in te stellen, een moment waarop je je profielfoto maakt, de coach die uitlegt wat er in de cursus te doen is en een oefening waarmee je je voorstelt aan de groep. Het doel Getting Started is een methode om de gebruiker in aanraking te laten komen met een aantal essentiële onderdelen van de cursus en ze alvast te laten proeven van de confrontatie met jezelf: het terugzien en horen van jezelf.
Scherm 1 In dit scherm verwelkomt jouw manager je tot de cursus. In het hoofdstuk: filmpjes Getting Started staat beschreven waar rekening mee gehouden moet worden als een manager dit filmpje gaat maken.
Scherm 2 In dit scherm kan de gebruiker zijn camera instellen door de goede camera te selecteren in de balk. Het scherm is daar nog zwart.
39
Scherm 3 Als de goede camera geselecteerd is ziet de gebruiker zijn gezicht. Dan kan hij of zij een profiel foto maken die later in het progressieschild terecht komt. In dit scherm is de foto genomen en is er de keuze om dit nogmaals te doen of de foto up te loaden.
Scherm 4 In dit scherm kan de gebruiker het geluid instellen van zijn microfoon. Ook kan hij het volume aanpassen. In dit scherm went de gebruik ook alvast aan het zien van zijn eigen gezicht op beeld.
Scherm 5 In dit scherm kan de gebruiker een eerste oefening doen om uit te proberen hoe een oefening maken in de gehele training werkt. De coach geeft hem de opdracht om zich voor te stellen aan de groep. Dit wordt vervolgens naar de groep verstuurd.
Filmpjes Getting Started Voorwaarden filmpje welkom manager:
Wat? - Inleiding van de cursus - Kernwaarden - Duur cursus - Certificaat Hoe? - In de “je” vorm praten. De manager praat tegen de medewerker. - Aanspreken als teamlid - Enthousiasme opwekkend Waarom? - De medewerker ontwikkeld zichzelf doormiddel van de stimulering van het team. - Zelfverrijking staat centraal - Samenwerken aan jezelf 40
Voorbeeld manager: Welkom bij de training van de Praxis. Deze cursus richt zich op het interactief coachen van klantgerichtheid. Mijn naam is Dries Greving manager, we zijn binnen de Praxis een team en door deze cursus kunnen we elkaar versterken in het ontwikkelen van je eigen persoonlijke vaardigheden. Door de cursus voldoende af te ronden ontvang je een certificaat voor de klantgerichtheid. Voor vragen kun je altijd bij mij terecht. Ik wens je veel succes bij het maken van de oefeningen.
Voorwaarden filmpje coach:
Wat? - Inhoud van de cursus - Toepassing oefenen - De groep - Cursist gaat boodschap inspreken voor de groep - Samenwerken om badges en social points te verdienen Hoe? - In de “je” vorm praten. - Aanspreken als teamlid - Enthousiasme opwekkend Waarom? - Cursist voorbereiden op de training - Duidelijkheid scheppen - Zelfverrijking staat centraal - Samenwerken aan jezelf
Voorbeeld coach: Mijn naam is Nienke, ik ben je coach voor de training. Deze cursus bestaat uit oefeningen met je webcam. Je bent ingedeeld in een groep uit je filiaal. Je gaat jezelf in de volgende oefening aan hen voorstellen. Het doel is dat elk groepslid elkaar feedback geeft op ingestuurde oefeningen. Deze komen op de groepspagina te staan. Hier kunnen jij, ik en je groepsleden contact houden voor de voortgang en vragen. Rechtsonder kun je in de chat alleen met mij praten. Ik zal je aan het einde beoordelen voor je certificaat. Ik ga je nu een korte begeleiding geven met de volgende oefeningen waar je je gaat voorstellen aan de groep. Oefening: Hallo wat fijn dat je hier bent. Mijn naam is Nienke, ik ben je coach voor deze training daarnaast zijn mijn hobby’s tennis en squash. Zou je jezelf willen voorstellen? > start opname
41
Groepspagina Om de site een stuk centraler en gebruikersvriendelijker te maken wil je het liefste een centrale pagina waarop je de meest belangrijke elementen kan vinden. Ons motto: ‘samenwerken aan jezelf’, staat hier centraal. Dit betekend dat de groep een belangrijk onderdeel van de cursus zal zijn aangezien zij jou helpen en jij hun helpt voor hun progressie tijdens de cursus. Om dit nog meer naar voren te laten komen is de “groepspagina” niks anders dan de hoofdpagina. Op deze pagina kan je de cursus altijd bereiken, is je persoonlijke overzicht te zien en kan je alles rondom je groep hier vinden.
Bepaalde punten als het progressieschild is een belangrijk op je persoonlijke voortgang bij te houden. Binnen het groepsgedeelte kunnen de leden elkaar feedback geven en elkaar helpen om de cursus beter te voltooien. Hiervoor kunnen ze vervolgens ook badges voor verdienen wat door middel van social points gebeurd. Door feedback te geven verzamel je de socialpoints en ben je weer dichterbij een bepaalde badge. Verder zie je de cursus en hoeveel weken je nog te gaan hebt. Als je op voltooide weken klikt zie je het overzicht van de gegeven antwoorden. Het doel van de groepspagina is een overzicht te geven van de belangrijkste opties als het draait om interactie met de groepsleden.
42
Progressie Schild Om de cursus een stuk persoonlijker te maken willen we de cursus meer naar de cursist toe bouwen. Om de cursus een stuk persoonlijker te maken willen we een visueel platform die zowel de Social Points, de individuele progressie, een aantal badges en de foto van de cursist weergeeft. Deze bundel aan gegevens zal op elke pagina te vinden zijn en is altijd te zien. Zodra een cursist de pagina van een andere cursist of groepsgenoot ziet is dit figuur te zien. Het moet in één oogopslag alle gegevens weergeven die laten zien hoe ver de cursist is en hoe betrokken de cursist in de groep is. Het doel van deze visualisatie van je progressie is om zelf je eigen voortgang te zien, een stimulans te zijn om verder te komen in de cursus en een showreel van jouw prestaties. Ieder groepslid zal een eigen schild krijgen waarbij alle persoonlijke progressie in één oogopslag te zien is. Uitleg Progressie Schild Tijdens de Getting Started maak je een profielfoto die te zien is in je persoonlijke schild. De “vleugels” aan de zijkant vormen de progressie meters. De linker blauw meter is voor je Social Points. De groene rechter meter is voor je Individuele Progressie en de badges boven je profielfoto zijn de vier badges die je kan kiezen om te laten zien aan de rest. Sociale meter Op de frontpage kan je bij de sociale onderdelen een blauwe ster zien. Dit zijn de vragen waar sociale punten te verdienen zijn. Zodra deze punten vrijgespeeld zijn zal de ster verdwijnen en de bijbehorende punten bij je Social Points opgeteld worden. Deze groei in de meter zal visueel worden weergegeven zodat de visuele feedback versterkt wordt. De maximale score is pas te behalen aan het einde van de cursus als de cursist op iedereen heeft gereageerd. Individuele meter De individuele progressie zal groeien zodra de cursist vordering maakt in de cursus. De meter zelf is een overzicht van de gehele cursus. De individuele weken zullen ook een progressie balk kennen (zie afbeelding links), maar de Individuele Progressie is de optelsom van deze weken bij elkaar. Badges De vier badges aan de bovenkant van het schild zijn je ‘display’ badges. Zodra je meer dan vier badges hebt verzameld kan je kiezen welke badges je wilt tonen aan de rest. Je kan deze kiezen in het badge scherm. Eerste indruk Zodra de cursist in aanraking komt met de cursus zal het schild nog zo goed als leeg zijn. De eerste badge waarmee ze in aanraking komen is de ‘Getting Started’ badge. De eerste Social en Individual Points krijg je pas later in de cursus. Zodra de eerste week is voltooid zet je de eerste opdrachten online waarop je feedback kan krijgen. Zodra je groepsgenoten hier mee klaar zijn kan je ze feedback geven op de opdrachten hiermee zijn de eerste Social Points te verdienen. 43
Badges Naast de progressie hebben we ook persoonlijke badges die individueel, maar ook als groep behaald kunnen worden. Badges zijn visuele beloningen (soort medailles) die je kan verdienen door het voltooien van activiteiten tijdens de cursus. Gevarieerd van het behalen van de oefeningen, het geven van feedback of unieke acties als het ’s avonds laat inloggen bij je cursus. Het stimuleert de verzameldrift van de cursist die naast alle progressiebalken en groepsactiviteiten een doel heeft om naartoe te werken. De badges zijn een extra beloning die los staan van de progressiebalken. Ze zullen geen SP geven of de individuele progressie bevorderen. Het is een extra element om bepaalde activiteiten te stimuleren en deze weer te geven op je profiel. Samen met de Social Points en de individuele progressiebalk zullen ze de cursist stimuleren om zo veel mogelijk uit hun cursus te halen. Belangrijk om te melden is dat de badges op elke cursus van toepassing zullen zijn. Er zijn (op dit moment) geen specifieke badges voor een bedrijf als de Praxis. We willen de vorm universeel houden zodat elk bedrijf dezelfde vorm kan gebruiken. Individuele badges De individuele badges zijn badges die jij zelf kan behalen. De meerderheid van de badges zijn gericht op de cursist zijn progressie, zijn activiteit binnen de groep en unieke badges die vrij te spelen zijn door unieke acties uit te voeren (denk bijvoorbeeld aan het drie keer online komen na tien uur ’s avonds). Groepsbadges De groepsbadges zijn badges die door de groep vrij te spelen zijn. Ze zullen voornamelijk gericht zijn op het stimuleren van groepsleden die achter lopen of moeite hebben met bepaalde onderdelen van de cursus. De groepsdruk zal ze op die manier een extra zet geven om mee te doen aan de groepsactiviteiten. Als positief effect zal het een beloning zijn dat de groep uiteindelijk de eindstreep heeft gehaald. Het is een bevestiging dat de progressie (van de groep) de goede kant op gaat. Verder onderscheiden we de badges in twee vormen: de statische badges en de progressie badges. Statische badges: Statische badges zijn badges die door één of een paar van dezelfde acties te behalen zijn. Er zal een voorwaarde aan verbonden zijn de meld wanneer de badge behaald kan worden. Progressiebadges Deze badges zijn voornamelijk gefocust op het hele traject. Door verschillende “ranken” in badge omhoog te gaan blijf je de drang behouden om de hogere (betere) badge te halen. Denk hierbij aan de gradatie van brons, zilver en goud waarbij dezelfde badge in “rank” verhoogt zodra er aan de eisen is voldaan. Verdere uitwerkingen van de badges staan in de bijlage.
44
Badgespagina Naast het hebben van badges is het ook belangrijk om ze een eigen plek te geven. De cursist wil een overzicht van de te behalen badges en hoe ver ze hier mee zijn. Zodra de cursist een badge van een ander ziet die hij of zij niet heeft, dan is het bijvoorbeeld leuk om ze in je eigen lijst op te zoeken. Ook biedt het een platform aan waarbij de cursist kan zien hoe ver hij of zij met een bepaalde badge is en wanneer ze de volgende badge kunnen halen.
Onderverdeling Wanneer de gebruiker bijvoorbeeld heeft gezien dat hij een badge heeft verdiend en nieuwsgierig wordt, kan hij naar de badgepagina. Hier is te zien welke badges er beschikbaar zijn, welke je hebt gehaald en welke er nog ‘’unlocked’’ moeten worden. Er zijn individuele badges, groepsbadges en hidden badges te behalen gedurende training. Deze badges kan de gebruiker unlocken door middel van de cursus goed uit te voeren en social points te behalen. Elke badge heeft een eigen voortgangsbalk, zodat de gebruiker kijk wat hij heeft behaald, en hoeveel hij nog moet behalen om de badge te unlocken. Hoe meer de gebruiker zijn best doet om de cursus te halen, hoe beter zijn individuele badge wordt. Dit is vormgegeven in een bronzen, zilveren en gouden badge. Naarmate hij bijvoorbeeld extra feedback heeft gegeven, krijgt hij bij een aantal de bronzen badge. Hoe meer in aantal hij volbrengt, hoe dichter hij bij de uiteindelijk gouden badge komt. De voortgang is ook terug te zien in de gebruiker zijn progressieschild rechts in beeld. Hieraan af te lezen is dat hij aan het begin van de cursus en social points staat, omdat er geen progressie wordt aangegeven in beide zijden van het progressieschild. Daarnaast is er ook geen progressie zichtbaar in de trainingsvoortgang, onder het schild. Hij heeft wel de Getting Started voltooid; dat is te zien aan de badge die hij heeft verdiend, die boven het progressieschild zichtbaar is. Er zijn statische badges die je kunt halen, maar een paar bevatten ook progressie, daarmee kan de gebruiker progressiebadges verdienen. Er is een bronzen, zilveren en gouden badge te behalen. 45
Afhankelijk van hoe actief je bent in de training, kan dit resulteren in bijvoorbeeld door veel feedback te geven en daardoor meer social points te krijgen. Hoe hoger je score, hoe dichter de hoogste badge in je bereik komt. Om te zien hoe je qua score van ervoor staat, is er per badge een voortgangsbalk. De gebruiker kan zo gemakkelijk zien hoever hij is en hoever hij nog moet om een de badge te unlocken. Dat is zichtbaar op de volgende afbeelding. Visuals Zo kan een badgepagina er uit ziet naarmate de weken zijn verstreken en de trainingen worden behaald. Van de gehaalde badges kan hij selecteren welke hij boven de progressieschild zichtbaar wilt hebben. Nu is ook duidelijk de progressie aan weerszijden van het progressieschild te zien. Het aantal voltooide trainingen loopt gelijk op met de progressiebar in het progressieschild. Bij de badges zijn de voltooide voortgangsbalken zichtbaar. Hier is te zien dat hij de Getting Started badge heeft gehaald, maar nu ook de ‘’taking your time’’ badge, ‘’Feedback badge’’ heeft behaald, en op pad is om de gouden versie van deze badge binnen te halen. Het getal aan het einde van de badge geef weer hoeveel ‘’acties’’ er nog nodig zijn om de badge te halen De functionaliteiten van deze badges zijn Getting Started badge: Deze statisch, zonder progressie. Deze kun je behalen door de ‘Getting Started’ te voltooien. Taking your time badge: Deze is ook statisch. Door meer dan een uur aan je oefening te zitten verdien je deze badge. Feedback badge: in de progressieve badge kun je een hogere badge scoren door meer feedback te geven op je groepsgenoten. Hidden badge: De hidden badges zijn speciale badges die te behalen zijn als de gebruiker bijvoorbeeld ’s avonds laat inlogt.
46
Leaderboard Alle individuele progressie zal de gebruiker een gevoel van druk geven om niet achter te lopen op zijn of haar groepsgenoten. Je wil immers wel bijblijven op de rest en dat zal een stimulans zijn om altijd zo ver mogelijk te komen in de cursus. Echter willen we de druk nog meer opschroeven en de groepsband nog sterker maken. Door een groep tegen andere groepen te laten strijden heb je al snel een doel voor ogen als team zijnde. Met de inbreng van Social Points kunnen we een gevarieerde score krijgen per groep. Het geeft niet alleen een stimulerende factor om als team de eindstreep te halen, het zorgt er ook voor dat elke individueel groepslid zijn of haar aandeel zal voltooien om de vooruitgang van het team te bevorderen (samenwerken aan jezelf).
Wat gebeurt er op de leaderboards Tel de individuele progressie en de Social Points bij elkaar op en je hebt een variabel score die per persoon zal verschillen (niet iedereen zal even gemotiveerd zijn om alles te behalen). Als deze scores per groep worden opgeteld zal je een teamscore krijgen die jouw groep heeft behaald. Hier zit een extra competitieve factor aan. Als team word je ineens gestimuleerd om jouw eigen aandeel elke week te voltooien om jouw teamscore hoog te houden. Elke groep binnen de cursus zal een positie krijgen op het leaderboard om zo hoog mogelijk te eindigen. Verder is er per team te zien wie er in het team zitten en kan je met je muis over een persoon heen gaan om te zien welke badges hij of zij heeft ingesteld om te laten zien aan de rest van de teams. Zo zal de cursist nog meer waarde hechten aan zijn of haar behaalde badges. Scoresysteem Elke speler heeft twee vormen van scores die opgemeten kunnen worden: de Social Points en de Individuele Progressie. Als al deze scores opgeteld worden per groepslid binnen een team dan komt er al snel een score uit die divers genoeg kan zijn. De meter op de leaderboards is een optelsom van deze twee vormen van progressie. De groene en blauwe balk (individuele progressie en Social Points) vormen samen een score die het team zijn rank zal geven op het leaderboard.
47
Maximale score We hebben er voor gekozen om wel een maximale score te hebben. Bij een cursus of toets is het de bedoeling dat je uiteindelijk de toets haalt en dit moet altijd voorop staan. Nadat jij als individu het hele oefentraject hebt voltooid en alle groepsacties hebt voltooid kan je niet nog meer punten halen om je teamscore te verhogen. Het belangrijke is dat je als groep de eindstreep hebt gehaald en dat iedereen hier zijn aandeel in heeft gehad. Zodra iedereen de cursus volledig heeft voltooid en alle groepsactiviteiten heeft voltooid, zodoende het meeste uit de cursus heeft kunnen halen, zal de groep de maximale score hebben behaald en op de hoogste plek op de leaderboard komen te staan. Zodra meerdere groepen de maximale score hebben behaald zullen ze de hoogste positie delen. Toch zal het niet willekeurig verdeeld worden. Het team dat als eerste alle individual- en Social Points heeft behaald staat bovenaan. Het daaropvolgende team tweede etc. Fanatieke teams zullen op deze manier beloond worden met een hogere positie.
48
Cursus Wat is het? Een pop-up scherm die je doorloopt om de oefeningen te doen en daarmee badges te behalen. Het bevat de verschillende vragen welke de cursist moet beantwoorden. Aan het einde moet de cursist een aantal van de antwoorden versturen naar de groep. Het doel Via de cursus kunnen de cursisten zichzelf oefenen in het leren van sociale skills die in praktijk voor zullen komen. Door filmpje en vragen op te sturen naar de groep kan de cursist meer uit de cursus halen door feedback van de coach en de groep.
Scherm 1 Als je de cursus opent kom je als eerst op dit scherm terecht. Hier kan de gebruiker zijn leerdoelen opschrijven om ze vervolgens naar de groep te sturen. Scherm 2 Hierna komen de schermen met de vragen. Er zijn hiervoor een aantal opties: de webcamoefening, multiplechoice vraag en de open vraag.
49
Scherm 3 Hier zie je de multiple choice en de open vraag. Scherm 4 Aan het einde van de cursus krijgt de gebruiker een overzicht van de gedane vragen. Hij ziet gelijk welke vragen goed zijn.
Scherm 5 Hier zie je een aantal filmpjes waarvan je er twee kunt kiezen om naar de groep te versturen.
Uiteindelijke visuele uiting van de Getting Started en de Cursus
50
Test Interviewpersoon: Naam: Marieke ter Veer Leeftijd: 20 jaar Werk: Studente en werkt bij de karwei als weekendkracht
Testresultaten – mogelijke veranderingen Getting Started Het stappenplan wordt goed doorlopen. Het enige nog onduidelijke is de groep waar de gebruiker in zit. Je moet een boodschap inspreken maar je weet nog niet voor wat. Homepagina Gebruiker denkt dat de boven in het scherm alleen de mogelijkheid is tot de Coach een vraag te stellen. De gebruiker denkt dat het logo van de praxis je terug leid naar dit scherm of je gaat naar praxis.nl. De gebruiker denkt dat als zij op groep drukt je dan bij een overzicht van de groep drukt. Want op dit scherm is het nog steeds niet duidelijk wat de groep is of wie er in de groep zit. Ze denkt dat ze als ze op de knop groep klikt je vragen kan stellen aan de groep. Bij de badges dacht ze dat je bij elke opdracht die je doet een badge krijgt. Dacht dat de badges op de homepagina je laatst behaalde badges zijn. In het leaderboard verwachte ze een strijd in de groep. Visueel? Start is niet belangrijk genoeg. Het kan met kleur veel duidelijker aangegeven worden. Het profiel rechtsboven beschouwd ze als een verzameling van opdrachten die ze gedaan heeft zien, badges die ze gehaald heeft, het geheel en haar proces. Homepagina een aantal weken later Het start is nu duidelijker geworden door de groene kleur. Wat de blauwe balk weet ze niet. Ze ziet het sterretje als iets waar iemand mee laat zien dat hij of zij hoger in rang staat. Niet duidelijk wanneer het moment van badge krijgen is. Wat is de prestatie die de persoon moet doen om de badge te krijgen. Cursus Vraagt zich af of leerdoelen naar de groep optioneel is of dat het moet. Wil zekerheid of een opdracht opgeslagen wordt als ze op het kruisje zou drukken en al een opdracht heeft gedaan. Bij het overzicht leest ze de tekst niet. Ze denkt dat ze alles goed beantwoord heeft en er daarom een “vinkje” staat. Ze denkt dat haar coach dit heeft nagekeken. Badgespagina Bij taking your time badge laat ze de computer gewoon een uur aanstaan. Dan heeft ze de badge gewonnen. Ze snapt de betekenis van de badges dus niet. Je zou lijst korter kunnen maken door de badges naast elkaar te zetten. Begrijpt het pijltje omhoog bij de night owl niet. Badgespagina een aantal weken later Als het pijltje open gaat ziet ze dat ze nog veel meer feedback moet gaan geven. En nog meer feedback moet geven voor de zilveren en bronzen badge. Dit vindt ze vervelend. Het komt als geen leuke verassing. Ze wil meteen op de pagina zien wat er te verdienen valt. Begrijpt de blauwe balk niet kan het nergens aan linken. Door de kleur te veranderen zou ze het kunnen linken aan voortgang van badges.
51
Nawoord Vanaf de ‘pressure cooker week’ zijn we na het scannen en het testen van de huidige website aan het einde van ons project gekomen geven het vanaf hier door aan Traintool. Waar we eerst met schetsen aan de slag zijn gegaan, hebben we het concept gevisualiseerd. In het concept voor winkelmedewerkers in heel Nederland ‘’samenwerken aan jezelf’’ zijn gamification en persuasive elementen de leidraden geweest gedurende het proces. Deze begrippen hebben we vertaald in een volledige conceptbeschrijving, met concreet de herstructurering van de website en het functionele en visuele (re)design. Een e-learning met gamification is een uitdaging om te creëren. Deze factor, in samenhang met persuasive design heeft een complex systeem nodig om een goede samenhang te creëren, en om het beste uit de functionaliteit ervan te halen. In de voortgang hebben we het concept op waarde kunnen toetsen, met als resultaat dit adviesrapport. Met het streven naar meer e-learninggebruikers, hopen we op deze manier Traintool een langere termijnvisie hebben kunnen bieden.
52
Bijlage Sitemaps Website structuur: We hebben een structuur gemaakt van hoe een weg van het inlogmoment naar de uitvoering van de training verloopt. De blokken zijn schermen / pagina’s op de website. De cirkels zijn statische pagina’s, met veranderende content. De rode blokken geven de connectie aan dat vanuit het onderste rode blok er altijd toegang is tot het bovenste rode blok.
Huid Getting Started Dit is structuur van de huidige ‘Get Started’ van Traintool, tot aan de landingspagina waar aan de training kan worden begonnen.
Structuur van nieuwe concept De structuur van het nieuwe concept. Vanaf de inlogpagina kom je –als je voor het eerst een training wilt uitvoeren-, meteen bij de getting started. De Getting Started is een pop-up. Na deze voltooid te hebben komt de gebruiker op de trainingspagina. (De onderste drie blokken: getting started, profiel en de hoofdpagina met keuzemenu)
53
Landingspagina Huidige structuur landingspagina training Vanaf de landingspagina heeft de gebruiker op de homepagina de keuze uit verschillende trainingen. Wanneer de gebruiker op ‘’aanloop naar training’’ of ‘’ga naar module’’ klikt komt degene bij de training (cirkel). Daarnaast heeft de gebruiker de mogelijkheid om rechts de verschillende stappen in de training te kiezen.
Voorstel nieuwe structuur landingspagina training Zo weinig mogelijk schermen met de juiste informatie. De gebruiker kan op een overzichtelijke manier het pad bewandelen. Op deze manier zijn alle benodigde schermen te bereiken, waaronder de trainingen, met behulp van pop-ups.
54
Uitwerking badges Groep Badges Dit zijn alle groepsbadges die te behalen zijn. We hebben dit onderdeel volledig uitgewerkt en visueel gemaakt. Belangrijk om te weten bij de progressieve groepsbadges is dat de bronzen, zilveren en gouden badge behaald worden zodra iedereen die “rank” heeft gehaald. Zodra de hele groep de bijbehorende bronzen badge heeft gehaald zal de groepsvariant vrijgespeeld worden. Zo zal de hele groep in een eerdere fase al in aanraking komen met de bronzen (later zilveren) badge.
Ultimate Trophy o Progressief De groep heeft de volgende badges in hun bezit: We are social Standing stronger together We made it!
We are social o Progressief Alle groepsgenoten hebben de Being Social badge gehaald.
Standing stronger together o Progressief Alle groepsgenoten hebben de Course Completed! badge gehaald.
We made it! o Statisch Alle groepsgenoten hebben de Graduated badge gehaald.
55
Individuele badges De individuele badges zijn voor een deel visueel uitgewerkt, al is het om een goede indruk te kunnen krijgen hoe ze verschillen met de groepsbadges. Bij elk staat omschreven wat voor badge het is en wat de cursist moet doen om de badge te kunnen verdienen. Deze verzameling van badges zijn een klein collectief van wat er op de cursus gebruikt kan worden. Het uitbreiden van ludieke en originele badges is gewoon mogelijk.
Course Completed! o Progressief Voltooi de weekopdrachten Being Social o Progressief Geef iedereen feedback op zijn of haar opdrachten Feedback o Progressief Geef feedback op je groepsgenoten Graduated o Statisch Je hebt de toets voltooid met een voldoende Getting Started o Statisch Voltooi ‘Getting Started’ Questions o Statisch Stel een vraag aan je groep. One taker o Statisch Neem een oefening in één keer goed op. Enthousiast o Statisch Voltooi de weekoefening op de dag dat hij beschikbaar wordt gesteld. Taking your time o Statisch Doe meer dan een uur over een oefening. Freshen up o Statisch Doe een oefening nog een keer opnieuw Perfectionist o Statisch Doe een video meer dan tien keer opnieuw op
56
Hidden badges Dit zijn de zogenaamde “verstopte” badges. Deze badges zullen geen beschrijving hebben tot er aan de eerste eis (van de specifieke badge) is voldaan. Deze badges moeten voornamelijk ludiek zijn om te verdienen. Gekke unieke acties die de cursist kan voltooien om deze badges te verdienen. Deze badges zijn visueel creatiever ontworpen en zullen iets meer uitspringen tussen alle andere badges. We hebben twee varianten als voorbeeld uitgewerkt om de rest aan de creativiteit en originaliteit van Traintool over te laten.
Early Bird o Statisch Begin de cursus 3x voor 9:00 uur
Night Owl o Statisch Begin de cursus 3x na 21:00 uur
57
Test Interviewpersoon: Naam: Marieke ter Veer Leeftijd: 20 jaar Werk: Studente en werkt bij de karwei als weekendkracht Start: Esther legt uit: Dit is een e-learning van de bouwmarkt. Daar hebben we je voor aangemeld. Je gaat eerst naar mail en via de link ga je naar training. Die krijgt je dan toegestuurd en open je je.
Getting Started – Schermen > Welkom Wat zie je en wat zou je doen? Ze ziet een jongeman. Filmpje duurt maar 45 seconde dan zou ik die eerst gaan kijken. Daar op play klikken. Wat ben je dan aan het doen? Ik verwacht dat het een kleine introductie is van wat ik hier kan op deze website. En waar zou je dan klikken? Naar volgende. Als je nog meer rondkijkt? Nog meer informatie. Need support ik weet niet wat dat is. misschien kan ik daar… is niet klikbaar. Wat zie je? Ik ben zeker over vraagtekenbutton heen gegaan. Als ik geen Flashplayer heb dan kan ik die downloaden. Is ok. Das duidelijk.
> Profiel foto Wat zie je nu? Ik mag een foto gaan maken met mijn webcam. Maar wat als ik die niet heb? Dan heb je een probleem. Wat kan je doen? Webcam een foto van mezelf maken. Hoe ga je dat doen? Ik denk dat ik er automatisch op kon en dan met het rode knop ene foto maken. Wat zie je eronder? De naam van mijn webcam. Volgende klikken. Vraagteken: als webcam niet werkt dat er dan staat wat er moet gaan gebeuren. Wat moet je doen als je geen webcam hebt?
58
Wat is er nu gebeurd? Ik heb een foto van mezelf gemaakt. Als ik hem goed vindt als profielfoto instellen en anders kan ik een nieuwe maken denk ik. Hoezo profielfoto? Ik doe nu heel veel moeite om die te maken, maar die zal wel ergens voor nodig is. ik denk dat die hierboven ook komt. Daar staat peter. Dat ik profielpagina krijg waar mijn foto op komt. En natuurlijk op volgende drukken. Wat is er gebeurd? Ik heb mijn profielfoto geüpload. Dat staat in beeld. Hoe heb je dat gedaan? Door op het groene knopje te drukken. Maar ik denk, kom hij daar terecht? Dat je hem daar al kan zetten voor extra feedback momentje. Nu zie nog wit vlak, en dan is hij aangekomen.
> Geluidsinstellingen Wat zie je nu? Mijn microfoon moet werken, dat kan ik hier testen, dus ik denk dat ik hier paar woordjes in moet spreken en dat ik dan zie hoe mijn volume staat en of het werkt. En daaronder? Vraagteken? Nee selecteer volume. Ik denk dat hoe hard je het wilt dat je het daar kan instellen, je spraak want je spreekt nu iets in neem ik aan. Dat ga je doen om het geluid te testen.
> Boodschap Wat ga je hier doen? Nog een filmpje bekijken. Een boodschap. Wat denk je dat zij jou gaat vertellen? Goeie vraag, ik denk dat zij ook een praxismedewerkster is, of een klant. Een van die twee. In het kader van de e-learning. Wat ze echt gaat vertellen dat zou ik niet weten. Ok. En wat doe je dan nu? Dus zij is mijn coach. Top. Ik zou denk naar de volgende pagina gaan. Dan verwacht ik daar. Ik vind het nuttig dat ze zegt dat ze mijn coach is en dat ze me gaat begeleiden in alle stappen die ik ga ondernemen en ik denk dat we die dan ook samen gaan doorlopen. Ik denk dat zij ook feedback gaat geven van je doet dit wel / niet goed. Die groep zijn denk medecollega’s, zij werken ook bij een bouwmarkt. En je doet daar opdrachten mee. Ik verwachtte dat ik dan bij de opdrachten kom. Of in ieder geval te zien krijg wat ik kan doen. Na volgende? Ik denk dat ik dan nog een filmpje krijg, waar ik meer informatie krijg over de opdracht. Misschien wat mijn eerste opdracht is. Dus mijn eerste opdracht was dus mijzelf voorstellen eigenlijk. Dus dat ga ik nu doen. Mijn naam is Marieke en ik werk bij de karwei. Zij had natuurlijk ook hobby’s . ik denk dat de meeste mensen het gewoon zouden kopiëren, van wat zij zegt. 59
Knoppen? Het is een filmpje, daarnet een foto. Dat zie je wel. Je kunt jezelf horen of zien of het werkt. Ik denk dat, ja waar je moet op drukken als je klaar bent met jezelf voorstellen. Het kan wel. Meer de volgende button erin zetten. Bevestigen dat je klaar bent met het filmpje. Hier druk ik weer op het rooie dingetje, heb ik gedrukt. Kan ik kiezen of ik hem wil uploaden. Ik kan hem nog een keer afspelen. Als ik erin klik speelt hij af en dan kan ik terugkijken en beluisteren. Ik kan uploaden en verwijderen. Kruisje. Je webcam gaat aan de videoboodschap weer overnieuw doen. Hoef niet het hele filmpje opnieuw te zien. Het is ook niet heel moeilijk om jezelf voor te stellen. Ik stuur het naar de groep. Wat heb je gedaan? Groene dingetje geklikt. Opgestuurd mijn videoboodschap naar de groep. Ik zie de groep alleen niet. Klopt dat? Ja dat klopt. Je ziet niet wie de groep is, de groep is nog een vaag begrip.
Homepagina Je hebt op volgende geklikt en waar ben je nu? Nu op de homepagina. Wat zie je allemaal? Ik ben de groep aan het bekijken. Ik heb badges en leaderboard. Maar eigenlijk binnenste valt het meest op. Hier kan ik vraag stellen aan Nienke of aan de groep. Soort Facebooktimeline. Waar dus als je hier een vraag doet komt hij daar onder te staan. Ze leest het bericht van Nienke. Ok. Wat doe je als je haar wilt vragen? Je kan op haar icoon klikken dus ik zo daarop klikken. Die zie ik daar terug dus ik denk dat dit alleen van Nienke is. Poppetje is alleen voor Nienke, omdat alleen het icoontje terug komt. Blijkbaar duurt de training 5 weken, ik ben nu denk ik bij start. Ik dat is denk ik week 1. Ik denk dat daar al mijn opdrachten te vinden zijn die ik moet gaan doen en dit zijn schildjes, mijn badges misschien. Ik weet niet wat je ermee kunt doen. Ik heb al iets, een webcam, dus ik denk dat het bevestiging is van hee je hebt wel een foto gemaakt. Het is ook groen. Wat is dat hierboven? Het praxislogo? Ik denk dat je daar altijd terug kan naar deze homepagina. Stel dat het home is of naar praxis.nl. ik wil het niet maar het is het logo van praxis. Denk je van ok praxis dus ga je naar praxis. Wat is deze knop (groep)? De groepsknop? Dan ga je naar groep. Het vage begrip groep. En dan daar, ik denk dat je daar ziet wat jouw groep doet, dat je vragen kan stellen aan de groep, interactie. Wat is deze knop (badges)? Ik denk dat dat gelinkt is met de persoonlijke progressie. Ik denk dat bij elke opdracht die ik doe krijg ik een leuke badge. Ik denk dat daar al mijn prestaties, de dingen die ik gehaald heb staan. Misschien zijn dit mijn laatst behaalden, meestal zie je dat bij andere sites. Laat behaalde uitgelicht (persoonlijke progressie). Wat is het verschil tussen persoonlijke progressie en badge pagina? Welke badges je het laatst gehaald hebt en de badges die je hebt. Get glue werkt ook met badges. Maar die post je op Facebook.
60
Knop Leaderboard Dan wordt het denk een soort van competitie dat je ook nog strijd kan aangaan. Met de groep. En dat daar de score op staat die je gehaald hebt. Wie heeft de hoogst score. Het hoogst scoren door je opdracht het beste uit te voeren. Of zoveel badges te hebben. Weet je wat in het vlak is gebeurd? Ik zie mijn eigen filmpje, mijn voorstelfilmpje. Die kan ik terug bekijken. Stel je wil de cursus gaan beginnen wat zou je doen? Bij start rechts denk ik. Hoe vind je het visueel? Ik denk start is wat belangrijker. Het staat nu rechts, terwijl je eerst in het midden kijkt. Het gaat erom dat je die dingen gaat aflegggen. de belangrijkste regel is het midden dus daar verwacht ik hem. Rechts ook wel maar dan moet het meer visueel zijn, en er echt uitspringen. De foto rechtsboven is goed, Facebook heeft hem wel links. Het is soort profielfoto meestal zit die aan de linkerkant. Je leest ook van links naar rechts. Dropdowndingetje voor settings. invullen op klikken dat ik mijn profiel kan zien wat ik gedaan hebt. Iets van mijn profiel. In het profiel denk ik dat de opdrachten die ik gedaan heb, de badges die ik gehaald heb, hoever k ben in het geheel. Dus mijn proces.
Home: Het is een aantal weken verder Rechts, dat groene springt eruit dus dat zie je ook gelijk. Je ziet verder gaan je bent bij week 3. En je ziet dat je halverwege bent. Je hebt hierboven wat blauw is weet ik niet. Maar groen is denk hetzelfde extra bevestiging van hoe ver je bent in het proces. Waar je bent in het proces. Ik zie ook dat ik een nieuw badge heb. Het is een beetje Facebookachtig als je nieuwe notificatie hebt (boven) ga ik even kijken. ik denk dat dit vanuit de groep is. ik denk dat Peter feedback geeft op zijn vrienden op wat hij gedaan heeft. Op videootje. Dat hij nerveus overkomt. Ik kan er ook op reageren. Soort Facebook timeline. Ik denk dat het ene opdracht is (kritische vrouw met fiets) daar kan ik op reageren. Sp? Ik denk dat het een soort van hoger in rang staat omdat ze een sterretje heeft. Misschien staat ze hoger in leaderbord of heeft ze veel badges. Ze heeft een sterretje en de rest niet. Wanneer denk je dat je een badge kan krijgen? Ik denk als ik opdrachten doe. Niet na elke, of misschien wel. Je verwacht wel dat je veel badges kan krijgen, omdat ik niet weet hoeveel opdrachten in een week want dat staat er niet. Ik denk per opdracht een badge, en per week. Ook een badge van gefeliciteerd weer een week.
Cursus Je bent een cursus gestart Wat zijn punten waarop je jezelf kan verbeteren. Ik lees altijd eerst boven. In plaats van top. Dat doe ik eigenlijk bij elke site. Dan is het ook goed dat hier een zin staat die gelijk zegt wat ik moet doen. Onder staat dat ik er 2 op moet stellen dat lees ik dan daarna. Om meer uit cursus halen opsturen 61
naar groep. Is dat optioneel? Verstuur naar de groep en volgende namelijk. Als ik gewoon op volgende ga, naar coach linken of altijd naar groep sturen. Het is een ‘’moeten’’. Wat is dat daar onder? Procesbalk denk ik. Dat ik zie hoeveel er nog aan komt. Week 1 en begin week 1 zit ik. Als ik geen zin heb ga ik weer terug naar mijn home en dat ik daar weer opnieuw begin. Dat ik kan afsluiten. Als ik op het kruisje druk wil ik wel weer verder waar ik gebleven ben. Alleen het is wel dat ik 1 opdracht doe, 1 leerdoel weet ik ander nog niet. Dan ben ik wel bang dat als ik op het kruisje druk dat alles dan weg is. Je hebt op volgende gedrukt. Heel snel gegaan gezien die groene balk. Ik krijg een klant, ze kijkt beetje moeilijk dus ik denk dat ze een probleem heeft. Ik ga het filmpje bekijken, kijken wat het probleem van die klant is en ik denk dat ik daarna een vraag moet beantwoorden en voor mezelf het oplossen. Ik denk dat als ik op volgende druk of weer mijn webcam zie of dat ik weer moet typen wat mijn oplossing is. Je hebt dat gedaan, filmpje kijken, tegelijk filmpje achteraan. Zet ie zichzelf automatisch aan. Had ik ook op 3 op reis, miss heb ik dat testje nog ergens liggen. Dan kun je m opslaan dan heb je m gedaan. Volgende opdracht Dat is weer de uitleg oké. Multiplechoicetest tja. Luisteren. Ik denk dat ik dat aan kan vinken. Nog een vraag. Dat kan ik dus zeggen wat ik doe. Heel kort antwoord denk ik. Off record. Wat ik zou doen is gewoon vragen of ik die klant ergens mee kan helpen en dan gewoon typen. Ik zag net wel een andere dat het is van gooi het in de groep. Ik neem aan dat dit tussendoor is dan dat het niet belangrijk is dat de groep weet dat ik dit doe. Voor mezelf en voor mijn virtuele coach Nienke. Want die gaat het controleren. Volgende. Overzicht Oké. Ik zie dat ik het goed geantwoord heb, alle twee de vragen. Ook dan kan ik mijn resultaten naar de groep sturen. Kijk ik heb het goed gedaan kan ik dan zeggen. Ik zie dat ik nu bijna helemaal klaar ben met week 1. Met knop naar groep sturen. Hier vind ik het wel tof kan ik laten zien hoe goed ik ben. De resultaten laat ik zien, wat je hebt ingevuld of dat je het goed hebt ingevuld. Of als je hier een badge voor krijgt dat je een badge naar de groep verstuurd. Ik denk dat de groep dezelfde opdrachten hebben. Ik heb verschillende filmpjes verschillende klanten behandeld. Dit is dus wat ik net gedaan heb en ik denk dat die andere ook gedaan heb. Feedback wil op wat ik lastig vond en dan versturen. Vinkjes geen verschil. Vinkje dat ik goed gedaan heb, en ook wat ik naar de groep wil sturen. Dat ik hier kan aanvinken die en dat filmpje wil ik naar de groep toesturen. Vind je het zo duidelijker? Wat is er veranderd? Ze leest het overzicht niet.
Badgespagina Wat zien we? Ik zie dat ik de Getting Started badge gehaald heb. Em. Dat ik de rest nog niet gedaan heb. Dit ik nog aan het begin ben dus heb 1 badge. Die andere zijn denk ik per week. Je kan ook feedback krijgen van
62
de groep. Dus feedback krijgen is punten verdien. Oo hier staat geef, dus dan als je feedback geeft. Feedback valt het eerste op. Taking your time Dan laat ik de oefening gewoon een uur aan staan. Night owl Ik moet eerst paar andere dingen doen voordat ik deze kan zien. Geen idee. Ik denk dat ik eerst andere badges moet halen voordat ik die kan halen. Maar aan de naam te zien denk ik dat het doe oefening s’ nachts. Hoe lang denk je dat de lijst doorgaat? Vrij lang denk ik. Wat vind je daarvan? Op zich zou ik dan de lijst mag best zo lang worden als je wilt. Get glue krijg ik ook badges voor elke film die ik zie en serie die ik volg. Best interessant. Dan kun je m ook zo opdelen. Links individuele. En dan daarnaast groepsbadge kun je inkorten door badges naast elkaar te zetten. En zie je hier ook iets? In badges. Ik zie dat ik 1 badge gehaald en heb dat ik deze weg kan klikken. Alleen weet ik niet waarom het pijltje omhoog bij night owl staat. Ik heb groepsbadges. Ik denk dat. ik zou misschien ook feedback verwachten als groepsbadge. Dingen die je doet met een groep als overleggen, reactie geven en feedback dat je die als een badge krijgt. Uitgeklapt pijltje Oooh feedback pijltje. De wet van afstand iets meer toepassen.
Badgespagina: aantal weken later Ik ben wat verder, ik heb meer badges en meer procesdingen. Ik ben nu bezig met feedbackbadge. Slotjes, geef groepsgenoten. Ja ik vraag me af of het echt nodig is. ik weet niet echt wat het is. ik moet 6 groepsgenoten feedback geven. Hier 6. Dus 6 mensen, maar waarom deze er dan onderstaan vraag ik me af. want hier staat 18. Oo wacht omdat het brons zilver en goud is, maar of het echt handig is. ik zou het op andere manier doen. Hoe dan? Spelletjes met badges is niet onder elkaar, maar dat het gewoon een ander badge is. Gewoon weer zo’n grote is het zeg maar. Met 6 is bronzen badge. Voor zilver moet dan 18 mensen gaan feedbacken. Maar dat is weer iets anders. Het is enigszins duidelijk maar duurde even dat ik het doorhad. Maar emm.. je kunt het wel op een andere manier indelen, misschien naast elkaar zetten. Zodat je hier al ziet, het is best wel een surprise. Blij met 6 genoten feedback geven. maar hier zijn het in een keer 18 mensen nodig en dan denk je wat? Das teveel. Het is wel goed, als je zilver wilt moet je meer daar dan zou ik het hier al zetten. Feedbackbadge 1, 2 en 3 en dat je dat gelijk ziet. Dat wil ik gelijk zien, ik wil geen surprise. Omdat het dan in een keer heel stuk meer werk is, ik wil niet zeggen dat ik heel lui ben maar…. Het is wel shit als je in een keer 18 mensen moet doen. Dan wordt de drempel in een keer hoger en wordt ik leuk en wil ik het niet doen.
63
Persoonlijke progressie Nog steeds laatst behaalde badges. Hier heb ik dus hoe ver ik ben met dit. Links heb ik iets leuks blauws. Misschien is dat de badges hoeveel ik al gehaald heb, omdat het redelijk gehaald met de week. Dus ik heb meer gedaan dan ik heb verdiend. Het lijkt nu bij rpg spelletje, run escape. Dan had je rechts je leven en links je toverkracht. Waarvoor is die blauwe balk? Groen wordt gelinkt aan rechts. dus als blauwe voortgangsbalk is, en je weet wat het is, dan snap ik het aardig.
64
Bronnen http://www.frankwatching.com/archive/2011/09/20/de-inzet-van-gamification-voorwebwinkels/http://www.frankwatching.com/archive/2012/03/26/b2b-marketing-hoe-realiseer-je-onlineengagement/ http://uxmag.com/articles/persuasion-in-design
http://www.frankwatching.com/archive/2011/09/20/de-inzet-van-gamification-voor-webwinkels/ http://www.frankwatching.com/archive/2011/04/19/persuasive-design-tips-voor-debeinvloeding-van-onbewust-denken/
65
