@VITAS Creative Development Vitas Datavisualisation guide 1
Introductie Tijdens het proces van het creëren van data worden veel beslissingen gemaakt op basis van persoonlijke voorkeur of op basis van de software die wordt gebruikt. Deze gids geeft u bruikbare inzichten die u helpen in de reis om een beter begrip te krijgen in data visualisatie. De hoofdstukken in deze gids zijn niet bedoeld om te lezen in één lange zit of als stappenplan. Maar meer als startpunt voor het begrijpen van de basisprincipes van data visualisatie. Veel leesplezier! Vitas Datavisualisation guide 2
Inhoudsopgave 01. Verhalen vertellen 02. Stragegisch of operationeel? 03. Pre attentief verwerken 04. Visualisaties organiseren 05. Onderzoeken of uitleggen? 06. Alles gaat om de context 07. Kleurgebruik 08. Tabellen 09. Do's en Don'ts 10. Kaarten en grafieken 11. De wereldkaart 12. Referenties en inspiratie 4 5 6 7 8 9 10 11 12 13 14 15 Vitas Datavisualisation guide 3
Verhalen vertellen Alles wat wij als mensen doen is op basis van verhalen vertellen. Verhalen die we vertellen en verhalen die we horen. Als u geen goed begrip heeft in het vertellen van verhalen, dan ben je ook niet goed in het bepalen van menselijk gedrag. Als je niet goed bent in menselijk gedrag dan zult u mensen ook niet in beweging krijgen om actie te ondernemen. Mensen zijn emotionele wezens, wij handelen op basis van emotie. Verhalen maken ons emotioneel! 1. De achtergrond Introduceer de hoofdrolspelers en de omgeving. 2. Opbouwende spanning De events die te maken hebben met het probleem of conflict. 3. Climax Dit is waar het probleem het hoogtepunt bereikt. 4. Afbouwende spanning Op dit moment zijn de hoofdrolspelers bezig met het oplossen van het probleem of conflict. 5. Conclusie Dit is hoe het verhaal afloopt. 3 4 2 5 1 Vitas Datavisualisation guide 4
Strategisch of operationeel? Hoe wilt u uw data presenteren? Geeft u uw klant of medewerker de mogelijkheid om zelf hun weg te vinden of moet dit pad strategisch uitgedacht worden? Kies de richting waarmee u uw probleem oplost. Er zijn verschillende manieren om data te presenteren. Het is heel belangrijk dat de data zo duidelijk en onpartijdig mogelijk wordt gepresenteerd. Vind de balans tussen het verhaal dat u wilt vertellen en de vrijheid die de gebruiker moet hebben om te interacteren met de data. Maker gedreven Een linear proces waarin de maker van de visualisatie het meest invloed heeft op wat de gebruiker ziet van de data en wanneer. Martini glas Het beginpunt is statisch en volgt een uitgestippelde route. Aan het einde krijgt de gebruiker de vrijheid om zelf de data te ontdekken. Gebruiker gedreven Geeft de gebruiker de gelegenheid om een eigen pad te kiezen en te verkennen op eigen tempo. Vitas Datavisualisation guide 5
Pre-attentief verwerken Pre-attentief verwerken wordt automatisch uitgevoerd door ons visuele systeem. Het gebeurt snel, moeiteloos en zonder echte focus. Dat betekent dat de gebruiker al een eerste impressie van een beeld heeft, voordat dit bewust verwerkt. Denk aan het zein van iets dat lijkt op een spin in de hoek van de kamer. Niet pre attentief De gebruiker moet elke waarde scannen, verwerken en vergelijken. Wel pre attentief De gebruiker scant de variaties in grootte en dikte van cirkels en herkent dit in de vroege waarneming direct. Vitas Datavisualisation guide 6
Visualizaties organiseren Wanneer gebruikers een pagina zien, proberen zij dit direct te organiseren om zo de betekenis te begrijpen. Het is onze taak om de informatie zo te organiseren dat het een zo duidelijk mogelijk verhaal vertelt. Verdeel informatie in betekenisvolle categorieën. Dit helpt de gebruiker bij het begrijpen van de data en hoe ze met elkaar in verband staan. West Zuid Oost Noord Directe verkoop Distributeur verkoop Verkoop Betalingen Boekingen 0 10,000 20,000 30,000 0 10,000 20,000 30,000 0 10,000 20,000 30,000 Vitas Datavisualisation guide 7
Toelichten of ontdekken Inkomsten De daadwerkelijke kosten in vergelijking met het budget Variatie 30% Inkomsten De daadwerkelijke kosten in vergelijking met het budget Inkomsten 120.000 20% 100.000 10% 80.000 0% -10% Budget Daadwerkelijke kosten 60.000 40.000 Budget Daadwerkelijke kosten -20% 20.000-30% 1 2 3 4 5 6 7 Weken 0 1 2 3 4 5 6 7 Weken Toelichten Visualizeer data op een manier dat het de gedefinieerde relaties op een duidelijke manier weergeeft. Ontdekken Gebruik data visualizatie om te ontdekken, identificeren en signalen te herkennen in de dataset. Vitas Datavisualisation guide 8
Alles draait om de context Kleur Hoe licht iets is in perceptie wordt sterk beϊnvloed door de omgeving er omheen. Grootte De twee blauwe circels zijn precies even groot; maar de rechter circel lijkt veel groter. A A B B Richting De kortere lijnen staan in een hoek ten opzichte van de langere lijnen. Dit wekt de impressie dat de uiteinden van de lange lijnen dichterbij zijn dan het andere einde. Helderheid De optische illusie is dat vierkant A donkerder is dan vierkant B. Ons visuele systeem heeft de neiging om de geleidelijke verandering van licht te negeren en misleid te worden door de schaduw op de kleur. Vitas Datavisualisation guide 9
Kleur Primaire kleuren Kleur is een van de meest krachtigste middelen in data visualisatie. U bent vrij in het kiezen van een kleur, maar het is een goed gebruik om één à twee kleuren te kiezen die u in alle visualisaties gebruikt. Gebruik zwart, grijs en wit in combinatie met een kleur. Uw publiek zal hierdoor de visualisaties makkelijker begrijpen en de consistentie waarderen. Minder is meer. Primaire kleuren Zwart #000000 Secondaire kleuren Donker groen #41AD49 Secondaire kleuren Secondaire kleuren helpen bij het highlighten en verrijken van uw visualisatie. Mits toegepast is ook hier minder meer. Houd er rekening mee voor wie de visualisatie bedoeld is en weet wie zij zijn. Wit #FFFFFF Paars #792A87 Kleurenblindheid Ongeveer 8% van alle mannen en 0.5% van alle vrouwen zijn kleurenblind. Kunt u de 74 zien? Mensen met kleuren blindheid niet. Let dus goed op welke kleuren u in een visualisatie gebruikt. Rood #D92B27 Fuchsia #CD1976 Blauw #25408F Oranje #E86025 Geel #FDCE07 Donker grijs #6F7173
Tabellen De meest gebruikte data visualisaties zijn tabellen. Maar worden hier meestal niet onder gegroepeerd. Wat erg jammer is, want een goed ontworpen tabel kan er heel aantrekkelijk uitzien en laat de data op een duidelijke mogelijke manier zien. Tabellen worden onderverdeeld in één van de vijf mogelijke relaties weer te geven deze zijn onderverdeeld in: Van quantitatief naar categorisch Van Quantitatief naar quantitatieve relaties Persoon Sale Anne 12.000 Jan 6.000 1. Tussen één set van quantitatieve waardes en één set van categorische items. Salespersoon Jan Feb Mar Anne 12.000 9.000 13.000 Jan 6.000 11.000 17.000 4. Tussen één set van quantitatieve waardes geassocieerd met meerdere categorische items. Harold 13.000 Harold 13.000 15.000 7.000 Jane 14.000 17.000 6.000 Salespersoon Jan Feb Mar Anne 12.000 9.000 13.000 Jan 6.000 11.000 17.000 Harold 13.000 15.000 7.000 2. Tussen één set van quantitatieve waardes en intersectie van verschillende categorieën. Salespersoon Sales Returns Net Sales Anne 12.000 9.000 21.000 Jan 6.000 11.000 5.000 Harold 13.000 15.000 28.000 Jane 14.000 17.000 31.000 5. Tussen verschillende sets van quantitatieve waardes geassocieerd met een enkel categorisch item. Productlijn Productfamilie Product Sales Hardware Printer PPS 13.000 PXT 3.000 3. Tussen één set van quantitatieve waardens en een intersectie van hierarchische categorieën. Router RRZ 8.000 Software Business ACT 17.000 Vitas Datavisualisation guide 11
Do's en Dont's Tabel of grafiek Tabellen gebruik je meestal wanneer: De content wordt gebruikt om individuele waardes te weergeven De content wordt gebruikt om individuele waardes te vergelijken Exacte getallen worden getoond De quantitieve waardes meer dan één eeneheid meten Detail en samenvatting waardes zijn toegevoegd Grafieken gebruik je meestal wanneer: De content wordt gevormd door patronen, trends en uitzonderingen De content wordt gebruikt om relaties tussen sets van waardes aan te geven Tekstopmaak Vermijd tekst oriëntaties anders dan horizontaal, van links naar rechts. Gebruik een leesbaar lettertype door het hele design heen en maak de tekst op met bold, italic of een kleur om een onderdeel te highlighten. Oriëntatie Oriëntatie Oriëntatie O r i ë n t a t i e Font type Font type Font type Font type Lijn nummers uit naar rechts en tekst naar links. Wees consistent hierin. Vergeet de kolom titel niet. Data kunt op uw eigen manier uitlijnen, maar let er wel op dat u hiervoor dezelfde vorm gebruikt. Salespersoon Sales Datum Anne 12.000 09/03/2018 Jan 6.000 14/04/2018 Harold 13.000 30/06/2018 Vitas Datavisualisation guide 12
Kaarten en grafieken De kunst van het weglaten Informatie tonen zoals het is heeft de meeste impact. Wees niet bang om de data alleen in cijfers te laten zien. Hoog Medium Laag Negatief 2 5 8 63 128 Onzeker 0 12 43 Positief 3 43 220 388 De hellingsgrafiek (slope) Een uitstekende manier om waardes te vergelijken en tegelijkertijd om relaties in uw data te ontdekken. Hiervoor gebruikt u een hellinggrafiek. Hellinggrafieken zijn perfect wanneer u het contrast wilt zien tussen twee sets van data. U kunt hierdoor zien hoe de data met de tijd verandert of hoe de twee sets van elkaar verschillen. In de basis is het een lijngrafiek met twee tijd periodes. Er zijn veel pre-attentieve kenmerken in dit type grafiek waardoor het voor een hele sterke visualisatie van uw data kan zorgen. Het toevoegen van kleur kan de visualisatie nog krachtiger maken. Verbetering sinds de laatste review Vorige Huidig DUB 93.2% 81.5% DUB GBR 79.1% 79.1% NOR NOR 75.4% 75.0% GBR NDL 74.1% 74.6% NDL TUR 68.0% 68.3% TUR SWE 66.9% 66.9% SWE BUL 65.8% 66.0% GER GER 64.9% 61.0% BUL Vitas Datavisualisation guide 13
De wereldkaart Aanvullend 12% Gebruik annotaties om punten uit te werken en te highlighten Highlight 87% Het laten zien van belangrijke cijfers bij een annotatie helpt bij het vertellen van het verhaal Tips: Het gebruik van een kaart kan een sterke manier zijn om uw data te visualiseren. Maar let wel op dat uw data zo omvangrijk kan zijn dat de hele kaart snel vol staat. Zorg er dus voor dat de data opvalt in plaats van de kaart zelf. Gebruik de juiste grootte, positie en kleur om uw data te highligten. Vitas Datavisualisation guide 14
Referenties en inspiratie Bronnen, referenties en inspiratie Show me the numbers, Stephen Few The Visual Display of Quantitative Information, Edward Tufte The Functional Art, Alberto Cairo Computational Information Design, Benjamin Fry Information Visualisation, Colin Ware Images from www.unsplash.com Een mantra om mee te nemen: creeër eerst een overzicht en zoom dan pas in op de details. Wie kunt u bereiken? Mocht u een vraag hebben, wees vrij om contact op te nemen met: Driek van Dijk dvandijk@vitas.nl Vitas Datavisualisation guide 15