Ralf van Lieshout, voor de goede begeleiding en constructieve kritieken. Michiel Houben, voor zijn plafondloze enthousiasme en energie.

Voorwoord

Deze scriptie is de culminatie van mijn vierjarige studie ICT & Media Design aan de Fontys te Eindhoven. Het is tot stand gekomen in de periode van zes februari 2012 tot en met zeven juni 2012, bevat de belangrijkste resultaten van het onderzoek en een beschrijving van het samenkomen van deze resultaten in een eindproduct.

Voorafgaande aan deze scriptie zou ik

Ralf van Lieshout, voor de goede begeleiding en constructieve kritieken.

Michiel Houben, voor zijn plafondloze enthousiasme en energie.

Woody Veneman, voor de begeleiding vanuit school en goede beschikbaarheid bij vragen.

Hein Medema, voor zijn visie op

Floris van den Elshout, voor zijn creatieve kijk op het geheel.

Tomas Dankers, voor zijn blik op essentiële usability aspecten.

Sven Klerks, voor de Cherry Coke.

Kevin Reumkens en Michel Kusters, voor het sparren over het afstuderen.

Verklarende woordenlijst

API

Application Programming Interface. Dit EHVWDDWXLWHHQFROOHFWLHYDQGHÀQLWLHV

waardoor het mogelijk is dat twee verschillende programma’s met elkaar communiceren.

CSS-class

Een class die je toevoegt aan een HTML- object zodat je deze met CSS, javascript of jQuery aan kan roepen. Bijvoorbeeld:

<h1 class=”naam”>Erik</h1>

Framework

Een code-bibliotheek welke je in staat stelt om complexe code makkelijker te gebruiken.

*UDÀVFKHHQJLQH

(HQV\VWHHPGDWJUDÀVFKHZHHUJDYHQ

kan genereren.

,QÁXHQFHU

(HQLQÁXHQFHULVLHPDQGGLHLQYORHGXLW

kan oefenen op andere personen. Hij of zij doet dit op basis van de kennis of PHQLQJGLHKLMKHHIWRYHUHHQVSHFLÀHN

onderwerp. Dit kan gaan over een fysiek product of een abstract gegeven zoals een politieke voorkeur of mening over GHPDDWVFKDSSLM'HLQÁXHQFHUPDDNW

gebruik van de nieuwe communicatie mogelijkheden, zoals social media en blogs, om zijn of haar kennis of mening WHGHOHQ+HWQHWZHUNGDWGHLQÁXHQFHU

hiermee beïnvloedt is groter dan het

gemiddelde netwerk binnen zijn of haar kennisgebied.

,WHUDWLHYHZLM]H

Een methode van werken waarbij een product stapsgewijs wordt ontwikkeld.

Losse elementen worden een voor een aan het product toegevoegd.

0RGHUQHEURZVHU

Chrome, Firefox, IE9(+), Safari, Opera.

M4XHU\

Een javascript library welke al sinds augustus 2006 bestaat. Het stelt je in staat HTML en CSS elementen eenvoudig te manipuleren.

JSON

JavaScript Object Notation (JSON).

Een manier van data opmaken die met vrijwel elke programmeertaal te gebruiken is.

/LEUDU\

Andere banaming voor framework.

6RFLDO0HGLD

Alle vormen van sociale media op het web. Dit zijn websites waarop sociale interactie mogelijk is, zoals een forum, recensie site of de bekende Facebook en Twitter.

9HUWLFDO

Een website waarop je producten of diensten kunt vergelijken, ook wel een vergelijkingssite genoemd.

 ,QöXHQFHUPDUNHWLQJ

1 Intro 6

20 32 40 46 54 60

 9LVXDOLVDWLH

4 Data, data, data

 'HLQöXHQFHUPüK

 7HUXJEOLN

7 Referenties

1.1 8 ,QKHWNRUW

2.1 22

,QöXHQFHUV

3.1 34

Het doel

4.1 42

6RFLDOVHDUFK

5.1 48

&RQFOXVLHV DDQEHYHOLQJHQ

6.1 56

(YDOXDWLH

7.1 62

Bronnen 7.2 68

%LMODJHQ

6.2 58

5HöHFWLH 6.3 59

(SLORRJ

5.2 50

,PSOHPHQWDWLH

4.2 44

JSON 4.3 45

6SHFLDOH6DXV

1.2 10

,QOHLGLQJ

2.2 24

,QöXHQFHUPDUNHWLQJ

3.2 36

7\SHYLVXDOLVDWLHV 3.3 38

)UDPHZRUNV

1.3 12

+HWEHGULMI RSGUDFKW

2.3 28

9DONXLOHQ

1 Intro

LQöXHQFHUPDUNHWLQJ

GDWDYLVXDOLVDWLH

ELM:H$UH%ORVVRP

,QKHWNRUW

Deze scriptie beschrijft de mogelijkheden YDQLQÁXHQFHUPDUNHWLQJHQGDWD

YLVXDOLVDWLH,QÁXHQFHUPDUNHWLQJLV

een opkomende vorm van marketing en is een digitale variant van mond tot mond reclame. Bij deze marketing vorm PDDNMHJHEUXLNYDQLQÁXHQFHUV'LW

zijn mensen die meer invloed hebben RYHUHHQVSHFLÀHNRQGHUZHUSGDQ

een gemiddeld persoon. Je kunt het zien als die ene neef in de familie die bijvoorbeeld alles over computers weet.

Hier ga je altijd naar toe voor kennis over dat onderwerp. Met de komst van social media zijn sommige van deze kennisrijke personen online hun kennis gaan verspreiden. Zo kunnen de mensen die ze niet direct kennen gebruik maken van hun expertise.

,QÁXHQFHUPDUNHWLQJLVGHPDUNHWLQJ

vorm die op deze individuen inspeelt.

Standaard marketing is minder HIÀFLsQWJHZRUGHQGRRUGHRSNRPVW

van sociale media. Hierdoor vertrouwt

de consument de boodschap die direct van merken afkomt niet meer.

,QÁXHQFHUVELHGHQHHQQLHXZHEUXJ

tussen merken en consumenten, omdat zij wel vertrouwd worden. Heb je een MXLVWHLQÁXHQFHUJHYRQGHQGDQPRHWMH

voorzichtig te werk gaan, een oprechte band met ze opbouwen en al het LQLWLDWLHIELMGHLQÁXHQFHUODWHQ+LMRI]LM

bepaalt of je verhaal waardevol is, en zal er dan iets mee doen (of niet).

Op gebied van ICT zijn er al een aantal tools op de markt die claimen voor jou GHUHOHYDQWHLQÁXHQFHUVWHYLQGHQ'H

experts op dit gebied zeggen echter GDWGLWQLHWKHWJHYDOLV,QÁXHQFHU

marketing is volgens hen een menselijk iets en vereist op dit moment nog een persoonlijke aanpak. Het is nog niet PRJHOLMNRPHHQLQÁXHQFHUWHZDDUGHUHQ

met een getal.

Om deze reden krijgt mijn product een andere insteek. In plaats van een

algemene rangorde, zoals de bestaande LQÁXHQFHUVWRROVJHEUXLNHQ]DOGHWRRO

VSHFLÀHNHDVSHFWHQWRQHQ]RDOVEHUHLN

en activiteit. De keuze voor deze twee ZDDUGHVNRPWYRRUWXLWGHLQÁXHQFHU

piramide. Deze geeft aan dat bereik voor veel bekendheid kan zorgen en activiteit voor veel vertrouwen.

Op gebied van visualisaties is gekeken hoe je deze aspecten het best kunt tonen.

Het doel is je direct laten zien wie het meeste bereik heeft, en wie de meeste activiteit. Uit een vergelijking tussen YHUVFKLOOHQGHJUDÀHNHQHQGLDJUDPPHQ

blijkt dat een balk- of staafdiagram dit het beste doet. Deze visualisatie is vervolgens gerealiseerd met behulp van een javascript visualisatie library welke de diagram als losse elementen genereert. In combinatie met jQuery is interactie tussen de bereik- en activiteit-diagram toegevoegd. Zo kun je bijvoorbeeld snel zien hoe een gebruiker LQEHLGHJUDÀHNHQVFRRUW'DDUQDDVW

,QVKRUW

toont de tool ook een donutdiagram die laat zien op hoeveel procent van het geheel je selectie zit. Dit stelt je in staat te zien of iemand met iets minder bereik relatief veel activiteit toevoegt.

De tool rekent ook uit wie de top drie LQÁXHQFHUV]LMQ

De tool heeft nu nog een minpuntje. Op het moment van schrijven zit er nog geen realtime data input in. Deze zal de komende weken gerealiseerd worden op basis van de Twitter Search API. De theorie achter de input is wel al bekend.

Het goede nieuws is dat de tool al werkt RSEDVLVYDQÀFWLHYHGDWD:DQQHHUGH

realtime data gerealiseerd is, zal het slechts een kwestie zijn van de data- input veranderen, en de tool zal zichzelf op basis van deze data opbouwen. Dit zal bij de zitting getoond worden.

