Taulukot ja listat

Yleistä

Taulukoiden ja listojen avulla voidaan näyttää tietoryhmiä helposti selailtavassa muodossa.

Oikean esitystavan valinta vaikuttaa siihen, miten helposti käyttäjä löytää ja hahmottaa tiedot. Hyvin valittu esitystapa vähentää myös käyttäjän kognitiivista kuormaa. Myös käytettävissä oleva tila voi asettaa rajoitteita.

Taulukot

Taulukot mahdollistavat suurtenkin tietomassojen selailun, käsittelyn ja vertailun. Olennaiset tiedot on usein helppo löytää taulukosta, ja myös tietojen järjestäminen ja suodattaminen on tehokasta. Taulukot voi toteuttaa TableV2-komponentilla

Taulukot sopivat tyypillisesti esimerkiksi asiantuntijakäyttöliittymiin, joissa tietomäärät ovat suuria ja joissa tietoja pitää voida selailla tehokkaasti. Asiantuntijakäyttöliittymissä näytön leveys ei yleensä rajoita taulukon kokoa samalla tavalla kuin kapeammissa näkymissä, koska niitä ei yleensä käytetä mobiililaitteilla.

Huomioi, että taulukot vaativat riittävästi tilaa vaakasuunnassa. Ne eivät siten välttämättä sovellu kapeisiin näkymiin, jotka ovat tyypillisiä henkilöasiakkaiden palveluissa. Tarvittaessa taulukkoon voi sisällyttää vaakasuuntaisen vierityspalkin, mutta tämä usein huonontaa käytettävyyttä.

Käytä taulukkoa, kun

• tietoja pitää pystyä vertailemaan tai analysoimaan
• tietoja pitää pystyä suodattamaan ja lajittelemaan
• numeerisia tietoja pitää pystyä laskemaan yhteen
• tietoryhmät ovat rakenteeltaan yhteismitallisia, ja niille voidaan antaa yhteiset sarakeotsikot
• tietomassat ovat suuria, ja tietoja pitää pysytä näkemään mahdollisimman paljon kerrallaan
• käytettävissä on riittävästi vaakasuuntaista tilaa.

Listat

Listojen avulla selattavat tietomassat saadaan sopimaan taulukoita paremmin kapeille näytöille. Listojen avulla voi esittää myös sellaisia tietoja, jotka eivät luonteeltaan sovi taulukoihin.

Listojen periaatteita noudattaa myös korttimainen esitystapa.

Käytä listaa, kun

• käyttäjän on tärkeämpää löytää ja tarkastella yksittäisiä kohteita kuin vertailla niitä keskenään
• tietoryhmillä ei ole keskenään samanlaista rakennetta tai ne eivät ole keskenään yhteismitallisia
• vaakasuuntaista tilaa on käytössä rajallisesti (esim. kapea mobiilinäkymä)
• tietoryhmä sisältää visuaalisia elementtejä (esim. kuvia).

Taulukon muuttaminen listaksi

Suuret taulukot ovat harvoin selkein tapa esittää tietoa kansalaisten palveluissa, joiden tulee toimia myös mobiilinäytöillä. Taulukoita voikin olla tarpeen muuttaa listoiksi esimerkiksi tilanteissa, joissa käytössä ollut taulukkomuotoinen esitystapa pitäisi saada muutettua mobiilikäyttöliittymälle sopivaan muotoon.

Jos taulukko on laaja, tiedot voi olla joskus hyödyllistä jakaa useampaan listaan. Laajojen taulukoiden osalta on myös hyvä varmistaa, ovatko kaikki tiedot käyttäjän kannalta olennaisia.

Yksinkertaisin tapa muuttaa taulukko listaksi on näyttää kunkin rivin tiedot allekkain ryhmänä. Jos tilaa on riittävästi, tietoja voi esittää myös rinnakkain.

Listan ulkoasua ja käytettävyyttä voi parantaa kiinnittämällä huomiota seuraaviin asioihin:

• Minkälainen tietojen järjestys tukee listan silmäilyä?
• Mitkä tiedot ovat tarpeellisia? Voiko taulukon sarakeotsikot jättää listasta pois?
• Onko jotain tietoja tarpeen korostaa?

Aina taulukon tietojen muuttaminen listaksi ei ole tarpeen. Useita sarakkeita sisältävän taulukon näyttäminen listana voi hankaloittaa tietokokonaisuuden hahmottamista ja tietojen vertailua. Tarvittaessa taulukkoon voi sisällyttää kapealla näytöllä vaakasuuntaisen vierityspalkin, joka toisaalta saattaa heikentää taulukon käytettävyyttä.

Tilankäyttö

Responsiivisuus tarkoittaa sisältöjen mukautumista eri näyttökokoihin. Taulukoiden ja listojen responsiivisuus vaikuttaa sekä asetteluun että käytettävyyteen.

Jos leveällä näytöllä näytettävä taulukko ei mahdu kapealle näytölle, näkymän kaventuessa tiedot voidaan näyttää esimerkiksi listassa.

Jos sisällöt on ensisijaisesti suunniteltu mobiilikäyttöön ja ne esitetään listana, varmista, että sisällöt toistuvat selkeinä myös leveillä näytöillä. Listan asettelua voi muuttaa leveille näytöille sopivaksi esimerkiksi tuomalla tietoja rinnakkain.

Alla oleva koodiesimerkki mukautuu käytettävissä olevan tilan mukaan. Leveässä näkymässä tiedot näytetään rinnakkain, jolloin ne toimivat taulukon sarakkeiden tapaan.

Dataintensiivisyys tarkoittaa sitä, kuinka tiiviisti tai väljästi tiedot esitetään. Dataintensiivisyys voi vaikuttaa siihen, kuinka tehokkaasti käyttäjä saa oman tehtävänsä hoidettua.

Jos käyttäjän on tarve nähdä kerralla mahdollisimman paljon tietoryhmiä, kannattaa taulukoista ja listoista käyttää tiivistä esitystapaa. Tiivistäminen onnistuu usein välistyksiä pienentämällä tai asettelemalla tiedot rinnakkain. TableV2-komponentti tarjoaa myös tiiviin esitystavan.

Väljä lista:

Tiivis lista:

Väljä taulukko:

Tiivis taulukko:

Saavutettavuus

Listat toimivat ruudunlukijakäyttäjillä eri tavalla kuin taulukot. Listat luetaan käyttäjälle rivi kerrallaan. Taulukot puolestaan luetaan siten, että ruudunlukija toistaa jokaisesta solusta sekä sarakeotsikon että solun arvon.

Alla olevissa esimerkeissä on esitetty samat tiedot sekä taulukkona että listana. Molemmat esitystavat vievät käyttöliittymällä saman verran tilaa ja näyttävän hyvin samankaltaisilta. Ruudunlukijakäyttäjälle tietojen selaaminen listana on kuitenkin nopeampaa, sillä taulukossa ruudunlukija toistaa sarakeotsikon joka solussa.