Grafiska principer

Ett centralt verktyg inom datavisualisering är mobiliseringen av människans perceptuella förmågor i syfte att bättre förstå ett givet dataunderlag. Detta är något som, i sin tur, är betjänt av en viss grundläggande förståelse för mänsklig perception och varseblivning.

Tydlig rendering av såväl delarna som helheten är eftersträvansvärt när det handlar om effektiv visuell kommunikation och av den anledningen antar föreliggande text ett holistiskt perspektiv genom att utgå från varseblivning såsom den beskrivs inom gestaltpsykologin.

Med målet att beskriva hur mänsklig perception fungerar, hur människan varseblir och ordnar sin omgivning, formulerades inom gestaltpsykologin en uppsättning principer. Dessa, så kallade gestaltprinciper, har tillämpats inom flera olika aspekter av bland annat grafisk design och hur de beskrivs och presenteras tenderar att skilja sig åt från fall till fall. Grundantagadet är dock att vi, människan, uppfattar summan av en grafisk enhets delar, det vill säga en gestalts helhet, som något annat än vad de individuella delarna antyder var för sig.

Varför principer?

Innan vi går vidare, och principerna fokuseras och beskrivs en och en, är det lämpligt att besvara frågan om varför vi ens behöver grafiska principer. Svaret är förhållandevis enkelt och rakt; visualisering innebär grafisk kommunikation, och inom grafisk kommunikation, liksom inom all kommunikation, finns en presumtiv mottagare att förhålla sig till. Ju bättre vi förstår hur mottagaren tenderar att ta till sig visuellt material, desto större möjligheter har vi att anpassa materialet och därmed också underlätta kommunikationsprocessen. Detta förhållningssätt är tillämpbart såväl vid analyserande och utforskande som vid förklarande och beskrivande visualiseringsarbete. På sidan om visualisering kan du läsa mer om de olika sätten att beskriva visualiseringsarbete på.

Principerna

Vi har valt att fokusera på 8 principer som ofta nämns i samband med visualisering av data och där visuell gruppering är en gemensam nämnare. Notera att det handlar om just principer att förstå och förhålla sig till, snarare än lagar att lyda eller regler att följa. De 8 som kortfattat presenteras här är följande, utan inbördes ordning:

  • Likhet / similarity
  • Närhet / proximity
  • Koppling / common region: connection
  • Omslutning / common region: enclosure
  • Avslutning / closure
  • Kontinuitet / continuity
  • Gemensam rörelse / common fate
  • Symmetri / symmetry

Likhet / similarity

Enligt principen om likhet tenderar vi att betrakta grafiska element eller objekt som uppfattas som lika till färg, form, storlek eller orientering/riktning, som tillhörande samma grupp. Det kan dessutom innebära att vi antar att dessa objekt fyller samma funktion eller besitter samma slags egenskaper.

Närhet / proximity

Närhetsprincipen gör gällande att grafiska element eller objekt som är placerade nära varandra uppfattas som att de hör samman.

Koppling / common region: connection

Separata objekt eller element som kopplats samman, till exempel med hjälp av en linje, uppfattas som sammanhörande, enligt principen om koppling. Det här sättet att gruppera objekt på går ibland under namnet common region och kan antingen samspela med både närhets- och likhetsprincipen eller motverka dem.

Omslutning / common region: enclosure

Omslutning är ytterligare ett sätt att hävda samhörighet, eller common region. Omslutning kan dessutom, som i exempelbilden här intill, uppfattas som kraftigare än kopplingsprincipen när det gäller samhörighet. Precis som med principen om koppling kan omslutning både arbeta med och mot principerna om närhet och likhet.

Avslutning / closure

Avslutningsprincipen syftar till beskriva vår förmåga att identifiera relativt enkla mönster i förhållandevis komplexa grafiska framställningar. Det är tack vare den förmågan som vi uppfattar den vita triangeln i bilden intill. Samma förmåga gör att vi kan följa streckade linjer i ett diagram och identifiera, för oss sedan tidigare kända, former och mönster.

Kontinuitet / continuity

Principen om kontinuitet ligger nära principen om avslutning; även här är det människans förmåga att se mönster och former som utnyttjas. Principen gör dels gällande att objekt eller grafiska element som följer en linje eller kurva uppfattas som sammanhörande, och dels att vi uppfattar konturlinjer som hela trots att ett annat objekt bryter linjen.

Gemensam rörelse / common fate