This thesis contains an exploration on WKHSRVVLELOLWLHVRILQÁXHQFHUPDUNHWLQJ

DQGGDWDYLVXDOLVDWLRQ,QÁXHQFHUVDUH

SHRSOHWKDWKDYHDQLQÁXHQFHUHJDUGLQJ

a certain topic that is higher than the average person regarding that same topic. Because regular marketing is ORVLQJLWVHIÀFLHQF\PDUNHWHHUVDUH

VWDUWLQJWRWXUQWRWKHVHLQÁXHQFHUVDV

the new way of communicating to their target audiences.

,I\RXÀQGWKHULJKWLQÁXHQFHUIRU\RXU

brand, be careful in approaching them.

You must build a personal connection to the person before asking for any favours.

And even if you think you can ask them IRURQHLWLVVWLOOXSWRWKHLQÁXHQFHU

to decide if he or she is willing to share your message.

If we look at possible ICT solutions for ÀQGLQJLQÁXHQFHUVWKHUHDUHWZRXQLTXH

secondly, there is currently no way WRRUGHU\RXULQÁXHQFHUVE\GLIIHUHQW

properties. Which could be a useful IHDWXUHLIZHORRNDWWKHLQÁXHQFHU

pyramid. These will be the focus points on which the product will be developed.

7KHÀQDOWRROLVDQRQRQVHQV

YLVXDOLVDWLRQRILQÁXHQFHUGDWD,WDOORZV

the user to interact with this data. That way a user can compare selections and VHHLIDQLQÁXHQFHUWKDWVFRUHVZHOORQ

one property, also scores well another.

There is a downside however. The GDWDLQSXWLVVWLOOÀFWLRQDODWWKHWLPH

of writing. But this will be replaced UHDOWLPHGDWDEHIRUHWKHÀQDOVHVVLRQ

,QOHLGLQJHQRSERXZ

De directe aanleiding voor het onderzoek is de mogelijkheid die We Are Blossom ziet in de data die internet gebruikers online achter laten en de inzet van LQÁXHQFHUPDUNHWLQJ

Dit heeft een tweevoudige oorsprong.

Ten eerste is We Are Blossom in staat een volledige service (copy, conversation, design en campagnes) op gebied van Facebook te leveren. Uit een gesprek met Facebook Nederland begin dit jaar bleek dat er op dat moment nog geen bedrijf in Nederland was die dat kan bieden. Ten tweede wil de Greenhouse Group, waar We Are Blossom deel van uitmaakt (meer hierover in 1.3 Bedrijf & opdracht), een vertical opzetten voor kinderkleding.

Hierbij willen ze gebruik gaan maken YDQLQÁXHQFHUPDUNHWLQJ

Beide partijen zijn gebaat bij een LQÁXHQFHUWRRO(HQSURGXFWZHONH

KHQKHOSWELMGHLQ]HWYDQLQÁXHQFHU

marketing. Dit versterkt de service van

We Are Blossom en kan van toepassing zijn bij het opzetten van de vertical. De betrokkenen bij de opdracht zijn Ralf van Lieshout, Head of Strategy & Account bij We Are Blossom, en Michiel Houben, het aanspreekpunt voor de plannen van de fashion vertical binnen de Greenhouse Group.

2SERXZ

De opbouw van dit document bestaat uit een vijftal onderdelen. Het eerste deel (hoofdstuk 1) beschrijft de aanloop naar het het onderzoek: waarom is het onderzoek nodig, wie zijn de betrokken, hoe ziet het bedrijf eruit en waaruit bestaat de opdracht.

In deel twee volgt de uitvoering van het onderzoek (hoofdstuk 2 t/m 4), met daarin het onderzoek opgedeeld in drie deelvragen.

Op basis van het onderzoek volgt

deel drie (hoofdstuk 5). Dit bevat het antwoord op de hoofdvraag in de vorm van conclusies en aanbevelingen.

Op basis van deze uitkomsten volgt de verslaglegging van de product- ontwikkeling. Dit beschrijft waarom bepaalde keuzes zijn gemaakt bij het ontwikkelen van het product, hoe het is gerealiseerd en geeft een toelichting op wat het product doet.

In deel vier (hoofdstuk 6) volgt een terugblik op de opdracht in de vorm YDQHHQHYDOXDWLHHQHHQUHÁHFWLHRS

de persoonlijke ontwikkelpunten die voorafgaande aan de afstudeerstage waren opgesteld.

Tot slot volgt onderdeel vijf, de

referenties, waar de bronnen en bijlagen overzichtelijk staan vermeld.

3DJLQDRSERXZ

Seth Godin beschrijft dit gegeven als permissie marketing. Hierbij vertelt hij hoe je in zijn ogen contact dient te leggen met de mensen die waarde hebben voor je merk. Je mag ze niet direct vragen iets voor je te doen, bijvoorbeeld gesponsorde content plaatsen. In plaats daarvan moet je een echte relatie opbouwen en vervolgens wachten op validatie van deze relatie YDQXLWGHLQÁXHQFHU3DVGDQYHUWHOMHMH

verhaal en vraag je alsnog niet of hij of zij er iets mee wil doen. Deze keus ligt volledig bij die persoon. Ga je te snel, dan is de kans zeer groot dat je je UHODWLH volledig verpest en in de toekomst op de negeer-lijst zal staan.

Tools

Opvallend is dat hier drie partijen ]LMQGLHYHUWHOOHQGDWLQÁXHQFHU

KRRIGVWXNNRS

EURQ EROG & italic zie hoofdstuk 7.1 voor een beschrijving van de bronnen per hoofdstuk

SDUDJUDDI regular

VXENRS EROG

+HWEHGULMI GHRSGUDFKW

We Are Blossom is een jong bedrijf.

Ze onderscheiden zich door Data Driven Creation. Met deze term beschrijft Blossom de manier waarop ze opdrachten uitvoeren. Ze gaan verder na het opleveren van een product.

Ze analyseren het en blijven het

optimaliseren zolang dit nodig is (zie het processchema op pagina 14).

Blossom is onderdeel van de Greenhouse Group. Dit is een bedrijven hotel dat ontstaan is uit Blue Mango Interactive.

Inmiddels bestaat het naast dit bedrijf nog uit een viertal andere bedrijven:

‡ Fresh Fruit Digital

‡ SourceRepublic

‡ $ÀOOL'LUHFW

‡ We Are Blossom

Deze groep geniet een nauwe onderlinge samenwerking.

2UJDQLVDWLH

We Are Blossom bestaat in de basis uit vier personen. Aan de management kant heb je Ralf van Lieshout, Head of Strategy & Account. Daaronder komt Tomas Dankers, Project Manager. Hij ondersteunt Ralf bij zijn managementwerk en neemt waar nodig taken over.

De creatieve kant bestaat uit Floris van den Elshout. Hij is de Creative Director en verantwoordelijke voor de producten die Blossom oplevert. Sven Klerks is Senior Art Director en werkt nauw samen met Floris aan de producten.

Naast deze vaste vier is het team van We Are Blossom erg variabel in grootte.

Ze maken namelijk regelmatig gebruik freelancers wanneer er intern geen juiste skill-set aanwezig is, of wanneer ze simpelweg meer manuren nodig hebben dan ze zelf kunnen maken. De freelancers zoeken ze zoveel mogelijk bij

de creatie afdeling van zusterbedrijf Blue Mango Interactive. Wanneer er binnen deze groep niet de juiste mensen zijn voor een opdracht, dan kijkt men naar externe Freelancers.

3URFHVVFKHPD

+HWEHGULMI GHRSGUDFKW

2SGUDFKW

Zoals eerder beschreven, ziet We Are Blossom mogelijkheden in de FRPELQDWLHYDQLQÁXHQFHUPDUNHWLQJHQ

datavisualisatie.

=HYHUPRHGHQGDWLQÁXHQFHUVGDWD

achterlaten op social media en dat deze GDWDXLWWHOH]HQLV(HQLQÁXHQFHUWRRO

zou kunnen helpen bij het begrijpen van deze data. Voor het onderzoek naar de mogelijkheden is de volgende hoofdvraag geformuleerd:

Hoe is realtime datavisualisatie te JHEUXLNHQELMGHLQ]HWYDQLQÁXHQFHU

marketing voor een campagne?

Om deze hoofdvraag te beantwoorden is hij opgedeeld in drie deelvragen met ieder een eigen aanpak.

‡ :DWLVLQÁXHQFHUPDUNHWLQJ"

Desk-research & interviews.

Het doel hiervan is een gezonde basiskennis te creëren over deze marketingvorm, om zo te weten hoe een tool kan assisteren bij de inzet ervan.

‡ :HONHPRJHOLMNKHGHQELHGW

GDWDYLVXDOLVDWLHELMKHWZHHUJHYHQ

YDQGH]HGDWD"

Desk-research.

Met behulp van literatuur zal bepaald worden welke visualisatie met welk framework het best past binnen het doel van van de tool.

‡ 2SZHONHPDQLHUODWHQ

LQÁXHQFHUVHHQGDWDVSRRUDFKWHU

