Informaation visualisointi
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:
- Mitä tavoitteita tai seurauksia viestinnällä haetaan?
- Mikä oivallus informaation muotoilun avulla halutaan viestiä?
- Kenelle tai mille kohderyhmille viesti suunnataan?
- Miksi tämä oivallus on hyödyllinen vastaanottajalle?
- Missä, milloin ja miten viesti otetaan vastaan?
Valitse oikea väline
Good design is a lot like clear thinking made visual. — Edward Tufte
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 Beck suunnitteli kartan Lontoon maanalaisen linjoista vuonna 1931. Sama muotoiluidea on toistunut vuosikymmenestä toiseen metroverkoston laajetessa.
Nicholas Felton
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 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 -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.
Luettavaa
Epäonnistuneita visualisointeja
- Guardian: 16 useless infographics
- Business Insider: 11 Reasons Infographics Are Poison
- Information Aesthetics: Most Ugly & Useless Infographic Winners
Opiskeltavaa verkossa
- Artikkeli: 7 Rules for Creating Gorgeous UI: Part 1, Part 2
- Sari A. Laakso: Käyttöliittymät (pdf s.68-s.87)
- Steven Bradley: Design Principles: Visual Perception And The Principles Of Gestalt
- Colin Ware: Representing Data using Static and Moving Patterns
- Anne Laine: Hahmolait käytettävyyden parantajina
- Visyal.ly: Accurat-yrityksen töitä
- Transport for London: A History of the London Tube Map
- Stephen Few: Why Most Dashboards Fail
- Stephen Few: Show Me the Numbers
- Wikipedia: Gestalt psychology
- Graafisen suunnittelun perusteet: sommittelu, typografia ja värioppi
Blogeja
- Juuso Koponen, Jonatan Hildén: Informaatiomuotoilu.fi
- Alberto Cairo: The Functional Art
- Nicholas Felton: Feltron
- Density Design
- Nathan Yau: Flowing Data
- Hilary Sargent: ChartGirl
- Kaiser Fung: Junk Charts
Kirjoja
- Edward Tufte: Envisioning Information
- Edward Tufte: The Visual Display of Quantitative Information
- Colin Ware: Visual Thinking for Design
- Jacques Bertin: Semiology of Graphics
- Alberto Cairo: The Functional Art
- Stephen Few: Information Dashboard Design
- John Maeda: The Laws of Simplicity
- Don Norman: The Design of Everyday Things
Visualisointiohjelmia
Kiitos ideoista: Hannu Oksa, Johan Himberg, Esa Hallanoro, Mathias Lindholm, Mikko Romppainen, Tuomas Husu, Oskar Ojala, Karri-Pekka Laakso