Enligt principen om gemensam rörelse uppfattar vi grafiska element som har samma riktning/orientering som att de i högre utsträckning hör tillsammans. Denna princip blir väldigt tydlig i animerade sammanhang där objekt eller element som har liknande rörelsemönster, rörelserbanor eller rörelseriktning lättare associeras till varandra.

Vid animerade visualiseringar är tidsdimensionen något som ytterligare påverkar principen om gemensam rörelse eftersom samma hastighet och synkroniserad rörelse tenderar att kraftigt förstärka intrycket.

Symmetri / symmetry

Principen om symmetri bygger på den mänskliga förmågan att uppfatta mönster och former, samma förmåga innebär att vår varseblivning är känslig för avvikelser och oregelbundenheter i det grafiska materialet. Precis som med likhetsprincipen tenderar vi att gruppera grafiska element som liknar varandra och, som i det här fallet, har ordnats symmetriskt. Bilden intill demonstrerar hur principen tar sig uttryck i komparativa diagram.

En bonusprincip: Figur och bakgrund / figure-ground

De åtta ovan beskrivna principerna berör på ett eller annat sätt gruppering. De syftar till att förklara varför vi upplever ett samband, i någon dimension, mellan olika grafiska element, och hjälper oss dessutom att identifiera särlingar. Det finns dock ytterligare en princip som vi behöver nämna i sammanhanget: principen om förhållandet mellan figur och bakgrund. Väldigt förenklat kan det beskrivas som så att bokstäverna du läser just nu har rollen figur mot den vita bakgrunden. Det är, för dig som läsare, tydligt att det är bokstäverna och orden de grupperats i som du ska fokusera på, snarare än utrymmet runt omkring dem. Men det går samtidigt inte att bortse från det faktum att också mellanrummet mellan orden spelar en betydande roll och är avgörande för hur lätt du tar till dig texten.

 

Rubins vas; en vit vas mot svart bakgrund eller två ansikten i silhuett mot vit bakgrund

Vi har generellt lättare att se enklare och tydligt sammanhållna former. Vi antar dessutom gärna att det omgivande fältet utgör bakgrunden och att det som omges är figuren; föreställ dig ett moln på himlen eller ett äpple på en gräsmatta, till exempel. Det är molnet och äpplet som vi uppfattar som figurer, det är dit vi riktar vår uppmärksamhet och vårt fokus. Ibland är det däremot inte lika tydligt vad som är figur och vad som är bakgrund. Ett känt exempel på det är den danske psykologen Edgar Rubins vas från ca. 1915, där betraktaren kan se antingen två ansikten i profil eller en vas. Det är när den delade konturlinjen upplevs beskriva former i båda riktningarna, såsom fallet är med Rubins vas, som en osäkerhet och tvetydighet uppstår.

Ett exempel på samspelet mellan figur och bakgrund

Den brittiske ingenjören och samhällsekonomen William Playfair (1759–1823), en tidig pionjär inom visualisering av framför allt statistiska data, gav 1786 ut verket Commercial and Political Atlas som innehåller ett diagram över dåtidens handelsbalans mellan England å ena sidan, och Norge och Danmark å den andra. Det intressanta med diagrammet är hur Playfair enbart låtit skillnaden mellan de två kurvorna vara figuren. Konsekvensen blir att all data som illustreras av, och i Y-led befinner sig under, den lägsta kurvan tolkas som bakgrund på samma sätt som allt som ligger ovanför kurvorna. Detta trots att siffrorna längs Y-axeln tydligt beskriver att den till synes tomma ytan under kurvorna inte på något sätt är innehållslös.

Handelsbalans av William Playfair, Public domain, via Wikimedia Commons

Färg och perception

Färg kan användas i enlighet med gestaltprinciperna och omsorgsfullt tillämpat kan det vara ett effektivt medel för att skilja ett grafiskt element från ett annat eller för att gruppera och hävda samhörighet.

Hur vi uppfattar färg kan däremot variera, dels till följd av andra grafiska parametrar och dels till följd av yttre omständigheter såsom kulturella förväntningar eller föreliggande funktionsvariationer, till exempel. På sidan om färg diskuteras detta betydligt mer omfattande.

Tillämpning av principerna

Den praktiska tillämpningen av gestaltprinciperna i visualisering av data är i många fall sannolikt självklar, men kanske inte alltid uppenbar. Nedan följer ett antal exempel på hur gestaltprinciperna mobiliseras och hur vår perception utnyttjas för att öka det kommunikativa värdet i en visuell framställning.

Den första tredjedelen av "Gene set 1" (sample 1, 2 och 3) beskriver ett högre genuttryck än resterande två tredjedelar av samma set.

Källa: Thomas Shafee, Wikimedia Commons