RSKHWLQWHUQHW"

Desk-research & enquête.

Welke manieren zijn er om data binnen te halen en op welke online platformen bevindt de usecase VSHFLÀHNHGRHOJURHS]LFK

2YHUGHXVHFDVH

Zoals eerder vermeld stond wil de Greenhouse Group een fashion vertical opzetten voor kinderkleding. Hiervoor ]DOHHQHQTXHWHDIJHQRPHQZRUGHQ

om zo te bepalen waar de gebruikers van een dergelijke vertical praten over kinderkleding.

Fases

Het onderzoek zal vijf fases doorlopen.

Fase 1 bestaat uit het beantwoorden van deelvraag 1. De volgende onderdelen komen hier aan bod:

‡ :DW]LMQLQÁXHQFHUV"

‡ +RHLVLQÁXHQFHUPDUNHWLQJ

RQWVWDDQ"

‡ Wat zijn de valkuilen bij het gebruik YDQLQÁXHQFHUPDUNHWLQJ"

Fase 2 geeft antwoord op deelvraag 2 en vormt daarmee de fundering voor de te maken visualisatie. Dit bevat

een vergelijking tussen verschillende visualisatie types en visualisatie frameworks.

In Fase 3 komt deelvraag 3 aan bod, waarin een onderzoek volgt naar de SODWIRUPHQZDDURSLQÁXHQFHUVGDWD

achterlaten op het internet en hoe je deze data vervolgens kunt verzamelen.

De conclusies en aanbevelingen volgen in fase 4. Deze worden besproken met de stuurgroep en vormen de basis voor de te ontwikkelen tool.

In de laatste fase, fase 5, komen de uitkomsten van het onderzoek samen in een tool welke het vinden van LQÁXHQFHUVYHUJHPDNNHOLMNW

De verschillende producten die hierbij komen kijken zie je op de volgende pagina in het projectplan.

3URMHFWRUJDQLVDWLH

Om het onderzoek tot een succesvol einde te laten komen is de

organisatiestructuur gemaakt die je op pagina negentien ziet.

Voor een gedetailleerde rolbeschrijving kun je kijken in het PID (Bijlage 1).

,QLWLHHOSURMHFWSODQ

3URMHFWRUJDQLVDWLH

,QöXHQFHUPDUNHWLQJ

PRQGWüPRQG

UHFODPHRQVWHURLGV

,QöXHQFHUV

Met de start van het onderzoek is eerst JHNHNHQQDDUKHWEHJULSLQÁXHQFHU

op zich. In GHUWLHQJHYRQGHQGHÀQLWLHV

YDQLQÁXHQFHUV zitten een aantal terugkerende elementen:

‡ ,QÁXHQFHUVKHEEHQ]HHUYHHONHQQLV

RYHUHHQVSHFLÀHNRQGHUZHUS

‡ ,QÁXHQFHUV]LMQSHUVRRQOLMN

betrokken bij datgene waar ze voor staan, en waar hun volgers waarde aan hechten.

‡ (HQLQÁXHQFHUPDDNWJHEUXLNYDQGH

diverse online kanalen als Twitter, Facebook en blogs.

‡ 'HFRQWHQWGLHHHQLQÁXHQFHU

produceert zien de volgers als zeer waardevol en komt oprecht over.

‡ (HQLQÁXHQFHUKHHIWELQQHQ]LMQRI

haar kennisgebied meer invloed dan de gemiddelde persoon.

‡ Voor de opkomst van sociale media ZDUHQLQÁXHQFHUVYRRUDOEHNHQGH

PHQVHQQX]LMQLQÁXHQFHUVEHNHQG

vanwege de kennis die ze hebben.

7ZHHSXQWHQGLHQLHWLQDOOHGHÀQLWLHV

terugkomen zijn de volgende:

'HLQÁXHQFHUSLUDPLGH]LHDIEHHOGLQJ EHVFKULMIWGULHVRRUWHQLQÁXHQFHUV

‡ 6RFLDO%URDGFDVWHULQÁXHQFHUPHW

een zeer groot netwerk, waardoor ze erg geschikt zijn om voor merkbekendheid te zorgen.

‡ 0DVV,QÁXHQFHULQÁXHQFHUPHW

een kleiner netwerk dan de social broadcaster, maar hij/zij is wel actiever bezig. Ze zijn erg geschikt om voor vertrouwen te zorgen.

‡ 3RWHQWLDO,QÁXHQFHU: De grootste JURHSLQÁXHQFHUVYDOWKLHURQGHU

Ze hebben een kleiner netwerk en zijn ook minder actief dan de ERYHQVWDDQGHLQÁXHQFHUV+HWLVRS

het moment nog niet makkelijk om te achterhalen wat er voor zorgt dat HHQ3RWHQWLDO,QÁXHQFHUYHUDQGHUW

LQHHQ0DVV,QÁXHQFHURI6RFLDO

Broadcaster.

2: 'XQFDQ:DWWV merkt als enige op dat ZDQQHHUPHQVSUHHNWRYHULQÁXHQFHU

PHQ]HOGHQKHWEHJULSGHÀQLHHUW(U]LMQ

OHJLRDDQGHÀQLWLHVRSKHWZHEWHYLQGHQ

en men zou er goed aan doen als men bij een artikel meldt over welke soort LQÁXHQFHU]HKHWKHEEHQ

Om deze laatste reden heb ik een GHÀQLWLHRSJHVWHOGYRRUYHUGHUJHEUXLN

in deze scriptie:

(HQLQÁXHQFHULVLHPDQGGLHLQYORHG

uit kan oefenen op andere personen.

Hij of zij doet dit op basis van de kennis of mening die hij heeft over HHQVSHFLÀHNRQGHUZHUS'LWNDQ

gaan over een fysiek product of een abstract gegeven zoals een politieke voorkeur of mening over de PDDWVFKDSSLM'HLQÁXHQFHUPDDNW

gebruik van de nieuwe communicatie mogelijkheden, zoals social media en blogs, om zijn/haar kennis of mening te delen. Het netwerk dat GHLQÁXHQFHUKLHUPHHEHwQYORHGWLV

groter dan het gemiddelde netwerk

Dit gebeurde op basis van de gevonden GHÀQLWLHV

,QöXHQFHUPDUNHWLQJ

Het tweede deel bestaat uit een RQGHU]RHNQDDUKHWEHJULSLQÁXHQFHU

marketing. Hein Medema vat het in een interview als volgt samen:

,QÁXHQFHUPDUNHWLQJLVQLHWPHHUGDQ

mond-tot-mond reclame on steroids.

Ook het boek ,QÁXHQFHU0DUNHWLQJ beschrijft het als een variant van mond- tot-mond reclame. Het geeft hierbij een duidelijke beschrijving:

Iedereen heeft in de directe

kennissenkring iemand die verstand heeft over een bepaald onderwerp (bijvoorbeeld die ene neef die alles van computers weet). Aan deze persoon vraag je alles met betrekking tot dat onderwerp. Door de opkomst van online media hebben sommige van deze onbekende experts hun weg gevonden naar het internet, en daarmee het bereik

van hun expertise vergroot.

2ULJLQH

Dit brengt ons bij de opkomst van LQÁXHQFHUVDOVPDUNHWLQJPLGGHO'LW]LW

hem volgens 5D\PRQG/HRQ5RNHU in de gewijzigde houding van consumenten ten opzichte van bedrijven en merken.

Ze zijn niet meer bereid om informatie die direct van deze bronnen komt klakkeloos aan te nemen als waarheid.

