19.01.2015 Views

Transmedia Analytics - By Geert Hagelaar & Yannick Diezenberg

Graduation Project (in Dutch)

Graduation Project (in Dutch)

SHOW MORE
SHOW LESS

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

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!