Category

Designuddannelse

INFOGRAFIK og DATAVISUALISERING

By | Branding, Brugervenlighed, Designuddannelse, Etik, UX | No Comments

Data visualisering eller ’data viz’ går også under navnet infografik, fordi det handler om visning af data sets på en grafisk, visuel måde.

I sin rene form er infografikker uden tekst, men oftest som en kombination af grafik (billede) og tekst.

Formålet med infografik er at lette forståelse, ved at vise kompleks information på en klar og enkel måde.

Vi skal bruge nogle diagrammer!

”Kan du ikke lave nogle diagrammer, som forklarer det på en enkel måde?”

Hvilken designer har ikke hørt sin kunde sige det?

Hvortil du måske har spurgt:
”Mener du infografik eller data viz?”

Kunden nikker og svarer måske:
“Lad mig lige få en pris på, hvad det koster!”

Og så kan det være godt at have gode argumenter for, hvorfor infografik kan være en god  investering?

Fem fair argumenter for at investere i infografik

  1. Infografik er imødekommende, engagerende og letter forståelsen af indholdet.
  2. Infografik er overskuelig og skaber overblik.
  3. Infografik er let at dele og kan sprede sig viralt.
  4. Infografik kan skabe trafik og trække brugere til dit site eller dine  sociale medier.
  5. Infografik er søgbart og giver en højere rating på SERPs (Search Engine Results Pages), dvs. gør dit site mere synligt.

Disse fem argumenter er alle relevante – sande med visse forbehold*) – men det tungeste argument leveres sjældent.

Og det er ærgerligt, fordi det handler om  det væsentligste ved effektiv visuel formidling: forståelse for visuel kognition.

Altså, hvordan vi bearbejder in-put, som hjernen modtager via synssansen.

*) Jeg laver et visual audit nederst i bloggen på to infografikker.
Det gør jeg for at vise, at et par af argumenterne kun er sande med visse forbehold, og så for at påpege et par af de mest almindelige fejl.

Argumentet handler om visuel kognition

– og det er lidt langhåret

Vores måde at opleve og agere i verden på er i stor udstrækning resultatet af viden, som er gemt i vores hukommelse – data lejret i den menneskelige hjerne – din personlige CPU.

Hjernen kan på mange måder hævdes at fungere som et hard drive, der konstant søger at matche nye in-put med eksisterende data.

Så når vi taler om input gennem øjnene, så hjælper CPUen os i meget høj grad. Den screener ubemærket og i baggrunden hele tiden for genkendelighed, og reagerer kun, hvor der er tale om nyt, ved at bevidstgøre os om det.

Det betyder, at bevidstgørelse om visuelt input består af to ting

  1. det vi reelt ser på (oplever)
  2. datatræk fra CPUen

hvor datatrækket supplerer informationsbilledet og bevidstgør os om en helhed, der er mere kompleks og nuanceret end det øjet reelt bearbejder.

Vil du helt ind i maskinrummet, så læs: http://www.stephen-few.com/nysi.php

Øjet kan håndtere 2-3 informationspakker ad gange

Den del af hjernen, som bearbejder de input øjet får er relativt afgrænset, idet den kun kan håndtere to-tre informationspakker ad gangen.

Selv om to-tre informationspakker ikke syner af meget, så er det heldige, at kompleksiten i hver pakke kan være relativt høj, helt afhængig af, hvad der er lagret af forhåndsviden på din personlige CPU.

Dvs. at hvis vi ser på en tabel med rækkevis af seks cifrede tal (fx: 346739, 564739, 384720, 132436, 009132, 719385, 994335, 545759, 8456718, 552908 …), så skal vi være meget trænede i at aflæse netop denne type tabel for at opfatte og gennemskue sammenhænge mellem flere af disse data set.

Konverterer vi derimod disse data set til en data viz, så de bliver repræsenteret af en eller flere grafer, kan vil let se afvigelser og indbyrdes relationer.

Øjet kan stadig kun aflæse to-tre informationspakker ad gangen, men nu kan en pakke bestå af samtlige data i en graf, måske stillet over for en anden graf med afvigelser, evt. sat i et koordinatsystem med to akser, som en tredje dataenhed.

Data vizen nedenfor består af mange data set. De enkle grafer skaber overblik og forståelse for de indbyrdes relationer og giver læseren mulighed for at skabe sig et klart overblik.

Enkelhed og klarhed. Financial Times.

Det reelle argument
for at investere i data viz
handler om visuel kognition

At have viden om og forståelse for visuel kognition – altså hvordan vi erkender visuelt – burde være hovedargumentet for at udarbejde infografik.

De øvrige argumenter er naturligvis stadig relevante.

Velovervejet brug af infografik kan være den korteste vej til på en enkel måde at formidle kompleks information, så den bliver vedkommende* og let forståelig.

*) Jeg lovede ovenfor at vende tilbage nederst i bloggen til nogle af infografikkens problematikker. Vedkommende er en af dem.

Findes der regler for at udarbejde
effektive infografikker