Ze kunnen bovendien gemakkelijk elders betrouwbaardere bronnen vinden. John 0HXOHPDQV geeft een aantal duidelijke cijfers uit een RQGHU]RHNYDQ(GHOPDQG, welke een goed beeld geven van de gewijzigde houding.

Dit geeft aan dat mensen inderdaad steeds minder vertrouwen hebben in merken. De nieuwe informatie bronnen zijn volgens John vooral de social media, waarop iedereen over alles praat. Hij

verwijst hierbij naar een onderzoek uit 1950 welke nu nog steeds van toepassing zijn op social media volgens 'DYLG$DNHU

Een aantal getallen uit het onderzoek zie je hiernaast.

In combinatie met online media zorgt dit voor een steeds socialere internet ervaring. 7UHQGZDWFKLQJ beschrijft deze ontwikkeling als de F-Factor, waarbij F staat voor Friends, Fans en Followers. Dit manifesteert zich op de volgende manier in het media gebruik:

‡ F-Discovery; via je vrienden ontdek je nieuwe producten, diensten, etc.

‡ F-Rated; de aankopen die je doet zijn afhankelijk van de beoordelingen die je vrienden aan het product of de dienst geven.

‡ F-Feedback; wanneer je wat koopt hoop je op goede reacties van je vrienden.

‡ F-Together; je krijgt korting door het samen kopen van producten of diensten.

‡ F-Me; Producten en diensten zijn steeds vaker ingericht op een

,QöXHQFHUPDUNHWLQJ

Ze voorspellen daarnaast de opkomst van zogenaamde Social-Lites, de elite van deze nieuwe sociale wereld. Deze groep is actief op zoek naar de nieuwste producten en/of diensten. Daarmee hebben ze invloed op wat ‘de rest’ leuk vindt. Ze investeren veel tijd in het neerzetten van een merk IK, en kunnen daarmee echte experts worden op het gebied waarin ze deze energie steken. Dit ODDWVWHOLMNWHUJRSGHHHUGHUHGHÀQLWLHV

YDQLQÁXHQFHUV

Een tweede gerelateerde trend, welke ze in juni 2005 voor het eerst beschreven, en welke nu nog steeds merkbaar is, is de Twinsumer trend. Door de sociale netwerken die op het web zijn ontstaan, is mond tot mond reclame zoals eerder bechreven digitaal gegaan. Dit was vroeger alleen binnen je vrienden-, familie- en kenniskring mogelijk.

Door deze ontwikkeling is het steeds gemakkelijker geworden om relevante recensies te vinden over producten.

Daarnaast zorgt deze trend er ook voor

dat gelijkdenkende consumenten elkaar sturen naar bepaalde producten, en daarmee vrijwel identieke consumenten ontstaan. De meest invloedrijke

Twinsumers zullen zich vervolgens ontwikkelen tot Master Consumers, 6RFLDO/LWHVRI0DVV,QÁXHQFHUV'LW

zijn alle drie termen voor zogenaamde Master Consumers welke de keuzes van andere consumenten beïnvloeden.

+LHU QX

Deze twee ontwikkelingen dragen bij aan GHRSNRPVWYDQGHRQOLQHLQÁXHQFHU

HQGDDUPHHGHRSNRPVWYDQLQÁXHQFHU

marketing.

Merken die succesvol zijn en dat willen blijven zullen goed op deze beweging in moeten spelen. Doe je dit niet, dan ben je juist in dit nieuwe sociale klimaat al snel het bokje. 3DXO3ROPDQvoorspelt dat binnen nu en vijf à tien jaar de macht volledig in de handen van de consument zal liggen. Op dit moment is het al

mogelijk dat een simpel commentaar op één van je producten of uitlatingen op het web viraal gaat, met als UHFHQW  EHNHQGYRRUEHHOG70RELOH

Op 20 oktober 2010 twittert Youp van ’t Hek over zijn slechte ervaringen met de klantenservice van T-Mobile. Eén van de grootste klachten van Youp van ’t Hek betrof de slechte bereikbaarheid van de telefonische klachtenservice en het “Sovjetsysteem” van T-Mobile.

Met meer dan 43.000 volgers op Twitter verspreidt dit bericht zich razendsnel. De tweets van Youp van

’t Hek worden eveneens veelvuldig geretweet. Youp van ’t Hek zelf zegt T-Mobile niet te willen slopen, maar alleen wakker te willen schudden.

Online wordt echter al gesproken van een potentiële nieuwe Buckler-affaire.

Dit kan dus zowel positief als negatief

gebeuren en kan grote invloed hebben op het imago van je merk of bedrijf.

EURQ

,QöXHQFHU0DUNHWLQJ

9DONXLOHQ

Voor het te ontwikkelen product is het YDQEHODQJWHZHWHQKRHMHLQÁXHQFHU

marketing dient te gebruiken. Uit een gesprek met zowel de mensen van

VL[W\ÀYH en Hein Medema blijkt dat het een persoonlijk iets is. Om succesvol te zijn zal je een oprechte en persoonlijke EDQGPHWGHLQÁXHQFHUPRHWHQ

opbouwen. Zo ontstaat er een band die

]RZHOYRRUKHWEHGULMIDOVGHLQÁXHQFHU

YRRUGHOHQKHHIW'HLQÁXHQFHUNULMJW

informatie die voor hem relevant is en die er toe doet, en het bedrijf genereert vertrouwen of bekendheid bij de volgers YDQGHLQÁXHQFHU

Seth Godin beschrijft dit gegeven als permissie marketing. Hierbij vertelt

hij hoe je in zijn ogen contact dient te leggen met de mensen die waarde hebben voor je merk. Je mag ze niet direct vragen iets voor je te doen, bijvoorbeeld een gesponsord bericht plaatsen. In plaats daarvan moet je een echte relatie opbouwen en vervolgens wachten op validatie van deze relatie YDQXLWGHLQÁXHQFHU3DVGDQYHUWHOMHMH

verhaal en vraag je alsnog niet of hij of zij er iets mee wil doen. Deze keus ligt YROOHGLJELMGHLQÁXHQFHU*DMHWHVQHO

dan is de kans zeer groot dat je je relatie volledig verpest en in de toekomst op de negeer-lijst zal staan.

Tools

Opvallend is dat hier drie partijen ]LMQGLHYHUWHOOHQGDWLQÁXHQFHU

marketing heel persoonlijk is, maar er desalniettemin online diverse geautomatiseerde tools zijn die pretenderen de heilige graal te zijn YRRULQÁXHQFHUPDUNHWLQJ$OVLNQDDU

bestaande tools vraag tijdens mijn interview met Hein, zegt hij wederom dat geen enkele tool op zich in staat is GHMXLVWHLQÁXHQFHUWHYLQGHQHQGDW

het slechts een middel is bij de inzet van LQÁXHQFHUPDUNHWLQJ+LMJHHIWKLHUYRRU

een mooie metafoor:

´(HQLQÁXHQFHUWRROLVDOVHHQKDPHU

als je er een hebt, zal je er zelf nog een huis mee moeten bouwen”

Uit HHQYHUJHOLMNLQJYDQWRROV blijkt dat GHPHHVWHYDQGH]HWRROVGHLQÁXHQFHUV

ofwel een algemene score geven, ofwel bepaalde scores (bijvoorbeeld bereik en activiteit) apart weergeven in een tabel en dit vervolgens wel rangschikken op basis van de gemiddelde score over de verschillende elementen.

De tools die zich focussen op het monitoren van social-media voor bedrijven hebben enkele mogelijkheden tot visualisatie. Deze tools bieden bedrijven de mogelijkheid de gesprekken die online over hen gevoerd worden in beeld te brengen. Het nadeel is dat deze complexere tools vrij prijzig zijn. Zo

bij $600 per maand op basis van een jaar contract van $7200. Deze tools focussen zich vooral op het monitoren van het gesprek over een merk, en minder op het vinden van de meeste invloedrijke personen.

Op gebied van tools die zich wel focussen RSKHWYLQGHQYDQLQÁXHQFHUVLVHU

nog veel ruimte voor implementatie van visualisaties. Daarnaast maken ze een topscore of toplijst op basis van verschillende factoren zoals bereik en activiteit en hebben niet de mogelijkheid RPWHÀOWHUHQRSHHQYDQGH]HIDFWRUHQ

of de lijsten individueel van elkaar te zien.

Opvallend is dat geen van deze tools je in staat stelt om verschillen eigenschappen los te monitoren. Het is dus niet

mogelijk, of althans niet gemakkelijk, om te kijken of iemand die hoog scoort bij

8VHFDVHLQöXHQFHUPDUNHWLQJ

Tijdens de afstudeerperiode maakte We Are Blossom al eens gebruik YDQLQÁXHQFHUPDUNHWLQJ'LWZHUG

XLWJHYRHUGGRRU)LUVWHHQLQÁXHQFHU

marketing bureau. Een korte beschrijving van de opdracht volgt hieronder.

Voor de Staatsloterij bedacht We Are Blossom de actie hangmatting, gebaseerd op het beeld van de vrouw in de hangmat bij de communicatie uitingen van de Staatsloterij. Hangmatting is variant van Planking waarbij je net doet alsof je in een hangmat ligt.

Hangmatten werd eerst als een echte nieuwe trend gebracht. Hiervoor huurde Blossom een aantal studenten in die door het hele land moesten gaan hangmatten. De foto’s hiervan plaatsten we vervolgens op een blog:

hangmatting.tumblr.com

Om de blog bekend te maken bij het grote publiek schakelde Blossom het bureau First in. Op advies van hen maakte we zelf nog foto’s van hangmattende bikinibabes. Dit zou beter zijn voor het virale effect.

Zij begonnen vervolgens met het verspreiden onder de kleinschalige blogs voor geloofwaardigheid. Daarna gingen ze over op grotere blogs. De toppers die bereikt werden waren:

‡ dumpert.nl

‡ biertijd.com

‡ forum.viva.nl

‡ cosmogirl.nl

Uiteindelijk bereikte hangmatting meer dan 60 blogs wereldwijd en steeg het aantal bezoekers van de hangmatting blog tot boven de 50.000.

Op dit moment omarmde de Staatsloterij het fenomeen (wat natuurlijk al lang in de planning stond) en begon een hangmatting Facebook-actie. Hiervoor ontwikkelde Blossom een Facebook-tab, waar gebruikers eigen hangmatting foto’s konden uploaden om zo mee te dingen naar de hoofdprijs: 100 Koninginnedagloten.

Voor extra verkeer naar de Facebook-tab plaatsten we banners op de Tumblr blog en draaide we vanuit Blue Mango een Facebook campagne middels Facebook Advertising.

