© Reaktor

Informaation visualisointi

Johannes Koski
6 min readMar 3, 2015

Tämä on aloittelijalle suunnattu johdanto tiedon esittämiseen graafisen suunnittelun avulla. Artikkeli sisältää visualisoinnin alkeita sekä käytännön esimerkkejä hahmopsykologian hyödyntämisestä.

Internet on täynnä kauniiseen ja tieteellisen näköiseen ulkoasuun puettua hyödytöntä informaatiota. Vastaavasti moni arvokas sisältö jää välittymättä epäonnistuneen muotoilun seurauksena. Onnistuaksesi viestinnässä tarvitset vastaanottajan kannalta laadukasta sisältöä ja oikean välineen sisällön viestimiseen. Kuvailen seuraavaksi muutamia keinoja sisällön valitsemiseen sekä tiedon välittämiseen graafisen suunnittelun ja hahmopsykologian avulla. Lopusta löydät kolme esimerkkiä onnistuneista visualisoinneista, listan hyödyllisiä linkkejä sekä kirjallisuutta aiheesta.

Tämän blogikirjoituksen esitysversion löydät SlideShare-palvelusta: http://www.slideshare.net/johanneskoski/informaation-visualisointi

Sisältö ja tavoite

Cosmetic decoration, which frequently distorts the data, will never salvage an underlying lack of content. — Edward Tufte

Kaikki viestintä on turhaa ilman vastaanottajan kannalta relevanttia sisältöä. Ennen kuin alat valitsemaan värejä ja kirjasinta, sinun on pystyttävä vastaamaan perusteellisesti seuraavaan viiteen kysymykseen:

  1. Mitä tavoitteita tai seurauksia viestinnällä haetaan?
  2. Mikä oivallus informaation muotoilun avulla halutaan viestiä?
  3. Kenelle tai mille kohderyhmille viesti suunnataan?
  4. Miksi tämä oivallus on hyödyllinen vastaanottajalle?
  5. Missä, milloin ja miten viesti otetaan vastaan?

Valitse oikea väline

Good design is a lot like clear thinking made visual. — Edward Tufte

Pylväskaaviot toimivat vertailuun huomattavasti paremmin kuin ympyrädiagrammi, sillä aivomme hahmottavat pituuserot pinta-alaeroja helpommin.

Merkityksellisen sisällön lisäksi tarvitset tuntemusta graafisen suunnittelun perusteista: sommittelusta, typografiasta ja väriopista. Muista käyttää visuaalisuutta tarkoituksenmukaisesti. Jos tarkoituksesi on välittää tarkkaa tietoa, älä käsittele graafia kuvituselementtinä. Toisaalta herkullisen näköiset kaaviot voivat tukea esimerkiksi markkinointiviestintää.

Tyypilliset visualisoinnin välineet

Pylväskaavio (bar chart), Histogrammi (histogram), Viivakaavio (line chart)

Funktion kuvaaja (function graph), Pinta-alakaavio (area chart), Pistekaavio (scatter plot)

Kuplakaavio (bubble chart), Kartogrammi (cartogram), Vuokaavio (flow chart)

Venn-diagrammi (Venn diagram), Ympyrädiagrammi (pie chart), Tutkadiagrammi (radar chart)

If you want to communicate, think of your visualizations not as art, but as tools for understanding. — Alberto Cairo

Hahmolait

Suosittelen perehtymään näihin Gestalt-teorian hahmolakeihin. Hahmolait pyrkivät osoittamaan periaatteet, joilla aivomme yhdistelevät kokonaisuuksia visuaalisten havaintojen yksityiskohdista.

Samanlaisuuden (engl. similarity) lain mukaan muodoiltaan, kooltaan tai väreiltään samankaltaiset kuviot mielletään yhteenkuuluviksi. Mitä enemmän asiat muistuttavat toisiaan, sitä luultavammin ne muodostavat mielessä ryhmiä.

Läheisyyden (engl. proximity) lain mukaan lähekkäin olevat kuviot mielletään yhteenkuuluviksi. Toinen ryhmittelyyn perustuva Gestaltin laki on asioiden etäisyyssuhteisiin perustuva läheisyyden laki. Läheisyys on yleensä jopa voimakkaampi tehokeino kuin samanlaisuus.

Yhteenliittymisen (engl. connectedness) lain mukaan toisissaan jollakin tavalla kiinni olevat, mutta erilliset, kohteet mielletään aina samaan ryhmään tai objektiin kuuluviksi. Kiinnittyminen voi olla toteutettu esimerkiksi objektit yhdistävällä viivalla tai taustavärillä.

