Tiedon visualisointi

Selkeytä ensin tietosisältö, jonka haluat visualisointiin saada: mitkä ovat tärkeimmät sisällöt /asiat, mitä niistä nostetaan esille ja esitetäänkö visualisoinnissa jotain syy–seuraus-suhteita. Vasta kun sisältö on kirkkaana mielessä, on aika miettiä esittämistapaa tai kuvitusmetaforaa. 

Tee näin

• Käytä yhtenäistä asteikkoa ja varmista tiedon vertailtavuus.
• Pyri yksinkertaiseen tiedon esitystapaan ja jätä pois epäoleellinen informaatio.
• Jaa monimutkainen kuvio useammaksi yksinkertaiseksi kuvioksi. Yksi viesti/oivallus kuviota kohden riittää.
• Varmista, että katseen etenemissuunta on selvä. Olemme tottuneet lukemaan vasemmalta oikealle, ylhäältä alas.
• Ryhmittele tieto sen merkityksen ja yhteyksien mukaan. Huolehdi, että hierarkia ja rajat erottuvat selkeästi. Anna sopiva määrä tietoa oikeassa paikassa oikeaan aikaan.
• Varmista, että korostetut kohteet ovat selvästi huomattavissa ja tarvittaessa yhdenmukaisia.
• Varmista, että korostat oikeita asioita.
• Käytä sovellukseen sopivaa ja käyttäjille tuttua tiedon esitystapaa.
• Käytä kaksiulotteista tyyliä. 
• Käytä hieman suurempia kirjaimia ja graafisia elementtejä kuin itsestäsi tuntuisi riittävältä.
• Noudata Työterveyslaitoksen tiedon visualisoinnin tyyliohjeita ja käytä määriteltyjä väripaletteja.

Varmista visualisoinnin saavutettavuus

• Väri ei saa olla ainoa visuaalinen tekijä, joka välittää informaatiota tai erottaa elementtejä toisistaan, joten käytä reunaviivoja ja arvopisteiden otsikoita.
• Varmista, että sävyt erottuvat toisistaan riittävästi; vaaleammissa sävyissä 40 % ero on suositeltava, tummemmissa riittää 20 %.
• Lisää reunaviivat värikenttiin ja pylväisiin.
• Viivakuvaajissa on käytettävä toisistaan eroavia arvopistemarkkereita. Erilaiset viivatyypit voivat myös auttaa saavutettavuudessa.
• Älä käytä kuoseja kentissä ja pylväissä.
• Älä pyri parantamaan kontrastia tai koristelemaan kuviota erilaisilla tehosteilla.

Brändivärien lisäksi käytämme tiedon visualisoinnissa tällä sivulla kuvattuja lisävärejä. Tiedon välittyminen ei saa jäädä pelkän värinäön varaan. Lisää reunaviivat pylväisiin ja sektoreihin sekä käytä viivakuvaajissa eri tyyppisiä viivoja ja arvopisteiden markkereita. Käytä myös arvopisteiden otsikointia.

Kategorinen, laadullinen väriasteikko (qualitative)

Kategorisessa väripaletissa värit edustavat eri luokkia tai ryhmiä. Värit poikkeavat selkeästi toisistaan ja kuvaavat eri kategorioita, eivätkä asioiden järjestystä tai suuruusluokkaa. 

Alla kuvatussa järjestyksessä (vasemmalta oikeaan) jokaisen värin kontrastisuhde edeltävään ja seuraavaan väriin on vähintään 3:1.

#CCEFF4	#003C78	#FF5C5C	#94002A	#EDD4E4	#6C2D5E
#EDFFD9	#145F41	#B59F92	#503C37	#EE652F	#7D2800

Kaksisuuntaiset, hajaantuvat väri­asteikot (diverging)

Hajaantuvaa väriasteikkoa käytetään kun on olemassa neutraali keskivaihe tai -kohta, josta arvot poikkeavat asteittain kahteen vastakkaiseen ääripäähän. Hajaantuvaa asteikkoa käytetään myös niin kutsutussa Likert-asteikossa, joka on tyypillinen kyselytutkimuksissa.

Asteikko punaisesta vihreään

Tämä asteikko sopii käytettäväksi ilmaisemaan muutosta negatiivisesta positiiviseen.

#94002A

#FF5C5C

#FFC3BD

#F1F1F1

#EDFFD9

#84AC86

#145F41

Asteikko oranssista siniseen

Tätä asteikkoa voi käyttää esimerkiksi kertomaan muutoksesta lämpimästä kylmään.

#EE652F

#FBA178

#FFD9C7

#F1F1F1

#CCEFF4

#5795B7

#003C78

Asteikko violetista siniseen

Neutraalia hajaantuvaa asteikkoa käytetään kun muuttujia ei haluta arvottaa positiivisiksi tai negatiivisiksi.

#6C2D5E

#AC7E9E

#EDD4E4

#F1F1F1

#CCEFF4

#5795B7

#003C78

Sarjalliset tummuusasteikot (sequential)

Sarjallinen väriasteikko etenee portaittain vaaleasta tummaan ja sitä voi hyvin käyttää esimerkiksi vertaillessa suuruutta tai tiheyttä. 

#EDFFD9	#B8D5AD	#84AC86	#508561	#145F41
#CCEFF4	#9CC9D8	#6CA1BB	#3B739C	#003C78
#EDD4E4	#CDA8C0	#AC7E9E	#8C557D	#6C2D5E
#FFC3BD	#FF938B	#FF5C5C	#C93443	#94002A
#FFD9C7	#FBA178	#EE652F	#B84819	#7D2800