Finacial Times diagram eksempel

Ja, og der er både does and don’ts!

Grafiker Ole Munk, der er ekspert i visuel journalistik, behandler emnet uddybende i sin bog Visuel Journalistik fra 2018

https://visuel-journalistik.dk/.

I den kan du blive klogere på infografik, som blot er et af flere grafiske værktøjer en journalist anvender.

På DMJX (Danmarks Medie- og Journalist højskole), hvor Ole tillige underviser, var Alan Smith, OBE, Head of Visual and Data Journalism at Financial Times i 2018 indbudt til at holde et oplæg om arbejdet med FTs Visual Vocabulary (VV).

Selv om megen infografik forfalder til don’ts med alt for meget farvelade, meningsløse ikoner og irrelevant illustration, så lyser FT op som en aktør, der går seriøst til værks.

No b.s., just the numbers in a visuel way!

 

Financial Times Visual Vocabulary
– et ‘periodisk system’ over infografik typer

Financial Times har udarbejdet et VV med does til deres journalister og grafikere.

De kan vælge mellem 74 diagramtyper, når de udarbejder infografik til dagens avis. www.ft.com/vocabulary Og FTs VV er tilgængeligt for enhver der vil kommentere eller bidrage.

Disse does er udarbejdet for at FT til enhver tid kan være sikre på, at infografikerne ikke manipulerer med data, og dermed manipulerer med læserne.

Manipuleret data, som tilsyneladende repræsenterer sammenhænge som ikke er faktuelle, vil naturligvis sænke avisens troværdigheden. Og for FT er troværdighed brandets DNA.

FTs VV gør også samarbejdet mellem journalister og grafikere lettere, idet hver diagramtype er blevet defineret og beskrevet, så journalist og grafiker ved, hvad grafikken kan bruges til – og ikke mindst hvad den ikke kan bruges til.

Det gør det muligt for journalisten at sikre, at netop den visuelle repræsentation, der er ønsket, også bliver udarbejdet.

Dk referencetekst til FT Visual Vocabulary: Deviation grafik

 

Til undervisningssammenhæng har jeg udarbejdet en dansk oversættelse, som du her får et link til: FT_Visual_Vocabulary_DK-v.01 

Jeg har forsøgt at holde grafik titlen i samme farve som FT anvender til hver grafik gruppe.

Har du kommentarer, så skriv endelig. Det er tale om et work in progress, og formålet med oversættelsen er vidensdeling.

Andre data viz evangelister

Grafiker Kai Tomboc har lavet en infografisk oversigt over infografikkens historie.

Der er tale om en udpræget amerikansk måde at arbejde med data viz, som appellerer til følelserne på bekostning af informationsklarhed. Lidt cute.

Over there er ethos king, og selv om det beviseligt ér et effektivt virkemiddel i markedsføringssammenhæng, så fremmer det ikke altid faktuel formidling.

Brugere på sociale medier vil generelt gerne have noget ’pænt’ at se på, hvor stereotypt og profiling det end måtte være, og ofte får vi pænhed på bekostning af informationsværdien.

Vurder selv, om du mener Kai forbryder sig mod reglerne for effektiv og klar kommunikation i hendes infografik tidslinje om infografikken historie. https://learn.g2.com/history-of-infographics

Don’ts all over

Jeg lovede ovenfor, at foretage et visuel audit på to infografikker vedrørende generelle problematikker.

Problematikkerne vedrører nedenstående to punkter:

  1. overskuelighed,skabelse af overblik.
  2. imødekommende, engagerende og letter forståelsen af indholdet.

De to eksempler jeg har valgt, har det samme kommunikationsformål:

At skabe opmærksomhed om vigtigheden ved at holde sig i form

Det betyder ikke så meget at teksten ikke er læsbar i det ene eksempel. De problemstillinger jeg vil nævne er generiske og vedrører kombinationen af brug af ikoner og det centrale motiv.

To eksempler for infografikker med irrelevante visuelle elementer elementer. Stephanie Eisele, August, 2019. Kai Tomboc, April 2019 © easelly

 

Det centrale motiv – fokus på emnet

Løberen/løberne matcher overskriften. De to centrale elementer er anvendt for at fange din opmærksomhed.Emnet er tilsyneladende overskueligt.

Allerede nu har vores CPU registreret de seks ikoner ( samme farvebrug i venstre infografik er optimal. De forskellige ikonfarver kræver CPU aktivitet: betyder farverne noget?), og intuitivt tænker vi, at ikonerne giver referenceviden til seks specifikke punkter på kroppen, der udvikles eller forbedres ved træning. Helheden afstedkommer et overblik over emnet.

Men har ikonbrugen den forventede funktion?

Du blive sandsynligvis en smule skuffet, når du opdager, at der faktisk ikke er en 1:1 sammenhæng mellem ikon, tekst og det punkt på kroppen, der refereres til.

Faktisk er der ingen sammenhæng overhovedet i visse af tilfældende.

Letter ikonerne forståelsen af indholdet

