Informaation visualisointi

Informaation visualisointi

Illustration © Tenso Graphics

1. Esimerkkejä I: Infovisu fails

2. Visualisoinnin työkalut

3. Esimerkkejä II: Infovisu wins

Clutter is a failure of design, not an attribute of information.

— Edward Tufte

Esimerkkejä I Työkalut Esimerkkejä II




Cosmetic decoration, which frequently distorts the data, will never salvage an

underlying lack of content.— Edward Tufte








Design cannot rescue failed content.— Edward Tufte


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?

Sisällön ja tavoitteen checklist



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

Pylväskaavio Histogrammi Viivakaavio Funktiokaavio

Pinta-alakaavio Pistekaavio Kuplakaavio Kartogrammi

Vuokaavio Venn-diagrammi Ympyräkaavio Tutkadiagrammi


Visualisoinnin välineet

Hahmolait



Hahmolait

Samanlaisuus Läheisyys Yhteenliittyminen

Yhteinen liike Symmetria Valiomuotoisuus

Jatkuvuus Sulkeutuvuus

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ä.

Hahmolaki 1/8


Hahmolaki 2/8

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.


Hahmolaki 3/8

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ä.


Hahmolaki 4/8

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.


Hahmolaki 5/8

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.


Hahmolaki 6/8

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.


Hahmolaki 7/8

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.

Hahmolaki 8/8


Infovisu wins


1908


1931


1948


1960


2014


Kartogrammi

Samanlaisuus Läheisyys Yhteenliittyminen Jatkuvuus Sulkeutuvuus


Green Report, Francesco Franchi


Samanlaisuus Läheisyys Yhteenliittyminen Sulkeutuvuus Symmetria

Pylväskaavio Kartogrammi


Annual Report 2013, Nicholas Felton


Samanlaisuus Läheisyys Jatkuvuus Sulkeutuvuus Symmetria

Pylväskaavio Histogrammi


Freshwater:An AgriculturalIssue

DensityDesign


Samanlaisuus Läheisyys Yhteenliittyminen Jatkuvuus Sulkeutuvuus Symmetria

Pinta-alakaavio Pylväskaavio Kartogrammi Vuokaavio


10 vinkkiä parempiin visualisointeihin

1. Päätä ensin mitä, miksi ja kenelle viestit

2. Tutki esimerkkejä epäonnistuneista visualisoinneista

3. Tutustu visuaalisen suunnittelun perusteisiin

4. Tutustu Gestalt-psykologiaan

5. Älä käytä grafiikkaa tarkoituksettomaan koristeluun

6. Käytä korkeintaan kahta kirjasinta

7. Älä käytä värejä perusteettomasti

8. Liika värikylläisyys rasittaa katsojan silmiä

9. Älä jaa visualisointiasi moneen näkymään

10. Käytä ympyrädiagrammin sijaan pylväskaaviota

Kiitos

@johanneskoski

Illustration © Kimberley Dadds