Mijn bijdragen aan dit project waren de volgende:

‡ Het ontwikkelen van de backend voor de Facebook-tab.

‡ Het aanpassen van het Tumblr thema zodat deze de banners

9LVXDOLVDWLH

Ü'RQÚWVDFULõFHDFFXUDF\FODULW\DQGXOWLPDWHO\

DQLQWHUHVWLQJVWRU\MXVWWRPDNHVRPHWKLQJ

ORRNXQLTXHÝ

3.1 Het doel

,QWUR

Om een goede combinatie te maken WXVVHQGDWDYLVXDOLVDWLHHQLQÁXHQFHU

marketing is gekeken naar een drietal aspecten die van toepassing zijn op het uiteindelijke product:

‡ Het doel; waar moet je op letten bij het maken van visualisaties.

‡ Type visualisatie; welke soorten visualisaties zijn er en bij welk doel passen ze.

‡ Frameworks; welke programmeer frameworks kun je gebruiken voor het visualiseren van data.

+HWGRHO

Het doel is de essentie van je visualisatie.

:DDURPLVGHYLVXDOLVDWLHQRGLJ":HON

YHUKDDOPRHWMHYLVXDOLVDWLHYHUWHOOHQ"

1DWKDQ<DX vat het als volgt samen:

“When designing infographics, do

analyze and understand the data.

'RQ·WVDFULÀFHDFFXUDF\FODULW\DQG

ultimately, an interesting story just to make something look unique.”

Dit is iets wat op het moment vaak verloren gaat. Artikelen van 6PDVKLQJ

Magazine & &UD]\(JJ beschrijven de hype van infographics en hoe vaak het doel van een infographic verloren gaat. De focus ligt te veel op het maken van een mooi plaatje voor het oog. Duidelijkheid en helderheid zouden nooit ten koste mogen gaan van de vormgeving. Ze geven echter ook te kennen dat het maken van een datavisualisatie geen eenvoudige klus LVHQMXLVWGHÀMQHOLMQWXVVHQHHQVDDLH

JUDÀHNHQHHQPRRLHLQIRJUDSKLFKHW]R

moeilijk maakt.

7LSV

Gelukkig geeft &UD]\(JJ een aantal

tips voor het maken van een goede visualisatie:

‡ Schetsen; zorg ervoor dat je voor je aan je visualisatie begint, een aantal schetsen maakt om te kijken welke vorm van visualisatie het beste past bij de data die je hebt.

‡ Ken de lijn tussen te saai en te veel poespas; het gaat altijd om het goed visualiseren van data, en niet om het PDNHQYDQHHQFKLTXHSODDWMH

‡ Zorg ervoor dat je de visualisatie niet te minimalistisch maakt en het op een mooi presenteerblaadje DÁHYHUW

‡ Houd het doel van de visualisatie in gedachte.

‡ Houd een lijst bij van wat werkt;

tijdens het maken van visualisaties merk je welke soort data bij welke type visualisatie past. Creëer hiervan je eigen lijst, zodat je iets hebt om op terug te vallen wanneer je iets nieuws probeert.

‡ 7\SRJUDÀHLVYRRUGHOXLH

ontwerper; bij het maken van een infographic moet je je data visualiseren, en niet alleen opleuken met een font en een mooi kleurtje.

(HQYHUKDDO

In het boek 9LVXDOL]H7KLVlegt Nathan Yau de waarde van het verhaal achter je data uit:

Data is meer dan een saaie reeks getallen. Elke data-set is een vorm van representatie van het echte leven.

Wanneer je data goed bestudeert en de betekenis achter de getallen duidelijk wordt, zal het verhaal achter de data ook duidelijk worden.

Dit moet ook altijd het uitgangspunt zijn van een visualisatie. Design- elementen moeten altijd in dienst

7\SHYLVXDOLVDWLHV

9LVXDOL]H7KLV geeft een aantal

voorbeelden van betekenissen die achter een datareeks kunnen zitten:

‡ Een patroon over een bepaalde tijd.

‡ Proportionele verschillen.

‡ Relaties tussen de individuele punten.

Om een beeld te krijgen over hoe deze betekenissen zich manifesteren in een YLVXDOLVDWLHKHELNHHQHLJHQÀFWLHYH

datareeks in een aantal visualisaties omgezet. Vervolgens is beschreven

wat voor soort verhaal de visualisaties vertellen.

Uit deze vergelijking blijkt dat de standaard staaf- en balkdiagram heer en meester zijn in het onderling vergelijken van de waarde van datapunten. Taart- en donutdiagrammen zouden gebruikt kunnen worden om data-elementen relatief in beeld te brengen. Zodat je ziet of een bepaalde waarde niet alleen hoog is, maar ook een groot percentage van het geheel is.

)UDPHZRUNV

Je zou het boek 9LVXDOL]H7KLV als een beginners bijbel kunnen zien voor datavisualisatie, want ook over visualisatie frameworks biedt het de de nodige informatie. Het geeft drie opties voor het ontwikkelen van visualisaties op het web, welke hieronder staan beschreven:

‡ )ODVK$FWLRQVFULSW

9RRUÁDVK]LMQHUDOYHHOYLVXDOLVDWLH

libraries ontwikkeld. Het installeren van een framework en het opzetten van een standaard document wijkt af van de meeste programmeertalen.

‡ PHP

Kies je voor PHP, dan ben je afhankelijk van je server. Hier moet HHQJUDÀVFKHHQJLQHRSGUDDLHQ

Deze genereert vanaf de server de visualisaties. Gelukkig zijn de meeste servers voorzien van een dergelijke engine.Het nadeel is dat de server die visualisaties moet uitrekenen,

en dit niet op de computer van de gebruiker gebeurt. Met andere woorden: hoe meer gebruikers hoe trager de applicatie.

‡ +70/&66-DYDVFULSW

Deze type visualisaties zijn de laatste tijd in opkomst. Het loopt nog achter RSÁDVKTXDKHWDDQWDOEHVFKLNEDUH

OLEUDULHVPDDUELHGWÁH[LELOLWHLW

met zowel statische als interactieve visualisaties. Daarnaast draait het in elke moderne browser. Dit is een voordeel ten opzichte van Flash, waarvoor de gebruiker een plug- in geïnstalleerd moet hebben. Ten opzichte van PHP is het voordeel dat de visualisatie op de computer wordt gegenereerd, en niet door de server. Een bijkomend voordeel is dat je extra functionaliteit kan toevoegen door een visualisatie library te combineren met bijvoorbeeld jQuery.

De keuze voor het maken van de visualisatie ging dus vooral tussen Flash en Javascript. Op basis van het bovenstaande koos ik voor de laatste.

Een persoonlijke pré is dat ik javascript in de toekomst vaker zie terugkomen in mijn beroepsveld dan Flash.

&DQYDVYHUVXVHOHPHQWV

Nu de keuze voor javascript is gemaakt, zijn we er nog niet. Hierin bevinden zich namelijk nog twee soorten visualisaties:

‡ Canvas

‡ Elements

Om het verschil hiertussen te verduidelijken kijkt u hiernaast naar de afbeelding. Het verschil is goed zichtbaar. Kies je voor een framework dat de visualisatie op canvas maakt, dan zit je vast aan één object. Kies je voor een library welke losse elementen genereert, dan kan je verschillende elementen

YDQHHQJUDÀHNQRJORVDDQURHSHQ

Om interactie mogelijk te maken is hier gekozen voor de optie met losse elementen.

4 Data, data , data

KHWUHDOLVHUHQ

YDQGHGDWDLQSXW

6RFLDOVHDUFK

Om erachter te komen waar de data van GHUHOHYDQWHLQÁXHQFHUVLVWHYLQGHQLV

een HQTXrWH afgenomen bij zowel jonge ouders, als mensen die jonge ouders kennen.

Voor representatieve resultaten waren 384 respondenten nodig. Dit is gebaseerd op de VDPSOHVL]HIRUPXOHYDQ&UHDWLYH

5HVHDUFK6\VWHPV:

ss = (Z^2 * (p) * (1-p)) / c^2

Om te kijken of dit haalbaar was heb LNHHQGUDIWHQTXrWHDIJHQRPHQ'H]H

werd slechts achttien maal ingevuld.

Daarmee bleek een representatieve steekproef niet haalbaar. Deze uitkomst is besproken met de stuurgroep. Op basis van dit gesprek is besloten van de use-case af te stappen en een algemene LQÁXHQFHUWRROWHRQWZLNNHOHQ

dagen doorzoekt op het gebruik van een keyword. In de feed is verder aangegeven dat de berichten Nederlandstalig moeten zijn. Vervolgens toont de web app de gebruiker, de bron en het bericht, daarnaast hebben berichten vanuit Twitter een Twitter-blauwe kleur, vanuit Facebook zijn de berichten Facebook- blauw en de rest heeft een oranje kleur.

De feed bevat echter ook buitenlandse resultaten en is dus niet geheel foutloos.

De laadtijd van de feed is overigens redelijk lang:

demo.edriessen.nl/json 6HDUFK$3,V

