Grafikk og webdesign basert på Edward Tuftes prinsipper

Introduksjon

Tuftes arbeider tar for seg følgende problemer:

  • Problemet : Problemet er å presentere store mengder informasjon på en måte som er kompakt, nøyaktig, tilstrekkelig for formålet og lett å forstå. Spesielt for å vise årsak og virkning, for å sikre at de riktige sammenligningene blir gjort, og for å oppnå de (gyldige) målene som er ønsket.
  • Dens betydning: Trykt og grafisk informasjon er nå drivkraften bak alle våre liv. Det er ikke lenger begrenset til spesialiserte arbeidere innen utvalgte felt, men påvirker nesten alle mennesker gjennom den utbredte bruken av databehandling og Internett. Raske og nøyaktige overføringer av informasjon kan være en sak på liv og død for mange mennesker (et eksempel er Challenger-katastrofen). I hvilken grad symboler og grafikk påvirker livene våre kan sees av den dramatiske økningen i IQ-score i alle kulturer som har tilegnet seg informasjonsteknologi: I USA har det vært en gjennomsnittlig økning på 3 IQ-poeng per tiår de siste 60 årene , for en total økning på 18 IQ-poeng. Det er ingen kjent biologisk forklaring på denne økningen, og den mest sannsynlige årsaken er utbredt eksponering for tekst, symboler, og grafikk som følger med det moderne livet. Som nevnt ovenfor har denne økningen blitt sett i alle kulturer som er eksponert for informasjonsteknologi.
  • Dens anvendelse : Noe av informasjonen er knyttet til visning av statistisk informasjon, men mye gjelder for alle typer visning, selv ren tekst.
  • Løsningen : Å utvikle en konsekvent tilnærming til visning av grafikk som forbedrer spredningen, nøyaktigheten og den enkle forståelsen.

 


Historien om tomter

Det aller første kjente plottet dateres tilbake til det 10. århundre (VD-28: første kjente graf). Dette var omtrent samtidig som Guido av Arezzo utviklet den todimensjonale musikalske notasjonen som var veldig lik den vi bruker i dag. På 1400-tallet utviklet Nicolas av Cusa grafer over avstand kontra hastighet. På 1600-tallet etablerte Rene Descartes analytisk geometri som bare ble brukt til visning av matematiske funksjoner. Men den viktigste initiativtakeren til informativ grafikk var William Playfair (1759-1823) som utviklet linje-, stolpe- og sektordiagrammene slik vi kjenner dem i dag.

 


Grafikkens forklaringskraft

Betydningen og forklaringskraften til grafikk kan sees i disse eksemplene:

  • Illustrasjon VD-13/14 viser 4 plott som har et stort antall absolutt identiske statistiske mål og egenskaper og likevel er svært forskjellige, som umiddelbart kan sees av deres grafer.
  • Challenger-katastrofen: datagrafene vist til NASA formidlet ikke den virkelige informasjonen som var nødvendig (VE-47 versus VE-45). Hvis NASA hadde sett den passende, men veldig enkle, grafikken som viste effekten av lav temperatur og skade på de solide rakettforsterkerne, ville ikke Challenger blitt skutt opp den (veldig kalde) dagen.
  • Broad Street Pump koleraepidemien i 1854 i London, som vist av John Snow (VE-31: koleradødsfall). Denne grafen viste klynger av koleradødsfall rundt pumpestedet.
  • Illustrasjon VD-166: «kommuner i Frankrike» viser en ekstremt tett tomt som viser grensene til mer enn 30 000 kommuner i Frankrike.

 


Grunnleggende tilnærmingsfilosofi

Viktige regler og temaer å bruke når du presenterer grafikk:

  • Anta at publikum er intelligent (en parafrase fra EB White). Selv publikasjoner, som NY Times, antar at folk er intelligente nok til å lese kompleks prosa, men for dumme til å lese kompleks grafikk.
  • Ikke begrens folk ved å «dumme» dataene – la folk bruke evnene sine for å få mest mulig ut av dem.
  • For å klargjøre — legg til detaljer (ikke slipp viktige detaljer; f.eks. serif-fonter er mer «detaljerte» enn san serif-fonter, men er faktisk lettere å lese). Og Einstein sa en gang at «en forklaring skal være så enkel som mulig, men ikke enklere».
  • Fremfor alt annet, vis dataene. Grafikk er «intelligens gjort synlig»
  • Datarike plott kan vise enorme mengder informasjon fra mange forskjellige perspektiver: årsak og virkning, sammenhenger, paralleller osv. (VD-31: togplan, VD-17: Kloropletisk kart, VD-41: Napoleons kampanje, EI-49: romavfall)
  • Plotter trenger merknader for å vise data, databegrensninger, autentisering og unntak (VE-32: tekst med unntak)
  • Ikke bruk grafikk til å dekorere noen få tall

 


