Digitaalisessa ympäristössä visualisoinnit voivat perustua staattisen kuvan lisäksi myös interaktiiviseen toteutukseen. Hyvin suunniteltu visualisointi on selkeä, saavutettava ja eri laitteille responsiivisesti mukautuva kokonaisuus.
Visualisoinnin vuorovaikutteisuus mahdollistaa esimerkiksi laajojen tietomassojen esittämisen ja analysoinnin samassa näkymässä. Esimerkiksi puukaaviossa käyttäjä voi siten ”porautua” yleiskuvasta tarkempiin yksityiskohtiin ja lisätietoihin.
Visualisointi voi myös sisältää tietojen rajaamiseen ja suodattamiseen liittyviä toimintoja (esim. datan tarkastelu tietyllä aika- tai aiherajauksella).
Digitaaliseen ympäristöön suunniteltu visualisointi on usein osa laajempaa käyttöliittymää. Käyttäjälle tulee siksi olla selvää, mitkä toiminnot ja elementit ovat osa visualisointia ja mitkä eivät.
Interaktiivisten ominaisuuksien tavoitteena on tarjota käyttäjälle mahdollisimman tehokas tapa tutkia visualisoinnin sisältämää dataa.
Visualisointiin liittyvät interaktiot tulee pyrkiä toteuttamaan mahdollisimman yksinkertaisesti ja saavutettavasti.
Visualisointi toimii yleensä joko tietoa välittävänä sisältönä tai datan analysointiin tarkoitettuna vuorovaikutteisena työkaluna.
Esimerkiksi dashboardeissa ja datasovelluksissa interaktiiviset elementit voivat helpottaa datan analysointia ja tukea siten käyttäjän yksilöllisiä tarpeita.
Jos visualisoinnin tehtävä liittyy yksinomaan tiedon viestimiseen (esim. yksittäinen tilastokuvio blogissa), kuvamuotoinen grafiikka voi usein olla käyttäjän kannalta parempi esitystapa kuin laajaan datasettiin perustuva interaktiivinen toteutus.
Yksittäisen datapisteen tarkat tiedot voi näyttää esimerkiksi työkaluvihjeen (Tooltip) avulla. Toiminnon käyttöön voi tarvittaessa liittää opastavan infotekstin (esim. ”Klikkaa palkkia nähdäksesi tarkat arvot”).
Interaktiivisissa visualisoinneissa tietoa on mahdollista esittää kerroksellisesti tai käyttäjän valitsemien kriteerien perusteella.
Erikseen avautuvien lisätietonäkymien (Tooltip tai Modal) avulla käyttäjä voi tarkastella lähemmin visualisoinnin tiettyä osaa tai datapisteen yksityiskohtaisia tietoja.
Interaktioiden avulla käyttäjä voi esimerkiksi suodattaa tai rajata dataa. Käyttäjä voi siten valita visualisointiin vain hänelle olennaisimmat tiedot (esim. tiettyihin kuntiin liittyvä data).
Visualisoinnin interaktiivisuudessa kannattaa soveltaa samoja käytäntöjä ja esitystapoja kuin käyttöliittymän muissakin osissa:
Varmista, että interaktiot toimivat kaikilla eri syöttötavoilla (hiirellä, näppäimistöllä ja kosketusnäytöllä).
Käytä interaktioita vain silloin, kun ne tukevat visualisoinnin käyttöä (esim. mahdollistavat tiedon tarkemman tutkimisen).
Dynaamisesti päivittyvä visualisointi mahdollistaa reaaliaikaisen datan esittämisen esimerkiksi tilannekuvan muodossa.
Jos datan mahdollinen vaihteluväli ei ole ennalta tiedossa, huomioi dynaamisen päivittymisen vaikutus visualisointiin (esim. asteikkovälin merkittävä muutos).
Varmista, että käyttäjä tietää milloin kuvion data on viimeksi päivittynyt. Tarjoa tieto käyttäjälle esimerkiksi metatietona (“Data päivitetty 2 min sitten”).
Responsiivinen toteutus mahdollistaa visualisoinnin mukauttamisen eri laitteille ja ruutukokoihin.
Staattiset kuvat skaalautuvat automaattisesti tiettyyn kuvasuhteeseen, mutta responsiivisesti toteutetuissa visualisoinneissa voidaan vaikuttaa esimerkiksi elementtien asetteluun ja informaation tiheyteen.
Visualisointiin sisältyvien elementtien tulee skaalautua samassa suhteessa käyttöliittymän muun sisällön kanssa.
Visualisoinnin sisältöalueen tulisi yleensä vastata muodoltaan suunnilleen neliötä, jolloin sisältö skaalautuu mahdollisimman hyvin myös kapeimpiin näyttökokoihin. Hyvin suunniteltu visualisointi ei yleensä edellytä vierityspalkin käyttöä.
Responsiivisella toteutuksella voidaan vaikuttaa kuvion asteikkoväliin ja asetteluun, mutta kuvion ydinelementtien (esim. pylväiden) väliset suhteet toistuvat silti samalla tavalla laitteesta riippumatta.
Esimerkissä kuvion asteikko ja selitteiden paikka mukautuu responsiivisesti selainnäkymän leveyden muutokseen.
Toteuta responsiivisuus siten, että visualisoinnin pääviesti säilyy samana kaikilla laitteilla. Varmista, että elementit vertautuvat toisiinsa oikeassa suhteessa.
Digitaalisessa ympäristössä julkaistut visualisoinnit sisältävät tekstin lisäksi erilaisia graafisia ja kuvallisia elementtejä, jotka liittyvät esimerkiksi numeerisen tiedon esittämiseen.
Saavutettavuuden näkökulmasta visualisoinnit koostuvat erilaisista tietoa välittävistä visuaalisista elementeistä (toisin kuin esimerkiksi kuvituskuvat tai käyttöliittymän dekoratiiviset grafiikat).
Visualisointeihin sovelletaan samoja saavutettavan suunnittelun periaatteita kuin muihinkin käyttöliittymän toiminnallisiin ja tietoa välittäviin elementteihin.
Saavutettavuuden näkökulmasta visualisointien tulee olla selkeitä ja luettavia. Sisällön ymmärrettävyys on saavutettavuuden kannalta yksi olennaisimmista tekijöistä.
Visualisoinnin sisältämän olennaisen informaation tulee välittyä mahdollisimman tasavertaisesti myös esimerkiksi ruudunlukijan käyttäjille. Keskeisin asia tai ilmiö tulee siksi esittää myös tekstimuodossa, jotta tieto on luettavissa myös ohjelmallisesti.
Yksittäisissä kuvioissa tekstivastineena käytetään tyypillisesti alt-tekstiä.
Alt-teksti ei kuitenkaan ole pakollinen, jos visualisoinnin sisältö on kuvattu kattavasti visualisointia ympäröivässä tekstisisällössä tai erillisessä taulukossa. Koodissa pakollinen alt-elementti jätetään tällöin tyhjäksi.
Laajaan datasettiin perustuvan visualisoinnin tiedot voi esittää vaihtoehtoisesti myös taulukkomuodossa.
Numeeriseen tietoon perustuvan visualisoinnin tietoja voi siten analysoida tarkasti myös ruudunlukijalla. Taulukko palvelee myös niitä käyttäjiä, jotka haluavat esimerkiksi jatkojalostaa kuvion sisältämää dataa.
Esimerkiksi karttavisualisoinneissa taulukko voi olla alt-tekstiä parempi ratkaisu etenkin silloin, kun kartta ei kuvaa vain yhtä selkeästi havaittavaa ilmiötä.
Laajasisältöisen visualisoinnin tai infografiikan sisällön voi tarvittaessa kuvata pidemmin myös erillisessä tekstiselostuksessa. Visualisointiin liittyvän kuvaustekstin sijainti kerrotaan tällöin alt-tekstissä.
Kuvioon liittyvän datataulukon voi esittää erillisellä välilehdellä (Tabs). Tällöin kuvion datapisteisiin voi perehtyä myös näppäimistön tai ruudunlukijan avulla.
Kognitiivisen saavutettavuuden näkökulmasta visualisointiin kuuluvien tietoa välittävien elementtien tulee olla selkeitä ja helposti havaittavia.
Visuaalisten elementtien lisäksi myös kaikkien tekstien tulee erottua riittävästi taustasta (otsikot, leipätekstit, selitteet, arvot, akseleiden selitteet).
Värien ja tyylien saavutettavassa soveltamisessa kannattaa hyödyntää Kela Design Systemiin valmiiksi koottuja tiedon visualisoinnin design-muuttujia.
Muuttujia hyödyntävät tiedon visualisoinnin väripaletit ja muut tyylielementit on määritelty siten, että ne mahdollistavat visualisointien saavutettavan toteutuksen. Esimerkiksi kategoriapaletit on koottu siten, että väriyhdistelmissä on huomioitu myös värinäön häiriöt.
Tiedon luokittelu ei saa perustua ainoastaan tietyn värisävyn havaitsemiseen. Esimerkiksi luokan nimi kannattaa siten toistaa myös työkaluvihjeessä.
Tiedon visuaalinen esittäminen voi toisinaan olla saavutettavuuden näkökulmasta haastavaa.
Esimerkiksi tilastokuvion sisältämää informaatiota ei välttämättä voi välittää täsmälleen samassa laajuudessa kaikille käyttäjille. Sisällön ymmärrettävyyttä – ja siten myös saavutettavuutta – voi kuitenkin tukea
Etenkin karttojen toteuttaminen täysin saavutettavasti voi joissain tapauksissa olla vaikeaa tai jopa mahdotonta. Kartan data kannattaa siksi aina tarjota myös taulukkomuodossa erillisenä ladattava tiedostona tai (mahdollisuuksien mukaan) myös omassa välilehtinäkymässään.
Näppäimistökäyttöä ei aina voi toteuttaa saavutettavuuden kannalta ihanteellisella tavalla. Visualisointien toteutukseen tarkoitetut valmiit työkalut eivät välttämättä tue näppäimistökäyttöä. Myös eri visualisointityypit (esim. kuntakartat ja muut laajoihin datasisältöihin perustuvat visualisoinnit) voivat olla näppäimistökäytön kannalta ongelmallisia.
Saavutettavuuden ja käytettävyyden näkökulmasta on tärkeää, että näppäimistökäyttö ei heikennä käyttökokemusta.