Om de sociale data binnen te halen is gezocht naar verschillende search APIs.

Deze komen in twee vormen:

‡ Multi platform

‡ 3ODWIRUPVSHFLÀHN

Multi platform klinkt als de ideale bron voor data. Een tool die verschillende online platforms doorzoekt en daar de UHOHYDQWHLQIRUPDWLHXLWÀOWHUWHein Medema raadde me aan eens naar Social Mention te kijken. Deze tool stelt je in staat om verschillende platformen te doorzoeken, met de optie om aan te geven welke je wel of niet wil gebruiken.

Uit een vergelijking met andere LQÁXHQFHUWRROEHORRIGGH]HWRROYHHO

ÁH[LELOLWHLWPLGGHOVHHQHLJHQ$3,

Om de deze API te testen en direct een koppeling te maken met datavisualisatie is een simpele web app ontwikkelt.

Deze laadt een JSON-feed in van de Social Mention API welke de laatste tien

Hein vertelde me echter ook dat LQÁXHQFHQLHWRSHONSODWIRUPKHW]HOIGH

is; een like is immers niet hetzelfde als een retweet.

'HSODWIRUPVSHFLÀHNH$3,V]LMQVSHFLDDO

ontwikkeld voor de bijbehorende platformen en bieden daarmee meer ÁH[LELOLWHLWELMKHWXLWOH]HQYDQGDWD'LW

zie je terug in de feeds.

“metadata”:{

“recent_retweets”:3,

“result_type”:”popular”

},

De JSON data van een Twitter feed toont bijvoorbeeld het aantal Retweets, de feed van Social Mention doet dit niet. Dit zit hem in de meta data die de Twitter API meegeeft. Bij Social Mention zou een extra handeling nodig zijn om het aantal Retweets te achterhalen.

4.2 JSON

Omdat het gekozen framework werkt met javascript, zal de input van de tool in een JSON format gezet worden, wat volgens 9LVXDOL]H7KLV het vriendelijkst is voor online visualisaties. -VRQRUJ beschrijft het als een licht data-format die gemakkelijk te lezen en te begrijpen is. Daarnaast werkt het goed samen met vrijwel alle programmeer talen. Er zijn daarnaast ook vele web-APIs die data in dit format aanbieden (9LVXDOL]H7KLV).

6SHFLDOHVDXV

Voor de tool is data-input van belang, en hiervoor zijn twee waardes nodig:

‡ Bereik; dit zorgt voor meer bekendheid.

‡ Activiteit; dit zorgt voor meer vertrouwen.

Om de waardes voor deze twee te bereiken zal het resultaat van een search API moeten veranderen in een soort van score. Als voorbeeld hiervoor kunnen we kijken naar de 7ZLWWHU6HDUFK$3,.

Hiernaast zie je hoe de feed eruit ziet, en wat er gebruikt wordt om zowel bereik als activiteit te berekenen.

Beide waardes zullen ook afhankelijk zijn van de regelmaat waarmee iemand berichten stuurt. Om dit af te vangen zal er een waarde zijn die het aantal volgers checkt of het aantal Retweets, en een waarde die het aantal Tweets over het

'HLQöXHQFHUPüK

KHWEHHVWMHELM

GHQDDPQRHPHQ

&RQFOXVLHV DDQEHYHOLQJHQ

Op basis van het drieledige onderzoek kunnen we de volgende conclusies WUHNNHQ,QÁXHQFHUPDUNHWLQJLVHHQ

opkomende vorm van marketing.

Voor de inzet ervan moet je voor jezelf GXLGHOLMNKHEEHQZDWHHQLQÁXHQFHU

is en ten alle tijden het initiatief bij de LQÁXHQFHUODWHQ'RHMHGLWQLHWGDQ]DO

het ten kost gaan van de band die je met GHLQÁXHQFHUKHEWRSJHERXZG

Als we kijken naar de bestaande tools die deze marketingvorm combineren met ICT, dan zeggen de experts dat nog geen enkele tool in staat is uit zichzelf GHMXLVWHLQÁXHQFHUWHYLQGHQ'DDUQDDVW

valt op dat de meeste tools vrij weinig doen met visualisatie, en zich vooral focussen op het tonen van één getal of score.

Op gebied van visualisaties valt er dus winst te behalen en ook de PRJHOLMNKHLGRPLQÁXHQFHUVRSEDVLV

van verschillende eigenschappen, zoals

bereik en activiteit, te splitsen zou een unieke functionaliteit zijn.

Om deze winst te behalen is ten eerste een goede visualisatie nodig. Hierbij is het van belang altijd het doel van de visualisatie in je hoofd te houden.

De staaf- of balkdiagram is het meest geschikt is om losse waardes met elkaar te vergelijken. Andere visualisaties ]LHQHUFKLTXHHQLQWHUHVVDQWXLWPDDU

dragen niet bij aan het vergelijken van individuele data en daarmee de duidelijkheid van de data.

Het realiseren van de visualisatie kan het beste gaan middels een javascript- framework. Deze werkt in elke moderne browser en staat extra mogelijkheden toe middels bestaande libraries als jQuery.

Het data-format dat hier het beste bij past is JSON, een licht format dat met het oog makkelijk leesbaar is

en goed samengaat met vrijwel elke programmeertaal.

De uiteindelijke data-input kun je het beste binnen halen middels platform- VSHFLÀHNH]RHN$3,V'H]H]LMQVQHOOHU

dan algemene zoek APIs welke meerder platformen afzoeken.

,PSOHPHQWDWLH

Met de conclusies en aanbevelingen in het achterhoofd is de tool ontwikkeld.

Met de tips van CrazyEgg in gedachte ben ik begonnen met schetsen.

Op basis van een drietal schetsen viel de beslissing tussen staaf- of balkdiagrammen. Om de labels die bij een balk of staaf horen zo leesbaar mogelijk te houden is gekozen voor de balk diagram.

Doordat deze het beter toelaat om labels links of rechts van de diagram te plaatsen.

Vervolgens heb gekeken hoe ik de twee JUDÀHNHQYRRUEHUHLNHQDFWLYLWHLWKHW

best kan plaatsen. Om een vergelijking tussen gebruikers die in alle twee de JUDÀHNHQYRRUNRPHQWRHWHVWDDQ

is gekozen voor een gecentreerde weergave.

Zo kan je direct zien of gebruiker ‘x’

zowel links als rechts hoog staat. Onder de balken zal een donutdiagram komen.

Deze laat je zien op hoeveel procent van het geheel je selectie zit.

,PSOHPHQWDWLH

'HOLEUDU\

Bij het realiseren van deze schets is in eerste instantie gebruik gemaakt van het framework Protovis. Hiervan stond een simpele demo in 9LVXDOL]H7KLV. Tijdens de ontwikkeling van een aantal eerste visualisaties maakte de ontwikkelaars jammergenoeg bekend dat de verdere ontwikkeling van de library was stopgezet. Balen. Gelukkig gaf de pagina ook aan dat hetzelfde team inmiddels werkt aan D3.js, een vergelijkbare library, die meer interactie en animatie toe liet. Of in het kort: hetzelfde, maar dan beter.

Met behulp van deze library is de tool vervolgens gebouwd. Dit is op iteratieve wijze gebeurd. Er zijn zowel voor de balk- als donutdiagrammen eerste werkende demo’s gemaakt. Na het afronden van een demo is deze verwerkt in de tool. Zo breidde ik de tool stap voor stap uit.

Het koppelen van de selectie uit een lijst aan de donutdiagram is eerst voor het bereik gedaan,en later toegepast op activiteit. In dezelfde volgorde is de interactiviteit tussen de linkse en rechtse diagram bewerkstelligd. Vervolgens is een topdrie lijst toegevoegd.

In totaal bestaat de tool uit de topdrie lijst, twee balkdiagrammen, twee selectie lijsten, en twee donutdiagrammen. De tool staat live op:

demo.edriessen.nl/tool001

‡ De iconen aan de top geven aan ZDDUGHWZHHNDQWHQYDQGHJUDÀHN

voor staan: oranje staat voor reach (bereik), groen staat voor activity (activiteit). De keuze voor twee complementaire kleuren geeft FRQWUDVWWXVVHQEHLGHJUDÀHNHQ

‡ De topdrie lijst geeft de hoogste drie gebruikers aan die zowel links als rechts goed scoren.

‡ De balkdiagrammen laten het bereik en de activiteit van de gebruikers in de lijst zien.

‡ De selectie lijsten tonen de labels die bij de respectievelijke balk horen en bieden de mogelijkheid tot het selecteren van bepaalde namen.

‡ De donutdiagrammen laten je zien op hoeveel procent van het geheel de huidige selectie zit. Hiermee kun je zien of iemand met bijvoorbeeld iets minder bereik, relatief veel activiteit toevoegt.

‡ De data wordt gesorteerd

weergegeven zodat je direct ziet hoe hoog iemand staat die zowel links en rechts voorkomt.