Grafisk integritet

I tillegg til «løgner, jævla løgner, og statistikk» kan grafikk også brukes til å lure. For eksempel kan villedende grafikk:

  • Sammenlign hele tidsperioder med mindre tidsperioder (VD-60: Nobelpriser, som sammenligner 10 års tidsperioder med en 5 års periode)
  • Bruk en «løgnfaktor» [= (størrelse på grafikk)/(størrelse på data)] for å overdrive forskjeller eller likheter
  • Bruk område- eller volumrepresentasjoner i stedet for lineære skalaer for å overdrive forskjeller. Se VD-69: «Shrinking family doctor» som et eksempel på hvordan man kan forvirre folk ved å bruke 1 versus 2- og 3-dimensjonale størrelsessammenlikninger. Areal- og volumrepresentasjoner lurer folk med kvadrat/kubeloven: en økning i lineær størrelse fører til en kvadrat av økningen for arealer og en kube av økningen for volumer.
  • Unnlater å justere for befolkningsvekst eller inflasjon i finansielle grafer
  • Bruk designvariasjon for å skjule eller overdrive datavariasjon (VD-61: overdrivelse av OPEC-priser)
  • Overdriv den vertikale skalaen
  • Vis bare en del av en syklus, slik at data fra andre deler av syklusen ikke kan brukes til riktig sammenligning

Grafiske feil kan være mer vanlig i dag enn tidligere på grunn av enkel og hyppig bruk av datamaskiner. Retningslinjer for å sikre grafisk integritet inkluderer følgende:

  • Unngå kartsøppel
  • Ikke avkvantifiser: oppgi reelle data så nøyaktig som det er rimelig. For eksempel er det ofte ikke nyttig å rangere produkter som bedre eller dårligere etter ett kriterium når flere faktorer er involvert, med mindre størrelsen på forskjellene er angitt.
  • Ikke overdriv for visuelle effekter, med mindre det er nødvendig for å formidle informasjonen. Noen ganger er slike overdrivelser avgjørende: for eksempel er det praktisk talt umulig å vise både størrelsen og banene til planeter i riktig skala på samme kart. På den annen side viser illustrasjon VE-24: «Overdrevet vertikal Venus-skala», så dramatisk feilinformasjon at en forsker ba om dannelsen av «et flatt Venus-samfunn».
  • Unngå dis-informasjon: tykke bokser rundt og understreket san serif-tekst gjør lesingen vanskeligere
  • Se opp for effekter av aggregering: for eksempel er punktkart ofte mer ærlige i denne forbindelse enn kloropletiske kart som grupperer resultater basert på (noen ganger vilkårlige) grenser.
  • Still de riktige spørsmålene:
    1. Forteller skjermen sannheten
    2. Er fremstillingen nøyaktig
    3. Er dataene dokumentert
    4. Forteller visningsmetodene sannheten
    5. Er passende sammenligninger, kontraster og sammenhenger vist

 


Datatettheter

Grafikken er på sitt beste når den representerer svært tette og rike datasett. Tufte definerer datatetthet som følger:

Datatetthet = (antall oppføringer i datamatrise)/(grafikkområde)

Legg merke til at lav datatetthet på datamaskinskjermer tvinger oss til å se informasjon sekvensielt, i stedet for romlig, noe som er dårlig for forståelsen. Grafikk av god kvalitet er:

  • Sammenlignende
  • Multivariat
  • Høy tetthet
  • Kunne avsløre interaksjoner, sammenligninger osv
  • Og hvor nesten alt blekket er faktisk datablekk

Eksempler på datatettheter inkluderer:

  • 110 000 tall/sq-inch for en astronomisk graf. Dette er den maksimale kjente tettheten for en graf. For de fleste vitenskapelige tidsskrifter får vi omtrent 50-200 tall/sq-inch
  • 150 Mbits = menneskelig øye
    8 Mbits = typisk dataskjerm
    25 Mbits = fargelysbilde
    150 Mbits = stort utbrett kart
    28 000 Tegn = Oppslagsbok
    18 000 Tegn = telefonbok
    15 000 Tegn = sakprosa

Et utmerket eksempel på et datarikt plott er en grafisk togplan (VD-31: togplan) som viser start- og stopptider, steder, veibeskrivelser, ruter, overføringer og hastigheter på ett ark.

 


