Tiedon visualisointi
Suunnitteluperiaatteet
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.
- Lisää reunaviivat data-/grafiikkaelementteihin (eli pylväisiin, sektoreihin ja värikenttiin ja vastaaviin elementteihin).
- Varmista, että sävyt erottuvat toisistaan riittävästi; vaaleammissa sävyissä 40 % ero on suositeltava, tummemmissa riittää 20 %.
- Viivakuvioissa on käytettävä toisistaan eroavia arvopistemarkkereita. Erilaiset viivatyypit voivat myös auttaa saavutettavuudessa. Pidä viivojen lukumäärä yhtä kuviota kohden maltillisena siten, että viivat on mahdollista erottaa toisistaan. Jos viivoja on paljon, pilko sisältö useammaksi kuvioksi.
- Älä käytä kuoseja kentissä ja pylväissä.
- Älä pyri parantamaan kontrastia tai koristelemaan kuviota erilaisilla tehosteilla.
Tyylit
Typografia
Pistekokosuositukset ovat suuntaa-antavia ja määrittävät ensisijaisesti tekstielementtien keskinäistä kokoeroa. Tekstin piste-/pikselikoko on aina toteutuskohtaista.
- Kuvion pääötsikko: Rajdhani Bold, 14–16 pt, väri: sininen (#003c78)
- Alaotsikko tai ingressi: Rajdhani Semibold, 12–14 pt, väri: sininen (#003c78)
- Asteikkonumerot, akselien otsikot ja selitteet (Legend): Source Sans 3 Medium, 9–10 pt, väri: sininen (#003c78)
- Arvo-/datapisteiden otsikot (Data label): Rajdhani Bold, 9–10 pt, väri taustaväristä riippuen: sininen (#003c78) tai valkoinen
- Lähdeviitteet: Source Sans 3 Medium, 8 pt, väri: sininen (#003c78)
Viivat
Pistekokosuositukset ovat suuntaa-antavia ja määrittävät ensisijaisesti erilaisten viivojen keskinäistä kokoeroa. Viivojen piste-/pikselikoko on aina toteutuskohtaista.
- Kuvion akselin perusviiva (Baseline): 1 pt, väri: sininen (#003c78)
- Hila-/apuviivat: 0,25 pt, väri: sininen (#003c78) 75 %
- Reunaviivat: 0,25 pt, väri: sininen (#003c78)
- Viivakuvion viiva: 1,75–2 pt, värit tarkemmin alempana
Selitteet (Legend)
Selitteet esitetään samassa järjestyksessä kuin niitä vastaavat tiedot kuviossa. Selitteet sijoitetaan pääsääntöisesti kuvion oikealle puolelle tai alapuolelle.
Piirtoalueen (Plot area) vaihtoehtoinen väri
Tapauskohtaisesti voi olla perusteltua käyttää piirtoalueella vaalean turkoosia (50 % #CCEFF4) taustaväriä. Tämä pätee hyvin esimerkiksi Työterveyslaitoksen verkkopalvelussa tai vaihtelevasti myös PowerPoint-esityksissä, kun halutaan jäsentää sisältöä värin avulla. Pääsääntöisesti käytämme kuitenkin valkoista piirtoaluetta.
Väriasteikot
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 grafiikkaelementteihin ja käytä viivakuvaajissa eri tyyppisiä viivoja sekä erilaisia 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. Jos kategorioita on vain yksi, voit valita kategorian värin vaalean turkoosin (#CCEFF4) ja sinisen välillä (#003c78).
#CCEFF4 |
#003C78 |
#FF5C5C |
#94002A |
#EDD4E4 |
#6C2D5E |
#EDFFD9 |
#145F41 |
#B59F92 |
#503C37 |
#EE652F |
#7D2800 |
Kategoriset värit viivakuvioon |
|||||
|
#003C78 |
#EE652F |
#6C2D5E |
#145F41 |
#94002A |
#503C37 |
Kaksisuuntaiset, hajaantuvat väriasteikot (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 oranssista siniseen (vastakohtaiset muuttujat)
Tätä asteikkoa voi käyttää esimerkiksi kertomaan muutoksesta lämpimästä kylmään.
|
#EE652F |
#FBA178 |
#FFD9C7 |
#F1F1F1 |
#CCEFF4 |
#5795B7 |
#003C78 |
Likert-asteikko
| Täysin eri mieltä |
Jokseenkin eri mieltä |
En osaa sanoa |
Jokseenkin samaa mieltä |
Täysin samaa mieltä |
|
|
|
|
|
|
| #EE652F | #FBA178 | #F1F1F1 | #5795B7 | #003C78 |
Asteikko punaisesta vihreään (vastakohtaiset muuttujat)
Tämä asteikko sopii käytettäväksi ilmaisemaan muutosta negatiivisesta positiiviseen. Käytä eri vaaleusasteita vihreästä ja punaisesta, jos kategorioita on vähemmän kuin 7. Näin poikkeavan värinäön omaavat henkilöt erottavat grafiikkaelementit toisistaan helpommin.
|
#94002A |
#FF5C5C |
#FFC3BD |
#F1F1F1 |
#EDFFD9 |
#84AC86 |
#145F41 |
Asteikko violetista siniseen (neutraalit muuttujat)
Neutraalia hajaantuvaa asteikkoa käytetään kun muuttujia ei haluta arvottaa positiivisiksi tai negatiivisiksi.
|
#6C2D5E |
#AC7E9E |
#EDD4E4 |
#F1F1F1 |
#CCEFF4 |
#5795B7 |
#003C78 |
Neutraali, keskiarvo tai puuttuva tieto: #F1F1F1
Sarjalliset tummuusasteikot (sequential)
Sarjallinen väriasteikko etenee portaittain vaaleasta tummaan ja sitä voi hyvin käyttää esimerkiksi vertaillessa suuruutta tai tiheyttä.
Vihreä |
||||
|
#EDFFD9 |
#B8D5AD |
#84AC86 |
#508561 |
#145F41 |
Sininen |
||||
|
#CCEFF4 |
#9CC9D8 |
#6CA1BB |
#3B739C |
#003C78 |
Violetti |
||||
|
#EDD4E4 |
#CDA8C0 |
#AC7E9E |
#8C557D |
#6C2D5E |
Punainen |
||||
|
#FFC3BD |
#FF938B |
#FF5C5C |
#C93443 |
#94002A |
Oranssi |
||||
|
#FFD9C7 |
#FBA178 |
#EE652F |
#B84819 |
#7D2800 |
Esimerkkejä kuviotyypeistä
Suhteellinen summapylväskuvio
Viivakuvio
Pystypylväskuvio
Ryhmitelty vaakapylväskuvio
Donitsikuvio