([WUDLQWHUDFWLH

De mogelijkheid voor het gebruik van jQuery is niet onbenut gelaten. Zo gaan alle highlights van keuzes in de lijsten en balken via deze library. jQuery zorgt er tevens voor dat een gebruiker die links gekozen wordt, ook rechts als gekozen te zien is. Dit gebeurt allemaal door de naam van een gebruiker toe te voegen als CSS-class aan de bijbehorende balk en het bijbehorende label.

jQuery zorgt daarnaast nog voor het toevoegen van de lijsten onder de donutdiagram. Hier staat de naam van de gebruiker vermeld met de bijbehorende Twitter-link. Dit kan later nog uitgebreid worden met links naar andere platforms.

$QLPDWLH

De animaties die je in de tool terugziet zijn op twee manieren gerealiseerd. De

D3.js library ondersteund een update functie waarmee je de data van een JUDÀHNLQGLWJHYDOGHGRQXWGLDJUDP kan updaten. Deze update is vervolgens te koppelen aan een transformatie functie die er voor zorgt dat deze wijziging over een bepaalde tijd plaatsvindt en daarmee voor animatie zorgt. Een soortgelijke functie zorgt voor het inladen van de balken.

,PSOHPHQWDWLH

de Twitter input klaar, het slechts een kwestie is van het wijzigen van de input.

Vervolgens zal de tool zich automatisch opbouwen op basis van de nieuwe input.

Voor detailleerde info over de code kunt XNLMNHQLQGHELMODJH,QÁXHQFHUPRWK[

ICT.

+HWEHHVWMHELMGHQDDPQRHPHQ ,QÁXHQFHUPRWKLVGHQDDPGLHGHWRRO

gekregen heeft. Deze naam is ontstaan tijdens het ontwikkelen van het eindproduct. Bij het naderen van het einde leek de tool verdacht veel op een PRW$OGXVGHQDDP,QÁXHQFHUPRWK

De animaties die je terug ziet wanneer je met je muis over een item (iconen bovenin, lijst-elementen en balkdiagram) hovert zijn gerealiseerd met CSS3 transities. Een zeer eenvoudige manier om de overgang van de normale status van een element naar een hover status te animeren.

-webkit-transition:

 EDFNJURXQGVHDVH

Data

Op gebied van data is er op het moment van schrijven goed en slecht nieuws.

Het slechte nieuws is dat er nog geen realtime data-input is. In de aankomende weken zal een Twitter-input ontwikkeld worden en deze zal tijdens de

afstudeerzitting geïmplementeerd zijn. Het goede nieuws is dat de tool

7HUXJEOLN

HHQKHHOYHUKDDORP]HWWHQ

QDDUªªQVLPSHOHQSDNNHQGEHHOG

Wanneer ik terugkijk naar de opdracht kan ik zeggen dat er twee delen van het onderzoek goed zijn verlopen, en een deel minder goed. Het mindere deel bestaat uit het onderzoek naar het ophalen van data. Hierbij had meer tijd gebruikt kunnen worden voor de use- FDVHVSHFLÀHNHHLJHQVFKDSSHQZHONH

door stuurgroep werden verwacht. Ook is op het moment van schrijven nog geen real-time input gerealiseerd. De theorie hier achter is echter wel al duidelijk en dit zal voor de afstudeerzitting geïmplementeerd zijn.

De andere twee delen verliepen JRHG+HWRQGHU]RHNQDDULQÁXHQFHU

marketing gaf een gezonde basis over het begrip, daarnaast kwamen er een DDQWDOEHVWDDQGHLQÁXHQFHUWRROV

voorbij. Deze gaven een duidelijk beeld van wat er al gedaan was en op welk gebied nieuwe mogelijkheden waren.

Voor het visualisatie gedeelte is

gekeken naar met welk idee je een GDWDYLVXDOLVDWLHPDDNWZHONHJUDÀHNHQ

wat voor soort verhaal vertellen en welk framework het beste bij deze visualisatie past. De combo van deze drie zorgt voor een visualisatie die doet wat hij moet doen, en er niet alleen leuk uitziet.

Op het uiteindelijke product dat er nu staat, ben ik al zeer trots. Het heeft weliswaar nog geen real-time input.

Maar het is een duidelijk visueel concept YRRUKHWZHHUJHYHQYDQLQÁXHQFHUGDWD

Het is meer dan een simpele tabel met scores en laat je relaties leggen tussen zowel bereik als activiteit.

'H7RHNRPVW

De doorontwikkeling van de tool kan op verschillende gebieden gebeuren.

Ten eerste zal ik een real-time input genereren, zodat het ook echt een real- time data visualisatie tool is.

Toekomstige mogelijkheden zitten hem in het monitoren van andere sociale platformen zoals Facebook of blogs.

:H$UH%ORVVRPRYHUPLM Ik vroeg de vaste vier van We Are Blossom hoe ze mij als stagiair hebben ervaren. Hieronder staan hun reacties.

Van links naar rechts:

5DOIYDQ/LHVKRXW

Het was leuk te werken met Erik.

Hij heeft de zeldzame eigenschap dat hij een brug kan slaan tussen design, technologie en de business.

Dat, gecombineerd met zijn open persoonlijkheid, zelfredzaamheid, prettige omgang en humor (kwestie van smaak), maakt hem een ideale teamspeler voor elk bedrijf actief in online marketing, media en creatie. Deze scriptie is daar wat mij betreft het bewijs en resultaat van. #nice&talented

(YDOXDWLH

7RPDV'DQNHUV

Afstuderen is voor Erik niet het begin van zijn carrière. Daar is hij wat mij betreft al mee is begonnen! Zo heeft hij mij in mijn rol als projectmanager bij een aantal projecten erg goed en kundig uit de brand geholpen. En dat naast het schrijven van zijn scriptie. Dat maakt hem voor mij een volwaardige collega, klaar voor een mooie toekomst.

6YHQ.OHUNV

Erik is een hardwerkende, handige

hem

in de afgelopen vijf maanden misschien alleen de eerste week als stagiair gezien en toen werd al snel duidelijk dat hij kon meedraaien als een volwaardige collega. Je kan er op vertrouwen dat Erik zijn werk goed en netjes uitvoert en hij heeft ook zeker geen slappe 9 tot 5 mentaliteit. Ik vind het echt jammer dat zijn stageperiode er (bijna) op zit.

)ORULVYDQGHQ(OVKRXW

Erik gaat niet lopen zeuren als hij een lastige opdracht krijgt. Als een vrolijke

KRHKLMKHWPRHWÀNVHQGDQVWDSWKLMRS

iemand af of googlet hij net zolang tot hij een oplossing heeft gevonden. Een aanwinst in ieder team omdat hij smaak met techniek weet te combineren en een serieus leuke gast is. Als er een ding is wat hij nog kan verbeteren, is het meer voor zichzelf kiezen. Omdat talent alleen kan groeien als het echt de ruimte krijgt.

'H%ORVVRPVHQLN

0LMQUHÁHFWLHEHYDWWZHHRQGHUGHOHQ

(QHU]LMGVHHQUHÁHFWLHRSPLMQ

persoonlijke ontwikkelpunten die ik voorafgaande aan het afstuderen voor mezelf opstelde. Anderzijds een korte terugblik op de studie in het algemeen.



2QWZLNNHOSXQWHQ

Voor mijn afstuderen had ik twee ontwikkelpunten. Eén op gebied van ICT en één op gebied van communicatie. Ik zal ieder punt beschrijven op basis van het vooraf gewenste resultaat.

ICT

*HZHQVWHUHVXOWDDW

Mijn programmeervaardigheden zijn verbeterd op gebied van een of meerdere gebruikte programmeertalen. Omdat programmeer talen in de basis veelal dezelfde structuur hebben, zullen mijn algemene programmeervaardigheden daarmee ook verbeterd zijn.

+HWUHVXOWDDW

Op dit gebied heb ik me goed ontwikkeld.

De visualisatie library maakte gebruik van redelijk complexe manier van het opbouwen van visualisaties middels div- of de nieuwere svg-elementen.

Toen duidelijk werd dat de library die aanvankelijk gekozen was niet meer door werd ontwikkeld, was het even schrikken. Maar de nieuwe library van hetzelfde team was soortgelijk in opbouw en daardoor redelijk gemakkelijk op te pakken.

Met de andere library waarmee ik werkte (jQuery) had ik al wat ervaring.

Het gaat me nu wel een stuk soepeler af.

Voorheen was het veel google werk als ik iets voor elkaar wilde krijgen. Maar nu zet ik het merendeel vaak zelf op.

Dit is dan misschien nog niet de meest HIÀFLsQWHZLM]HRPEHSDDOGHUHVXOWDWHQ

te behalen, maar het gebeurd in ieder geval op de manier die ik in gedachte had. Het verbeteren van de code is op dit

moment mijn volgende ontwikkelpunt.

Hierbij wil ik vooral energie gaan steken in het gebruiken maken van eigen functies.

&RPPXQLFDWLH

*HZHQVWHUHVXOWDDW

Ik heb een product ontwikkeld wat in de ogen van de klant is wat hij wil dat het is.

Zowel de technische kant als de visuele kant zijn ingericht op dat wat de klant er mee wil doen.

+HWUHVXOWDDW

Op dit gebied ben ik deels tevreden. Bij het ontwikkelen van de tool en bij het vinden van bepaalde uitkomsten van het onderzoek heb ik dit met de stuurgroep besproken. Op basis van deze gesprekken nam ik de beslissingen als het toevoegen van de topdrie lijst of keuze om af te stappen van de use-case.

5HöHFWLH

Bij het afronden van een bepaalde functionaliteit besprak ik dit ook direct, en vroeg ik of ze nog een bepaalde functie terug wilde zien. Zo ja, dan onderzocht ik de mogelijkheden hiervoor en implementeerde ik deze als het haalbaar was. Het was voor mij nieuw om zo direct met de opdracht- gever samen te werken, maar dit heeft het product zeker goed gedaan.

De tool is op dit moment echter nog JHEDVHHUGRSÀFWLHYHGDWD+LMLV

daarmee niet realtime. Het is wel een concept dat toont hoe je visualisatie kan WRHSDVVHQRSLQÁXHQFHUGDWD7LMGHQVGH

afstudeerzitting zal er echter wel real- time data inzitten, zodat het ook echt te gebruiken is als visualisatie van realtime LQÁXHQFHUGDWD

0LMQWLMGELM,0'

tevreden ben met de keuze die ik vier jaar geleden maakte.

Dit komt vooral doordat ik de studie ervaar als een studie met veel vrijheid.

Als ik een opdracht niet interessant vond, dan stak ik er wat minder moeite en kon ik het toch degelijk afronden.

Vond ik het wel interessant, dan stak ik er met plezier vele extra uren in om zo tot een goed resultaat te komen.

Een extra bonus vond ik in het direct toepassen van kennis bij opdrachten voor mijn eigen bedrijf. Zo verbeterde ik mijn vaardigheden voor zowel school als werk. Een mogelijkheid die volgens mij niet veel studies bieden.

Sven Klerks vroeg me tijdens mijn afstudeerperiode wat ik later wilde gaan doen. Ik antwoordde destijds met het volgende:

ik wil later vette dingen maken

Nu wil ik dat nog steeds, maar ik weet nog niet zeker op welk gebied. Ik vind het echte coderen steeds leuker en ook KHWJUDÀVFKYRUPJHYHQYRRUPLMQHLJHQ

bedrijfje doe ik graag.

Onlangs zag ik een video van Chip Kidd, een man die boekomslagen ontwerpt.

Het ontwerpproces past erg bij mijn manier van werken: een heel verhaal omzetten naar één simpel en pakkend beeld.

(SLORRJ

7 Referenties

ZDDUKHWDOOHPDDO

YDQGDDQNRPW

Hier vindt u de bronnen die gebruikt zijn voor het realiseren van deze scriptie. De bronnen zijn overzichtelijk ingedeeld per hoofdstuk.

'HUWLHQJHYRQGHQGHÀQLWLHVYDQ

LQÁXHQFHUV

%LMODJH,QÁXHQFHUPRWK[2QGHU]RHN

+RRIGVWXN,QÁXHQFHUV

'XQFDQ:DWWV&R$XWHXU,QÁXHQFHU

0DUNHWLQJ

:K\6RFLDO,QÁXHQFH0DWWHUV7R

Business - Inc.

- 31/03/2011 - Lou Dubois

+HLQ0HGHPD+HDGRI0DUNHWLQJELM

6RXUFH5HSXEOLF

Interview met Hein Medema

%LMODJH,QÁXHQFHUPRWK[2QGHU]RHN

- Hoofdstuk 1.4 Gesprekken

,QÁXHQFHU0DUNHWLQJ Hoofdstuk 1

Introduction pagina 14 - First Edition - 2008

- Duncon Brown & Nick Hayes

5D\PRQG/HRQ5RNHU0HGHRSULFKWHU

URB Magazine

Selling The New Cool: Inside The World 2I¶,QÁXHQFHUV·

- Forbes - 07/09/2012 - Matthew Newton

7.1 Bronnen 2.1 2.2

-RKQ0HXOHPDQV6WUDWHJ\ 7HFKQRORJ\

ELMVL[W\ÀYH

,QÁXHQFHU0DUNHWLQJ(QJDJLQJ2QOLQH

,QÁXHQFHUV - Slideshare - 07/10/11 - John Meulemans 2QGHU]RHNYDQ(GHOPDQ 2009 Trust Barometer - Edelman

- 2009

'DYLG$DNHU9LFH9RRU]LWWHUYDQ

3URSKHWFRP

Secrets of Social Media Revealed 50 Years Ago

- Harvard Business Review - 17/06/11

- David Aaker 7UHQGZDWFKLQJ

The F-Factor

7UHQGZDWFKLQJ

11 Crucial Consumer Trends for 2011 - 7.

Social-Lites And Twinsumers - Trendwatching

- 01/2011

3DXO3ROPDQ&(28QLOHYHU

Paul Polman: ‘The power is in the hands of the consumers’

- The Guardian - 21/11/2011

-R&RQÀQR

5HFHQW EHNHQGYRRUEHHOG70RELOH Youp van ‘t Hek brengt T-Mobile reputatieschade van een ton - Marketingtribune

- 25/10/12

VL[W\ÀYH6RFLDO6WUDWHJ\ &RQFHSWV ,QWHUYLHZPHWVL[W\ÀYH

%LMODJH,QÁXHQFHUPRWK[2QGHU]RHN

- Hoofdstuk 1.4 Gesprekken

+HLQ0HGHPD+HDGRI0DUNHWLQJELM

6RXUFH5HSXEOLF

Interview met Hein Medema

%LMODJH,QÁXHQFHUPRWK[2QGHU]RHN

- Hoofdstuk 1.4 Gesprekken

6HWK*RGLQ$XWHXUYDQEHVWVHOOLQJ

PDUNHWLQJERHNHQ Permission Marketing - Sethgodin.typepad.com - 31/01/08

- Seth Godin

(HQYHUJHOLMNLQJYDQWRROV Tool extravaganza

%LMODJH,QÁXHQFHUPRWK[2QGHU]RHN

- Hoofdstuk 1.3 Valkuilen

2.3

1DWKDQ<DX2SULFKWHUHQ&XUDWRUYDQ

)ORZLQJGDWDFRP

Do’s And Don’ts Of Infographic Design:

Revisited

- Smashing Magazine - 21/10/2011 - Nathan You

6PDVKLQJ0DJD]LQH

Do’s And Don’ts Of Infographic Design - Smashing Magazine

- 14/10/2012 - Amy Balliet

6PDVKLQJ0DJD]LQH

Do’s And Don’ts Of Infographic Design:

Revisited

- Smashing Magazine - 21/10/2011

- Nathan You

9LVXDOL]H7KLV

Hoofdstuk 4 t/m 8 pagina 105 - iPad Edition - Nathan Yau

&UD]\(JJ

Infographics: How to Stike the Elusive Balance between Data and Visualization - Crazy Egg Blog

- 02/22/12 - Babar Suleman 9LVXDOL]H7KLV

Hoofdstuk 1

Telling Stories with Data pagina 4

- iPad Edition - Nathan Yau

3.1 3.2

9LVXDOL]H7KLV

Hoofdstuk 3

Choosing Visualisation Tools pagina 72

- iPad Edition - Nathan Yau

3.3

(QTXrWH

%LMODJ,QÁXHQFHUPRWK[2QGHU]RHN - Hoofdstuk 3: Data

- Enquete Kinderkleding Inspiratie 6DPSOHVL]HIRUPXOHYDQ&UHDWLYH

5HVHDUFK6\VWHPV Sample Size Formula - surveysystem.com

+HLQ0HGHPD+HDGRI0DUNHWLQJELM

6RXUFH5HSXEOLF

Interview met Hein Medema

%LMODJH,QÁXHQFHUPRWK[2QGHU]RHN

- Hoofdstuk 1.4 Gesprekken

9LVXDOL]H7KLV Chapter 2 Handling Data pagina 48 - iPad Edition - Nathan Yau -VRQRUJ

Introducing JSON - json.org

7ZLWWHU6HDUFK$3, Get Search

- dev.twitter.com/docs/api/get/search Get Followers

- dev.twitter.com/docs/api/1/get/followers/

ids

4.1 4.2 4.3

9LVXDOL]H7KLV Hoofdstuk 5

Visualizing Proportions pagina 168

- iPad Edition - Nathan Yau

5.2

Bij deze scriptie horen een aantal bijlagen. Deze staan op een CD welke bij dit boekwerk zit gevoegd. Het bevat de volgende onderdelen:

‡ 3,'

Het Project Initiatie Document.

‡ ,QÁXHQFHUPRWK[2QGHU]RHN

Een document waarin de informatie is vastgelegd die voor deze scriptie is gebrukt.

‡ ,QÁXHQFHU0RWK[,&7

Een diepgaande uitleg van de ontwikkelde tool.

‡ ,QÁXHQFHUPRWK[&RGH

De code van de tool zoals deze er op het moment van schrijven was.

%LMODJHQ