Kuviot ja kaaviot ovat visuaalisuuteen perustuva esitystapa, joka sisältää paljon dataa. Muista kuvista poiketen kaavioissa on usein tekstiä tai lukuja, jotka joko yksin tai yhdessä visuaalisten elementtien avulla esittävät tietoa. Tässä kirjoituksessa opit, miten voit tehdä kuvioistasi ja kaavioistasi visuaalisesti saavutettavia.

Kaavion lopulliseen saavutettavuuteen voidaan vaikuttaa jo sen tekovaiheessa. Kaavion tekijällä on edessään monta valintaa, jotka vaikuttavat siihen, miten käyttäjät sen havaitsevat. Puhutaan ensin kognitiivisesta puolesta eli kaavion selkeydestä.

Kaavion tehtävä on havainnollistaa käsiteltävää asiaa tai tuoda lisätietoa siihen liittyvistä yksityiskohdista. Joskus kaavioita tehdään, kun asia on liian pitkä tai monimutkainen selitettäväksi. Toisin sanoen kaaviolla yritetään välttyä asian selittämiseltä.

Jos aihe on monimutkainen, on myös kaavio todennäköisesti monitulkintainen. Virhetulkintojen välttämiseksi kaavio kannattaa aina selittää leipätekstissä. Sen lisäksi itse kaaviosta kannattaa tehdä mahdollisimman ymmärrettävä. Tässä ohjeita ymmärrettävän kaavion tekemiseen.

1. Tee kotiläksyt

Älä ikinä tee kaaviota vain päästäksesi helpommalla! Tehtäväsi sisällön tekijänä on tehdä ajatustyö lukijan puolesta ja kertoa havaintosi mahdollisimman selvästi. Jos et ole ajatellut asiaa loppuun asti, joutuu lukija arvailemaan, mitä yrität kaaviollasi kertoa.

Prosessoi tieto, jonka haluat esittää ja kirjoita se mahdollisimman selkeästi auki tekstiin. Se on loistavaa pohjatyötä myös kaaviota ajatellen. Joudut vääjäämättä miettimään:

  • Mikä on tärkeintä?
  • Millä tarkkuudella asiasta kannattaa kertoa?
  • Mikä on paras tapa kertoa asia?

Pohdinnan jälkeen pystyt tekemään lähtökohtaisesti parempia valintoja kaaviota tehdessäsi. Saatat jopa huomata, että kaavion tekeminen ei ylipäätään ole paras tapa esittää asia. Tai jos on, tiedät selvästi, mitä sillä tavoitellaan ja miten se kytkeytyy muuhun sisältöön.

2. Tee kaaviosta itseään selittävä

Vaikka kaavio on aina osa kokonaisuutta, olisi sen hyvä toimia myös itsenäisesti. Tarkoitan tällä, että kaaviosta kannattaa tehdä mahdollisimman selkeä jo itsessään, jolloin se selkeyttää sisältöä parhaalla mahdollisella tavalla.

Mieti, mikä tieto tai teksti on lukijan kannalta välttämätöntä, että hän voi ymmärtää kaavion. Missä kohtaa kaaviota tekstin kannattaa sijaita ja mihin sijainti ohjaa ajatusta? Esimerkiksi pylväiden tai palkkien selitteet kannattaa sijoittaa loogisesti lähelle kohdettaan.

Kaavion tekstien kannattaa olla mahdollisimman tiiviitä, mutta kuvaavia. Lyhenteiden käyttöä kannattaa välttää, koska ne kaipaavat usein avaamista. Paras teksti on sellainen, joka tuo vain ymmärrettävyyden näkökulmasta olennaisen tiedon, eikä mitään ylimääräistä. Lisätiedot ja muu kaavion tulkintaa auttava teksti kuuluu leipätekstiin, jos kaaviosta halutaan mahdollisimman selkeä.

3. Valitse kaavion tyyppi oikein

Kaavion esitystavan valinnassa hyvin tehdyistä kotiläksyistä on hyötyä. Kun tiedät, mitä haluat havainnollistaa kaaviolla ja millä tarkkuudella, on valinnan tekeminen itse asiassa aika helppoa.

