Transmedia Analytics - By Geert Hagelaar & Yannick Diezenberg
Graduation Project (in Dutch)
Graduation Project (in Dutch)
Create successful ePaper yourself
Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.
<strong>Transmedia</strong> <strong>Analytics</strong><br />
door<br />
<strong>Geert</strong> <strong>Hagelaar</strong> & <strong>Yannick</strong> <strong>Diezenberg</strong>
<strong>Transmedia</strong> <strong>Analytics</strong>: User<br />
Engagement and Interaction<br />
<strong>Analytics</strong> in <strong>Transmedia</strong> Narratives<br />
De gebruiker<br />
Overige betrokkenen<br />
Het project brengt drie instanties bij elkaar; de UvA, HvA en<br />
Submarine, om een methode en prototype te kunnen ontwikkelen<br />
voor het analyseren van ‘engagement’ en interactie binnen complexe<br />
transmedia producties. Hierbij wordt dataverzameling vanuit een<br />
wetenschappelijk perspectief benaderd, met name vanuit inzichten<br />
binnen de geesteswetenschappen (semiotiek, interface studies, etc.).<br />
Dit wordt gecombineerd in een context waar gevarieerde design<br />
disciplines samenkomen en met de omvangrijke praktische ervaring<br />
van Submarine.<br />
Zo wordt er getracht een geschikte vorm te vinden voor het vastleggen<br />
van data om een analyse strategie te ontwikkelen die specifiek is<br />
gericht op transmediale storytelling. Het uiteindelijke doel is om<br />
transmedia producenten te helpen hun gebruikers beter te begrijpen<br />
om zo toekomstige producten effectief te kunnen ontwerpen op basis<br />
van deze kennis. In deze sectie zullen de opdrachtgever, de co-client en<br />
overige betrokkenen worden beschreven, om vervolgens gedetailleerd<br />
in te gaan op de probleemstelling en bijbehorende onderzoeksvragen.<br />
Het uiteindelijke doel is om transmedia producenten te helpen<br />
hun gebruikers beter te begrijpen zodat ze deze kennis kunnen<br />
gebruiken bij het ontwerpen van hun producten. De gebruikers van het<br />
eindproduct zijn dus producenten van transmedia producten.<br />
De keuzes binnen het onderzoek zijn gebaseerd op huidige producten<br />
van Submarine, zodat er specifieke keuzes binnen het proces getest<br />
kunnen worden en knopen kunnen worden doorgehakt.<br />
De opdrachtgever<br />
De coördinator van het project is Bernhard Rieder. Bernhard is<br />
associate professor New Media aan de Universiteit van Amsterdam<br />
en medewerker bij het ‘Digital Methods Initiative’. Zijn onderzoek<br />
focust zich op het analyseren, ontwikkelen en toepassen van digitale<br />
onderzoeksmethoden. Dit past hij toe binnen geschiedenis, theorie en<br />
beleid van software en in het bijzonder binnen de rol die algoritmes<br />
spelen in ‘sociale processen’ en in ‘de productie van kennis en cultuur’<br />
(“Dhr. dr. B. (Bernhard) Rieder,” n.b.).<br />
MediaLAB (onderdeel van de Hogeschool van Amsterdam) voert gericht<br />
onderzoek uit naar innovatieve en interactieve mediatoepassingen<br />
waarbij samen wordt gewerkt met partners uit het onderwijs en het<br />
bedrijfsleven.<br />
Het team binnen het MediaLAB bestaat uit:<br />
• ● Projectcoach - Loes Bogers<br />
• ● Onderzoekers - Anne van Egmond en Sieta van Horck<br />
• ● Ontwerpers - <strong>Geert</strong> <strong>Hagelaar</strong> en <strong>Yannick</strong> <strong>Diezenberg</strong><br />
• ● Externe onderzoeker - Stefania Bercu<br />
• ● Datavisualisatie specialist - Gabriele Colombo<br />
• ● Programmeer specialist - Tamara Pinos<br />
Co-client<br />
Het bedrijf waar het product getest wordt is Submarine, een productie<br />
studio gevestigd in Amsterdam. Submarine focust zich op het realiseren<br />
van films, documentaires en transmediale producties. Het bedrijf mixt<br />
traditionele en interactieve vormen van storytelling, allen met een<br />
internationale focus. Submarine werkt samen met gerenommeerde<br />
directors en nieuw aanstormend talent die de grenzen van bewegend<br />
beeld durven op te zoeken, (“About,” n.b.).<br />
4 <strong>Transmedia</strong> <strong>Analytics</strong> - <strong>Transmedia</strong><strong>Analytics</strong>:UserEngagementandInteraction<strong>Analytics</strong>in<strong>Transmedia</strong>Naratives <strong>Geert</strong> <strong>Hagelaar</strong> & <strong>Yannick</strong> <strong>Diezenberg</strong> 5
Probleemstelling<br />
Onderzoeksvraag<br />
Mogelijke oplossing<br />
Makers van interactieve documentaires hebben tot op heden geen<br />
beschikking over analyse tools die de belangrijke problemen in hun<br />
productie uit kunnen lichten. De huidige tool die nu gebruikt wordt<br />
is Google <strong>Analytics</strong>. Deze tool geeft inzicht in gebruikers data en het<br />
presteren van websites. Deze data biedt echter niet de specifieke<br />
informatie die de basis zou kunnen vormen voor het maken van<br />
concrete veranderingen in interactieve documentaires.<br />
Men tast in het duister wanneer het gaat om het ‘falen’ dan wel het<br />
succes van een documentaire. Via Google <strong>Analytics</strong> wordt duidelijk dat<br />
gebruikers blijven of afhaken, maar worden de oorzaken daarvan niet<br />
inzichtelijk gemaakt.<br />
De onderzoeksvraag luidt dan ook als volgt:<br />
Hoe kan een verscheidenheid van user<br />
engagement data¹ worden gecombineerd en<br />
worden vertaald tot begrijpbare² en bruikbare<br />
informatie en concrete handvatten die de<br />
producers kunnen ondersteunen in het verbeteren<br />
van hun producties<br />
Door reeds beschikbare data in Google <strong>Analytics</strong> met elkaar, alsmede<br />
met handmatig geïmplementeerd data trackers te correleren zouden<br />
concrete problemen binnen de documentaire inzichtelijk kunnen<br />
worden gemaakt. De data die uit deze correlaties voortvloeit zal<br />
moeten worden gevisualiseerd om deze ook daadwerkelijk leesbaar te<br />
maken. Deze visualisaties zouden probleemspecifiek geordend in een<br />
dashboard weergegeven kunnen worden. Door dit in een dashboard<br />
te plaatsen krijgt de gebruiker de mogelijkheid om vrij door de<br />
gestructureerde informatie te navigeren en zo worden gewezen op<br />
specifieke problemen.<br />
Deelvragen<br />
Om achter te komen wat begrijpbare informatie en concrete handvaten<br />
zijn voor de gebruiker is deze hoofdvraag opgedeeld in de volgende<br />
deelvragen:<br />
1) Wat is de definitie van user engagement als het gaat om interactieve<br />
documentaires<br />
2) Welke feedback hebben producers van interactieve documentaires<br />
nodig om hun producties te kunnen verbeteren Ofwel: “Wat is<br />
‘gewenste feedback’ voor producers van interactieve documentaires”<br />
3) Hoe kunnen de correlaties, die de juiste feedback genereren, op een<br />
begrijpelijke en inzichtelijke manier worden gevisualiseerd<br />
¹user engagement data: data die wordt gegenereerd wanneer gebruikers interacteren met de documentaire.<br />
²begrijpbare: de vertaling van de data moet in een oogopslag duidelijk zijn voor de producers.<br />
6 <strong>Transmedia</strong> <strong>Analytics</strong> - Probleemstelling <strong>Geert</strong> <strong>Hagelaar</strong> & <strong>Yannick</strong> <strong>Diezenberg</strong> 7
Vaktermen<br />
Binnen dit verslag zullen een aantal vak-specifieke termen worden<br />
gebruikt. Deze zullen in dit gedeelte worden toegelicht om verwarring<br />
over hun context te voorkomen.<br />
Google <strong>Analytics</strong><br />
Google <strong>Analytics</strong> is een rapportageplatform dat statistieken weergeeft<br />
over het gebruik van een website en focust zich daarbij niet op<br />
specifieke typen websites. De inzichten die Google <strong>Analytics</strong> geeft<br />
zijn gecategoriseerd in ‘gedrag’, ‘acquisitie’ en ‘techniek’. Omdat de<br />
interactieve documentaires web-based zijn kunnen de statistieken over<br />
deze projecten worden gegenereerd en weergegeven binnen Google<br />
<strong>Analytics</strong>.<br />
Query Explorer<br />
De Query Explorer is een gratis tool ontwikkeld door Google, waarmee<br />
ontwerpers en analisten inzicht kunnen krijgen in bepaalde analytics<br />
van je website. De tool zal de input zijn voor de uiteindelijke API. In<br />
vergelijking met Google <strong>Analytics</strong> geeft de tool de gebruiker meer<br />
mogelijkheden tot combineren van meerdere dimensies en metrics.<br />
Daarnaast kan de gebruiker data filteren en categoriseren met behulp<br />
van filters en segmenten.<br />
Link naar de tool: http://ga-dev-tools.appspot.com/explorer/<br />
Dimensie<br />
Een dimensie geeft een beschrijving of karakter aan een object<br />
dat verschillende waardes kan bevatten. Dit zijn dus elementen of<br />
categorieën waar waardes, cijfers of percentages aan gekoppeld<br />
kunnen worden. Een voorbeeld-dimensie is bijvoorbeeld land. Hieraan<br />
kun je bijvoorbeeld aantal bezoeken of gemiddelde tijd gespendeerd<br />
op de site koppelen. De waardes die hieruit voortkomen (bijvoorbeeld<br />
aantal bezoeken Nederland = 102) zeggen iets over de dimensie ‘land’.<br />
(“Core Reporting API - Reference Guide,” 2014).<br />
Voorbeeld ter illustratie:<br />
Zijn te analyseren vraag is in dit geval:<br />
“Welke kipsoort is het meest productief in het leggen van eieren”<br />
Hiervoor wil hij een analyse van twee kipsoorten.<br />
Interactieve documentaires (/web documentaire)<br />
Een online documentaireproductie waarbij de gebruiker invloed heeft<br />
op het narratief. De gebruiker kan zich vrij door het verhaal navigeren.<br />
De belangrijkste eigenschap van een interactieve documentaire is<br />
de non-lineaire afspeelvolgorde van het verhaal. De positie van de<br />
gebruiker wordt verplaatst van passief naar actieve betrokkenheid van<br />
de gebruiker (Nash, 2012).<br />
Afbeelding 2<br />
kipsoort is hier de dimensie en de waardes die hierbij horen zijn witkip<br />
en spikkelkip.<br />
API (Application Programming Interface)<br />
Een verzameling van definities op basis waarvan een<br />
computerprogramma kan communiceren met een ander programma<br />
of onderdeel van een programma. (“Application programming<br />
interface,” n.d.).<br />
Afbeelding 1<br />
Hendrik is kippenboer en wil investeren in kippen om zijn omzet in<br />
eiren verkoop te vergroten. Hiervoor laat hij een analyse uitvoeren op<br />
kipsoorten om zo gericht mogelijk te investeren.<br />
8 <strong>Transmedia</strong> <strong>Analytics</strong> - Vaktermen <strong>Geert</strong> <strong>Hagelaar</strong> & <strong>Yannick</strong> <strong>Diezenberg</strong> 9
Metrics<br />
Metrics zijn individuele elementen van een dimensie die gemeten<br />
kunnen worden als een som of ratio. Dit zijn in altijd getallen of<br />
percentages. Bijvoorbeeld aantal bezoeken of gemiddelde tijd gespendeerd<br />
op de site. (“Core Reporting API - Reference Guide,” 2014).<br />
Vervolg voorbeeld:<br />
Hendrik wil inzicht in bepaalde specificaties van de twee kipsoorten.<br />
Dit zijn het aantal eieren en de gemiddelde grootte eieren.<br />
Correlatie<br />
Een correlatie is een combinatie van (meerdere) dimensies en<br />
(meerdere) metrics die inzicht geeft in de samenhang tussen deze<br />
elementen.<br />
Vervolg voorbeeld:<br />
Bounce<br />
Een bezoek aan een website waarbij de gebruiker de website heeft<br />
verlaten zonder dat er een interactie heeft plaats gevonden.<br />
Bounceratio<br />
Het percentage van bezoeken waarbij maar een pagina is bekeken in<br />
verhouding tot het totaal aantal bezoeken.<br />
Drop-offs<br />
De pagina waar de bezoeker vertrekt van de website.<br />
Dummy data<br />
Dummy data is realistische maar fictieve data die wordt gebruikt bij het<br />
visualisatieproces wanneer er nog geen echte data gegenereerd wordt.<br />
Attentiepunt<br />
Een markering binnen een visualisatie die een eventueel probleem<br />
uitlicht. De aandacht van de gebruiker wordt direct getrokken naar dit<br />
attentiepunt. Een voorbeeld is een rode rode balk tussen neutrale balk<br />
binnen een staafdiagram.<br />
Projectbacklog<br />
De project backlog kan worden gezien als de houvast van het project.<br />
Hierin zijn alle vooraf opgestelde randvoorwaarden en eisen voor het<br />
eindproduct opgenomen. Specifieke keuzes binnen het project kunnen<br />
aan de hand van dit overzicht worden onderbouwd.<br />
Afbeelding 3<br />
aantal eieren en gemiddelde grootte eieren zijn hier de te onderzoeken<br />
metrics van de dimensie kipsoort. De waardes van deze metrics zijn<br />
getallen (in dit geval een aantal en een lengte).<br />
Afbeelding 4<br />
Hier is de dimensie kipsoort met de metrics aantal eieren en gemiddelde<br />
grootte eieren gecombineerd in een correlatie. Per waarde van de<br />
dimensie kipsoort worden resultaten gegenereerd over de twee metrics.<br />
Autoselect modus (Last Hijack)<br />
Binnen de documentaire Last Hijack heeft de gebruiker de mogelijkheid<br />
om tussen twee modi te kiezen. Binnen de ‘autoplay’ modus spelen de<br />
video’s automatisch na elkaar af. Dat wil zeggen dat als een video is<br />
afgelopen automatisch de volgende video begint te spelen. In andere<br />
woorden: het videopad via waar het verhaal zich ontvouwt is door de<br />
ontwerpers van de documentaire van te voren bepaald. Als de autoselect<br />
modus uit staat dient de gebruiker handmatig tussen video’s te kiezen;<br />
de gebruiker kiest zelf op welke manier hij door het verhaal navigeert.<br />
10 <strong>Transmedia</strong> <strong>Analytics</strong> - Vaktermen <strong>Geert</strong> <strong>Hagelaar</strong> & <strong>Yannick</strong> <strong>Diezenberg</strong> 11
Test Cases<br />
Beschrijving Unspeak<br />
Het prototype van de analysetool is op twee projecten van Submarine<br />
gebaseerd. Namelijk Unspeak (2013) en Last Hijack (2014). Het project<br />
is van start gegaan met het analyseren van Unspeak vanwege de<br />
uitgestelde lancering van Last Hijack.<br />
De inzichten en resultaten uit het analyseproces van Unspeak zullen de<br />
basis vormen voor het analyseren van Last Hijack. Hoewel de inzichten<br />
vanuit de Unspeak toepasbaar zullen zijn op meerdere documentaires.<br />
Toch zal slechts een klein deel daarvan mogelijk toepasbaar zijn op<br />
Last Hijack vanwege de geheel andersoortige interface van dit project<br />
(zie beschrijving testcases). De analyse met realisatie van correlaties en<br />
visualisaties van Last Hijack zal daardoor erg project specifiek zijn.<br />
Link naar Unspeak: http://unspeak.submarinechannel.com/<br />
Link naar Last Hijack: http://lasthijack.nrc.nl/<br />
Het onderwerp van Unspeak<br />
In ‘Unspeak’ (2013) – een term geïntroduceerd door journalist<br />
Steven Pool in zijn gelijknamige boek- staat de manipulatieve kracht<br />
van taal centraal. Meer specifiek ‘unspeakable’ termen die (vooral)<br />
door via de media worden geconstrueerd. Via footage, quotes, korte<br />
films en datavisualisaties en een participatief woordenboek worden<br />
verschillende termen aan de kaak gesteld en besproken op wie zij effect<br />
hebben, wie ze fabriceert (en de rol van media daarin) en handvatten<br />
geboden om ze te neutraliseren (Submarine).<br />
De structuur van Unspeak<br />
Qua vorm kan Unspeak vergeleken worden met een ‘gewone’ website.<br />
Het project bestaat uit losstaande pagina’s die als geheel weinig tot<br />
geen narratief bevatten. De beginpagina laat een interface zien waarbij<br />
een keuze kan worden gemaakt tussen het bekijken van een aflevering<br />
of een data visualisaties of het toevoegen en/of bekijken van een<br />
soort woordenboek. De gebruiker van de documentaire is echter niet<br />
verplicht om dit in een bepaalde volgorde te doen. Hij kan de informatie<br />
in volgorde naar keuze tot zich nemen. Zo kan hij er dus ook voor<br />
kiezen om te starten met het bekijken van de laatste aflevering.<br />
Het meest opvallende interactieve element binnen deze interactieve<br />
documentaire is het aan het woordenboek toevoegen van woorden die<br />
tijdens de afleveringen aan bod komen. Het verhaal van Unspeak richt<br />
zich dan ook op de manipulatieve kracht van taal; op woorden die door<br />
de grote massa worden gehoord en voor lief worden aangenomen,<br />
maar waarvan de betekenis onduidelijk blijft.<br />
Waarom Unspeak<br />
Aan de hand van het project Unspeak zijn correlaties uitgetest. Zoals<br />
hierboven besproken[ bevat Unspeak een wat ‘standaard’ interface<br />
die te vergelijken is met die van een reguliere website. Hierdoor<br />
kunnen correlaties opgesteld worden die toepasbaar zouden kunnen<br />
zijn op meerdere projecten. Daarnaast is de analyse van het project<br />
ook gebruikt om de wensen van Submarine af te tasten en om<br />
discussiepunten te identificeren omtrent interpretatie van data.<br />
Afbeelding 6<br />
Afbeelding 5. Abstract overzicht van de structuur van Unspeak: Een homepage waar de gebruiker vrijuit kan<br />
kiezen waar hij wil beginnen. Er is weinig tot geen narratief waardoor de individuele pagina’s weinig samenhang<br />
hebben.<br />
12 <strong>Transmedia</strong> <strong>Analytics</strong> - Test Cases <strong>Geert</strong> <strong>Hagelaar</strong> & <strong>Yannick</strong> <strong>Diezenberg</strong> 13
Beschrijving Last Hijack<br />
Onderzoeksmethoden<br />
Research through design<br />
Het onderwerp van Last Hijack<br />
The Last Hijack combineert film over Somalische piraterij met animatie<br />
en wordt beschreven als een transmediale online ervaring waarin het<br />
verhaal over de kaping van de ‘Svitzer Karsakove’ centraal staat. De<br />
documentaire belicht het verhaal van de piraten als ook de ervaringen<br />
van de bemanning op de gekaapte boot. Daarnaast wordt de opkomst<br />
en ondergang van Somalische piraterij besproken vanuit een Westers<br />
en Somalisch perspectief. De gebruiker van de documentaire is vrij om<br />
te beslissen welke delen van het verhaal hij wil bekijken en vanaf welke<br />
kant van het verhaal (Somalisch of Westers perspectief).<br />
De structuur van Last Hijack<br />
De documentaire Last Hijack opent met een intro. Deze intro kan de<br />
gebruiker volledig afkijken of overslaan. Na deze intro opent zich een<br />
interface met een horizontale lijn met daaronder en boven cirkels<br />
geplaatst. De cirkels aan de bovenzijde representeren video’s vanaf<br />
een Somalisch perspectief op het verhaal. De cirkels aan de onderzijde<br />
representeren video’s vanuit een Westers perspectief. Na de intro<br />
begint het verhaal direct en wordt automatisch de eerste video<br />
afgespeeld. Vanaf dat moment krijgt de gebruiker van de documentaire<br />
de vrijheid om zelf door het verhaal te navigeren.<br />
Afbeelding 7. Abstract overzicht van de structuur van Las Hijack: Een homepage waar de gebruiker op beland<br />
en alle interactie plaatsvindt. Er is slechts een enkele link naar een about pagina voor achtergrondinformatie,<br />
losstaand van het narratief.<br />
Zo kan hij op het zelfde punt op de tijdlijn het verhaal dat verteld<br />
wvvrdt bekijken vanaf een ander perspectief (door een cirkel aan<br />
te klikken aan de andere zijde van de lijn). Ook kan de gebruiker er<br />
voor kiezen om al verder in het verhaal te duiken door horizontaal te<br />
navigeren naar een andere cirkel. Naast deze interactiemogelijkheid<br />
bevatten sommige video’s links naar infographics die dieper op de<br />
details ingaan.<br />
Afbeelding 8. Screenshot interface ‘Last Hijack’<br />
Waarom Last Hijack<br />
Last Hijack is uniek in de vorm van zijn interface. Dit is moeilijk te<br />
vergelijken met andere huidige interactieve documentaires en is<br />
daardoor erg vooruitstrevend. Dit vraagt om een alternatieve aanpak<br />
maar zal ook tot nieuwe inzichten leiden. Een deel van de resultaten<br />
van Unspeak zal toepasbaar zijn op Last Hijack. Dit kan worden gezien<br />
als de basis. Vanwege de unieke interface zullen specifieke onderdelen<br />
moeten worden geïdentificeerd om inzichten te kunnen krijgen.<br />
Binnen het proces zijn meerdere methoden van onderzoek toegepast.<br />
Elke methode is onderzoeksvraag-specifiek toegepast om het probleem<br />
zo gericht mogelijk te benaderen.<br />
Literatuuronderzoek<br />
proces gebruik te maken vastgestelde kennis is er een<br />
literatuuronderzoek uitgevoerd naar de onderwerpen datavisualisatie<br />
en user engagement.<br />
Het literatuuronderzoek naar data visualisatie is op de volgende<br />
onderzoeksvraag gebaseerd: “Hoe kunnen de correlaties, die bruikbare<br />
feedback genereren, inzichtelijk worden gevisualiseerd”<br />
Dit gedeelte van het onderzoek dient als heuristisch startpunt bij het<br />
ontwerpen van de visualisaties. Het vergaren van algemene kennis over<br />
het desbetreffende onderwerp kan worden gebruikt als fundament<br />
voor de verschillende iteraties.<br />
Het literatuuronderzoek over user engagement is gebaseerd op de<br />
volgende onderzoeksvraag:<br />
“Wat is de definitie van user engagement binnen interactieve documentaires”<br />
Deze twee onderzoeksvragen hadden het verduidelijken van de context<br />
als doel. Dat wil zeggen dat de basismethodiek van datavisualisatie<br />
vast staat binnen het project en dat de definitie van user engagement<br />
hier inherent aan zal zijn.<br />
Research through design is een onderzoeksmethode ontstaan binnen<br />
HCI (Human-Computer Interaction) onderzoek. Het principe van deze<br />
methode is het verkrijgen van het antwoord op een onderzoeksvraag<br />
door meerdere iteraties te maken voor een bepaald concept. Binnen<br />
een iteratie worden bewuste ontwerpkeuzes gebaseerd op bevindingen<br />
die naar boven komen tijdens het maken van het ontwerp. Research<br />
through design bevat altijd een doel; de ontwerpen moeten na het<br />
maken van een iteratie een beter antwoord geven op de vraag die<br />
beantwoord moet worden.<br />
Door deze verschillende iteraties te documenteren als resultaat op<br />
een onderzoeksvraag wordt de weg naar het antwoord op de vraag<br />
visueel inzichtelijk gemaakt. Een doel van het gebruik van deze<br />
onderzoeksmethode is het genereren van nieuwe kennis. Door vanuit<br />
een probleemstelling of onderzoeksvraag te ontwerpen kan dit doel<br />
worden gerealiseerd (Frankel & Racine, 2010).<br />
Expert interview<br />
Een expert interview is een onderzoeksmethode die gebruik maakt van<br />
kennis van een expert. Door gerichte vragen te stellen kan deze kennis<br />
zeer gericht worden toegepast op het onderzoek. Het onderzoek dat<br />
binnen dit onderzoek is gehouden is vooral gericht op het creëren van<br />
een efficiënte workflow.<br />
14 <strong>Transmedia</strong> <strong>Analytics</strong> - Test Cases <strong>Geert</strong> <strong>Hagelaar</strong> & <strong>Yannick</strong> <strong>Diezenberg</strong> 15
Visualisatietools<br />
Expert interview<br />
Probleemanalyse<br />
<strong>Transmedia</strong> <strong>Analytics</strong>: Exploring <strong>Analytics</strong><br />
In het proces van visualiseren is gebruik gemaakt van meerdere tools<br />
waartussen een groot verschil is in mogelijkheden tot interactief<br />
uitwerken of bewerken. De volgende tools zijn in het iteratief proces<br />
toegepast:<br />
Adobe Illustrator<br />
Adobe Illustrator bevat een graph tool waarmee je eenvoudig datasets<br />
kunt importeren en exporteren in meerdere beschikbare type<br />
grafieken, die eenvoudig kunnen worden na bewerkt.<br />
RAW<br />
RAW is een gratis online tool die je de mogelijkheid geeft datasets<br />
te testen in een visualisatie. De data is eenvoudig te importeren<br />
en biedt de mogelijkheid variabelen toe te kennen aan specifieke<br />
onderdelen binnen de grafieken. RAW biedt een overzicht van mogelijke<br />
visualisaties die als een uitbreiding zouden kunnen dienen van Adobe<br />
Illustrator.<br />
Google Fusion Tables<br />
Google Fusion Tables is een nieuwe gratis tool binnen Google waarmee<br />
je, in tegenstelling tot RAW en Adobe Illustrator, interactieve grafieken<br />
kunt generen. Het voorwerk voor deze tool vraagt meer precisie maar<br />
het resultaat is een stuk interessanter voor digitale doeleinden. Helaas<br />
zijn de mogelijkheden tot bewerken en personaliseren nog erg beperkt.<br />
Dit zal voornamelijk in code moeten gebeuren.<br />
Data-Driven Documents (d3 library)<br />
Een javascript library waamee datasets (interactief) gevisualiseerd<br />
kunnen worden. Binnen het project <strong>Transmedia</strong> <strong>Analytics</strong> wordt deze<br />
visualisatiemethode gebruikt om correlaties met behulp van livedata<br />
binnen het dashboard over te brengen naar de gebruiker. Het voordeel<br />
van d3 is de mogelijkheid om elk zichtbaar object te manipuleren.<br />
Er is gebruik gemaakt van de kennis van een expert om onderzoek te<br />
doen naar de juiste werkmethode als het gaat om data visualisatie.<br />
Voor dit onderzoek is Gabriele Colombo geïnterviewd, een specialist op<br />
het gebied van data visualisaite, graphic design en web design.<br />
Usertest<br />
Om het niveau van inzicht te test op de gebruik is er gebruik gemaak<br />
van usertesting. Dit wil zeggen dat ontworpen visualisatie aan de<br />
gebruiker is voorgelegd om zo bruikbare feedback te ontvangen.<br />
Bij het voorleggen van een visualisatie is de vraag gesteld of het<br />
probleem binnen de visualisatie kan worden herkend.<br />
Het antwoord hierop dient als indicatie of de visualisatie de benodigde<br />
inzichten geeft.<br />
Door een probleemanalyse uit te voeren, aan de hand van het<br />
voorwerk van Stefania Bercu en in samenwerking met Submarine,<br />
op de interactieve documentaire Unspeak, is er een algemeen beeld<br />
gevormd van de problemen die zichtbaar moeten worden binnen het<br />
eindprototype.<br />
Afbeelding 9<br />
Dit schema geeft weer welk deel van het productieproces geanalyseerd<br />
wordt. Dit is het proces tussen het product en de gebruiker van het<br />
product. Hierin interacteert de gebruiker met het product waardoor<br />
data gegenereerd wordt.<br />
In combinatie met de resultaten van deze probleemanalyse is er een<br />
lijst met wensen en behoeften van de gebruiker opgesteld. Samen<br />
met de randvoorwaarden en de probleemdefinitie wordt er een<br />
overzicht gevormd waar het prototype aan moet voldoen. Zowel de<br />
randvoorwaarden als de technische beperkingen en de wensen van de<br />
gebruiker maken hier onderdeel van uit.<br />
In de volgende afbeelding is het overzicht van de probleemanalyse te<br />
zien. Door een omschrijving van de opdrachtgever, het probleem, de<br />
beperkingen en de behoeften in een overzicht te zetten ontstaat er een<br />
geraamte voor het eindproduct.<br />
SUBMARINE<br />
Based in Amsterdam, Submarine produces films,<br />
documentaries, animation and transmedia.<br />
With a fresh sense of what storytelling should<br />
be they are setting new rules; mixing traditional<br />
and interactive forms, using new technologies<br />
to create visual exciting multi formats. Their<br />
international network that exists of broadcasters,<br />
distributers, publishers and filmmakers<br />
stands for renewing collaborations and coproducing<br />
innovative transmedia productions.<br />
Submarinechannel.com is one of their successful<br />
outcomes; a distribution and production<br />
platform for crossmedia productions such as<br />
short digital films, innovative online games,<br />
interactive animations, web documentaries,<br />
graphic novels and other new formats. Managed<br />
from Amsterdam and LA it is streaming authored<br />
content as well work from upcoming peer artists<br />
from all over the world. <strong>By</strong> profiling artists and<br />
reporting on digital culture submarinechannel.<br />
com puts work into perspective rather than just<br />
streaming as many videos as possible.<br />
CONSTRAINTS<br />
Because he release date of Last Hijack was<br />
changed to March 2014, we decided to do<br />
preliminary work based on another project from<br />
Submarine: Unspeak<br />
The amount of data we will have at our disposal<br />
is dependent on the amount actual user of<br />
Unspeak’. Right now that’s just a small number<br />
We lack demographic and geography data<br />
within GA due to to the fact that this option was<br />
enabled too late<br />
GA has set a certain threshold for these<br />
options but we can not identify what this<br />
threshold exactly is<br />
The “do not track” browsing option might<br />
produce skewed data<br />
Not all data we would like to have is available<br />
in connection with privacy issues (for example in<br />
Google <strong>Analytics</strong>)<br />
We do not have a programmer yet<br />
Afbeelding 10<br />
PROBLEM DEFINITION<br />
FINDINGS: WANTS / GA<br />
In order for Submarine to understand the<br />
SUBMARINE WANTS POSSIBLE NOT POSSIBLE<br />
navigation processes that users go through in<br />
Demographics<br />
exploring their products, they have experimented<br />
Age<br />
X<br />
with existing analytics software (Google <strong>Analytics</strong>,<br />
Sex<br />
X<br />
Quantcast, Crazy Egg) in the past. These tools<br />
Income<br />
X<br />
were only partially useful, as they target classical<br />
Country<br />
X<br />
websites rather than interactive narratives and<br />
Geography<br />
X<br />
focus mainly on visitor numbers and acquisitions,<br />
instead of the finer grained interactions with<br />
System language<br />
X<br />
narrative content the producers are interested<br />
IP localization<br />
X<br />
in. Our aim is to overcome these limitations<br />
Indepth info<br />
by building an analytics tool that is specifically<br />
Interest<br />
X<br />
designed for this type of new media object.<br />
Likes<br />
X<br />
Which captures data as well as presenting it in a<br />
Dislikes<br />
X<br />
way that is comprehensive and actionable for the<br />
Hobbies<br />
X<br />
different professionals and artists that are typically<br />
involved in a transmedia production. Both on<br />
Jobs<br />
X<br />
the level of content; correlated, and therewith<br />
Holiday plans<br />
X<br />
meaningful user data, as well on a visual level;<br />
Quality rating<br />
X<br />
data translated into effective visual formadable<br />
Social media<br />
form.<br />
Shares<br />
X<br />
Engaging<br />
X<br />
Referrals<br />
X<br />
Technology<br />
Device<br />
X<br />
Browser<br />
X<br />
Operating system<br />
X<br />
REQUIREMENTS FOR TOOLS<br />
<strong>Analytics</strong> software should be easy to implement<br />
and results easy to read<br />
A/B testing, the software should allow for<br />
comparative results for interface A vs. interface<br />
B Two visits from the same IP in 24 hours should<br />
count as two visits (GA counts them as one)<br />
Software should allow for custom-made reports<br />
to be sent by email to different departments<br />
There is a need for conceptual clarity for each<br />
of the measurements we employ (the possibility<br />
to see a clear definition when scrolling over an<br />
indicator)<br />
User questionnaires are a possibility, but they<br />
should not be disruptive of the experience of the<br />
project<br />
Heatmaps<br />
Scroll maps<br />
Plugin Social Media<br />
For gathering user information and indepth<br />
info<br />
Intervals<br />
Export (to PDF, Excel...)<br />
Dashboard interface<br />
Screen resolution<br />
X<br />
Average loadingtime each X<br />
media element<br />
Visits<br />
Number of visits<br />
X<br />
Time spent on site<br />
X<br />
Time spent on chapter X<br />
Reached chapters<br />
X<br />
Reached final chapter<br />
X<br />
Visitors flow<br />
Individual trajectory path<br />
X<br />
Pattern of navigation<br />
X<br />
away from the project<br />
Perspective change: how X<br />
often when<br />
External info sources after<br />
X<br />
leaving<br />
Project in inactive tab<br />
X<br />
Why do users leave<br />
X<br />
Bookmarked<br />
X<br />
Events<br />
X<br />
Timings<br />
X<br />
Scrollable elements<br />
X<br />
Clicking<br />
X<br />
Focus<br />
X<br />
Hovering<br />
X<br />
Visibility<br />
X<br />
by Anne van Egmond - Sieta van Horck - <strong>Geert</strong> <strong>Hagelaar</strong> - <strong>Yannick</strong> <strong>Diezenberg</strong><br />
16 <strong>Transmedia</strong> <strong>Analytics</strong> - Onderzoeksmethoden <strong>Geert</strong> <strong>Hagelaar</strong> & <strong>Yannick</strong> <strong>Diezenberg</strong> 17
De problemen die zich voor kunnen doen bij het gebruiken van<br />
de interactieve documentaire zijn ingedeeld in drie verschillende<br />
categorieën, overeenkomstig aan de indeling die binnen Google<br />
<strong>Analytics</strong> te vinden is. Namelijk uit gedrag, acquisitie en technisch.<br />
Volgens Tufte (2001, p. 74) is het essentieel om bij iedere visualisatie<br />
een vraag op kwantitatieve basis te stellen, oftewel “vergeleken<br />
met wat”. Daarom is een ieder van deze categorie verbonden aan<br />
hoofdvraag die middels de visualisaties binnen deze categorie zal<br />
worden beantwoord.<br />
Zo ligt de focus binnen de gedrag categorie op de vraag hoe gebruikers<br />
de content verkennen en wat de meeste stimulerende dan wel meest<br />
demotiverende pagina’s zijn bij het verkennen van de content. Centraal<br />
binnen de acquisitie categorie is de vraag hoe het proces van acquisitie<br />
verloopt en vanaf welke pagina’s de meeste en minste gebruikers naar<br />
de website gedreven worden. Tot slot wordt er binnen de technische<br />
categorie afgevraagd of er technische problemen bij het kijken van de<br />
documentaire kunnen worden geïdentificeerd.<br />
Gedrag<br />
Gedrag heeft voornamelijk betrekking op de inhoud van de<br />
documentaire. Door het gedrag van de gebruiker te analyseren kan<br />
er worden achterhaald op welke wijze de gebruiker meer betrokken<br />
kan worden bij de content van de video. Interesses, leeftijd en<br />
overige demografische kenmerken spelen een belangrijke rol bij de<br />
betrokkenheid van een gebruiker. Helaas kan deze data in het geval<br />
van Unspeak niet worden verzameld door Google <strong>Analytics</strong>, deze<br />
restrictie valt onder de technische beperking. Dit komt door de lage<br />
bezoekersaantallen.<br />
Als er een laag bezoekersaantal is wil dit zeggen dat er relatief weinig<br />
data kan worden nagespoord over het gebruik van de website. Wanneer<br />
deze informatie vrij zou worden gegeven zou dit persoons-specifiek<br />
achterhaald kunnen worden.<br />
De overkoepelende vraag die binnen deze categorie geacht<br />
beantwoord te worden is:<br />
Hoe verkennen gebruikers de content en wat zijn de top pagina’s voor<br />
het stimuleren of ophouden van deze verkenning<br />
Acquisitie<br />
Binnen acquisitie worden de verschillende doorververwijzingen<br />
geanalyseerd. Met een doorverwijzing wordt een externe bron waar<br />
de gebruiker vanaf zou kunnen komen bedoeld. Als voorbeeld kan<br />
door het weergeven van problemen binnen deze rubriek worden<br />
weergegeven of er goed geïnvesteerd is in een bepaalde campagne of<br />
samenwerking met externe partijen.<br />
De overkoepelende vraag die binnen deze categorie geacht<br />
beantwoord te worden is:<br />
Hoe verloopt het proces van gebruikers acquisitie en waar komen de<br />
meeste en minste gebruikers vandaan<br />
Technisch<br />
Deze categorie gaat in op de technische problemen die de ervaring<br />
van de website zouden kunnen belemmeren. De redenen voor deze<br />
belemmeringen liggen niet bij de gebruiker maar bij de technieken die<br />
gebruikt worden, zoals browser of schermresolutie.<br />
De overkoepelende vraag die binnen deze categorie geacht beantwoord<br />
te worden is:<br />
Zijn er problemen met technische aspecten van de content die er toe<br />
leiden dat gebruikers de website verlaten<br />
18 <strong>Transmedia</strong> <strong>Analytics</strong> - Probleemanalyse <strong>Geert</strong> <strong>Hagelaar</strong> & <strong>Yannick</strong> <strong>Diezenberg</strong> 19
Procesbeschrijving<br />
visualisaties Unspeak<br />
Procesbeschrijving<br />
visualisaties Last Hijack<br />
Het volgende proces heeft zich al onderzoekende ontwikkeld.<br />
Afbeelding 11<br />
1. Data documentaire<br />
Vanwege de de lancering van Unspeak in 2013 is er al een<br />
verscheidenheid aan data gegenereerd. Deze data is nog<br />
ongestructureerd en geeft geen inzichten.<br />
2. Correlaties Stefania<br />
Correlaties kunnen worden opgesteld aan de hand van vragen,<br />
geformuleerd naar de gewenste inzichten.<br />
3. Analyse correlaties<br />
De waardes worden bekeken en gecheckt op niveau van relevantie en<br />
mogelijke inzichten.<br />
Het volgende proces is na afronding van de analyse van Unspeak<br />
opgesteld. Omdat de release van Last Hijack op zich liet wachten was<br />
het noodzakelijk een andere vorm toe te passen om het proces niet stil<br />
te leggen en ervoor te zorgen dat het ontwerpproces bij binnenkomst<br />
van data direct van start te laten gaan.<br />
1. Correlaties Stefania + eigen<br />
Vanwege de uitgestelde release van Last Hijack was er nog geen data<br />
beschikbaar. Op basis van opgedane kennis omtrent correlaties tijdens<br />
de analyse van Unspeak en gewenste inzichten zijn er correlaties<br />
opgesteld.<br />
2. Opstellen Dummy data<br />
Aan de hand van de opgestelde correlaties zijn dummy datasets<br />
opgesteld met daarin realistisch mogelijke waardes van data.<br />
3. Visualisaties<br />
Aan de hand van de dummy datasets zijn visualisaties gerealiseerd.<br />
4. Revisie correlaties<br />
Wanneer nodig worden dimensies of metrics toegevoegd, weggehaald<br />
of vervangen om de vraag zo gericht mogelijk te beantwoorden.<br />
5. Visualisaties<br />
Na het opstellen van de juiste correlatie wordt gecheckt of de waardes<br />
kloppen en kan vervolgens het visualisatieproces van start gaan.<br />
Afbeelding 12<br />
4. Revisie Correlatie<br />
De visualisaties geven inzicht in relevantie en bruikbaarheid van de<br />
correlaties. Dit kan er toe leiden dat correlaties aangepast dienen te<br />
worden.<br />
5. Datasets<br />
De release van Last Hijack heeft plaatsgevonden en data wordt<br />
gegenereerd. De precieze waardes kunnen worden bekeken.<br />
6. Analyse<br />
De visualisaties worden opnieuw geanalyseerd aan de hand van de<br />
echte data. Er wordt gekeken of de echte data ook verwerkt kan<br />
worden in de (aan de hand van dummy data) vooraf gerealiseerde<br />
visualisatie en of dit de gewenste inzichten weergeeft.<br />
7. Visualisaties<br />
Aan de hand van deze analyse worden de visualisaties aangepast<br />
om een zo gericht mogelijk antwoord te formuleren op de vooraf<br />
opgestelde vragen.<br />
20 <strong>Transmedia</strong> <strong>Analytics</strong> - Procesbeschrijving <strong>Geert</strong> <strong>Hagelaar</strong> & <strong>Yannick</strong> <strong>Diezenberg</strong> 21
Resultaten<br />
Visualisatie voorbeeld<br />
Binnen dit hoofdstuk worden de ontwerpen en bijbehorende iteraties<br />
behandeld. De bevindingen en verbeteringen binnen het ontwerpproces<br />
worden gebruikt bij het beantwoorden van de eerder gestelde<br />
deelvragen:<br />
1) Wat is de definitie van user engagement als het gaat om interactieve<br />
documentaires<br />
2) Welke feedback hebben producers van interactieve documentaires<br />
nodig om hun producties te kunnen verbeteren Ofwel: “Wat is<br />
‘gewenste feedback’ voor producers van interactieve documentaires”<br />
3) Hoe kunnen de correlaties, die de juiste feedback genereren, op een<br />
begrijpelijke en inzichtelijke manier worden gevisualiseerd<br />
Het antwoord op deelvraag 1 wordt aan de hand van een<br />
literatuuronderzoek onderzocht. Uit verschillende bronnen moet blijken<br />
wat user engagement is als er gekeken wordt naar een interactieve<br />
documentaire (in dit geval Last Hijack).<br />
Het antwoord op deelvraag 2 wordt onderzocht aan de hand van<br />
correlaties. Zoals in de probleemstelling vermeld is hebben makers<br />
van interactieve documentaires tot op heden geen beschikking over<br />
analysetools die de belangrijke problemen binnen hun productie<br />
uit kunnen lichten. Aan de hand van correlaties zullen verschilende<br />
datasets gecombineerd worden tot inzichtelijke informatie. Door<br />
deze correlaties te visualiseren en vervolgens voor te leggen bij<br />
de opdrachtgever en Submarine wordt inzichtelijk gemaakt of de<br />
opgestelde correlaties de gewenste feedback bevatten.<br />
Ontwerpprincipes van Edward Tufte<br />
Bij het ontwerpen van de visualisaties zijn de volgende zes<br />
ontwerpprincipes van Tufte zoveel mogelijk toegepast:<br />
1. Vergelijkingen<br />
2. oorzakelijk verband, mechanisme, structuur en uitleg<br />
3. Multivariate statistiek<br />
4. Integratie van bewijs<br />
5. Documentatie<br />
6. Content telt het zwaarste<br />
Volgens Tufte (1990, p.322) bevat een goede visualisatie aan de<br />
hiervoor genoemde regels en elementen.<br />
Discussies bij visualisaties<br />
Er is niet alleen gekeken naar de visualisatie van de correlatie maar ook<br />
naar de betekenis achter de correlatie. Deze discussies worden gebruikt<br />
om te achterhalen in welke mate de informatie binnen het eindproduct<br />
als toepasbare kennis kan worden benut.<br />
Ter verduidelijking van het proces is het volgende voorbeeld uitgewerkt:<br />
Zoals in vaktermen besproken is Hendrik kippenboer en wil hij<br />
investeren in nieuwe kippen om zijn omzet in eiren verkoop te<br />
verhogen. Hiervoor laat hij een analyse uitvoeren op kipsoorten om zo<br />
gericht mogelijk te investeren.<br />
Zijn te analyseren vraag:<br />
“Welke kipsoort is het meest productief in het leggen van eieren”<br />
Binnen de de analsyse worden de volgende dimensies en metrics<br />
gecombineerd:<br />
Deze dimensies en metrics gecombineerd leidt tot de volgende<br />
correlatie:<br />
Afbeelding 14<br />
Deze correlatie geeft Hendirk nog geen concrete handvatten om<br />
gericht te investeren. Het aantal eieren bij de witkip is groter maar de<br />
gemiddelde grootte van de eieren van de spikkelkip is dubbel zo groot.<br />
Hij besluit het investeren in nieuwe kippen uit te stellen.<br />
Hendrik is benieuwd naar de achterliggende redenen van deze grote<br />
verschillen. Het onderzoeksteam besluit meerdere mogelijke oorzaken<br />
te analyseren.<br />
Het antwoord op deelvraag 3 wordt onderzocht aan de hand van een<br />
visualisatieproces. Tijdens dit proces worden iteraties gemaakt op<br />
ontwerpen om de opgestelde vragen, gericht op de gewenste inzichten<br />
per categorie, zo gericht mogelijk te kunnen beantwoorden. Het niveau<br />
van inzicht wordt steeds getest aan de hand van zelfevaluatie, tests of<br />
feedback van experts.<br />
Afbeelding 13<br />
22 <strong>Transmedia</strong> <strong>Analytics</strong> - Resultaten <strong>Geert</strong> <strong>Hagelaar</strong> & <strong>Yannick</strong> <strong>Diezenberg</strong> 23
Een nieuwe vraag wordt opgesteld:<br />
“Wat is de invloed van de soort dekhaan op de eieren”<br />
en de volgende dimensie wordt aan de vorige correlatie toegevoegd:<br />
Deze visualisatie zorgt voor concretere handvatten. Echter is het voor<br />
Hendrik nog steeds lastig om het aantal eieren tegen de gemiddelde<br />
grootte van de eiren op te wegen. Investeren in een specifieke dekhaan<br />
zorgt voor betere resultaten maar de verschillen tussen de haansoorten<br />
zijn voor hem lastig te vergelijken.<br />
Het onderzoeksteam besluit nog een mogelijke dimensie te<br />
onderzoeken die tot betere resultaten zou kunnen leiden. De volgende<br />
vraag wordt opgesteld:<br />
“Wat is de invloed van het type voer op de eieren”<br />
Ook dit overzicht wordt gevisualiseerd:<br />
Afbeelding 15<br />
Om deze dataset inzichtelijk te maken voor gebruiker Hendrik, wordt er<br />
een visualisatie gerealiseerd.<br />
Afbeelding 17<br />
Dit leidt tot de volgende resultaten:<br />
Afbeelding 19<br />
Deze visualisatie geeft een duidelijk verschil weer wat de invloed van<br />
het type zaad op het leggen van eieren is. Het korrelzaad geeft duidelijk<br />
een beter resultaat op het aantal eieren bij de witkip.<br />
De visualisaties geeft Hendrik concrete handvatten waardoor hij een<br />
stuk gerichter kan investeren in plaats van het direct investeren in<br />
nieuwe kippen.<br />
Afbeelding 16<br />
Afbeelding 18<br />
24 <strong>Transmedia</strong> <strong>Analytics</strong> - Resultaten <strong>Geert</strong> <strong>Hagelaar</strong> & <strong>Yannick</strong> <strong>Diezenberg</strong> 25
Resultaten<br />
Categorie 1: Gedrag<br />
Visualisatie 1 - Algemeen overzicht van het gedrag<br />
Welk probleem licht deze visualisatie uit<br />
De volgende visualisatie laat een algemeen overzicht van het gedrag<br />
van bezoekers zien. Binnen het te realiseren dashboard zorgen de pie<br />
charts voor een algemene indruk van het gebruikersgedrag.<br />
Gebruikte correlatie<br />
Uitleg visualisatie<br />
De linker pie chart geeft de gebruiker inzicht in hoeveel van de<br />
bezoekers terugkerende bezoekers zijn en dus al eerder de website<br />
hebben bezocht.<br />
De rechter pie chart laat zien hoeveel procent van de bezoekers de<br />
website na het openen direct verlaten.<br />
6458 terugkerende<br />
bezoekers<br />
7927 bounces<br />
bezoekerstype (nieuwe bezoeker / terugkerende bezoeker) | aantal bezoeken<br />
aantal bounces | aantal bezoeken<br />
De twee pie charts zijn op aanraden van Bernhard Rieder gebruikt, hij<br />
concludeert dat pie charts de duidelijkste modellen zijn om simpele<br />
verhoudingen in weer te geven.<br />
18104 bezoeken<br />
11646 nieuwe bezoekers<br />
Afbeelding Afbeelding 20 5<br />
26 <strong>Transmedia</strong> <strong>Analytics</strong><br />
Resultaten<br />
<strong>Geert</strong> <strong>Hagelaar</strong> & <strong>Yannick</strong> <strong>Diezenberg</strong> 27
Categorie 1: Gedrag<br />
Visualisatie 2 - De prestatie van een pagina<br />
UNSPEAK<br />
Twitter Frequency - UNSPEAK<br />
#1 / Words are Weapons - Episodes - UNSPEAK<br />
Welk probleem licht deze visualisatie uit<br />
Deze visualisatie laat zien hoeveel tijd gebruikers gemiddeld spenderen<br />
op een specifieke pagina. De pagina’s met een laag aantal bezoeken<br />
worden weg gelaten. De reden hiervan is dat wanneer de gemiddelde<br />
gespendeerde tijd relatief hoog is maar het aantal bezoeken erg laag<br />
is dit weinig over de prestatie van de pagina zegt. Een veelbezochte<br />
pagina met een gemiddeld lage bezoektijd is interessantnt voor de<br />
producer.<br />
Gebruikte correlatie<br />
landingspagina | gemiddelde tijd gespendeerd op de pagina | aantal bezoeken<br />
Uitleg visualisatie<br />
Op de verticale as staan landingspagina’s van de website, gerangschikt<br />
op het aantal bezoeken. Op de horizontale as zijn het aantal seconden<br />
weergegeven. De eerste/bovenste pagina in de lijst geeft in dit geval<br />
een probleem aan. Namelijk veel bezoeken maar een lage gemiddelde<br />
tijd bekeken.<br />
De onderste grijs/witte balk is een navigatieschuif waarbij de gebruiker<br />
de tijdsomvang (van de gemiddelde gespendeerde tijd) kan verkleinen<br />
of vergroten en zo in kan zoomen op de pagina’s met een lage<br />
gemiddelde bezoektijd. De waarden kunnen zo nauwkeuriger worden<br />
afgelezen.<br />
Door de gebruiker de mogelijkheid te geven om de weergave te laten<br />
manipuleren (zoomfunctie) kunnen specifieke doelen worden bereikt<br />
binnen de visualisatie, bijvoorbeeld gedetailleerde informatie zoeken<br />
over een landingspagina (Cairo, 2012).<br />
#2 / Money Talks - Episodes - UNSPEAK<br />
Twitter context - UNSPEAK<br />
Dictionary Overview - UNSPEAK<br />
#4 / Anti-Social Media - Episodes - UNSPEAK<br />
Wiki Network - UNSPEAK<br />
Google Newsmap - UNSPEAK<br />
#3 / Natural Disasters - Episodes - UNSPEAK<br />
#6 / Brave New Minds - Episodes - UNSPEAK<br />
#5 / Obamarama - Episodes - UNSPEAK<br />
Binders full of women - Dictionary Definition - UNSPEAK<br />
About - UNSPEAK<br />
Erectile Dysfunction - Dictionary Definition - UNSPEAK<br />
ADHD - Dictionary Definition - UNSPEAK<br />
Evaluatie door het projectteam<br />
Uit een gezamelijke evaluatie met het projectteam is gebleken dat de<br />
navigatiebalk waarmee ingezoomd kan worden werkt waarschijnlijk<br />
niet nauwkeurig genoeg. Er moeten alternatieve methodes worden<br />
bedacht om de gebruiker te laten zoomen.<br />
Middle class - Dictionary Definition - UNSPEAK<br />
Enhanced interrogation techniques - Dictionary Definition - UNSPEAK<br />
File sharing - Dictionary Definition - UNSPEAK<br />
Yes we can - Dictionary Definition - UNSPEAK<br />
gemiddelde tijd gespendeerd op de pagina (sec)<br />
0 5000 10000<br />
Afbeelding Afbeelding 21 5<br />
28 <strong>Transmedia</strong> <strong>Analytics</strong><br />
Resultaten<br />
<strong>Geert</strong> <strong>Hagelaar</strong> & <strong>Yannick</strong> <strong>Diezenberg</strong> 29
Categorie 1: Gedrag<br />
Eerste iteratie van visualisatie 2 - De prestatie van een pagina<br />
UNSPEAK<br />
Twitter Frequency - UNSPEAK<br />
#1 / Words are Weapons - Episodes - UNSPEAK<br />
Uitleg iteratie 1<br />
Deze iteratie bevat een aangepaste zoommethode. Dezelfde functie<br />
is in een andere interactievorm geplaatst: het aanklikken van de<br />
range waarop de gebruiker wil inzoomen (binnen het voorbeeld<br />
wordt ingezoomd naar de range van 0 tot 5000 seconden). Deze<br />
methode van inzoomen werkt nauwkeuriger dan de zoombalk uit de<br />
vorige iteratie. Deze conclusie is gebaseerd uit een usertest op een<br />
model dat een vergelijkbare zoomnavigatie bevat (http://bl.ocks.org/<br />
marufbd/7191340) en een model dat een zoom bevat door middel van<br />
klikken (http://bl.ocks.org/mbostock/2206590).<br />
#2 / Money Talks - Episodes - UNSPEAK<br />
Twitter context - UNSPEAK<br />
Dictionary Overview - UNSPEAK<br />
#4 / Anti-Social Media - Episodes - UNSPEAK<br />
Wiki Network - UNSPEAK<br />
Google Newsmap - UNSPEAK<br />
#3 / Natural Disasters - Episodes - UNSPEAK<br />
#6 / Brave New Minds - Episodes - UNSPEAK<br />
#5 / Obamarama - Episodes - UNSPEAK<br />
Binders full of women - Dictionary Definition - UNSPEAK<br />
About - UNSPEAK<br />
Erectile Dysfunction - Dictionary Definition - UNSPEAK<br />
ADHD - Dictionary Definition - UNSPEAK<br />
Middle class - Dictionary Definition - UNSPEAK<br />
Enhanced interrogation techniques - Dictionary Definition - UNSPEAK<br />
File sharing - Dictionary Definition - UNSPEAK<br />
Yes we can - Dictionary Definition - UNSPEAK<br />
gemiddelde tijd gespendeerd op de pagina (sec)<br />
0 5000 10000 15000 20000<br />
Afbeelding Afbeelding 22 5<br />
30 <strong>Transmedia</strong> <strong>Analytics</strong><br />
Resultaten<br />
<strong>Geert</strong> <strong>Hagelaar</strong> & <strong>Yannick</strong> <strong>Diezenberg</strong> 31
Categorie 1: Gedrag<br />
Tweede iteratie van visualisatie 2 - De prestatie van een pagina<br />
Top 20 Pagina titels<br />
gerangschikt naar aantal bezoeken<br />
UNSPEAK<br />
Twitter Frequency - UNSPEAK<br />
Uitleg iteratie 2<br />
Deze visualisatie bevat andere data dan voorafgaande iteraties. Dit<br />
komt door een syntaxfout in de correlatie die aan het licht kwam in de<br />
visualisatie.<br />
Bij het visualiseren van de juiste bleek dat de inzoom functie niet<br />
meer nodig was. Daarnaast zijn twee verzadigingen van grijs/blauw<br />
toegepast om de visualisatie beter leesbaar te maken en is de kleur<br />
rood toegevoegd om de problemen direct aan te duiden. Op deze<br />
manier vraagt het minder interpretatie van de gebruiker en kan hij<br />
de informatie sneller op zich nemen. Volgens Tufte (2006, p. 144) kan<br />
het uitlichten van specifieke data binnen de visualisatie ervoor zorgen<br />
dat de aandacht van de kijker op een vooraf gedefinieerd attentiepunt<br />
valt. Alhoewel Tufte over deze methode spreekt binnen het hoofdstuk<br />
over corrupte bewijspresentatie laat hij toch zien dat de ontwerper veel<br />
invloed heeft op het focus van de gebruiker.<br />
Feedback van Bernhard Rieder op de tweede iteratie<br />
Dit model geeft interessante inzichten, vooral door het highlighten van<br />
de ‘underengaged’ content. Ik denk dat het markeren van eventuele<br />
problemen veel tijd bespaard bij het interpreteren van de informatie.<br />
Daarnaast denk ik dat het goed is om een menu toe te passen waarbij<br />
er gefilterd kan worden op meerdere dimensies (zoals browsers,<br />
landen, etc.). Op deze manier stel je de gebruiker in de mogelijkheid<br />
om informatie te filteren naar segmenten waar inzicht in verkregen wil<br />
worden.<br />
Usertest Submarine op de tweede iteratie<br />
De visualisatie geeft duidelijk het probleem weer. Er wordt wel<br />
de voorkeur gegeven aan probleemzones in plaats van specifieke<br />
gemarkeerde balken die het probleem aangeven. Het aangeven van<br />
een probleempagina is projectspecifiek en dus nog niet toepasbaar<br />
binnen het prototype.<br />
#1 / Words are Weapons - Episodes - UNSPEAK<br />
#2 / Money Talks - Episodes - UNSPEAK<br />
Twitter context - UNSPEAK<br />
Dictionary Overview - UNSPEAK<br />
#4 / Anti-Social Media - Episodes - UNSPEAK<br />
Wiki Network - UNSPEAK<br />
Google Newsmap - UNSPEAK<br />
#3 / Natural Disasters - Episodes - UNSPEAK<br />
#6 / Brave New Minds - Episodes - UNSPEAK<br />
#5 / Obamarama - Episodes - UNSPEAK<br />
Binders full of women - Dictionary Definition - UNSPEAK<br />
About - UNSPEAK<br />
Erectile Dysfunction - Dictionary Definition - UNSPEAK<br />
ADHD - Dictionary Definition - UNSPEAK<br />
Middle class - Dictionary Definition - UNSPEAK<br />
Enhanced interrogation techniques - Dictionary Definition - UNSPEAK<br />
Discussie: Het aangeven van een probleem met een attentiepunt<br />
Het doel van de te ontwikkelen tool is het genereren van feedback waarmee producers<br />
van interactieve documentaires hun ontwerp -en productiemethodes kunnen verbeteren.<br />
Het aangeven van een probleemgebied binnen een visualisatiemodel zorgt ervoor dat de<br />
gebruiker in een oogopslag kan zien waar de problemen zich bevinden. Het aangeven van<br />
een probleemgebied brengt een aantal discussiepunten met zich mee; de definitie van<br />
een probleem is subjectief, gebaseerd op de doelen van de producers. Ook verschilt de<br />
definitie van een probleem tussen de visualisaties. Het vaststellen van waarden/grenzen<br />
die een mogelijk probleem aan kunnen duiden zullen waarschijnlijk op statistische wijze<br />
(volgens een formule die toepasbaar is op elk project) berekend moeten worden in het<br />
eindproduct. Afbeelding Afbeelding 23 5<br />
File sharing - Dictionary Definition - UNSPEAK<br />
Yes we can - Dictionary Definition - UNSPEAK<br />
0 50 100 150 200 250 300<br />
gemiddelde tijd gespendeerd op de pagina (sec)<br />
32 <strong>Transmedia</strong> <strong>Analytics</strong><br />
Resultaten<br />
<strong>Geert</strong> <strong>Hagelaar</strong> & <strong>Yannick</strong> <strong>Diezenberg</strong> 33
0 bounce ratio<br />
100<br />
Categorie 2: Acquisitie<br />
Visualisatie 3 - De prestaties van doorverwijzingen<br />
UNSPEAK<br />
Welk probleem licht deze visualisatie uit<br />
Per doorverwijzing (externe bron) wordt aangetoond hoeveel bezoekers<br />
het project hebben verlaten zonder dat er een interactie (een klik)<br />
heeft plaatsgevonden. Hieruit kan er worden gekeken of een bepaalde<br />
externe bronnen bezoekers aantrekken die niet betrokken zijn tot het<br />
project.<br />
Gebruikte correlatie<br />
Uitleg visualisatie<br />
Volgens Cairo (2012, p. 51) kan de boodschap die de visualisatie over<br />
moet brengen worden verstoord door het weergeven van te veel data.<br />
Op de verticale assen staan de dimensies die zijn gerangschikt op het<br />
aantal bezoekers, de top tien wordt weergegeven. Hierdoor wordt de<br />
meest relevante data weergegeven. Op de horizontale lijnen zijn cirkels<br />
gepositioneerd die een verhouding weergeeft. De verhouding loopt van<br />
laag naar hoog (links naar rechts). De grootte van de cirkels geeft de<br />
hoeveelheid bezoeken per dimensie weer.<br />
aantal<br />
bezoeken<br />
> 50% van<br />
totaal<br />
aantal<br />
bezoeken<br />
#1 / Words are Weapons - Episodes - UNSPEAK<br />
#2 / Money Talks - Episodes - UNSPEAK<br />
#4 / Anti-Social Media - Episodes - UNSPEAK<br />
#3 / Natural Disasters - Episodes - UNSPEAK<br />
bronnen | bounce ratio | aantal bezoeken per bron<br />
Feedback van Gabriele Colombo op deze visualisatie<br />
• Maak de visualisatie beter leesbaar door een grid toe te voegen<br />
• Het symbool dat aantoont dat de hoeveelheid van de bezoeken<br />
hoger ligt dan 50% van het totaal aantal gebruikers is niet duidelijk<br />
genoeg. Het zou meer op mogen vallen.<br />
• Voeg een legenda toe die aan kan tonen wat een probleem zou<br />
kunnen zijn voor de gebruiker.<br />
• Ga verder met het ontwerpen van een interactie, op deze manier<br />
zou je meer informatie kunnen laten zien.<br />
aantal<br />
bezoeken<br />
#6 / Brave New Minds - Episodes - UNSPEAK<br />
Dictionary Overview - UNSPEAK<br />
Twitter context - UNSPEAK<br />
#5 / Obamarama - Episodes - UNSPEAK<br />
Twitter Frequency - UNSPEAK<br />
About - UNSPEAK<br />
Google Newsmap - UNSPEAK<br />
Afbeelding Afbeelding 24 5<br />
34 <strong>Transmedia</strong> <strong>Analytics</strong><br />
Resultaten<br />
<strong>Geert</strong> <strong>Hagelaar</strong> & <strong>Yannick</strong> <strong>Diezenberg</strong> 35
Categorie 2: Acquisitie<br />
Eerste iteratie van visualisatie 3 - De prestaties van doorverwijzingen<br />
Ranked by visits<br />
bounce ratio<br />
0 50<br />
100<br />
Uitleg iteratie 1<br />
De tien lichte verticale lijnen die een grid vormen zorgen ervoor dat de<br />
positie van de cirkel beter af te lezen is. Tufte concludeert (2001, p. 64)<br />
dat het weergeven van een subtiel grid voor de nodige rust binnen een<br />
visualisatie zorgt, een aanwezig grid zorgt voor afleiding van de data.<br />
Er is een contrasterende kleur gebruikt om het hoge aantal gebruikers<br />
te markeren, op deze manier valt het eerder op dat de grootte van<br />
de cirkel een extra eigenschap bevat. Om de positie van de cirkel op<br />
de horizontale lijn uit te leggen is er een legenda toegevoegd die een<br />
eventueel probleem aan zou kunnen geven.<br />
De labels die verschijnen als de gebruiker over een cirkel geeft<br />
getailleerde informatie weer over de dimensie die wordt aangewezen.<br />
Feedback van Gabriele Colombo op de eerste iteratie<br />
Deze markering van het grote aantal gebruikers is beter dan die in de<br />
vorige iteratie.<br />
aantal<br />
bezoeken<br />
> 50% van<br />
totaal<br />
aantal<br />
visits<br />
/<br />
aantal<br />
bezoeken<br />
/episodes/words_are_weapons<br />
/episodes/money_talks<br />
'/main.phpx=b<br />
'/episodes/anti_social_media<br />
713 bezoeken<br />
78.7 bounce ratio<br />
'/episodes/natural_disasters<br />
'/episodes/brave_new_minds<br />
'/dictionary/<br />
'/episodes/obamarama<br />
'/about<br />
Afbeelding Afbeelding 25 5<br />
36 <strong>Transmedia</strong> <strong>Analytics</strong><br />
Resultaten<br />
<strong>Geert</strong> <strong>Hagelaar</strong> & <strong>Yannick</strong> <strong>Diezenberg</strong> 37
ounce ratio<br />
Categorie 2: Acquisitie<br />
Tweede iteratie van visualisatie 3 - De prestaties van doorverwijzingen<br />
bronnen<br />
gerangschikt naar<br />
aantal bezoeken<br />
0 50<br />
100<br />
Uitleg iteratie 2<br />
Na de eerste iteratie van dit model is er voor gekozen om het te<br />
gebruiken voor De prestatie van doorverwijzingen. De laatste feedback is<br />
meegenomen naar de volgende iteratie waarbij de dimensie paginatitels<br />
is veranderd in bronnen en de metric vertrekratio is veranderd in bounce<br />
ratio.<br />
100<br />
500<br />
>1000 bezoeken<br />
(direct)<br />
facebook.com<br />
De belangrijkste aanpassing binnen deze iteratie is de toevoeging<br />
van een attentie indicatie. Tufte (1990, p. 82) concludeert dat kleuren<br />
als labels gebruikt kunnen worden om een hoeveelheid aan te geven.<br />
Metingen worden aangegeven door kleurverandering op donkerheid.<br />
De rode achtergrondkleur geeft aan welke positie van de cirkels een<br />
positief signaal zou kunnen zijn en welke een negatief signaal. De<br />
gebruiker kan de positie van de cirkels beter interpreteren. Op deze<br />
manier is de legenda overbodig.<br />
google<br />
t.co<br />
buer<br />
player.vimeo.com<br />
699 bezoeken<br />
78.7 bounce ratio<br />
Discussie: Sortering<br />
Binnen visualisaties wordt regelmatig sortering toegepast. Dit wil zeggen dat niet<br />
simpelweg alle dimensies binnen de data worden weergegeven maar slechts de meest<br />
relevante. Doordat het bepalen van relevantie binnen data subjectief is, ontstaat er snel<br />
een discussie over de manier van sorteren. Het weergeven van een top tien van bronnen<br />
die de meeste betrokkenheid genereren is hier een concreet voorbeeld van. Door slechts<br />
een beperkt aantal segmenten te laten zien zou de illusie gewekt kunnen worden dat de<br />
bronnen die buiten de top 10 vallen minder relevant zijn dan de bronnen binnen de top<br />
tien. Binnen het project Last Hijack is nrc.nl bijvoorbeeld een hele belangrijke bron.<br />
reddit.com<br />
cwd.68design.net<br />
metafiltercom<br />
Wanneer deze bron geen hoge waardes genereert valt deze buiten de top tien. Omdat<br />
deze bron onderdeel is van een vooraf opgestelde campagne zijn de resultaten van<br />
deze bron toch relevant en dienen deze resultaten inzichtelijk te zijn. Als oplossing<br />
van dit probleem is er een functie aan het prototype toegevoegd die de gebruiker de<br />
mogelijkheid geeft om alle data binnen de correlatie te bekijken. Op deze manier blijft er<br />
geen data verborgen voor de gebruiker en zouden eventuele mis-interpretaties van de<br />
visualisatie uitgesloten kunnen worden (Bertin, 1983).<br />
Afbeelding Afbeelding 26 5<br />
unspeak.submarinechannel.com<br />
38 <strong>Transmedia</strong> <strong>Analytics</strong><br />
Resultaten<br />
<strong>Geert</strong> <strong>Hagelaar</strong> & <strong>Yannick</strong> <strong>Diezenberg</strong> 39
Categorie 3: Technisch<br />
Visualisatie 4 - De prestaties van een land en haar internetproviders<br />
aantal bezoeken<br />
Hover om weer te geven<br />
United States<br />
Netherlands<br />
United Kingdom<br />
Italy<br />
Canada<br />
Germany<br />
China<br />
France<br />
Australia<br />
Switzerland<br />
Welk probleem licht deze visualisatie uit<br />
Om er achter te komen welke internetproviders voor een technische<br />
beperking zou kunnen zorgen worden het aantal bezoeken met het<br />
aantal bounces vergeleken. Zodra een land een hoog aantal bounces<br />
bevat kan dit betekenen een of meerdere internetproviders binnen dit<br />
land technische beperkingen veroorzaakt.<br />
Uit de data analyse bleek dat het weergeven van specifieke data met<br />
betrekking tot internetproviders onoverzichtelijk zou worden. Dit komt<br />
door de lage bezoekersaantallen per internetprover en het hoge aantal<br />
internetproviders per land. Om deze reden is de probleemaantoning met<br />
behulp van bounces gebaseerd op landen.<br />
Op deze manier kan de gebruiker binnen deze visualisatie op een<br />
land klikken om een tabel met data over internetproviders binnen dit<br />
desbetreffende te zien.<br />
Gebruikte correlatie<br />
Uitleg visualisatie<br />
Deze visualisatie laat door middel van een kaart het aantal bezoeken<br />
vanuit een bepaald land zien. Deze kaart is gekoppeld aan een scatter<br />
plot die het aantal bezoeken en het aantal bounces per land laat zien.<br />
Iedere cirkel binnen de scatter plot representeert een land op de kaart,<br />
een land met een hoog aantal bezoeken gecombineerd met een hoog<br />
aantal bounces zou een probleem aan kunnen tonen. De toevoeging van<br />
de kaart zorgt voor sneller opnemen van dezelfde informatie als in de<br />
scatter plot over de dimensie landen. Met betrekking tot cartografie;<br />
grafische analyse toont aan vele male efficenter te<br />
zijn dan berekeningen. Geen andere methode voor het weergeven van<br />
statische informatie is zo effectief (Tufte, 2006).<br />
Feedback van Gabriele Colombo op deze visualisatie<br />
• Het aantal bezoekers wordt nog niet duidelijk aangetoond.<br />
• Je zou aan kunnen tonen waar het probleem zit, met kleuren<br />
bijvoorbeeld.<br />
% bounces<br />
Australia<br />
bezoeken: 134<br />
bounces: 50%<br />
Spain<br />
Brazil<br />
Portugal<br />
Poland<br />
laat alles zien...<br />
aantaal bezoeken > 50<br />
landen | aantal bezoeken | aantal bounces<br />
Afbeelding Afbeelding 27 5<br />
visits<br />
40 <strong>Transmedia</strong> <strong>Analytics</strong><br />
Resultaten<br />
<strong>Geert</strong> <strong>Hagelaar</strong> & <strong>Yannick</strong> <strong>Diezenberg</strong> 41
% bounces<br />
90<br />
aantal bezoeken > 50<br />
Categorie 3: Technisch<br />
Eerste iteratie van visualisatie 4 - De prestaties van een land en haar internetproviders<br />
75<br />
60<br />
Uitleg iteratie 1<br />
Met behulp van kleuren wordt het aantal bounces zowel op de kaart als<br />
in de scatter plot aangegeven. De landen met een rode kleur op de<br />
kaart worden gerepresenteerd door een cirkel in het rode vlak in de<br />
scatter plot. De kleurindeling binnen de scatter plot geeft een indicatie<br />
over waar een probleem zou kunnen zitten;<br />
45<br />
Australië<br />
• Een land met een hoog aantal bezoekers een een hoog aantal<br />
bounces vormt een probleem.<br />
• Een land met een hoog aantal bounces en relatief laag aantal<br />
bezoekers vormt een minder groot probleem.<br />
• Een land met een hoog aantal bezoekers en relatief laag aantal<br />
bounces vormt geen probleem.<br />
30<br />
0 750 1,500 2,250 3,000<br />
aantal bezoeken<br />
Beste scenario<br />
Australië<br />
aantal<br />
bezoeken: 134<br />
bounces: 50%<br />
Aandacht area<br />
Afbeelding Afbeelding 28 5<br />
42 <strong>Transmedia</strong> <strong>Analytics</strong><br />
Resultaten<br />
<strong>Geert</strong> <strong>Hagelaar</strong> & <strong>Yannick</strong> <strong>Diezenberg</strong> 43
Categorie 3: Technisch<br />
Visualisatie 5: De prestatie van een browser<br />
Welk probleem licht deze visualisatie uit<br />
Door te achterhalen hoeveel pagina’s gemiddeld per browser worden<br />
bekeken en dit te vergelijken met de gemiddelde tijd van deze sessies<br />
kan duidelijk worden of er specifieke browsers zijn die in tegenstelling<br />
tot andere browsers slecht presteren. Wanneer er problemen voordoen<br />
bij specifieke browsers kan deze technische beperking erg specifiek<br />
worden benaderd.<br />
Gebruikte correlatie<br />
browser | gemiddelde tijd gespendeerd op de site | gemiddeld aantal bekeken<br />
pagina’s<br />
Uitleg visualisatie<br />
In deze visualisatie wordt per browser de gemiddelde tijd gespendeerd<br />
op de site vergeleken met het gemiddeld aantal bekeken pagina’s. De<br />
positie op de horizontale as vertelt hoe lang de gebruikers gemiddeld<br />
op de site verbleven met het gebruik van een specifieke browser. De<br />
hoogte van de balk laat zien hoeveel pagina’s hierbij gemiddeld zijn<br />
bekeken. Een browser met een laag aantal pagina’s bekeken en een<br />
lage gemiddelde sessie tijd kan worden gezien als een probleem. Deze<br />
probleem browsers worden ingekaderd in een zogenaamde probleem<br />
zone.<br />
Wanneer live data wordt gebruikt zullen de maximale waardes kunnen<br />
veranderen. De verschillen in hoogte tussen de balken wordt dan<br />
groter. Een andere optie zou het vaststellen van deze grenzen door<br />
de gebruiker van het dashboard zijn. In een acquisitie zou vastgesteld<br />
kunnen worden wat de minimale waarde dient te zijn voor een goed<br />
presterende browser.<br />
gemiddeld aantal<br />
pagina’s bekeken<br />
8<br />
6<br />
Android 4 Browser<br />
gem. tijd op site 8,6 s<br />
gem. aantal pag.<br />
bekeken 1,8<br />
internet explorer<br />
2<br />
0<br />
firefox<br />
chrome<br />
200 400 600 800<br />
safari<br />
gemiddelde tijd<br />
gespendeerd op de site<br />
Laat labels zien van:<br />
Safari<br />
Safari (in-app)<br />
Chrome<br />
Android Browser<br />
Firefox<br />
Opera Mini<br />
BlackBerry<br />
Amazon Silk<br />
Internet Explorer<br />
UC Browser<br />
S40 Ovi Browser<br />
BrowserNG<br />
BlackBerry9700<br />
Afbeelding Afbeelding 29 5<br />
44 <strong>Transmedia</strong> <strong>Analytics</strong><br />
Resultaten<br />
<strong>Geert</strong> <strong>Hagelaar</strong> & <strong>Yannick</strong> <strong>Diezenberg</strong> 45
Laat labels zien van:<br />
Chrome<br />
Categorie 3: Technisch<br />
Eerste iteratie van visualisatie 5: De prestatie van een browser<br />
Uitleg iteratie 1<br />
In een feedbackmoment met Stefania Bercu werd duidelijk dat er<br />
een fout was gemaakt bij het herleiden van de data uit de tool Query<br />
Explorer. Dit inzicht werd verkregen wanneer de visualisatie wel een erg<br />
onrealistisch positief verband genereerde. Tijdens het verwerken van<br />
de juiste data in dezelfde visualisatie werd bevestigd dat de visualisatie<br />
ook grotendeels hetzelfde kon blijven voor andere data. Het weergeven<br />
van probleem browsers is in deze visualisatie vervangen door een<br />
markering. Op deze manier hoeven de grenzen van het probleem niet<br />
decimaal specifiek bepaald te worden en worden probleembrowsers<br />
individueel gemarkeerd als een probleem en niet als een geheel<br />
ingekaderd.<br />
Usertest met Submarine op deze visualisatie<br />
Ondanks dat de lage waardes erg klein worden weergegeven door een<br />
enkele goed presterende browser geeft dit wel direct inzicht in het<br />
verschil tussen de prestaties. Door de browsers met laagste waardes<br />
rood te maken vallen deze direct op. Wederom kan er niet specifiek<br />
worden gezegd wat nou precies het probleem is, deze grenzen moeten<br />
nog bepaald worden.<br />
gemiddeld aantal<br />
pagina’s bekeken<br />
per bezoek<br />
21<br />
16<br />
Chrome<br />
Safari<br />
Firefox<br />
Internet Explorer<br />
Safari (in-app)<br />
Android Browser<br />
Opera<br />
Maxthon<br />
Mozilla<br />
Opera Mini<br />
Mozilla Compatible Agent<br />
BlackBerry<br />
11<br />
Firefox<br />
6<br />
gem. tijd op site: 261,7 s<br />
Firefoxgem. aantal pag<br />
bekeken: 35%<br />
0<br />
750 1500 2250 3000<br />
gemiddelde tijd gespendeerd<br />
op de site<br />
Afbeelding Afbeelding 30 5<br />
46 <strong>Transmedia</strong> <strong>Analytics</strong><br />
Resultaten<br />
<strong>Geert</strong> <strong>Hagelaar</strong> & <strong>Yannick</strong> <strong>Diezenberg</strong> 47
Afronding Unspeak<br />
Visualisaties: Last Hijack<br />
Het analyseproces van Unspeak kan gezien worden als een test-case/<br />
voorbereiding op de analyse van Last Hijack. Zoals besproken is de<br />
structuur van Unspeak vergelijkbaar met die van reguliere websites. De<br />
correlaties visualisaties zullen hierdoor op een groot aantal interactieve<br />
documentaires toepasbaar zijn.<br />
Vanwege de release van Last Hijack, die een alternatieve benadering<br />
vraagt door zijn alternatieve structuur, is besloten de resultaten van<br />
Unspeak te documenteren en van start te gaan met het analyseren van<br />
Last Hijack.<br />
De verworven kennis uit Unspeak wordt gebruikt als input voor het<br />
verdere analyseproces.<br />
Voor het uiteindelijke visualiseren is een stylesheet opgesteld. Door het<br />
toepassen van steeds dezelfde stijlelementen ontstaat er consistente<br />
vormgeving van het uiteindelijke eindproduct waar alle visualisaties<br />
gebundeld zullen worden. Binnen het proces van Unspeak is ook<br />
rekening gehouden met consistentie in vorm en kleuren.<br />
Echter kwam tijdens het starten met visualiseren pas aan bod dat<br />
het opstellen van concrete afspraken hiervoor het proces erg kan<br />
versnellen. Aan de start van het tweede ontwepproces, voor Last Hijack,<br />
zijn deze afspraken op voorhand opgesteld in een stylesheet. Tijdens<br />
het ontwerpen is nog een kleine veranderingen aangebracht om het<br />
contrast tussen de baisskleuren wat te vergroten. Zo functioneert het<br />
pallet op elk mogelijk beeldscherm.<br />
Om onderscheid te creëren tussen verschillende elementen zijn kleuren<br />
met een bepaald niveau in contrast noodzakelijk. Hiervoor zijn vier<br />
basiskleuren opgesteld, die eenvoudig van elkaar zijn te onderscheiden.<br />
Sommige visualisaties hebben een kleur of ander element nodig om<br />
een probleemgebied aan te geven. Hiervoor is de stereotype kleur voor<br />
probleem en gevaar toegepast; rood. Deze kleur rood is afgestemd op<br />
de tinten van de vier basiskleuren. Hoe zwaarder het probleem, hoe<br />
harder de kleur rood. Naast dit element vragen sommige visualisaties<br />
om een element dat aandachtspunten kan highlighten. Hiervoor is<br />
een opvallende, heldere kleur gekozen met een erg hoge saturatie<br />
in vergelijking met de zachte saturatie van de basiskleuren. Op deze<br />
manier wordt de focus van de gebruiker hier naartoe verlengd.<br />
#FFE009<br />
highlight<br />
#EEE8D6 #E9B690 #57B7B9 #9BA3B1<br />
#D4CFC0 #D0A482 #4EA4A5 #8A919D<br />
#B9B5A8 #B58F72 #448F90 #777E88<br />
#D37974<br />
probleem<br />
Volledig bekeken<br />
40%<br />
15%<br />
Overgeslagen<br />
442<br />
FONT<br />
FONT KLEUR<br />
Gudea<br />
#5D686E<br />
LABEL FONT GROOTTE 14 pt<br />
% FONT GROOTTE 18 pt<br />
DIKTE SCHEIDINGSLIJN 3 pt<br />
SCHEIDINGSLIJN KLEUR #FFFFFF<br />
45%<br />
DIKTE OMLIJNING<br />
OMLIJNING KLEUR<br />
TEXT GROOTTE<br />
TITLE GROOTTE<br />
1 pt<br />
#5D686E<br />
14 pt<br />
18 pt BOLD<br />
lijnen<br />
grid<br />
Total sessions = 2947<br />
Weggegaan van<br />
de site<br />
aantal bezoeken<br />
Afbeelding 31<br />
48 <strong>Transmedia</strong> <strong>Analytics</strong> - Resultaten <strong>Geert</strong> <strong>Hagelaar</strong> & <strong>Yannick</strong> <strong>Diezenberg</strong> 49
ontworpen door <strong>Geert</strong> <strong>Hagelaar</strong><br />
Categorie 1: Gedrag<br />
Visualisatie 6 - De introstatus<br />
Overgeslagen<br />
Welk probleem licht deze visualisatie uit<br />
De ratio is een belangrijke metric binnen de correlaties die betrekking<br />
hebben op de interactieve documentaire Unspeak. Helaas is het door<br />
de structuur van het project The Last Hijack niet mogelijk om een<br />
bounce ratio te ontdekken op deze website. De oorzaak hiervan is het feit<br />
dat The Last Hijack uit één webpagina bestaat hierdoor kan de definitie<br />
van een een bounce ratio niet op dezelfde manier gebruikt worden als bij<br />
Unspeak.<br />
Om de intentie van de gebruiker binnen de documentaire The Last<br />
Hijack aan te geven wordt er gebruik gemaakt van een custom<br />
dimensie die de introstatus aangeeft. Dit wil zeggen dat de intro van<br />
de documentaire geanalyseerd wordt en het gedrag wordt verdeeld in<br />
een van de drie categorieën FULL (de gebruiker bekijkt de introductie<br />
helemaal), SKIPPED (de gebruiker slaat de introductiefilm binnen de<br />
volledige tijd van het intro over maar gaat wel verder naar de overige<br />
video’s) en WENT AWAY (de gebruiker verlaat de website tijdens het<br />
bekijken van het intro.<br />
Uitleg visualisatie<br />
Deze visualisatie bestaat uit een pie chart die de verhoudingen tussen<br />
de drie introstatussen weergeeft. In de meest gunstige situatie zou<br />
volledig bekeken de pie chart vullen. Bij een hover over een van de drie<br />
delen verschijnt het aantal bezoekers dat binnen dit specifieke segment<br />
valt.<br />
Gebruikte correlatie<br />
introstatus (volledig bekeken, overgeslagen of verlaten) | aantal bezoeken<br />
Volledig bekeken<br />
40%<br />
15%<br />
45%<br />
442<br />
Men zou kunnen zeggen dat het segment WENT AWAY gelijk staat aan<br />
een bounce (de gebruiker verlaat de website zonder enige interactie).<br />
Verlaten<br />
Het segment SKIPPED zou iets kunnen zeggen over de inhoud van de<br />
introductievideo, hier wordt verder op in gegaan binnen visualisatie 8.<br />
Total aantal bezoeken = 2947<br />
Binnen het dashboard dient deze visualisatie als basisinformatie voor<br />
de categorie gedrag.<br />
Afbeelding 5<br />
Afbeelding 32<br />
50 <strong>Transmedia</strong> <strong>Analytics</strong><br />
Resultaten<br />
<strong>Geert</strong> <strong>Hagelaar</strong> & <strong>Yannick</strong> <strong>Diezenberg</strong> 51
ontworpen door <strong>Geert</strong> <strong>Hagelaar</strong><br />
Categorie 1: Gedrag<br />
Eerste iteratie van visualisatie 6 - De introstatus<br />
april 17, 2014<br />
mei 14, 2014<br />
Uitleg iteratie 1<br />
Er zijn meer contrasterende kleuren gebruikt zodat de verschillende<br />
segmenten beter van elkaar te onderscheiden zijn. Hierdoor kan<br />
de gebruiker ook sneller de verdeling binnen de drie categorieën<br />
aflezen. Tufte (1990, p.88) concludeert dat door het gebruiken<br />
van contrasterende kleuren het voor de gebruiker duidelijk wordt<br />
wanneer er binnen de visualisatie verschillende categorieën worden<br />
weergegeven.<br />
Volledig bekeken<br />
40%<br />
15%<br />
Overgeslagen<br />
442<br />
Discussie: de definitie van een bounce<br />
Binnen Google <strong>Analytics</strong> staat de definitie van een bounce beschreven als een bezoek<br />
waarbij slechts één pagina wordt bekeken voordat de site wordt verlaten. Als we kijken<br />
naar de actie van de gebruiker is er geen twijfel mogelijk over de betekenis van een<br />
bounce. Maar als we naar het gedrag van de gebruiker kijken hoeft een bounce niet altijd<br />
negatief te zijn zoals door Google <strong>Analytics</strong> verondersteld wordt.<br />
Een gebruiker die een bounce genereert zou namelijk een terugkomende gebruiker<br />
kunnen zijn die frequent controleert of er nieuwe content aanwezig is. Deze gebruiker<br />
toont met zijn gedrag aan geïnteresseerd te zijn in het project terwijl dit binnen de<br />
correlaties als negatief wordt beschouwd. Dit komt voornamelijk door het feit dat het<br />
identificeren van een terugkomende gebruiker vrij beperkt is.<br />
Een concreet voorbeeld is een bezoeker die regelmatig controleert of er nieuwe content<br />
te vinden is op een bepaalde blog. Een bezoek van de blog is positief maar zodra de<br />
gebruiker ziet dat er geen nieuwe content te vinden is op de homepage zal deze de blog<br />
verlaten en wordt het bezoek geregistreerd als een bounce, die door Google <strong>Analytics</strong> als<br />
negatief wordt beschouwd.<br />
45%<br />
Totaal aantal bezoeken = 2947<br />
Verlaten<br />
De term bounce wordt in het geval van de documentaire Unspeak anders gebruikt dan bij<br />
Last Hijack. Dit komt doordat Unspeak uit meerdere pagina’s bestaat, hierdoor kan er<br />
niet er niet vanuit dezelfde methode geregistreerd worden of een bezoek een bounce is of<br />
een gewoon bezoek (“Bounce Rate,” 2014).<br />
Afbeelding 5<br />
Afbeelding 33<br />
52 <strong>Transmedia</strong> <strong>Analytics</strong><br />
Resultaten<br />
<strong>Geert</strong> <strong>Hagelaar</strong> & <strong>Yannick</strong> <strong>Diezenberg</strong> 53
laat autopilot<br />
zien<br />
ontworpen door <strong>Geert</strong> <strong>Hagelaar</strong><br />
Categorie 1: Gedrag<br />
Visualisatie 7 - Bezoekerspad<br />
aantal bezoeken<br />
aantal bezoeken voor<br />
wie dit de laatste video<br />
bekeken was<br />
aantal bezoeken die<br />
doorgaan naar een<br />
volgende video<br />
2-W-A.mp4<br />
aantal keer dat deze video als 2e<br />
video werd bekeken 46<br />
gemiddeld % bekeken van deze video 75%<br />
aantal vertrekken na deze video 0%<br />
Welk probleem licht deze visualisatie uit<br />
• Hoe vaak is een bepaalde video bekeken als 1e, 2e, etc. video.<br />
• Van welke video naar welke video verplaatsen bezoekers zich en<br />
hoeveel bezoekers nemen dit specifieke pad.<br />
• Hoe vaak was dit de laatste video bekeken als 1e, 2e, etc. video.<br />
Gebruikte correlatie<br />
1e videotitel bekeken| 2e video bekeken vanaf deze 1e video | 3e video<br />
bekeken vanaf deze 1e video | 4e, 5e, etc. | aantal keer dat deze identieke<br />
volgorde van video’s voorkomt<br />
Feedback van Gabriele Colombo op deze visualisatie<br />
Het is een erg overzichtelijk geheel doordat de interface van Last<br />
Hijack is verwerkt. Dit maakt de visualisatie wel erg specifiek voor<br />
deze documentaire, maar dat is nu ook de opdracht. De groen/<br />
blauwe cirkels binnen de rode cirkels worden door het pad uit hun<br />
vorm getrokken. Dit maakt het erg lastig om het groene/blauwe met<br />
het rode te vergelijken. De rode cirkels zijn nu omlijnt met een grijze<br />
rand, wellicht is de groen/blauwe cirkel beter te vergelijken wanneer<br />
ook deze zo een omlijning krijgt. Daarnaast is het belangrijk om in de<br />
legenda zo beknopt en begrijpelijk mogelijk teksten te verwerken. Deze<br />
informatie moet in een oogopslag interpreteerbaar zijn.<br />
Uitleg visualisatie<br />
Horizontaal is de verdeling van video’s zoals in de interface van Last<br />
Hijack weergegeven in beige balken. Op de bovenste beige kleurige<br />
balk is weergegeven hoe vaak welke video als 1e video is bekeken. De<br />
balk eronder hoeveel keer welke video als 2e video is bekeken, etc.<br />
Dit aantal is weergeven aan de hand van een cirkel met een bepaalde<br />
radius. De breedte representeert het aantal bezoeken van die video.<br />
Omdat de dataset een lijst weergeeft van paden, kan precies geteld<br />
worden hoe vaak een bepaalde combinatie binnen eerste en tweede<br />
video (en 2e en 3e, 3e en 4e, etc.) bekeken wordt. Ook is te zien<br />
wanneer bezoekers bij een bepaalde video afhaken. In het voorbeeld<br />
hieronder is te zien dat de combinatie 1e video 1-S-A.mp4 en 2e video<br />
6-1-W-B.mp4 een enkele keer is voorgekomen. Deze bezoeker is na het<br />
bekijken van 6-1-W-B.mp4 als 2e video weggegaan van de site.<br />
In de visualisatie zijn naast het ‘aantal keer bekeken per video’ ook het<br />
aantal keer dat dezelfde combinatie tussen 1e en 2e video bekeken<br />
voorkomt weergegeven door middel van blauw/groene paden tussen<br />
deze twee video’s. De rode cirkel representeert het aantal waarvoor dit<br />
‘de laatste video bekeken’ was. De breedte van deze cirkel kan worden<br />
vergeleken met de breedte van de groene binnenste cirkel dat het<br />
aantal representeert dat vertrekt naar een volgende video.<br />
Aan de hand van een hover functie krijgt de gebruiker specifieke<br />
informatie over de aangewezen video. Zoals in het voorbeeld krijgt de<br />
gebruiker gedetailleerde waardes over de desbetreffende video die als<br />
2e video bekeken is. Zo krijgt hij te zien:<br />
• het aantal keer dat deze video is bekken als 2e video<br />
• gemiddeld percentage bekeken van deze video als 2e video<br />
• het aantal vertrekken van deze video als 2e video.<br />
54 <strong>Transmedia</strong> <strong>Analytics</strong><br />
Resultaten<br />
<strong>Geert</strong> <strong>Hagelaar</strong> & <strong>Yannick</strong> <strong>Diezenberg</strong> 55<br />
Afbeelding Afbeelding 34 5<br />
1e video bekeken<br />
2e video bekeken<br />
3e video bekeken<br />
4e video bekeken<br />
5e video bekeken<br />
6e video bekeken
ontworpen door <strong>Geert</strong> <strong>Hagelaar</strong><br />
Categorie 1: Gedrag<br />
Eerste iteratie van visualisatie 7 - Bezoekerspad<br />
Uitleg iteratie 1<br />
Er is hier een cirkel toegevoegd om de breedtes van de twee<br />
overlappende kleuren beter met elkaar te kunnen vergelijken.<br />
Daarnaast is de informatie vertaalt naar concretere informatie.<br />
Verder is nog een filter toegepast. Uit een zelfanalsyse kwam het inzicht<br />
dat het dikke pad wellicht voornamelijk uit autopilot bezoekers bestaat.<br />
Door de gebruiker van de visualisatie de mogelijkheid te geven om<br />
de resultaten van de autopilot eruit te filteren krijgt de gebruiker een<br />
concreet overzicht van bezoekers die van dit voorgestelde pad afwijken.<br />
Daarnaast biedt een filtering op introstatus nog de mogelijkheid om de<br />
paden van bezoekers te vergelijken die de intro overgeslagen hebben<br />
met de bezoekers die deze volledig hebben bekeken. Dit zou inzicht<br />
kunnen geven in relevantie van de intro. “Is het bekijken van de intro<br />
nodig om de content op te kunnen nemen/begrijpen”<br />
4e video bekeken 3e video bekeken 2e video bekeken 1e video bekeken<br />
aantal vertrekken<br />
vanaf deze video<br />
aantal bezoeken<br />
die doorgaan naar<br />
een volgende<br />
aantal bezoeken<br />
beide<br />
2-W-A.mp4<br />
aantal keer deze video is bekeken als 2e<br />
video 46<br />
gemiddeld % bekeken van deze video 75%<br />
aantal vertrekken vanaf deze video 0<br />
laat resultaten<br />
auto pilot zien<br />
view visotor flow for<br />
introstate:<br />
volledig bekeken<br />
overgeslagen<br />
5e video bekeken<br />
Afbeelding Afbeelding 35 5<br />
6e video bekeken<br />
56 <strong>Transmedia</strong> <strong>Analytics</strong><br />
Resultaten<br />
<strong>Geert</strong> <strong>Hagelaar</strong> & <strong>Yannick</strong> <strong>Diezenberg</strong> 57
ontworpen door <strong>Yannick</strong> <strong>Diezenberg</strong><br />
Categorie 1: Gedrag<br />
Visualisatie 8 - Beslissingstijd binnen de introductievideo<br />
Welk probleem licht deze visualisatie uit<br />
De volgende visualisatie laat zien wanneer de gebruiker besluit de<br />
introductievideo over te slaan. Met deze informatie kan de producer<br />
zien welke fragmenten binnen de video aangepast kunnen worden om<br />
dit gedrag te veranderen.<br />
De introductievideo is een belangrijk onderdeel van de interactieve<br />
documentaire. Binnen deze video wordt uitgelegd waar de<br />
documentaire over gaat. Als deze video over wordt geslagen mist de<br />
kijker een deel van de informatie die er voor zorgt dat de content van<br />
de documentaire wordt begrepen. Niet alleen zegt het overslaan van<br />
het intro iets over de content die de gebruiker mist maar ook over de<br />
intentie van de gebruiker voor het bekijken van de documentaire.<br />
Voor deze correlatie zijn twee verschillende versies van een een<br />
visualisatie uitgewerkt, beide visualisatie bevatten dezelfde functies<br />
maar geven de informatie op verschillende manieren weer.<br />
Gebruikte correlatie<br />
Uitleg visualisatie - eerste versie<br />
In deze schets is te zien hoe het eerste idee over de visualisatie van<br />
deze correlatie eruit ziet. De visualisatie laat zien hoeveel gebruiker de<br />
introductievideo overslaan of het project verlaten binnen een specifieke<br />
seconde. Het screenshot laat het beeld op die bepaalde seconde<br />
zien, zodat de gebruiker direct weet om welke seconde binnen de<br />
introductievideo het gaat.<br />
Op de horizontale as worden de secondes van de documentaire<br />
weergegeven (in de schets bestaat de introductievideo uit 50<br />
seconden). Op de verticale as wordt het aantal bezoekers die de<br />
introductievideo overslaan of het project verlaten. Bij het combineren<br />
van deze twee waarden kan er worden gekeken welke frames een<br />
vertrek van de gebruiker veroorzaken.<br />
Volgens Tufte (2001, p. 187) kan de lange as het beste worden<br />
gebruikt voor het weergeven van de oorzaak en de korte as voor de<br />
weergave van het effect. Om deze reden staan de seconden van de<br />
introductievideo op de horizontale as en het aantal gebruikers dat<br />
vertrekt of het intro overslaan op de verticale as.<br />
Introstatus | tijd gespendeerd aan het intro<br />
Afbeelding Afbeelding 36 5<br />
58 <strong>Transmedia</strong> <strong>Analytics</strong><br />
Resultaten<br />
<strong>Geert</strong> <strong>Hagelaar</strong> & <strong>Yannick</strong> <strong>Diezenberg</strong> 59
verlaten<br />
overgeslagen<br />
ontworpen door <strong>Yannick</strong> <strong>Diezenberg</strong><br />
Categorie 1: Gedrag<br />
Eerste iteratie van visualisatie 8 - versie 1 - Beslissingstijd binnen de introductievideo<br />
Uitleg iteratie 1 - eerste versie<br />
Deze digitale uitwerking bevat een screenshot van elke seconde van de<br />
introductievideo, dit screenshot heeft een dynamische positie binnen de<br />
visualisatie. Het screenshot beweegt namelijk horizontaal mee met de<br />
aanwijzer wanneer deze over de balk hovert.<br />
Feedback van Gabriele Colombo op de eerste iteratie van versie 1<br />
• Vanaf welke waarde geeft de visualisatie een probleem (de rode<br />
balken) weer<br />
• Als de screenshots van de introductiefilm niet per seconde maar<br />
per shot worden weergegeven kan er een probleemindicator<br />
worden toegevoegd.<br />
36e seconde<br />
90 overgeslagen<br />
100<br />
80<br />
60<br />
40<br />
Afbeelding Afbeelding 37 5<br />
overgeslagen<br />
20<br />
0<br />
1 5 10 15 20 25 30 35 40 45<br />
aantal seconden<br />
60 <strong>Transmedia</strong> <strong>Analytics</strong><br />
Resultaten<br />
<strong>Geert</strong> <strong>Hagelaar</strong> & <strong>Yannick</strong> <strong>Diezenberg</strong> 61
ontworpen door <strong>Geert</strong> <strong>Hagelaar</strong><br />
Categorie 1: Gedrag<br />
Visualisatie 8 - versie 2 - Beslissingstijd binnen de introductievideo<br />
Uitlegvisualisatie - versie 2<br />
Deze schets geeft het idee van de tweede versie van de besluitingstijd<br />
visualisatie weer. Wederom geeft de horizontale as de seconden van<br />
de introductiefilm weer. Een groot verschil tussen de eerste versie en<br />
de tweede versie is de weergaven van de metric in de vorm van een<br />
gebied (area chart) in plaats van balken. Een ander significant verschil<br />
is de weergave van de fragmenten uit de introductievideo. In de tweede<br />
versie zijn de verschillende beelden die bij een bereik aan seconden<br />
horen weergegeven in shots uit een fragment.<br />
Afbeelding Afbeelding 38 5<br />
62 <strong>Transmedia</strong> <strong>Analytics</strong><br />
Resultaten<br />
<strong>Geert</strong> <strong>Hagelaar</strong> & <strong>Yannick</strong> <strong>Diezenberg</strong> 63
ontworpen door <strong>Geert</strong> <strong>Hagelaar</strong><br />
Categorie 1: Gedrag<br />
1000<br />
verlaten de site<br />
Eerste iteratie van visualisatie 8 - versie 2 - Beslissingstijd binnen de introductievideo<br />
slaan intro over<br />
Uitleg iteratie 1<br />
Dit is de eerste digitale uitwerking van deze visualisatie. Het oppervlak<br />
van het gekleurde gebied geeft de hoeveelheid bezoekers weer die de<br />
introductievideo vroegtijdig hebben verlaten.<br />
Het label dat zichtbaar is bij de piek op de 32e seconde geeft aan wat er<br />
gebeurt bij het bewegen van de aanwijzer over het vlak of de lijn in de<br />
visualisatie. Als er labels zijn gebruikt binnen de visualisatie wordt een<br />
legenda overbodig (Tufte, 2001).<br />
aantal verlaten/overgeslagen<br />
500<br />
0 10<br />
362<br />
20 30 40 50<br />
aantal<br />
seconden<br />
Afbeelding Afbeelding 39 5<br />
64 <strong>Transmedia</strong> <strong>Analytics</strong><br />
Resultaten<br />
<strong>Geert</strong> <strong>Hagelaar</strong> & <strong>Yannick</strong> <strong>Diezenberg</strong> 65
ontworpen door <strong>Geert</strong> <strong>Hagelaar</strong> & <strong>Yannick</strong> <strong>Diezenberg</strong><br />
Categorie 1: Gedrag<br />
Uiteindelijke versie visualisatie 8 - Beslissingstijd binnen de introductievideo<br />
1000<br />
verlaten<br />
intro overgeslagen<br />
april 17, 2014<br />
mei 14, 2014<br />
Uitleg visualisatie<br />
Op basis van feedback vanuit de data specialist Bernhard Rieder en<br />
data visualisatie expert Gabriele Colombo zijn de twee versies van deze<br />
visualisatie samengevoegd. Binnen deze visualisatie wordt met de rode<br />
tinten aangegeven welk gedeeltes van de introductievideo de meeste<br />
vroegtijdige vertrekken veroorzaken. Tufte zegt hier het volgende over:<br />
“Natuurlijk brengt kleur duidelijker informatie over dan alleen<br />
benamingenen, kleuren zijn een natuurlijke hoeveelheidsbepaler met<br />
perceptuele continuiteit (in verzadiging)” (Tufte, 1990).<br />
Binnen de visualisatie is deze theorie te zien in de verzadiging van de<br />
rode kleur. Een volledig verzadigd (het linkse vak binnen de visualisatie)<br />
vlak geeft een hoge hoeveelheid gebruikers aan die het intro overslaan<br />
over vertrekken.<br />
500<br />
aantal overgeslagen/verlaten<br />
0 10 20 30 40 50<br />
362<br />
aantal<br />
seconden<br />
Afbeelding Afbeelding 40 5<br />
66 <strong>Transmedia</strong> <strong>Analytics</strong><br />
Resultaten<br />
<strong>Geert</strong> <strong>Hagelaar</strong> & <strong>Yannick</strong> <strong>Diezenberg</strong> 67
ontworpen door <strong>Yannick</strong> <strong>Diezenberg</strong><br />
Video 1<br />
0% gemiddeld % bekeken<br />
50% 100%<br />
Video 2<br />
Categorie 1: Gedrag<br />
Visualisatie 9 - De populariteit van een video<br />
Video 3<br />
Video 4<br />
Video 5<br />
Video 6<br />
Video 7<br />
Welk probleem licht deze visualisatie uit<br />
Deze visualisatie kan gebruikt worden om de populariteit van een video<br />
aan te tonen, dit gebeurt aan de hand van het aantal keer dat de video<br />
is bekeken en voor hoeveel procent de video gemiddeld is bekeken.<br />
Een video presteert niet alleen goed wanneer deze vaak bekeken is,<br />
ook moet er rekening worden gehouden met het aantal speelminuten<br />
van een video. Zo presteert een video die vaak bekeken is en niet vaak<br />
volledig is afgekeken slecht.<br />
De visualisatie suggereert niet dat iedere video die een laag aantal keer<br />
is afgespeeld een probleem is. De video’s die zich in de autoselect modus<br />
bevinden worden naar verwachting vaker bekeken dan de video’s die<br />
handmatig te bekijken zijn<br />
Gebruikte correlatie<br />
videotitel | gemiddeld percentage bekeken van de video | aantal videoplays<br />
Uitleg visualisatie<br />
Er is een keuze gemaakt om de focus op de video te verduidelijken.<br />
Bij het klikken op een van de cirkels komt er een label tevoorschijn<br />
dat gedetailleerde informatie over de video laat zien. Ook wordt de<br />
as donkerder om te verduidelijken om welke video het gaat. Uit de<br />
feedback van ontwerper Gabriele Colombo is gebleken dat alleen<br />
de videotitel dik gedrukt weergeven op de verticale as niet zichtbaar<br />
genoeg is. Als er labels zijn gebruikt binnen de visualisatie wordt een<br />
legenda overbodig (Tufte, 2001).<br />
Feedback van Gabriele Colombo op deze visualisatie<br />
• Het is nog niet helemaal duidelijk welke labels bij welke lijnen<br />
horen. Dit zou je op kunnen lossen door de labels zowel aan de<br />
linkerkant als rechterkant van de lijnen te plaatsen.<br />
• Als de gebruiker over een cirkels hovert wordt de label links van<br />
de de lijn vetgedrukt weergegeven, de lijn moet ook onderscheiden<br />
worden.<br />
• Zoek naar een goede manier om de video’s te sorteren. Misschien is<br />
het interessant om de video’s op lengte te sorten om zo patronen<br />
te zien binnnen de populariteit van een video.<br />
100 bezoeken<br />
500 bezoeken<br />
2000 bezoeken<br />
Video 8<br />
Video 9<br />
Video 10<br />
Video 11<br />
Video 12<br />
Video 13<br />
Video 14<br />
Video 15<br />
Video 16<br />
Video 17<br />
Video 18<br />
Video 19<br />
Video 20<br />
Video 21<br />
Video 22<br />
Video 23<br />
Video 24<br />
Video 25<br />
Video 26<br />
Video 27<br />
Video 28<br />
Video 29<br />
Video 30<br />
Video 31<br />
Video 32<br />
Video 33<br />
Video 34<br />
1250 bezoeken<br />
36% bekeken<br />
Video 35<br />
Video 36<br />
Video 37<br />
Video 38<br />
Video 39<br />
Video 40<br />
Afbeelding Afbeelding 41 5<br />
68 <strong>Transmedia</strong> <strong>Analytics</strong><br />
Resultaten<br />
<strong>Geert</strong> <strong>Hagelaar</strong> & <strong>Yannick</strong> <strong>Diezenberg</strong> 69
ontworpen door <strong>Yannick</strong> <strong>Diezenberg</strong><br />
april 17, 2014<br />
mei 14, 2014<br />
0% gemideld % bekeken<br />
50% 100%<br />
Categorie 1: Gedrag<br />
Eerste iteratie van visualisatie 9 - De populariteit van een video<br />
Uitleg iteratie 1<br />
Er is een select-optie toegevoegd om de data over de video’s die<br />
binnen de autoselect modus staan de verbergen. Door de data over die<br />
video’s die via de autoselect zijn afgespeeld te verbergen wordt er alleen<br />
informatie weergegeven die iets zegt over de bekeken video’s door de<br />
gebruikers die actief betrokken zijn met de documentaire (in de manual<br />
mode dient de gebruiker zelf op de video’s te klikken om ze te kijken).<br />
Discussie: populariteit van een video<br />
Door de interactiviteit van de documentaire kunnen er vragen worden gesteld over de<br />
betekenis van een populaire video. Uiteraard kan de populariteit van een video worden<br />
uitgedrukt in het aantal views. Maar door de vrijheid van de gebruiker om zelf te kunnen<br />
bepalen wanneer welke video bekeken wordt is het bekeken percentage van de video ook<br />
van belang. Deze definitie is vastgesteld om de correlatie goed te kunnen documenteren. Afbeelding Afbeelding 42 5<br />
Video 1<br />
Video 2<br />
Video 3<br />
Video 4<br />
Video 5<br />
Video 6<br />
Video 7<br />
Video 8<br />
Video 9<br />
Video 10<br />
Video 11<br />
Video 12<br />
Video 13<br />
Video 14<br />
Video 15<br />
Video 16<br />
Video 17<br />
Video 18<br />
Video 19<br />
Video 20<br />
Video 21<br />
Video 22<br />
Video 23<br />
Video 24<br />
Video 25<br />
Video 26<br />
Video 27<br />
Video 28<br />
Video 29<br />
Video 30<br />
Video 31<br />
Video 32<br />
Video 33<br />
Video 34<br />
Video 35<br />
Video 36<br />
Video 37<br />
Video 38<br />
Video 39<br />
Video 40<br />
Video 15<br />
1250 bezoeken<br />
36% bekeken<br />
0% 50% 100%<br />
Autoplay<br />
Manual<br />
100 bezoeken<br />
500 bezoeken<br />
2000 bezoeken<br />
70 <strong>Transmedia</strong> <strong>Analytics</strong><br />
Resultaten<br />
<strong>Geert</strong> <strong>Hagelaar</strong> & <strong>Yannick</strong> <strong>Diezenberg</strong> 71
ontworpen door <strong>Geert</strong> <strong>Hagelaar</strong><br />
Categorie 1: Gedrag<br />
Visualisatie 10 - Voorgedefinieerde verhaallijnen versus handmatig modus en de populariteit van narratieven<br />
Autoplay<br />
The Hijack<br />
Welk probleem licht deze visualisatie uit<br />
Binnen Last Hijack kunnen mensen uit vier vooraf bepaalde narratieve<br />
paden kiezen, deze vier paden vallen binnen de autoselect modus. De<br />
producers willen graag weten welke narratieven populair zijn onder de<br />
gebruikers. Deze informatie wordt voornamelijk gebruikt om een inzicht<br />
te creëren over het gedrag van de gebruikers.<br />
Gebruikte correlaties<br />
autoselect modus | aantal bezoeken<br />
narratief | aantal bezoeken<br />
Uitleg visualisatie<br />
Bij de visualisatie van deze correlatie is er voor gekozen om de<br />
weergave van de populariteit van verschillende videopaden te<br />
combineren met het aantal bezoekers dat er voor kiest om een<br />
autoselect pad te volgen. De linker pie chart geeft weer wat de<br />
verhouding is tussen deze twee keuzes. De rechter pie chart maakt<br />
duidelijk wat de verhouding is tussen de specifieke keuzes binnen<br />
autoselect modus.<br />
Bij de combinatie van deze twee visualisatie is het belangrijk om de link<br />
tussen de autoselect modus en de narratieven goed te laten zien. In dit<br />
geval is er voor gekozen om deze link aan de hand van een kleur weer<br />
te geven (blauw staat voor manual en groen voor autoselect). Binnen het<br />
dashboard zullen deze twee gekoppeld visualisatie binnen een katern<br />
staan.<br />
Manual<br />
29%<br />
40%<br />
15%<br />
45%<br />
71%<br />
2092<br />
Autoplay<br />
Meerdere<br />
perspectieven<br />
35%<br />
30%<br />
15%<br />
20%<br />
418<br />
After the Hijack<br />
Feedback van Gabriele Colombo op deze visualisatie<br />
De link tussen het autoselect gedeelte in de linker pie chart en de<br />
narratieven moet duidelijker.<br />
Before the Hijack<br />
Totaal aantal bezoeken = 2947<br />
Totaal aantal bezoeken = 2092<br />
Afbeelding Afbeelding 43 5<br />
72 <strong>Transmedia</strong> <strong>Analytics</strong><br />
Resultaten<br />
<strong>Geert</strong> <strong>Hagelaar</strong> & <strong>Yannick</strong> <strong>Diezenberg</strong> 73
ontworpen door <strong>Geert</strong> <strong>Hagelaar</strong><br />
Categorie 1: Gedrag<br />
Eerste iteratie van visualisatie 10 - Voorgedefinieerde verhaallijnen versus handmatig modus<br />
en de populariteit van narratieven<br />
Autoplay vs. Manual<br />
april 17, 2014<br />
mei 14, 2014<br />
Narratieven<br />
The Hijack<br />
Uitleg iteratie 1<br />
Op basis van feedback vanuit ontwerper Gabriele Colombo<br />
en verschillende user tests zijn de kleuren aangepast zodat de<br />
verschillende tinten binnen de rechter pie chart beter van elkaar te<br />
onderscheiden zijn.<br />
Manual<br />
29%<br />
40%<br />
15%<br />
Meerdere<br />
Perspectieven<br />
35%<br />
15%<br />
71%<br />
20%<br />
After the Hijack<br />
45%<br />
Autoplay<br />
30%<br />
812<br />
2092<br />
Before the Hijack<br />
Totaal aantal bezoeken = 2947<br />
Totaal aantal bezoeken = 2092<br />
Afbeelding Afbeelding 44 5<br />
74 <strong>Transmedia</strong> <strong>Analytics</strong><br />
Resultaten<br />
<strong>Geert</strong> <strong>Hagelaar</strong> & <strong>Yannick</strong> <strong>Diezenberg</strong> 75
Westerse video die naar Somalische video leidt<br />
Westers<br />
top 10 Westerse video’s die leiden tot de meeste perspectief veranderingen<br />
ontworpen door <strong>Geert</strong> <strong>Hagelaar</strong><br />
Categorie 1: Gedrag<br />
Somalische video die naar Westerse video leidt<br />
video 1<br />
video 9<br />
video 21<br />
video 33<br />
video 11<br />
video 3<br />
video 22<br />
video 2<br />
video 3<br />
video 4<br />
Visualisatie 11 - Perspectiefwisseling<br />
2092<br />
Welk probleem licht deze visualisatie uit<br />
Deze correlatie is opgesteld om het gedrag van de gebruiker te<br />
analyseren. Dit wil zeggen dat we na deze analyse niet kunnen spreken<br />
van een eventueel probleem. Tijdens een discussie met het projectteam<br />
kwam naar voren dat een perspectief verandering zowel positief als<br />
negatief zou kunnen zijn. Het doel van de documentaire is namelijk<br />
de gebruiker laten zien hoe het verhaal vanuit beide perspectieven<br />
verloopt. Aan de andere kant zou een perspectiefwisseling ook een<br />
indicatie kunnen zijn voor een gebruiker die de binnen video in het<br />
huidige perspectief wil verlaten. Doordat de intentie van de gebruiker<br />
niet direct te achterhalen is met de beschikbare data worden er geen<br />
attentiepunten weergegeven.<br />
De perspectiefwisseling zijn per video te zien, het aantal<br />
perspectiefwisseling die een video genereert kan worden afgelezen uit<br />
de visualisatie.<br />
Gebruikte correlatie<br />
perspectiefwisselingen per video | aantal bezoeken<br />
Uitleg visualisatie<br />
De eerste opzet van deze visualisatie is een bar chart, de<br />
videotitels werden op de verticale as weergegeven. Het<br />
aantal perspectiefwisselingen vanaf een bepaalde video werd<br />
vertegenwoordigd door de lengte van de horizontale balken. Na het<br />
uitwerken van dit idee in de vorm van een schets kon de conclusie<br />
worden getrokken dat dit model niet het cognitief model van een<br />
perspectiefwisseling weergeeft.<br />
Om deze correlatie dichter bij het mentale model van een perspectief<br />
verandering te leggen zijn de twee perspectieven tegenover elkaar<br />
geplaatst op de horizontale as. Het Westers perspectief is aan de<br />
bovenzijde geplaatst en het Somalisch perspectief aan de onderzijde.<br />
Dit is op basis van de navigatie van de documentaire gedaan.<br />
Feedback van Gabriele Colombo op deze visualisatie<br />
• De visualisatie bevat veel witruimte zonder functie, probeer de<br />
ruimte die je gebruikt beter te benutten.<br />
• Het is beter om de labels 180 graden te draaien, dat zorgt voor<br />
betere leesbaarheid. Dit heeft te maken met de manier waarop<br />
mensen (in het Westen) lezen.<br />
Perspectief verandering<br />
video 25<br />
video 38<br />
video 10<br />
video 8<br />
video 7<br />
video 37<br />
video 31<br />
video 25<br />
video 23<br />
video 5<br />
Afbeelding Afbeelding 45 5<br />
Somalisch<br />
top 10 Somalische video’s die leiden tot de meeste perspectief veranderingen<br />
76 <strong>Transmedia</strong> <strong>Analytics</strong><br />
Resultaten<br />
<strong>Geert</strong> <strong>Hagelaar</strong> & <strong>Yannick</strong> <strong>Diezenberg</strong> 77
ontworpen door <strong>Geert</strong> <strong>Hagelaar</strong><br />
Categorie 1: Gedrag<br />
Somalische video die naar Westerse video leidt<br />
Westerse video die naar Somalische video leidt<br />
neem autopilot<br />
op pin de resultaten<br />
Eerste iteratie van visualisatie 11 - Perspectiefwisseling<br />
Somalisch<br />
top 10 Somalische video’s die leiden tot de meeste perspectief veranderingen<br />
Uitleg iteratie 1<br />
Ook zijn de kleuren aangepast om het contrast tussen de twee zijdes te<br />
verhogen.<br />
Het model is in de hoogte verkleind op basis van feedback van Gabriele<br />
Colombo en de theorie van Tufte (1983, p. 123). In het hoofdstuk<br />
Data-Ink Maximalization and Graphic Design vertelt hij dat iedere<br />
hoeveelheid inkt (bij digitale modellen iedere pixel) een betekenis/<br />
functie moet hebben om zo een heldere visualisatie te vormen.<br />
video 1<br />
2092<br />
video 9<br />
video 21<br />
video 33<br />
video 11<br />
video 3<br />
video 22<br />
video 2<br />
video 3<br />
video 4<br />
Perspectief verandering<br />
video 25<br />
video 38<br />
video 10<br />
video 8<br />
video 7<br />
video 37<br />
video 31<br />
video 25<br />
video 23<br />
video 5<br />
Westers<br />
top 10 Westerse video’s die leiden tot de meeste perspectief veranderingen<br />
Afbeelding Afbeelding 46 5<br />
78 <strong>Transmedia</strong> <strong>Analytics</strong><br />
Resultaten<br />
<strong>Geert</strong> <strong>Hagelaar</strong> & <strong>Yannick</strong> <strong>Diezenberg</strong> 79
ontworpen door <strong>Geert</strong> <strong>Hagelaar</strong><br />
Categorie 1: Gedrag<br />
Visualisatie 12 - De laatstst bekeken video<br />
Welk probleem licht deze visualisatie uit<br />
Welk probleem licht deze visualisatie uit<br />
De laatste video die bekeken is tijdens een bezoek kan worden<br />
gezien als de video die de keuze van het verlaten van de pagina heeft<br />
veroorzaakt.<br />
Uitleg visualisatie<br />
De eerste versie van deze visualisatie bestaat uit een bar chart die<br />
het aantal drop-offs per video laat zien. Om aan te geven welke video’s<br />
relatief veel drop-offs veroorzaken is er een aandachtsgebied op de<br />
achtergrond geplaatst om te suggereren dat de balken binnen de<br />
gesatureerde kleur aandacht nodig hebben.<br />
Video 1 139<br />
Video 12<br />
Video 3<br />
Video 26<br />
121<br />
108<br />
107<br />
Gebruikte correlatie<br />
Video 2<br />
100<br />
Laat bekeken video | aantal bezoeken<br />
Video 8<br />
95<br />
Video 11<br />
Video 21<br />
50<br />
50<br />
Video 34<br />
30<br />
Video 4<br />
20<br />
aantal keer als laatste video bekeken<br />
Afbeelding Afbeelding 47 5<br />
80 <strong>Transmedia</strong> <strong>Analytics</strong><br />
Resultaten<br />
<strong>Geert</strong> <strong>Hagelaar</strong> & <strong>Yannick</strong> <strong>Diezenberg</strong> 81
ontworpen door <strong>Geert</strong> <strong>Hagelaar</strong><br />
april 17, 2014<br />
mei 14, 2014<br />
Categorie 1: Gedrag<br />
Eerste iteratie van visualisatie 12 - De laatstst bekeken video<br />
Uitleg iteratie 1<br />
Na het evalueren van de eerste iteratie kon er geconcludeerd worden<br />
dat alleen het weergeven van videotitels geen patronen of problemen<br />
blootlegt. De positie van de video binnen het navigatiemenu staat<br />
namelijk in verband met het gedrag van de gebruiker. Daarom is er<br />
voor gekozen om de video’s te representeren als de video’s binnen de<br />
navigatiebalk in Last Hijack.<br />
Videotitel<br />
aantal keer bekeken:<br />
916<br />
aantal keer dat dit<br />
de laatste video bekeken is:<br />
211<br />
“Door het verbinden van bestaande kennis met de te onthouden info wordt het<br />
geheugenspoor versterkt. Dit verbinden of elaboreren treedt wel op bij<br />
congruente<br />
responsen maar niet bij incongruente” (Schouppe & De Graef, 2011, p. 155).<br />
In dit geval is de bestaande kennis de door de gebruiker ontworpen<br />
interface. Het herkennen van deze interface binnen de analyse tool zal<br />
hierdoor een congruent respons oproepen vanwege de overeenkomst<br />
in vormgeving. Dit zal het geheugenspoor versterken waardoor de<br />
visualisatie sneller geïnterpreteerd kan worden.<br />
De gebruiker ziet direct waar de aandacht op gericht moet worden.<br />
Volgens Tufte (2001, p.167) is het weergeven van meer informatie<br />
vaak beter, (toevoeging van de positie van het element) vooral als de<br />
interpretatie gestuurd moet worden door het gebrek aan data. In dit<br />
geval is het gebrek aan data de gedachte van de gebruiker achter het<br />
verlaten van het project via een bepaalde video.<br />
Afbeelding Afbeelding 48 5<br />
before The Hijack after<br />
82 <strong>Transmedia</strong> <strong>Analytics</strong><br />
Resultaten<br />
<strong>Geert</strong> <strong>Hagelaar</strong> & <strong>Yannick</strong> <strong>Diezenberg</strong> 83
ontworpen door <strong>Yannick</strong> <strong>Diezenberg</strong><br />
Categorie 1: Gedrag<br />
Visualisatie 13 - De eerste klik<br />
#textbox<br />
312 eerte clicks<br />
25 SECONDEN<br />
312 clicks / 25 seconden<br />
Welk probleem licht deze visualisatie uit<br />
Aangezien een interactieve documentaire een gebruiksvriendelijke<br />
interface nodig heeft om de ervaring zo goed mogelijk te laten verlopen<br />
is het essentieel om de navigatie te analyseren. Deze correlatie kan<br />
worden gezien als een gebruikerstest. De tijd die de kijker nodig heeft<br />
om het eerste element aan te klikken kan de producer vertellen of dit<br />
element goed gepositioneerd is.<br />
Als we het over de eerste klik hebben gaat het over het eerste element<br />
dat de gebruiker aanklikt nadat de introductievideo is afgelopen. Het<br />
klikken op het hulpscherm dat na de introductie verschijnt wordt niet<br />
als eerste klik beschouwd.<br />
Gebruikte correlatie<br />
het element waar als eerst op geklikt wordt | tijd voor de eerste klik<br />
Uitleg visualisatie<br />
Alle mogelijke eerste klikken worden als een laag over de bestaande<br />
interface weergegeven. Een informatiemodel is compleet figuratief<br />
wanneer de relatie tussen de representatie en de gebruiker volledig<br />
mimetisch is (Cairo, 2012). Op deze manier kan de gebruiker vrijwel<br />
direct zien op welke element relatief vaak de eerste klik vormen. Door<br />
de weergave van elementposities zou de producer de oorzaak van een<br />
lange tijd voor een eerste klik kunnen achterhalen.<br />
Het aantal keer dat een element een eerste klik vormt wordt door<br />
middel van kleursaturatie aangetoond. Dat wil zeggen dat de<br />
elementen die veel rood bevatten vaak als eerste worden aangeklikt.<br />
Feedback van Gabriele Colombo op de eerste iteratie<br />
Probeer ook de tweede metric (de tijd die de gebruiker gemiddeld nodig<br />
heeft voor de eerste klik) te laten zien.<br />
Afbeelding Afbeelding 49 5<br />
84 <strong>Transmedia</strong> <strong>Analytics</strong><br />
Resultaten<br />
<strong>Geert</strong> <strong>Hagelaar</strong> & <strong>Yannick</strong> <strong>Diezenberg</strong> 85
ontworpen door <strong>Yannick</strong> <strong>Diezenberg</strong><br />
Categorie 1: Gedrag<br />
Eerste iteratie van visualisatie 13 - De eerste klik<br />
#textbox<br />
312 eerste clicks<br />
25 SECONDEN<br />
Uitleg iteratie 1<br />
Om de de correlatie een combinatie van het aantal eerste klikken en<br />
de tijd die de kijker nodig heeft om deze actie uit te voeren zal deze<br />
informatie gezamenlijk binnen de visualisatie zichtbaar moeten zijn.<br />
Feedback van Gabriele Colombo op de eerste iteratie<br />
●De producer zou door de rode kleur van de bolletjes kunnen denken<br />
dat er veel problemen plaats vinden.<br />
De bar chart die aan de navigatie representatie is toegevoegd toont<br />
de tijd aan die de gebruiker gemiddeld nodig heeft om op het element<br />
te klikken. De balken die iedere mogelijke eerste klik voorstellen zijn<br />
gesorteerd op het aantal eerste klikken. Hierdoor kan de producer<br />
achterhalen welke staven binnen diagram relevanter zijn dan andere<br />
als het gaat om de gebruiksvriendelijkheid van de interface. Binnen de<br />
visualisatie is de representatie van de interface gekoppeld aan de bar<br />
chart. Dit wil zeggen dat bij het aanwijzen van een element binnen de<br />
representatie van de interface de informatie over hetzelfde element ook<br />
in het staafdiagram wordt geaccentueerd.<br />
0 20 40 60 80 100<br />
Afbeelding Afbeelding 50 5<br />
86 <strong>Transmedia</strong> <strong>Analytics</strong><br />
Resultaten<br />
<strong>Geert</strong> <strong>Hagelaar</strong> & <strong>Yannick</strong> <strong>Diezenberg</strong> 87
ontworpen door <strong>Yannick</strong> <strong>Diezenberg</strong><br />
Categorie 1: Gedrag<br />
Tweede iteratie van visualisatie 13 - De eerste klik<br />
screenshot van interface<br />
#textbox<br />
312 eerste clicks<br />
25 SECONDEN<br />
Uitleg iteratie 2<br />
Aangezien de visualisatie een representatie van de interface is<br />
en de content dynamisch (videobeeld en de verschuiving van<br />
voortgangsindicatie) is het tonen van het screenshot ter discussie<br />
gesteld. De vorming van de indeling van navigatie-elementen ontstaat<br />
door het aantal eerste klikken. Hierdoor kan geconcludeerd worden dat<br />
het screenshot overbodig wordt zodra er genoeg data over de eerste<br />
klikken is gegenereerd.<br />
Ook is de rode kleur aangepast om het suggereren van een probleem<br />
zoveel mogelijk te beperken. Ook is het bij deze visualisatie belangrijk<br />
dat de verscheidenheid aan kleuren zoveel mogelijk wordt beperkt. Een<br />
hoog bereik aan kleuren zou namelijk verwarring kunnen veroorzaken,<br />
ook wel een graphical puzzle genoemd (Tufte, 2011).<br />
Feedback van Gabriele Colombo op de tweede iteratie<br />
• De koppeling tussen de staafdiagram en de interface representatie<br />
is nog niet duidelijk. Misschien komt dit door de positie van de<br />
staafdiagram of door het model zelf.<br />
• Test met kleurgebruik binnen deze visualisatie om te kijken welke<br />
kleurtinten je het beste kunt gebruiken voor het weergeven van<br />
een waarde.<br />
• Plaats een legenda die de kleuren uitlegt.<br />
0 20 40 60 80 100<br />
Afbeelding Afbeelding 51 5<br />
88 <strong>Transmedia</strong> <strong>Analytics</strong><br />
Resultaten<br />
<strong>Geert</strong> <strong>Hagelaar</strong> & <strong>Yannick</strong> <strong>Diezenberg</strong> 89
ontworpen door <strong>Yannick</strong> <strong>Diezenberg</strong><br />
paar eerste clicks<br />
Categorie 1: Gedrag<br />
Derde iteratie van visualisatie 13 - De eerste klik<br />
312 eerste clicks / 42 seconden<br />
veel eerste clicks<br />
Uitleg iteratie 3<br />
Op basis van feedback van Gabriele Colombo is de staafdiagram<br />
vervangen door een scatter plot die beide metrics weergeeft.<br />
Ook is de data gefilterd op basis van het aantal eerste kikken. Omdat<br />
vooral de informatie over de elementen waar gebruikers vaak het<br />
eerste op klikken belangrijk is zijn de overige resultaten gefilterd<br />
binnen de scatter plot. Volgens Tufte (2001, p. 132) kan de visualisatie<br />
beter bruikbaar zijn door het veranderen van het minimum of<br />
maximum van de data. In dit geval is de top tien van de elementen<br />
waar het meest als eerste op geklikt wordt zichtbaar.<br />
Wederom zijn de twee visuele modellen aan elkaar gekoppeld. De<br />
legenda is met een kleurverloop weergegeven om zo de betekenis van<br />
het kleurverloop aan te duiden.<br />
1000<br />
800<br />
600<br />
400<br />
200<br />
0<br />
0 tijd voor eerste click (sec) 20 40 60 80 100<br />
eerste click<br />
Afbeelding 52<br />
90 <strong>Transmedia</strong> <strong>Analytics</strong><br />
Resultaten
direct<br />
direct<br />
902<br />
ontworpen door <strong>Geert</strong> <strong>Hagelaar</strong><br />
campaign<br />
Categorie 2: Acquisitie<br />
Visualisatie 14 - De prestaties van doorverwijzingen<br />
social<br />
blogs<br />
news<br />
nrc.nl<br />
Welk probleem licht deze visualisatie uit<br />
Binnen de categorie acquisitie is het voor Submarine belangrijk om<br />
te weten vanuit welke bronnen de meeste bezoekers komen. Op<br />
deze manier kunnen de investeringen in bepaalde externe bronnen<br />
geëvalueerd worden. Op dezelfde manier kan er ook gekeken worden<br />
naar eventuele toekomstige investeringen.<br />
Er zijn vier categorieën waar bezoekers vandaan kunnen komen vanuit<br />
externe bronnen: geen (de gebruiker typt zelf de URL in om op het<br />
project te komen, sociale bronnen (de gebruiker is op het project terecht<br />
gekomen via social media), doorverwijzingen (de gebruiker komt op het<br />
project terecht via doorverwijzingen die niet onder social media vallen)<br />
en niet bepaald(Google <strong>Analytics</strong> kan de doorverwijzing niet in een<br />
categorie plaatsen omdat er metadata mist).<br />
Uitleg visualisatie<br />
Het model is gebaseerd op een model uit de d3 library (http://www.<br />
brightpointinc.com/interactive/ustrade/index.htmlsource=d3js).<br />
Het geeft duidelijk de stroming vanuit verschillende externe bronnen<br />
weer. Door het label met ‘The Last Hijack’ centraal te zetten binnen de<br />
visualisatie wordt er een model weergegeven dat letterlijk een stroming<br />
weergeeft.<br />
De grootte van het oppervlak geeft weer hoe de verhoudingen tussen<br />
de bezoekersstromen eruit ziet. Een brede stroming geeft in verhouding<br />
een hoog aantal bezoekers via de desbetreffende bron weer. De<br />
omlijning en kleuren geven het verschil tussen de verschillende<br />
categorieën weer.<br />
nu.nl<br />
The Last Hijack<br />
facebook.com<br />
Gebruikte correlatie<br />
doorverwijzingen | aantal bezoeken<br />
m.facebook.com<br />
interactivenarratives.tumblr.com/<br />
twitter.com<br />
Afbeelding Afbeelding 53 5<br />
92 <strong>Transmedia</strong> <strong>Analytics</strong><br />
Resultaten<br />
<strong>Geert</strong> <strong>Hagelaar</strong> & <strong>Yannick</strong> <strong>Diezenberg</strong> 93
ontworpen door <strong>Geert</strong> <strong>Hagelaar</strong><br />
Top 3 bronnen per media categorie<br />
direct<br />
Categorie 2: Acquisitie<br />
Eerste iteratie van visualisatie 14 - De prestaties van doorverwijzingen<br />
Uitleg iteratie 1<br />
Tufte (2001, p. 69) haalt m.b.v. verschillende voorbeelden aan dat<br />
het gebruiken van de misleidende vormen voor het weergeven<br />
van verhoudingen tot misinterpretatie van de data kan leiden. Om<br />
misleiding te voorkomen is de vorm veranderd in een rechte stroming.<br />
Op deze manier zijn de oppervlakken beter met elkaar te vergelijken.<br />
Media categories<br />
none<br />
organic<br />
referral<br />
not set<br />
The Last Hijack<br />
nrc.nl<br />
avg<br />
hidemyass.com<br />
getpocket.com<br />
google<br />
facebook.com<br />
Afbeelding Afbeelding 54 5<br />
94 <strong>Transmedia</strong> <strong>Analytics</strong><br />
Resultaten<br />
<strong>Geert</strong> <strong>Hagelaar</strong> & <strong>Yannick</strong> <strong>Diezenberg</strong> 95
ontworpen door <strong>Geert</strong> <strong>Hagelaar</strong><br />
Media categories<br />
april 17, 2014<br />
Top 3 bronnen per media category<br />
mei 14, 2014<br />
Categorie 2: Acquisitie<br />
Tweede iteratie van visualisatie 14 - De prestaties van doorverwijzingen<br />
none<br />
organic<br />
referral<br />
direct<br />
982<br />
Uitleg iteratie 2<br />
De belangrijkste verandering in de derde iteratie is de vorm van de<br />
visualisatie. Om de grootte van de stromingen beter met elkaar te<br />
kunnen vergelijken zijn de randen recht gemaakt. De categorie met de<br />
grootste stroming bepaald de verhouding binnen het vierkant. Om er<br />
is gebruikt gemaakt van het gestalt om de categorieën met de kleinere<br />
stroming met de rest te kunnen vergelijken zonder deze naast elkaar te<br />
hoeven leggen. Het vierkant wordt in gedachte completeert waardoor<br />
een vergelijking mogelijk is. Binnen deze visualisatie wordt gebruik<br />
gemaakt van closure binnen het gestaltprincipe (Schouppe & De Graef,<br />
2011).<br />
Feedback<br />
Nulla vel quam in tellus lacinia ornare. Donec nec fermentum sapien,<br />
lacinia ultricies diam. Quisque cursus mattis est, eleifend ullamcorper<br />
elit facilisis sed. Aenean auctor est non dictum commodo. Aenean<br />
pretium, turpis quis porta elementum, metus nunc lobortis lectus,<br />
id semper mauris massa a metus. Cras consequat quam eget odio<br />
bibendum, sed molestie velit ullamcorper. Vivamus posuere nisl sit<br />
amet est condimentum luctus. Etiam et nibh laoreet, aliquam urna nec,<br />
scelerisque neque. Sed eget suscipit diam. Pellentesque at urna in eros<br />
consectetur blandit ac sit amet felis.<br />
not set<br />
nrc.nl<br />
462<br />
The Last Hijack<br />
571<br />
avg<br />
170<br />
google<br />
97<br />
168<br />
182<br />
Afbeelding Afbeelding 55 5<br />
hidemyass.com<br />
getpocket.com<br />
facebook.com<br />
96 <strong>Transmedia</strong> <strong>Analytics</strong><br />
Resultaten<br />
<strong>Geert</strong> <strong>Hagelaar</strong> & <strong>Yannick</strong> <strong>Diezenberg</strong> 97
ontworpen door <strong>Geert</strong> <strong>Hagelaar</strong><br />
Categorie 2: Acquisitie<br />
Visualisatie 15 - De prestaties van doorverwijzingen per introstatus<br />
overgeslagen<br />
vertrokken<br />
aantal<br />
bezoeken<br />
avg<br />
0 25 50<br />
gemiddelde tijd<br />
gespendeerd aan de<br />
intro<br />
Welk probleem licht deze visualisatie uit<br />
De introstatus (de introductievideo is volledig bekeken, overgeslagen of<br />
het project is binnen het intro verlaten) kan iets over de intentie van de<br />
gebruiker vertellen. Een gebruiker die de introductie helemaal bekijkt<br />
zal betrokken zijn bij het project. Het overslaan van de introductie of<br />
het verlaten van het project via de introductie kan als slecht worden<br />
beschouwen, de betrokkenheid van de gebruiker is niet optimaal. Een<br />
vertrek via de introductievideo kan worden gezien als een bounce.<br />
Door deze indicatie van betrokkenheid toe te passen op<br />
doorverwijzingen kan er gekeken worden naar intentie van een<br />
gebruiker die vanuit een bepaalde bron komt.<br />
Uitleg visualisatie<br />
Er is gekozen voor een staafdiagram waar twee variabelen zijn<br />
verwerkt, zowel de lengte als de breedte van de staven geven data<br />
weer. De lengte geeft de tijd die gespendeerd aan de introductievideo<br />
weer en de breedte de verhoudingen tussen verschillende introstatussen<br />
per doorverwijzing.<br />
Door de twee kleuren balken per bron tegen elkaar te plaatsen en een<br />
witruimte te creëren tussen de balken van de volgende bron, worden<br />
deze automatisch door de gebruiker gegroepeerd vanwege de nabijheid<br />
van deze twee elementen (Schouppe & De Graef, 2011).<br />
facebook.com<br />
getpocket.com<br />
google<br />
Gebruikte correlatie<br />
doorverwijzing | aantal bezoeken | introstatus<br />
hidemyass.com<br />
m.facebook.com<br />
nrc.nl<br />
spinawards.nl<br />
Afbeelding Afbeelding 56 5<br />
98 <strong>Transmedia</strong> <strong>Analytics</strong><br />
Resultaten<br />
<strong>Geert</strong> <strong>Hagelaar</strong> & <strong>Yannick</strong> <strong>Diezenberg</strong> 99
ontworpen door <strong>Geert</strong> <strong>Hagelaar</strong><br />
0 28,5 57<br />
gemiddelde tijd gespendeerd<br />
aan de intro<br />
Categorie 2: Acquisitie<br />
Eerste iteratie van visualisatie 15 - De prestaties van doorverwijzingen per introstatus<br />
avg<br />
239 bezoeken<br />
overgeslagen<br />
verlaten<br />
volledig bekeken<br />
Uitleg iteratie 1<br />
Bij de tweede iteratie is het nieuwe kleurenschema toegepast om de<br />
verschillen tussen de introstatussen duidelijker weer te geven. Ook is de<br />
introstatus ‘volledig bekeken’ toegevoegd op aanraden van Bernhard<br />
Rieder om de volledige verhouding tussen de introstatussen weer te<br />
geven.<br />
facebook.com<br />
aantal bezoeken<br />
getpocket.com<br />
google<br />
hidemyass.com<br />
m.facebook.com<br />
nrc.nl<br />
spinawards.nl<br />
Afbeelding Afbeelding 57 5<br />
100 <strong>Transmedia</strong> <strong>Analytics</strong><br />
Resultaten<br />
<strong>Geert</strong> <strong>Hagelaar</strong> & <strong>Yannick</strong> <strong>Diezenberg</strong> 101
ontworpen door <strong>Yannick</strong> <strong>Diezenberg</strong><br />
Categorie 2: Acquisitie<br />
Visualisatie 16 - De prestatie van doorverwijzingen, aangetoond met user engagement<br />
Welk probleem licht deze visualisatie uit<br />
Net als bij de vorige correlatie wordt er gekeken naar de intentie van<br />
bezoekers die vanuit een bepaalde bron komen. Deze keer wordt er<br />
gekeken naar het niveau van betrokkenheid. Het gemiddelde percentage<br />
van de bekeken content is gecombineerd met het aantal video’s<br />
dat gemiddeld bekeken is door gebruikers die vanuit een bepaalde<br />
doorverwijzing komen.<br />
Gebruikte correlatie<br />
doorverwijzingen | gemiddeld aantal bekeken video’s | gemiddeld percentage bekeken per video<br />
Uitleg visualisatie<br />
Het verhouding-hoeveelheid-model kan voor deze correlatie gebruikt<br />
worden omdat we te maken hebben met deze type metrics.<br />
Op de verticale as zijn in dit geval de top tien van bronnen (gebaseerd<br />
op de hoeveelheid bezoekers vanuit deze bronnen) gepositioneerd.<br />
De positie van de cirkels op de horizontale as geeft het gemiddelde<br />
percentage aan bekeken inhoud per bron weer en de grootte van cirkel<br />
het gemiddeld aantal bekeken video’s.<br />
Er zou gezegd kunnen worden dat een bron met een grote cirkel aan<br />
de rechter kant van de horizontale as een bron weergeeft die veel<br />
betrokken bezoekers weergeeft.<br />
bron 1<br />
bron 2<br />
bron 3<br />
bron 4<br />
bron 5<br />
bron 6<br />
bron 7<br />
april 17, 2014<br />
0% gemiddeld percentage bekeken van de content<br />
50% 100%<br />
bron 8<br />
4 videos bekeken<br />
14% bekeken<br />
mei 14, 2014<br />
level van engagement<br />
1 2 3 4<br />
5 videos bekeken<br />
15 videos bekeken<br />
bron 8<br />
bron 9<br />
30 videos bekeken<br />
bron 10<br />
0% 50% 100%<br />
Afbeelding Afbeelding 58 5<br />
102 <strong>Transmedia</strong> <strong>Analytics</strong><br />
Resultaten<br />
<strong>Geert</strong> <strong>Hagelaar</strong> & <strong>Yannick</strong> <strong>Diezenberg</strong> 103
ontworpen door <strong>Yannick</strong> <strong>Diezenberg</strong><br />
Categorie 2: Acquisitie<br />
Eerste iteratie van visualisatie 16 - De prestatie van doorverwijzingen, aangetoond met user engagement<br />
Uitleg iteratie 1<br />
De vormverandering van de cirkels is gebaseerd op de continuïteit<br />
van de visualisaties. In voorgaande visualisatie die hetzelfde model<br />
gebruiken representeren de cirkels andere dimensies, waardoor het<br />
voor de gebruiker minder makkelijk af te lezen is om welke informatie<br />
het gaat. Volgens Tufte (Tufte, 1990) is belangrijk om data te<br />
visualiseren naar de capaciteit van het menselijk brein. Dit wil zeggen<br />
dat de ontwerper gebruik moet maken van de cognitieve modellen van<br />
de mens. Continuïteit speelt hier een grote rol in, het herkennen van<br />
de cirkels uit een voorafgaande visualisatie kan ervoor zorgen dat de<br />
gebruiker een verkeerde associatie krijgt met hetzelfde visuele model<br />
dat andere informatie weergeeft. De vierkante vormen zorgen ervoor<br />
dat het model binnen deze correlatie niet wordt verward met het<br />
hetzelfde model dat gebaseerd is op een verschillende correlatie die<br />
andere dimensies bevatten.<br />
bron 1<br />
bron 2<br />
bron 3<br />
bron 4<br />
bron 5<br />
bron 6<br />
bron 7<br />
bron 8<br />
bron 9<br />
bron 10<br />
0% gemiddeld percentage bekeken van de content<br />
50% 100%<br />
bron 8<br />
4 videos bekeken<br />
14% bekeken<br />
5 video’s gemiddeld<br />
bekeken<br />
15 video’s gemiddeld<br />
bekeken<br />
30 video’s gemiddeld<br />
bekeken<br />
0% 50% 100%<br />
53% gemiddeld bekeken van de content<br />
Afbeelding Afbeelding 59 5<br />
104 <strong>Transmedia</strong> <strong>Analytics</strong><br />
Resultaten<br />
<strong>Geert</strong> <strong>Hagelaar</strong> & <strong>Yannick</strong> <strong>Diezenberg</strong> 105
Categorie 3: Technisch<br />
Afronding Last Hijack<br />
Op het moment is net een start gemaakt met deze categorie. Deze<br />
categorie is als laatste op de lijst gezet omdat de correlaties binnen<br />
deze categorie sterke overeenkomsten hebben met die van de<br />
documentaire Unspeak en minder projectspecifiek zijn in vergelijking<br />
met de correlaties binnen gedrag en acquisitie.<br />
De laatste iteraties binnen resultaten zijn voorgelegd aan opdrachtgever<br />
Bernhard Rieder. Deze zullen in de nabije toekomt nog voorgelegd<br />
worden bij Submarine. Het niveau van inzichtelijkheid is nu getest op<br />
Bernhard Rieder en overige betrokkenen.<br />
Hoe ver het iteratieproces nog zal gaan is op het moment nog niet<br />
inzichtelijk. Wel is duidelijk dat het geheel uiteindelijk gedocumenteerd<br />
zal worden als een soort handleiding voor verdere uitwerking. Wegens<br />
gebrek aan programmeurs zullen slechts een aantal visualisaties<br />
gerealiseerd worden in d3. Deze interactieve uitwerkingen zullen dienen<br />
als een prototype waarin de mogelijkheden tot het verwerken van live<br />
data in de ontworpen visualisaties zal zijn getest.<br />
Dit einddocument zal nieuwe inzichten bevatten in het analyseren van<br />
het specifieke product ‘interactieve documentaires’.<br />
106 <strong>Transmedia</strong> <strong>Analytics</strong> - Resultaten <strong>Geert</strong> <strong>Hagelaar</strong> & <strong>Yannick</strong> <strong>Diezenberg</strong> 107
User engagement met betrekking tot interactieve documentaires<br />
Conclusies en aanbevelingen<br />
Deelvraag 1 luidde als volgt: 1) Wat is de definitie van user engagement<br />
als het gaat om interactieve documentaires<br />
Binnen een aantal visualisaties wordt user engagement op<br />
verschillende vlakken (bijvoorbeeld per video of per doorverwijzing)<br />
gemeten. Om user engagement meetbaar te maken is het essentieel<br />
om de definitie van dit begrip vast te stellen met betrekking op de<br />
gebruikte documentaire Last Hijack.<br />
Om een betekenis te geven aan de abstracte term user engagement<br />
wordt er specifiek naar documentaire Last Hijack gekeken. Het<br />
is bekend dat Last Hijack wordt beschouwd als een interactieve<br />
documentaire. Echter is de term ‘interactieve documentaire’ een<br />
breed begrip. Daarom wordt de structuur van Last Hijack gekenmerkt<br />
door middel van Sandra Gaudenzi’s interactive documentary<br />
genre taxonomie (2013). Zij beschrijft vier categorieën interactieve<br />
documentaires; ‘The conversational mode’, ‘experiential mode’, ‘the<br />
participatory mode’ end de ‘hyperlink mode’ gebaseerd op hun<br />
interactiemodi.<br />
De ‘hyperlink mode’ kan beschreven worden als een gesloten<br />
videodatabase. De gebruiker krijgt een verkennende rol doordat deze<br />
tussen de video’s binnen de database kan navigeren door middel van<br />
bestaande verwijzingen. De structuur moedigt de gebruiker aan de<br />
documentaires niet op een lineaire en voorgedefinieerde manier te<br />
bekijken maar zijn eigen pad te kiezen binnen het verhaal. De gesloten<br />
structuur geeft de auteur de controle over de gebruiker maar laat de<br />
gebruiker toch bepalen hoe de documentaire wordt beleefd.<br />
Dit type mode is toepasbaar op Last Hijack. Last Hijack bestaat uit een<br />
enkele pagina maar geeft de gebruiker de mogelijkheid tot navigatie<br />
door middel van een tijdlijn onder of boven de film.<br />
In wezen is de interactiviteit vrij beperkt; de gebruiker kan door de<br />
structuur navigeren maar heeft geen invloed op de bestaande content.<br />
De gebruiker creëert een individueel verhaal dat uit segmenten bestaat<br />
die worden aangeklikt tijdens het navigeren. Des te groter de database,<br />
des te groter de kans dat de ervaring van de documentaire uniek is. Er<br />
wordt in andere woorden gekozen voor een uniek navigatie pad binnen<br />
het verhaal (Lister, 2009).<br />
Daarom is user engagement in de volgende vier niveaus<br />
gecategoriseerd:<br />
1. Een groot aantal wisselingen tussen de video’s geeft aan dat de<br />
gebruiker de content actief verkent. Dit richt zich vooral op content<br />
met een ‘hyperlink mode’ structuur. Het eerste niveaus van user<br />
engagement wordt dus aangetoond met het bekijken van relatief<br />
veel verschillende video’s.<br />
2. Het tweede niveau van user engagement laat zien dat de gebruiker<br />
relatief veel video’s heeft bekeken maar ook een hoog percentage<br />
van de content van deze video’s heeft bekeken (het verschil tussen<br />
een video half bekijken en het bekijken van een video tot het einde).<br />
3. Het meest intensieve niveau van user engagement is de combinatie<br />
van een hoog aantal bekeken video’s, een hoog percentage<br />
van de bekeken content van deze video’s en een hoog aantal<br />
perspectiefwisselingen (specifiek voor Last Hijack).<br />
4. Er zou een vierde niveau toegepast kunnen worden dat gaat<br />
over het delen van de documentaire. Dit zou kunnen worden<br />
bijgehouden door deelknoppen vanuit social media. Dit niveau van<br />
user engagement wordt niet toegepast bij Last Hijack omdat het<br />
project momenteel geen deelknop bevat.<br />
Aan de hand van deze vier niveaus kan binnen de visualisatie worden<br />
beoordeeld op welke gebied het project verbeterd kan worden om meer<br />
engaged users aan te trekken.<br />
Binnen dit onderzoeksverslag zijn de volgende deelvragen behandeld:<br />
1) Welke feedback hebben producers van interactieve documentaires<br />
nodig om hun producties te kunnen verbeteren Ofwel: “Wat is<br />
‘gewenste feedback’ voor producers van interactieve documentaires”<br />
2) Hoe kunnen de correlaties, die de juiste feedback genereren, op een<br />
begrijpelijke en inzichtelijke manier worden gevisualiseerd<br />
3) Wat is de definitie van user engagement als het gaat om interactieve<br />
documentaires<br />
108 <strong>Transmedia</strong> <strong>Analytics</strong> - Userengagementmetbetrekkingtotinteractievedocumentaires <strong>Geert</strong> <strong>Hagelaar</strong> & <strong>Yannick</strong> <strong>Diezenberg</strong> 109
Deelvraag 1<br />
Welke feedback hebben producers van interactieve documentaires nodig om hun producties te kunnen verbeteren<br />
Ofwel: “Wat is ‘gewenste feedback’ voor producers van interactieve documentaires”<br />
Deelvraag 2<br />
Hoe kunnen de correlaties, die de juiste feedback genereren, op een begrijpelijke<br />
en inzichtelijke manier worden gevisualiseerd<br />
Deelvraag 1 is beantwoord aan de hand van correlaties en het<br />
visualiseren van deze correlaties. De visualisaties dienen als evaluatie<br />
om na te gaan of de correlaties ook daadwerkelijk de gewenste<br />
inzichten geven.<br />
De huidige analysetool Google <strong>Analytics</strong> geeft inzichten in website<br />
prestaties maar is slecht tot niet bruikbaar voor het analyseren van<br />
online interactieve documentaires vanwege de alternatieve structuur.<br />
Uit het onderzoek is gebleken dat Google <strong>Analytics</strong> iedere website op<br />
dezelfde manier analyseert, als een gewone website. Hierdoor is de<br />
informatie die gegenereerd wordt niet bruikbaar als feedback voor een<br />
interactieve documentaire. Om de data uit Google <strong>Analytics</strong> te kunnen<br />
gebruiken om interactieve documentaires te analyseren zullen enkele<br />
termen (zoals een bounce) geherdefinieerd moeten worden om deze<br />
toe te kunnen passen op transmedia producties. Deze herdefinieerde<br />
termen zijn gebruikt binnen de visualisaties. Bijvoorbeeld in visualisatie<br />
6: doordat Last Hijack uit een enkele pagina bestaat waar de gebruiker<br />
het hele project op kan bekijken zonder enige interactie kan de term<br />
bounce niet worden gebruikt om een probleem aan te tonen.<br />
Door de functies en de structuur van transmedia producties te<br />
analyseren zijn inzichten ontstaan (zie probleemanalyse) over het<br />
gebruikersgedrag van bezoekers.<br />
Hierbij zijn verschillende datasets gecombineerd die inzichten<br />
in deze specifieke productvorm achten te beantwoorden. Deze<br />
gecorreleerde dimensies en metrics zijn vervolgens gevisualiseerd om<br />
de gegenereerde inzichten te evalueren. Het niveau van inzichtelijkheid<br />
is vervolgens getest bij Submarine. Door middel van een usertest met<br />
een producer van Submarine is gecontroleerd of de visualisaties de<br />
gewenste inzichten en feedback weergeven.<br />
Aan de hand van feedback van Bernhard Rieder en Gabriele Colombo<br />
en de usertest met de producer van Submarine kan geconcludeerd<br />
worden of de visualisaties de gewenste feedback genereren. Door de<br />
correlaties op een specifieke documentaire te richten, genereren de<br />
visualisaties gerichte, project specifieke feedback.<br />
Deelvraag 2 is beantwoord aan de hand van het visualiseren van<br />
correlaties. Door tijdens het ontwerpproces onderzoek te doen naar<br />
toepasbare ontwerpprincipes zijn visualisaties ontstaan die correlaties<br />
inzichtelijk presenteren.<br />
Aan de hand van de verkergen feedback kan geconcludeerd worden<br />
dat eenvoudige visualisaties makkelijk interpreteerbare informatie<br />
weergeven. Eenvoudige visualisaties zijn overzichtelijk, niet alleen<br />
doordat er gebruik wordt gemaakt van een beperkt aantal metrics<br />
en dimensies maar ook doordat dit soort visualisaties aanspraak<br />
doet op cognitieve modellen. De gebruiker kan de visualisatie snel<br />
lezen waardoor tijd en misleidingen worden bespaard en de feedback<br />
duidelijk overkomt.<br />
Door binnen visualisatie 2 gebruik te maken van een rode kleur, om<br />
eventuele problemen aan te geven als het gaat om de gemiddelde<br />
tijd op een bepaalde pagina ,interpreteert de gebruiker de visualisatie<br />
sneller. Door het gebruik maken van kleuren kan de ontwerper<br />
ervoor zorgen dat de aandacht van de gebruiker naar een bepaald<br />
attentiepunt wordt getrokken (Tufte, 2006).<br />
Het weglaten van data zorgt ervoor dat de boodschap die de<br />
visualisatie over moet brengen duidelijk wordt weergegeven (Cairo,<br />
2012). In visualisatie 3 is dit aan de hand van een ranking gedaan, de<br />
top tien van het complete aantal video’s wordt getoond.<br />
Door het grid binnen visualisatie 3 subtiel weer te geven blijft de<br />
informatie leesbaar maar wordt de lezer niet afgeleid of misleid (Tufte,<br />
2001). Ook wordt er gebruik gemaakt van een rode gradient om een<br />
eventueel probleem aan te geven. Volgens Tufte kan een kleur worden<br />
gebruikt om een hoeveelheid weer te geven (Tufte, 1990).<br />
Omdat in visualisatie 3 de prestatie van een bron weer wordt gegeven<br />
is het beter om de data niet te filteren zodat er geen misinterpretatie<br />
ontstaat (Bertin, 1983). Bij data over bronnen is het namelijk van<br />
belang om campagnes en andere investeringen te betrekken, deze<br />
informatie kan niet uit de data worden gehaald.<br />
De beste manier om geografische data te tonen, zoals in visualisatie<br />
4, is een kaart (Tufte, 2006). Met een kaart kunnen patronen worden<br />
herkend die in relatie staan tot een locatie.<br />
Door bij visualisatie 6 contrasterende kleuren te gebruiken worden<br />
verschillende de segmenten beter van elkaar onderscheiden (Tufte,<br />
1990). Dit maakt de visualisatie beter leesbaar.<br />
Tufte (2001, p. 187) concludeert dat bij een visualisatie met twee assen<br />
de lange as het beste de oorzaak weergeeft en de korte as het effect.<br />
Dit is in visualisatie 8 toegepast bij het weergeven van het aantal<br />
keer dat de introductievideo is overgeslagen of een vertrek heeft<br />
veroorzaakt.<br />
Ook is in visualisatie 8 gebruik gemaakt van labels zodat er geen<br />
legenda toegepast hoeft te worden (Tufte, 2001). Door gebruik te<br />
maken van kleurverzadegingen op de achtergrond wordt er gebruik<br />
gemaakt van het feit dat een kleur een natuurlijke hoeveelheidsbepaler<br />
met perceptuele continuïteit kan zijn (Tufte, 1990).<br />
110 <strong>Transmedia</strong> <strong>Analytics</strong> - Conclusies en aanbevelingen <strong>Geert</strong> <strong>Hagelaar</strong> & <strong>Yannick</strong> <strong>Diezenberg</strong> 111
Deelvraag 3<br />
Wat is de definitie van user engagement als het gaat om<br />
interactieve documentaires<br />
Binnen visualisatie 9 is er op een andere manier het gebruik van een<br />
legenda overbodig gemaakt door middel labels (Tufte, 2001). Door<br />
labels met hoeveelheden te laten verschijnen bij een hover hoeft deze<br />
hoeveelheid niet te worden afgelezen van een as.<br />
Door zoveel mogelijk ruimte binnen een visualisatie te benutten wordt<br />
de informatie zo goed mogelijk weergegeven (Tufte, 1983). Tufte<br />
legt dit uit aan de hand van de term data-ink maximalization. Ieder<br />
beetje inkt op papier of iedere pixel op het scherm zou informatie<br />
weer moeten geven in een perfecte visualisatie. Aan de hand van deze<br />
theorie is het formaat van model binnen visualisatie 11 aangepast om<br />
zo een beter overzicht weer te kunnen geven van de data.<br />
In visualisatie 12 is de indeling van de navigatietijdlijn uit Last Hijack<br />
op een abstracte manier gerepresenteerd binnen de visualisatie om<br />
gebruik te maken van de kennis van de producer van de documentaire.<br />
Schouppe & De Graeff (2011, p. 155) zeggen hierover dat door het<br />
verbinden van bestaande kennis met de te onthouden informatie het<br />
geheugenspoor wordt versterkt.<br />
In visualisatie 13 is de indeling van de navigatie uit Last Hijack ook over<br />
genomen. Met als reden dat een informatiemodel compleet figuratief<br />
is wanneer de relatie tussen de representatie en de gebruiker volledig<br />
mimetisch is (Cairo, 2012).<br />
Door het gebruik van een grote variatie van kleuren zou een<br />
verwarring, oftewel een graphical puzzle kunnen ontstaan (Tufte,<br />
2011). Om deze reden is er binnen visualisatie 14 voor gekozen om de<br />
waarden met tinten van een kleur aan te geven.<br />
Volgens Tufte (2001, p. 132) kan de visualisatie beter bruikbaar zijn<br />
door het veranderen van het minimum of maximum van de data.<br />
Daarom wordt alleen de top tien van elementen waar het meest als<br />
eerste op geklikt is weergegeven.<br />
Tufte (2001, p. 69) haalt m.b.v. verschillende voorbeelden aan dat<br />
het gebruiken van de misleidende vormen voor het weergeven van<br />
verhoudingen tot misinterpretatie van de data kan leiden. Daarom is<br />
om misleiding te voorkomen de vorm van de stroming van visualisatie<br />
13 veranderd in een rechte stroming.<br />
Het vierkant in visualisatie 14 wordt in gedachte gecompleteerd<br />
waardoor een vergelijking mogelijk is. Binnen deze visualisatie wordt<br />
gebruik gemaakt van closure binnen het gestaltprincipe (Schouppe &<br />
De Graef, 2011).<br />
Door binnen visualisatie 15 de twee kleuren balken per bron tegen<br />
elkaar te plaatsen en een witruimte te creëren tussen de balken<br />
van de volgende bron, worden deze automatisch door de gebruiker<br />
gegroepeerd. Vanwege de nabijheid van deze twee elementen<br />
(Schouppe & De Graef, 2011).<br />
Volgens Tufte (Tufte, 1990) is belangrijk om data te visualiseren naar<br />
de capaciteit van het menselijk brein. Dit wil zeggen dat de ontwerper<br />
gebruik moet maken van de cognitieve modellen van de mens.<br />
Continuïteit speelt hier een grote rol in, het herkennen van de cirkels<br />
uit de eerste iteratie van visualisatie 16 kan ervoor zorgen dat de<br />
gebruiker een verkeerde associatie krijgt met hetzelfde visuele model<br />
dat andere informatie weergeeft. Daarom zijn deze cirkels veranderd in<br />
vierkanten.<br />
Samenvattend antwoord op deelvraag 2<br />
Door ontwerp-principes toe te passen en iteratieslagen te maken aan<br />
de hand van feedback van project betrokkenen binnen het ontwerp,<br />
kunnen de correlaties begrijpelijk en inzichtelijk worden gevisualiseerd.<br />
Deelvraag 3 is beantwoord aan de hand van een literatuuronderoek.<br />
Om user engagement te kunnen meten en te visualiseren is er<br />
onderzoek gedaan naar de betekenis van deze term. Er is specifiek<br />
gekeken naar de documentaire Last Hijack.<br />
Last Hijack kan worden beschreven als een documentaire met een<br />
‘hyper mode’ structuur, deze kan worden omschreven als een gesloten<br />
database die uit video’s bestaat (Sandra Gaudenzi, 2013).<br />
De gebruiker creëert een individueel verhaal door vrij te navigeren<br />
door het narratief. Hoe groter de database, des te groter de kans dat<br />
de ervaring van de documentaire uniek is. Er wordt in andere woorden<br />
gekozen voor een uniek navigatiepad binnen het verhaal (Lister, 2009).<br />
Op basis van de structuur van Last Hijack is user engagement verdeeld<br />
in vier categorieën;<br />
1. Een groot aantal wisselingen tussen video’s<br />
2. Een groot aantal wisselingen tussen video’s en een hoog<br />
percentage van de inhoud van de video’s is bekeken<br />
3. Een groot aantal wisselingen tussen video’s, een hoog percentage<br />
van de inhoud van de video’s is bekeken en er hebben veel<br />
perspectiefwisselingen plaatsgevonden.<br />
4. Er zou een vierde niveau toegepast kunnen worden dat gaat over<br />
het delen van de documentaire.<br />
112 <strong>Transmedia</strong> <strong>Analytics</strong> - Conclusies en aanbevelingen <strong>Geert</strong> <strong>Hagelaar</strong> & <strong>Yannick</strong> <strong>Diezenberg</strong> 113
Literatuurlijst<br />
Webpagina’s<br />
About. (n.b.). Geraadpleegd: 14 mei 2014,<br />
http://www.submarine.nl/#!/about/<br />
Dhr. dr. B. (Bernhard) Rieder. (n.d.). Geraadpleegd: 14 mei 2014,<br />
http://aus.libguides.com/content.phppid=120152&sid=1058033<br />
Application Programming Interface. (2014.). Geraadpleegd: 14 mei 2014,<br />
http://nl.wikipedia.org/wiki/Application_programming_interface<br />
Scrum (softwareontwikkeling. (2014). Geraadpleegd: 22 mei 2014,<br />
http://nl.wikipedia.org/wiki/Scrum_(softwareontwikkelmethode)<br />
Core Reporting API - Reference Guide, (n.b.). Geraadpleegd: 14 mei 2014,<br />
https://developers.google.com/analytics/devguides/reporting/core/v3/reference#dimensions<br />
Bounce Rate, 2014. Geraadpleegd: 13 mei 2014,<br />
https://support.google.com/analytics/answer/1009409hl=en<br />
About the Center for Civic Media, (n.b.) Geraadpleegd: 13 mei 2014,<br />
http://civic.mit.edu/about<br />
Literatuur<br />
Frankel, L., & Racine, M. (2010). The complex field of research: For design, through design, and about design. In Design & complexity: International conference of the Design<br />
Research<br />
Society. Design Research Society. Geraadpleegd 14 mei 2014, http://www.designresearchsociety.org/docs-procs/DRS2010.<br />
Tufte, Edward R. Beautiful evidence. Vol. 1. Cheshire, CT: Graphics Press, 2006.<br />
Tufte, E. R., & Graves-Morris, P. R. (1983). The visual display of quantitative information (Vol. 2). Cheshire, CT: Graphics press.<br />
Tufte, E. R., & Robins, D. (1997). Visual explanations (Vol. 25). Cheshire, CT: Graphics Press.<br />
Schouppe, H., & De Graef, P. (2011). Cognitieve psychologie: theorie & praktijk. Van Gorcum.<br />
Tufte, E. R. (1991). Envisioning information. Optometry & Vision Science<br />
Bertin, J. (1983). Semiology of graphics: diagrams, networks, maps.<br />
Nash, Kate (2012). Modes of Interactivity: analysing the webdoc in Sage Journals 36:<br />
(pg 194-210). Geraadpleegd: 26 February 2014, http://mcs.sagepub.com/content/43/2/195<br />
Cairo, A. (2012). The Functional Art: An introduction to information graphics and visualization. New Riders.<br />
Gaudenzi, S. (2013). The Living Documentary: from representing reality to co-creating reality in digital interactive documentary (Doctoral dissertation).<br />
Lister, M. (Ed.). (2009). New media: A critical introduction. Taylor & Francis.<br />
114 <strong>Transmedia</strong> <strong>Analytics</strong> - Literatuurlijst <strong>Geert</strong> <strong>Hagelaar</strong> & <strong>Yannick</strong> <strong>Diezenberg</strong> 115