Datakomprimering

  • Bruk datakomprimering for å avsløre (ikke skjule) data . For eksempel, EI-22: «Sun Spot cycles» viser solflekker som tynne vertikale linjer i y-aksens retning bare for å presentere mange slike flekker over en tidsperiode på en enkelt graf
  • Bruk komprimering til å vise mye informasjon i en enkelt graf, for eksempel et plott som viser x-akse, y-akse og x/y-interaksjoner. (VD-134: Pulsar-signaler; VE-111)
  • Ekskluder bilateral symmetri når den er overflødig (f.eks. charnoff-ansikter) eller utvid den når det hjelper forståelsen (50 % mer visning av verden på et verdenskart gir en omsluttende kontekst som hjelper forståelsen). Studier viser at vi ofte konsentrerer oss om den ene siden av en symmetrisk figur og bare ser på den andre siden.

 


Multifunksjonelle grafiske elementer

Grafiske strukturer kan ofte tjene flere formål én gang. For eksempel,

  • Stengel- og bladplott viser sekvenser av tall som direkte skildrer strukturen etter den fysiske lengden av hver sekvens. (VD-140: stilk/blad; VD-141: hæravdelinger; VD-143: Normalkurve)
  • Consumer Reports-listen over bildefekter (VD-174: Consumer Reports) avslører en mikro-/makrostruktur: den generelle visningen av svart blekk avslører umiddelbart hvilke biler som er mest plagsomme, mens hvert enkelt element i displayet identifiserer en spesiell svakhet.
  • Selve datanettet kan være dataene, som avslører både verdiene og koordinatsystemet på samme tid (VD-152: databaserte markører)

 


Maksimer data-blekk; Minimer ikke-datablekk

Tufte definerer datablekkforholdet som:

Datablekkforhold = (datablekk)/(totalt blekk i plottet)

Målet er å gjøre dette så stort som det er rimelig. For å gjøre dette:

  • Unngå tunge rutenett
  • Erstatt boksplott med avbrutte linjer (VD-125: redusert boksplott)
  • Bytt omsluttende boks med et x/y rutenett
  • Bruk mellomrom for å indikere rutenettlinjer i stolpediagram (VD-128: hvite mellomrom)
  • Bruk tics (uten linje) for å vise faktiske plasseringer av x- og y-data
  • Beskjær grafikk ved å: erstatte stolper med enkle linjer, slette blekk uten data; eliminere linjer fra akser; starter x/y-aksene ved dataverdiene [områderammer])
  • Unngå overfylte rutenett, overflødige haker, overflødig representasjon av enkle data, bokser, skygger, pekere, legender. Konsentrer deg om dataene og IKKE databeholderne .
  • Oppgi alltid så mye skalainformasjon (men i dempet form) som er nødvendig

 


Små multipler

Små multipler er sett med miniatyrbildestørrelser på en enkelt side som representerer aspekter ved et enkelt fenomen. De:

  • Skildre sammenligning, forbedre dimensjonalitet, bevegelse og er bra for multivariate skjermer (VD-114: partikkelmomentum)
  • Inviter til sammenligning, kontraster og vis omfanget av alternativer eller utvalg av alternativer (VE-111: medisinske diagrammer)
  • Må bruke samme mål og målestokk.
  • Kan representere bevegelse gjennom ghosting av flere bilder
  • Er spesielt nyttige i datamaskiner fordi de ofte tillater faktisk overlegg av bilder og rask sykling.

 


Kartsøppel

Chartjunk består av dekorative elementer som ikke gir noen data og forårsaker forvirring.

  • Tufte diskuterer regelen om 1+1=3 (eller mer): 2 elementer i umiddelbar nærhet forårsaker en synlig interaksjon. Slike interaksjoner kan være veldig slitsomme (f.eks. moir?-mønstre, optisk vibrasjon) og kan vise informasjon som egentlig ikke er der (EI-60: data som ikke er der, VD-111: kartsøppel)
  • I store vitenskapelige publikasjoner ser vi 2 % til 20 % moir?-vibrasjoner. For eksempel, i nyere statistikk- og datapublikasjoner varierer chartjunk fra 12 % til 68 %
  • Teknikker for å unngå kartsøppel inkluderer å erstatte kryssskravering med (pastell) faste stoffer eller grått, bruke direkte merking i motsetning til legender, og unngå tunge databeholdere

 


Farger

