Selkeää ja toimivaa dashboardia suunniteltaessa ei sovi unohtaa yksityiskohtien ja viimeistelyn merkitystä. Pieniltä tuntuvilla parannuksilla voi olla iso vaikutus loppukäyttäjän kokemukseen. Selkeys ja helppokäyttöisyys edistävät dashboardin laajaa jalkautumista, sekä johtavat syvempään datan ymmärrykseen ja parempaan päätöksentekoon. Lue neljä vinkkiä, joilla viilaat loppukäyttäjän dashboard-kokemuksen huippuunsa!

Solutive oli perinteikkäästi mukana Kilometrikisa-pyöräilykampanjassa viime kesänä. Tässä leikkimielisessä kilpailussa polkijat organisoituvat joukkueisiin, kerryttävät sekä henkilökohtaista että tiiminsä kilometripottia ja taistelevat keskinäisestä paremmuudesta. Luonnollisesti emme tyytyneet pelkkään fillarointiin, vaan kilpailun etenemisestä kerättiin ja visualisoitiin dataa. Blogisarjan aiemmassa osassa kuvasin, miten datan kerääminen, käsittely ja tallentaminen saatiin automaattiseksi prosessiksi.

Tässä blogisarjan jälkimmäisessä osassa keskitytään dataputkien sijaan lopputulosten visualisointiin. Kerätyn datan pohjalta luotiin Kilometrikisa-dashboard, josta pystyi seurata niin Solutiven etenemistä joukkueena kuin yksittäisiä polkijoitakin. Dashboard sisältää esimerkiksi pyöräiltyjen kilometrien seurantaa ja sijoitusten muuttumista ajan suhteen. Ulkoasussa ja käytettävyydessä pyrittiin selkeän pelkistettyyn tyyliin: värejä ja erilaisia visualisointeja on vain muutamia, mutta käyttäjä pystyy halutessaan porautumaan tarkempiin tietoihin, kuten yksittäisen pyöräilijän yksityiskohtaisiin tilastoihin. Voit kurkata interaktiivisen Kilometrikisa-dashboardin klikkaamalla kuvaa alta.

Katso interaktiivinen Kilometrikisa-dashboard

 

Haluan nostaa dashboardista neljä yksityiskohtaa, jotka ovat mielestäni erityisen onnistuneita ja joita kokeneetkaan visuilijat eivät välttämättä tule aina ajatelleeksi. Näillä vinkeillä luot dashboardeillesi viime silauksen!

1. Käytä toisistaan erottuvia fontteja

2. Poista tyhjä interaktiivisuus

3. Älä unohda Parameter Actioneja

4. Sijoittele Label-tekstit prikulleen halutusti

 

 

 

1. Käytä toisistaan erottuvia fontteja

Dashboardia suunnitellessa sekä värien että fonttien käyttöön liittyvät pitkälti samat lainalaisuudet. Selkeään ilmeeseen pääsemiseksi erilaisia värejä tai fontteja ei kannata olla muutamaa enempää, mutta ne mitä käytetään tulee erottua helposti toisistaan. Tässä dashboardissa päätin käyttää vain yhtä kirjasintyyppiä (Arial) ja kolmea eri fonttikokoa: 24 pääotsikolle ja yläbannerin KPI-luvuille (Key Performance Indicator), 15 väliotsikoille sekä 10 leipätekstille. Monesti on syytä korostaa erityisesti dashboardin ylätason otsikkoa, mihin isoilla kirjaimilla kirjoittaminen on hyvä tehokeino. Hieman lisää variaatioita saa myös lihavoinnin käytöllä.

Valitut kolme fonttikokoa ovat riittävän erikokoisia selkeän ja miellyttävän kokonaisuuden muodostumiseksi.

Kuva 1: Valitut kolme fonttikokoa ovat riittävän erikokoisia selkeän ja miellyttävän kokonaisuuden muodostumiseksi.

 

 

2. Poista tyhjä interaktiivisuus

Tableau on erinomainen työkalu tuomaan dynaamisen analytiikan loppukäyttäjän näppeihin. Tableaussa lähes jokainen elementti on rakennettu mahdollistamaan rikkaan interaktiivisuuden. Joskus selkeyden lisäämiseksi jokin dashboardin yksittäinen osa halutaan kuitenkin asettaa staattiseksi. Tällöin on järkevää poistaa käyttäjän mahdollisuus valita näitä visualisoinnin elementtejä. Esimerkiksi KPI-laatikot tai muut tekstimuotoiset elementit kannatta monesti pitää staattisena.

TextboxTekstilaatikot reagoivat oletuksena käyttäjän valintoihin.

Kuva 2: Tekstilaatikot reagoivat oletuksena käyttäjän valintoihin.

 

Interaktiivisuuden poistamisen niksinä on viedä Blank-objekti kelluvassa tilassa (floating) muiden dashboardin elementtien päälle. Käyttäjä ei voi klikata Blank-objektin ”alla” olevia elementtejä, jolloin ne muuttuvat staattisiksi.

Blank-objektin lisääminen kelluvassa tilassa. Lopputuloksena KPI-laatikot eivät reagoi käyttäjän hiiren liikkeisiin.

Kuva 3: Blank-objektin lisääminen kelluvassa tilassa. Lopputuloksena KPI-laatikot eivät reagoi käyttäjän hiiren liikkeisiin.

 

Lataa Tableaun ilmainen kokeiluversio! >>

 

 

 

3. Älä unohda Parameter Actioneja