Färgdiagrammet visar genuttryck spritt över 3 olika prover. Rött indikerar en högre nivå, vitt indikerar mediannivå och blått en lägre nivå.

Principen om likhet utnyttjas här först på en väldigt grundläggande nivå; för att beskriva de olika fältens orientering, form och storlek (liggande, rektangulära fält av samma storlek) och gör det tydligt för betraktaren att de, i alla fall i någon utsträckning, är likvärdiga. Samma likhetsprincip utnyttjas sedan igen för att, med hjälp av färg, gruppera fälten på ett nytt sätt. Ögat uppfattar förhållandevis snabbt en grupp röda fält av olika valör i det övre vänstra hörnet.

Klustervisualisering av data
Klustervisualisering av Ronald Fishers klassiska dataset "The Fisher Iris Data" (1936).

Källa: Alboukadel Kassambara, Datanovia

I en klustervisualisering av Fishers klassiska irisdataset från 1936 framgår, enligt principen om närhet, två primära kluster, tydligt skilda från varandra. När vi tar hänsyn till ytterligare variabler visar det sig att det ena av dessa kluster i själva verket består av två subkluster. Genom färg och principen om likhet, samt en konturlinje och principen om omslutning, får vi tre tydliga kluster. När vi dessutom låter art representeras av form (principen om likhet, återigen) framgår att de båda sekundärklustren består av två irisarter.

Sammanfattning

Gestaltprinciperna, såsom de presenteras här, syftar till att beskriva hur vår mänskliga perception hjälper oss att förstå förhållandevis komplicerat och detaljerat visuellt material. Det finns mycket skrivet om principerna och de tenderar att variera i antal, från en handfull till ett dussin, men de 8+1 vi här har valt att presentera förefaller vara de mest relevanta i förhållande till fältet.

I visualiseringsarbetet sker tillämpningen av principerna ofta automatiskt och omedvetet, det faller sig naturligt att färga närliggande noder i ett nätverksdiagram med samma kulör, att med en linje koppla ihop en nod med associerade noder i ett annat kluster av en annan färg, och så vidare. Det är dock i spänningen mellan principerna, eller när de sätts ur spel, som vi tenderar att upptäcka nya förhållanden och samband. Ta exemplet med färgdiagrammet ovan; om inte alla fält i alla kolumner ritats ut som rektanglar av samma storlek hade olikheterna i färg inte varit lika tydliga. Detsamma gäller exemplet med irisarterna; det är tack vare att likhetsprincipen hävdas med färg som den formseparerade artblandningen i subklustren blir tydlig.

Ålderspyramid som visar åldersfördelningen mellan män och kvinnor i Europa. Dataunderlaget är från 2019.

Låt oss beakta ytterligare ett exempel: i en ålderspyramid visas åldersfördelningen i en given population och ofta görs en jämförelse ur ett strängt binärt perspektiv mellan män och kvinnor. Det ger i föreliggande fall en klar och tydlig vertikal mittlinje. På var sida om den tänkta linjen presenteras sedan data symmetriskt. Eftersom den verklighet dataunderlaget återspeglar är asymmetrisk uppstår en skevhet och principen om symmetri bryts, något vi med enkelhet upptäcker. Sannolikt betydligt enklare än om det varit två stapeldiagram intill varandra, till exempel.

Genom att förstå hur principerna hör samman och beskriver hur vår perception fungerar har vi möjlighet att skapa spänning mellan, eller rent av bryta mot, någon av principerna. Då ökar också chanserna att producera visuellt material som lättare kommunicerar det tänkta budskapet eller ger nya insikter i det undersökta materialet.

Rekommenderad läsning

Om du vill fördjupa dig i gestaltprincipernas roll i visualisering av data rekommenderas följande litteratur:

Colin Ware Information visualization : perception for design, 2012. ISBN: 9780123814647

Leland Wilkinson The grammar of graphics, 2005. ISBN: 9781441920331

Elijah Meeks Gestalt principles for data visualization, 2015. Elektronisk resurs i 4 delar:

Dejan Todorovic Gestalt principles, Scholarpedia, 2008. Elektronisk resurs.

Hade du nytta av informationen på denna sida?

Om du vill att vi ska kontakta dig angående din feedback, var god ange dina kontaktuppgifter i formuläret nedan

Jag godkänner att mina (frivilligt lämnade) personuppgifter (namn, e-post) lagras i enlighet med dataskyddsförordningen (GDPR). Uppgifterna används endast till att återkoppla till den som använder formuläret.
Senast uppdaterad: 2022-05-19