Kaavion haastavuus ja yksityiskohtaisuus riippuu datapisteiden määrästä ja tarkkuudesta sekä vertailtavien kohteiden määrästä. Yleispätevämpi kaavio esittää lukuja isoilla datapisteillä (esimerkiksi tuhansittain tai pyöristettyjen lukujen avulla) kun taas yksityiskohtainen kaavio kertoo tarkasti jonkin kohteen määrän tai arvon. Mitä enemmän ja yksityiskohtaisempaa dataa samalla kaaviolla halutaan esittää, sen hankalampaa on sen ymmärtäminen ja tulkitseminen.

Seuraavaksi annan esimerkkejä eri kaaviotyypeistä. Havainnollistan jokaista kaaviotyyppiä esimerkkikuvalla, jonka sisältö on joko hyvin yksinkertaista tai täysin keksittyä. Huomaa kaaviosta erityisesti esitetyn tiedon luonne sekä visuaalinen esitystapa. Itse sisältö ei ole tässä yhteydessä niin merkityksellistä.

Vähän dataa sisältävät kaaviotyypit

Prosessikaavio osoittaa asioiden etenemistä tai kronologista järjestystä. Sisällöllisesti se muistuttaa listaa ja sen visuaalisuudella on vain vähän sisällöllistä merkitystä.

Prosessikaaviossa on esitetty kahdeksan kohdan vaiheet, jotka kiemurtelevat ympäri kaaviota. Vaiheet on kuvattu laatikoissa ja niiden takana kiemurtelee viiva.
Kuvio 1. Kaavion vaiheita kannattaa korostaa visuaalisuuden lisäksi myös kaavion teksteissä

Kehäkaavio kertoo jonkin asian tai ilmiön kiertokulusta, vaikuttavista tekijöistä tai osista. Sisällöllisesti se voi muistuttaa listaa, mutta asettelun mukaan myös visuaalisuudella voi olla sisällöllistä merkitystä. Esimerkiksi nuolet kehän elementtien väleissä kertovat syy-seuraussuhteista tai etenemisjärjestyksestä.

Viikonpäivät kuvattu kehäkaaviossa. Kehä alkaa maanantaista ja päättyy perjantaihin. Päivät kiertävät ympyrän ja niiden takana kulkee nuoli, joka osoittaa, että sunnuntain jälkeen kierros alkaa uudelleen.
Kuvio 2. Tällä kertaa kehäkaaviossa on esitetty viikonpäivien kierto

Hierarkkiset kaaviot kertovat jonkin asian tai kokonaisuuden rakenteesta. Sen avulla voidaan kuvastaa esimerkiksi pää- ja alakäsitteitä tai vaikkapa organisaation rakennetta. Visuaalisuudella on yhtä lailla merkitystä kaavion tekstien kanssa, mutta sisältö voitaisiin esittää myös otsikoiden, leipätekstin ja luetteloiden avulla.

Ylimpänä kaaviossa on johto, jonka alla on kaksi yksikköä. Ensimmäisellä yksiköllä on kaksi tiiminvetäjää, joista toisen alla on kaksi ja toisen alla kolme työntekijää. Toisessa yksikössä on suoraan kolme työntekijää.
Kuvio 3. Hierarkkisessa kaaviossa kuvattuna pienen yrityksen rakenne

Paljon dataa sisältävät kaaviotyypit

Pylväskaavio havainnollistaa jonkin asian määrää tai muutosta joko itsenäisesti tai suhteessa muihin asioihin tai aikaisempiin ajankohtiin. Se on hyvä esitystapa, kun eri kohteita halutaan vertailla keskenään. Sisällöllisesti huomio kiinnittyy pääasiassa teksteihin, mutta pylväiden arvot luovat myös visuaalista merkitystä kaavioon.

Pylväskaaviossa esitetty ruutuajan määrä vapaa-ajalla. Mittaustulokset on otettu neljältä henkilöltä kolmena vuonna peräkkäin. Mustalla pylväällä on kerrottu ensimmäisen vuoden ruutuaika, vaaleansinisellä reunaviivatulla pylväällä toisen vuoden ja vihreällä poikkiraidallisella pylväällä kolmannen vuoden ruutuaika.
Kuvio 4. Pylväskaaviossa esitettynä kuvitteellisten neljän henkilön ruutuajan kehitys kolmen vuoden aikana