Jatkuvuuden (engl. continuity) lain mukaan yhteneväinen viiva koetaan kuvioksi. Jatkuvuuden laki kuvaa siis sitä, miten samaan objektiin kuuluvat elementit voivat ilmentää jonkinlaista jatkuvuutta esimerkiksi värin huomaamattomalla vaihdolla vivahteesta toiseen tai rajojen jatkuvuudella.

Sulkeutuvuuden (engl. closure) lain mukaan suljettu (tai lähes suljettu) viiva muodostaa kuvion. Jos visuaaliset objektit näyttävät ikäänkuin sulkevan sisäänsä jonkin alueen, niin katsoja mieltää tämän alueen erilliseksi kokonaisuudeksi.

Yhteisen liikkeen (engl. common fate) laki esittää, että yhdessä liikkuvat asiat kuuluvat todennäköisesti samaan ryhmään. Toisin sanoen samaan suuntaan ja/tai samalla nopeudella liikkuvat kohteet kuuluvat yhteen ja yksittäinen liike ei erotu samaa liikettä tekevästä joukosta.

Symmetrian (engl. symmetry) lain mukaan mitä symmetrisempi kuvio osista muodostuu, sitä helpommin katsoja havaitsee kohteeksi symmetrisen kuvion, eikä sitä muodostavia osia. Symmetrisyys houkuttelee kenet tahansa kohdistamaan huomiota, sillä se miellyttää aisteja.

Valiomuotoisuuden (engl. good shape) lain mukaan kuviot pyritään ymmärtämään yksinkertaisina ja symmetrisina. Ihmisellä on siis taipumus havaita yksinkertaisempia kuvioita kuin millaiseksi ne tarkemman tarkastelun jälkeen osoittautuvat.

Kymmenen vinkkiä parempiin visualisointeihin

  • Päätä ensin mitä, miksi ja kenelle viestit
  • Tutki esimerkkejä epäonnistuneista visualisoinneista
  • Tutustu visuaalisen suunnittelun perusteisiin
  • Pidä hahmolait mielessä
  • Älä käytä grafiikkaa tarkoituksettomaan koristeluun
  • Käytä korkeintaan kahta kirjasinta
  • Älä käytä värejä perusteettomasti
  • Liika värikylläisyys rasittaa katsojan silmiä
  • Älä jaa visualisointiasi moneen näkymään
  • Käytä ympyrädiagrammin sijaan pylväskaaviota

Esimerkkejä

Graphical excellence is that which gives to the viewer the greatest number of ideas in the shortest time with the least ink in the smallest space. — Tufte

Henry Charles Beck

Henry Charles Beck: London Underground Map 1931
London Underground Map 1948
London Undergound Map 2014

Henry Beck suunnitteli kartan Lontoon maanalaisen linjoista vuonna 1931. Sama muotoiluidea on toistunut vuosikymmenestä toiseen metroverkoston laajetessa.

Nicholas Felton

© Nicholas Felton: 2013 Annual Report

Nicholas Felton tekee elämästään vuosittain Annual Report -nimisen visuaalisen yhteenvedon. Hän on onnistunut paketoimaan suuren määrän tietoa yhteen näkymään. Jokaisella värillä, muodolla ja merkillä on oma funktionsa.

Francesco Franchi

© Francesco Franchi: Infographics

Francesco Franchin työssä informaatio jäsentyy ja viesti välittyy hyvin: palkkikaaviot välittävät tiedon vertailukelpoisesti, kuvituskuvat ylläpitävät lukijan mielenkiintoa ja tarkkaan gridiin pohjautuva taitto pitää kokonaisuuden hahmotettavana.

Density Design

© Density Design: Desalination Dissolution

Density Design -visualisointiyrityksen julisteessa on hyödynnetty onnistuneesti melkein kaikkia Gestalt-periaatteita. Lisäksi esitetystä informaatiosta tehdyt johtopäätökset on jäsennetty huolellisesti tekstiksi alkuun.

Lisää esimerkkejä infografiikoista löydät Pinterest-taulultani.

Animaatio “roskamusteen” poistamisesta © Darkhorse Analytics

Luettavaa

Epäonnistuneita visualisointeja

Opiskeltavaa verkossa

Blogeja

Kirjoja

Visualisointiohjelmia

Kiitos ideoista: Hannu Oksa, Johan Himberg, Esa Hallanoro, Mathias Lindholm, Mikko Romppainen, Tuomas Husu, Oskar Ojala, Karri-Pekka Laakso

© Kimberley Dadds

--

--