CPU’en er vandt til at aflæse ikoner, så nærlæser du ikke  grafikken, laver din hjerne sin egen fortolkning, som måske er bedre en grafikeren, hvis du er mere vidende end vedkommende.

Med lidt god vilje kan et led-ikon referere til en lægmuskel eller et knogle ikon (hundeben) kan referere til et knæled, men reelt set er det meningsforstyrrende.

Infografikken letter ikke nødvendigvis forståelse af indholdet, fordi ikonerne ikke er 1:1 relevante.

Infografikkens imødekommenhed drukner nogle gange i illustratitis

Man må formode, at grafikeren bevidst har søgt at disponere fladen – eller er årsagen horror vacui/ – angsten for det tomme rum?

Der synes at være gået illustratitis i den i forsøget på at skabe en imødekommende data viz.

Grafikeren har glemt at sikre en entydig formidling af hovedbudskabet.

I stedet synes der at være fokuseret på at skabe noget ‘pænt’, noget vedkommende, et ideal vi kan arbejde henimod, drømme om eller identificere os med.

Dvs infografikken måske kan skabe engagement?

Eksempelvis ligner det ikon, der knytter sig til en tekstblok, om at kun 3 ud af 10 high school elever får 60 minuters fysisk aktivitet dagligt, et USB-stik eller en varmedunk, eller …?

Dit gæt kan være lige så godt som mit, for der er reelt ingen sammenhængen mellem tekst og ikon?

Entydighed er ikoners eksistensberettigelse – det gælder også brug

Resulterer ikonbrug i uklarhed eller ender de som rebusser, har man fejlet.

Ikoner anvendes alt for ofte som staffage, pynt uden mening. Det bør undgås.

Farver taler til vores følelser

Og farvebrugen? Er den bevidst valgt ?

Den venstre infografik hæver sig over den højre ved sin økonomiske farvebrug, der tydeligvis er valgt for at opnå væsentlig kontrast mellem forskellige elementer. Professionelt og tempereret klinisk. Troværdigt.

Det er tale om en disciplineret infografik, hvor baggrundsillustrationerne ikke virker forstyrrende.

Men kigger man nærmere, så bliver de til små rebusser, fordi prikker og progressionsbaren ikke umiddelbart er selvforklarende. Visuel støj.

Det er pænt, men også en smule forvirrende.

Test og få røde ører

Kan du huske det med de tre informationspakker?

CPUen laver simpelt hen sin egen historie, hvis noget virker bekendt, det giver mening i konteksten og formidlingen ikke er entydig.

Som producenter af data viz og infografikker får vi let røde ører, hvis vi ikke tester vores infografikker, fordi det kræver faktisk noget ud over det æstetiske.

Min opfordring er derfor: opsøg de røde øre så ofte du kan ved at teste blandt kollegaer og de nærmeste.

Det er lærerrigt og koster ikke så meget, som når kunden giver dig røde øre, fordi slutbrugeren måske ikke forstod budskabet, og du undlod at teste.

Det gør dig også til en bedre infografiker og måske en dag til en sand data vizard.

Kvantitativ data er en gave

Når nu overskriften er Exercise and fitness: By the numbers, så havde det været mere effektivt at anvende den orange farve til at fremhæve de kvantitative data set, altså talstørrelserne i teksten frem for den vårgrønne.

Og samtlige statistiske informationer på den venstre infografik, kunne med fordel have været vist, så man kunne forstå de kvantitative forskelle indholdt i teksten.

Ikonerne ville tillige have fået en mere tilbagetrukket plads, hvis de havde været vårgrønne. Og det havde jo passet ganske fint, da de ikke entydigt tilføjer noget til The numbers.

I stedet får vi profiling af en hvid veltrænet mænd i 30’erne – der med knyttede næver og løbeshorts, der gik af mode for 20 år siden – viser vejen, ganske som hans buddy i den anden infografik.

Han fører også an, så den kvindelige løber ikke farer vild.

Du spørger måske, om der findes en uskreven regel om, at der altid skal ligge en cirkulær form bagerst i billedet.

Det er et godt spørgsmål!

Grafikkerne er hver for sig sympatiske. De forsøger at være vedkommende, Hævet over enhver diskussion er, at den venstre er mere rugbrød end lagkage. Tak.

Når det handler om data viz: KISS – Keep It Simple Sweatheart.

 

Visual thinking er et effektivt værktøj,

når data viz handler om data sets og processer

 

Visual Thinking – måde at gøre processer og kvantitative data let forståelige. En slægtning til infografik. The Back of the Napkin, Dan Roam ©2009

 

Nogle gange handler den visuelle repræsentation måske ikke så meget om data sets, som om procesbeskrivelse.

Så har vi behov for andre værktøjer fx visual thinking.

Dvs. at visualisere tænkning som i tankeforløb og procesforløb. Flow.

Det handler denne blog ikke om, men er du nysgerring, så er Dan Roam et rigtig godt sted at starte. https://www.danroam.com/