Viivakaaviolla voidaan ilmaista käytännössä samoja asioita kuin pylväskaaviolla. Se havainnollistaa asian määrää tai muutosta joko itsenäisesti tai suhteessa muihin asioihin. Viivakaavio voi olla parempi valinta silloin, kun halutaan osoittaa jonkin asian trendiä, eikä niinkään tarkkaa lukumäärää.

Viivakaaviossa esitetty eri näköisillä ja värisillä viivoilla vireystilan kehitys työpäivän aikana. Edellisvuoden tulokset on esitetty mustalla katkoviivalla, tämän vuoden toteutuma vihreällä yhtenäisellä viivalla ja odotukset sinisellä, hieman tiheämmällä katkoviivalla.
Kuvio 5. Viivakaaviossa esitetty kuvitteellisesti vireystilan trendi työpäivän aikana. Tässä tapauksessa tarkkojen määreiden esittäminen ei ole tärkeää

Ympyräkaavio on tehokas tapa havainnollistaa asioiden suhteita toisiinsa. Sen avulla voidaan kertoa esimerkiksi siitä, mistä jokin kokonaisuus koostuu ja missä suhteessa sen osa-alueet vaikuttavat asiaan. Hyvin toteutettuna ympyräkaavion visuaalisuus ei tuo enää informatiivista lisäarvoa, jolloin se ei välttämättä tarvitse alt-tekstiä (kuten esimerkkikuvassa).

Ympyräkaaviossa esitetty vuoden tulojen muodostuminen jokaisen neljänneksen aikana. Osuudet on merkitty eri värein ja osiot on erotettu reunaviivalla. Jokaisen osion selite on joko kohdan sisällä tai osoitettu viivalla kaavion ulkopuolelta.
Kuvio 6. Ympyräkaavio ei tarvitse erillisiä selitteitä, jos kaavion eri osat on tarkennettu suoraan kaaviossa tarpeeksi hyvin

4. Varmista, että sisältö erottuu kaaviosta

Kun kaavion muoto on valittu, on jäljellä itse kaavion tekeminen. Tarkista vielä, että sen eri elementit erottuvat

  1. taustastaan
  2. toisistaan

Sisältöjen erottumisen kannalta ensimmäinen näkökulma on värien valinta. Tarkista, että kaavion tekstien ja taustan värien kontrasti on riittävä. Tekstin ja taustan välisen kontrastin olisi hyvä olla 4,5:1. Siihen kannattaakin pyrkiä kaavioissa. Jos esimerkiksi pylväskaavion pylväät välittävät tietoa, varmista myös, että niiden kontrasti suhteessa taustaan on vähintään 3:1. Myös kaaviossa käytettyjen eri värien tulisi erottua toisistaan.

Käytä graafien taustalla pohjaväriä eli älä jätä niitä läpinäkyviksi. Windowsin korkeakontrastitilassa ja muissa vastaavissa sivun taustan väri voi muuttua, jolloin myös graafin läpinäkyvän taustan väri muuttuu. Silloin osa graafin tiedoista ei välttämättä näy enää katselijalle. Esimerkiksi musta teksti ei enää erotu taustasta, jos graafin taustan väri muuttuu mustaksi käyttäjän asetusten mukaan.

 

Aiemmin esitetty ympyräkaavio mustalla taustalla. Mustalla olevat tekstit eivät enää erotu taustasta
Kuvio 7. Ympyräkaavion läpinäkyvällä taustalla olevat mustat tekstit eivät erotu enää, kun käyttöjärjestelmässä on käytössä tumma tila

Värin ei saisi kuitenkaan olla ainut tapa ilmaista asiaa, vaan kaaviossa kannattaa käyttää myös muita tapoja. Värin lisäksi voit erottaa kaavion kohtia toisistaan käyttämällä esimerkiksi

  • täyttökuvioita
  • reunaviivoja
  • tekstejä
  • numeroita
  • muita tarkenteita.

Mieti, erottaisitko kohdat toisistaan, jos kaaviosta otettaisiin kaikki värit pois. Jos erottaisit, on kaavio varmasti tarpeeksi saavutettava visuaalisesti. Kaavion saavutettavuus avustaville teknologioille onkin sitten ihan oma lukunsa. Voit käydä perehtymässä aiheeseen Sami Määtän kirjoittamassa vierasblogissa.