Farger kan ofte forbedre dataforståelsen betydelig.

  • Lagdeling med farger er ofte effektivt
  • Fargenett er en form for lag som gir kontekst, men som skal være diskret og dempet
  • Rene lyse farger bør være forbeholdt små høydepunkter og nesten aldri brukt som bakgrunn.
  • Bruk farge som hovedidentifikator på dataskjermer da forskjellige objekter ofte anses som de samme hvis de har samme farge uavhengig av form, størrelse eller formål
  • Konturlinjer som endrer farge basert på bakgrunnen som skiller seg ut uten å produsere 1+1=3-effektene
  • Farger kan brukes som etiketter, som mål, og for å imitere virkeligheten (f.eks. blå innsjøer i kart).
  • Ikke plasser lyse farger blandet med hvitt ved siden av hverandre.
  • Fargeflekker mot en lys grå er effektive
  • Farger kan formidle flerdimensjonale verdier
  • Rullefelt skal være solide pastellfarger
  • Merk at omkringliggende farger kan få to forskjellige farger til å se like ut, og to like farger ser veldig forskjellige ut (EI-92/93: effekter av kontekst på farger).
  • Subtile nyanser av farge eller gråskala er best hvis de er avgrenset med fine konturlinjer (EI-94: nyanser med konturer)
  • Vær oppmerksom på at 5-10 % av mennesker er fargeblinde til en viss grad (rød-grønn er den vanligste typen etterfulgt av blå-gul, som vanligvis inkluderer blå-grønn)

 


Generell filosofi for å øke dataforståelsen

  • Høy tetthet er bra: det menneskelige øyet/hjernen kan velge, filtrere, redigere, gruppere, strukturere, fremheve, fokusere, blande, skissere, gruppere, spesifisere, sortere, abstrahere, jevne ut, isolere, idealisere, oppsummere osv. Gi folk dataene slik at de kan utøve sine fulle krefter — ikke begrens dem.
  • Rot/forvirring er designfeil og ikke kompleksitet
  • Informasjon består av forskjeller som utgjør en forskjell: slik at du kan «gjemme» data som ikke utgjør en forskjell i det du prøver å skildre
  • Ved å vise paralleller skal kun de relevante forskjellene vises
  • Verdi og kraft av parallellisme: når du har sett ett element er alle de andre tilgjengelige
  • Viktige konsepter i god design: skille figur og bakgrunn (for eksempel bringer en uskarp bakgrunn ofte forgrunnen i skarpere fokus), lagdeling og separasjon, bruk av hvitt mellomrom (f.eks. kinesiske landskap legger vekt på rom, som i maleren kjent som «en» corner Ma»; orientalsk musikk er ofte der for å understreke stillheten og ikke lyden).
  • Grafikk skal understreke den horisontale retningen

 


Teknikker for å øke dataforståelsen

For å øke dataforståelsen:

  • Gjør merker eller etiketter så små som mulig, men så små som mulig for fortsatt å være tydelige.
  • Unngå sektordiagrammer siden de har lav tetthet og ikke klarer å ordne verdier langs en visuell dimensjon
  • Bruk vanligvis punktkart i stedet for kloropletiske kart fordi de viser mer nøyaktige detaljer
  • Sammenvev tekst og grafikk tett: fest navn direkte til deler, plasser små meldinger ved siden av dataene, unngå legender hvis mulig og merk dataene direkte på grafen (VE-99: anatomi av en font)
  • Unngå forkortelser hvis mulig, og bruk horisontal tekst
  • Bruk serif-fonter med store/små bokstaver
  • Bruk skaleringstransformasjoner hvis de (ærlig talt) kan avsløre informasjon som ellers kan bli oversett.
  • Bruk forskjellige strukturer for å avsløre 3D og bevegelse, for eksempel den eksploderte sekskanten, ekte stereo og ekstrem forkorting (som på kanten av en kule: se EI-15 «eksplodert sekskant»)

 

 


Når du IKKE skal bruke grafikk

  • Ofte kan teksttabeller erstatte grafer for enkle data; du kan også bruke 2D-teksttabeller, hvor rad- og kolonnesammendrag er nyttige. Ikke-komparative datasett hører vanligvis hjemme i tabeller, ikke i diagrammer
  • Plakatdesign er ment bare for å fange oppmerksomhet, i motsetning til å formidle informasjon – generelt er de ikke gode design for grafer.
  • Hvis et bilde ikke er verdt 1000 ord, til helvete med det (sitat fra Ad Reinhardt — merk at dette er fra det originale kinesiske sitatet at «et bilde er verdt 10 000 ord).

 


Estetikk

Grafisk fortreffelighet består av enkel design og kompleksitet og sannhet til data. For å oppnå dette

  • Bruk ord, tall, tegninger i umiddelbar nærhet
  • Vis en tilgjengelig kompleksitet av data
  • La grafikken fortelle historien
  • Unngå kontekstfri dekorasjon
  • Bruk linjer med forskjellig vekt som en attraktiv og kompakt måte å vise data på (VD-185: Mondrian)
  • Bruk symmetri for å legge til skjønnhet (selv om noen en gang sa at «all ekte skjønnhet krever en viss grad av asymmetri»)

Få gratis tilbud på alarm.