Halusin tehdä vuosien vertailun helpoksi ja visuaaliseksi aikavisualisoinneissa. Lopullisessa toteutuksessa käyttäjä voi viedä hiiren kuvaajan yksittäisen päivän kohdalle, jolloin piirtyvä pystyviiva helpottaa vertailemaan saman päivän sijoitusta eri vuosina. Lisäksi kyseisten päivien luvut näkyvät myös tekstinä. Toteuttaminen onnistui näppärästi uudehkolla Parameter Action-ominaisuudella.

Yksittäisen päivän sijoituksen vertailu eri vuosina

Kuva 4: Yksittäisen päivän sijoituksen vertailu eri vuosina

 

Taustalla toimii päivämäärämuotoinen parametri, jonka arvo muuttuu Parameter Actionin myötä käyttäjän viedessä hiiren yksittäisen päivän kohdalle. Referenssiviiva (reference line) saa sijaintinsa parametrin päivämäärän perusteella. Vastaavalla tavalla laskettu kenttä palauttaa joukkueen sijoituksen luvun vain kyseiselle päivälle.

Mutta mitä näytetään, jos käyttäjä ei ole vielä valinnut mitään päivää? Oletuksena käytetään datan uusinta havaintopäivää, joka kertoo samalla näppärästi milloin data on viimeksi päivitetty. Taustalla on toinen parametri, jolla on kaksi arvoa: näytä dynaamisesti laskettu uusin päivä tai näytä käyttäjän valitsema päivä. Kun käyttäjä valitsee ensimmäisen kerran jonkin tietyn päivän, niin referenssiviiva siirretään uusimman havaintopäivän sijasta käyttäjän valitsemalle päivälle.

 

 

4. Sijoittele Label-tekstit prikulleen halutusti

Visualisoinneissa käytetään usein dataa kuvaavia Label-tekstejä varsinaisten graafien tukena. Tableaussa on sisäänrakennettuna fiksua logiikkaa, joka määrittää automaattisesti, mihin Label-teksti piirtyy, mutta jos haluaa täydellisen kontrollin sijainnin määrittämiseen, niin sekin onnistuu.

Tableau asettaa pyöräilijän nimen (Label-teksti) automaattisesti kunkin viivan alapuolelle.

Kuva 5: Tableau asettaa pyöräilijän nimen (Label-teksti) automaattisesti kunkin viivan alapuolelle.

 

Yllä olevassa kuvassa tekstit on aseteltu melko selkeästi. Toisaalta jos visualisoinnissa olisi käytettävä korkeus kortilla, niin ei olisi enää ilmiselvää, kuvaako viivan ylä- vai alapuolella oleva nimi kunkin viivan pyöräilijää. Tällöin olisi parasta, jos pyöräilijän nimi saataisiin näkymään viivan tasolla heti viivan perään.

Oletusarvoisesti Tableau piirtää ensin varsinaisen graafin, ja antaa graafille mahdollisimman paljon käytettävissä olevasta tilasta. Vasta tämän jälkeen Label-tekstit sommitellaan graafin sekaan. Toisinaan tämä voi johtaa siihen, että Labeleille ei jää niin paljoa tilaa kuin haluttaisiin. Nyt graafin viivojen jälkeen tulisi jättää erikseen tilaa Labeleille.

Mikäli käytössä oleva akseli olisi staattinen, niin Edit Axis-valikon takaa voitaisiin määritellä kiinteä päivämääräväli. Esimerkiksi jos datasta löytyisi tietoa aikaväliltä 1.5 – 30.9, niin akseli voitaisiin kiinnittää välille 1.5 – 30.11, jolloin Label-tekstit mahtuisivat ”tyhjälle” aikavälille 1.10 – 30.11.

Tämä on kuitenkin vain harvoin mahdollista, ja esimerkiksi Kilometrikisa-dashboardiin tuli joka päivä uutta dataa, mikä estää akselin kiinnittämisen. Apuun rientää referenssiviiva, jonka sijainti pystytään määrittämään dynaamisesti lasketun kentän (calculated field) avulla. Kun referenssiviiva sijoitetaan vaikkapa kaksi kuukautta eteenpäin datan viimeisimmästä havainnosta, niin graafiin jää tyhjää tilaa Labeleita varten.

Referenssiviiva muuttaa akselissa näkyvää uusinta päivämäärää, jolloin Label-teksteille on hyvin tilaa graafin oikealla puolella.

Kuva 6: Referenssiviiva muuttaa akselissa näkyvää uusinta päivämäärää, jolloin Label-teksteille on hyvin tilaa graafin oikealla puolella.

 

Referenssiviivaa ei ole tarvetta näyttää loppukäyttäjälle asti, joten viivan asetuksista kannattaa valita Label: None, Tooltip: None ja Line: None. Tällöin viiva on näkymätön, kunhan käyttäjä ei vie hiirtä viivan kohdalle. Loppusilauksena viivan päälle voi viedä kelluvan Blank-objektin kohdan 2. mukaisesti, jolloin referenssiviiva katoaa kokonaan.

 

Kaipaatko lisää vinkkejä visuaalisen analytiikan tehokkaaseen hyödyntämiseen?

Järjestämme säännöllisesti eritasoisia Tableau-koulutuksia aina aloittelijasta kokeneempaan käyttäjään. Esimerkiksi Visual Best Practices -koulutuksessa syvennytään visuaalisen analytiikan teoriaan ja sen kautta käytäntöihin. Katso lisää ja ilmoittaudu tuleviin koulutuksiimme

Palautetta Kilometrikisa-dashboardista tai kysymyksiä blogin aiheista otetaan mielellään vastaan sähköpostitse: kalle@solutive.fi

Get Free Widget