Miten suunnitella monimutkaisia (ja responsiivisia!) taulukoita menettämättä järkeäsi

Et ole yksin, olen nähnyt hienojen suunnittelijoiden vapisevan saappaissaan ajatuksesta ratkaista tämä ongelma. Mutta ei tarvitse pelätä! Vastasin hiljattain tähän suunnitteluhaasteeseen, ja nyt olen täällä jakamassa muutamia vinkkejä, jotka auttoivat minua saamaan aikaan suunnittelun, jota käyttäjät rakastavat.

Taulukoiden muotoiluun on paljon erilaisia vaihtoehtoja, puhumattakaan siitä, miten taulukoista saa responsiivisia. Sarakkeita ja rivejä voidaan sijoittaa uudelleen, muuttaa kokoa, sulkea, pienentää tai jopa hävittää, kun selainikkuna kapenee.

Kuten kaikkien suunnitteluratkaisujen kohdalla, paras suunnittelu riippuu siitä, miten lukijasi aikovat käyttää tietoja. Teimme tämän projektin alussa jonkin verran käyttäjätutkimusta antaaksemme suuntaa ja määrittelimme, että projektimme osalta:

• Taulukkomuotoista tietoa käytettäisiin yhtä lailla työpöytä-, tabletti- ja mobiililaitteilla.
• Taulukot voisivat sisältää useita sarakkeita vapaata tekstiä sekä numeroita.
• Tietynlaisten tärkeiden tietojen pitäisi pysyä koko ajan näkyvissä.

Käyttäjiltämme saamieni oivallusten perusteella tässä ovat tärkeimmät asiat, joihin kiinnitin huomiota kehittäessäni suunnittelujärjestelmää tekstipainotteisille datataulukoille.

Ensiksi määritetään, millaisesta taulukosta on kyse. Onko se vertailutaulukko, jossa lukija vertaa tietoja useiden sarakkeiden välillä, vai onko se sisältökohtainen taulukko, jossa tietokokonaisuudet ovat toisistaan riippumattomia?

Taulukkoni on enemmän sisältötaulukko kuin vertailutaulukko. Tämän tunnistaminen varhaisessa vaiheessa auttoi minua ymmärtämään, minkä tietojen on pysyttävä lähekkäin kapeassa näytön koossa.

Mobile first

Ensimmäinen suunnittelemani versio oli kapean näytön versio. Tarkastelin tätä tarkoituksella ennen laajakuvaversiota, koska taulukoiden katselu mobiilissa on käyttäjillemme tärkeää. Siksi minun oli löydettävä tapa sovittaa monimutkaista ja epälineaarista tietoa pystysuoraan muotoon.

Tiesin, että olisi paljon helpompaa skaalata suunnittelua ylöspäin, kun vaakatasossa on runsaasti tilaa, kuin suunnitella kaunis taulukko työpöydälle ja ponnistella, jotta se pysyisi luettavana mobiilissa. Se tarkoitti myös sitä, että pidin alusta alkaen mielessä kosketuskohdekoot enkä luottanut hoverin kaltaisiin toimintoihin tietojen paljastamiseksi.

Päätin kohdella sisältöä kapeissa näkymissä enemmänkin luettelon tavoin, jotta tärkeät tiedot pysyisivät hyvin näkyvillä ja skannattavina.

Johdonmukainen muotoilu

Rivien on asettauduttava uudestaan näytön koon muuttuessa, joten käytin muotoilua, joka auttoi säilyttämään rivejä yhdistävän yhteyden. Jos esimerkiksi sarakkeiden otsikot ovat lihavoituina harmaalla taustalla, käytä samaa tyyliä myös kapeassa näkymässä. Se auttaa lukijoita muokkaamaan solujen uutta jakoa.

Typografia on ystäväsi

Typografiset periaatteet on helppo unohtaa, kun on paljon rajoitteita, mutta tietoisen päätöksen tekeminen luettavuuden optimoimiseksi on valtava apu lukijallesi, etenkin kaltaisessani projektissa, jossa taulukoissa on paljon tekstiä.

Typografia on olemassa sisällön kunnioittamiseksi. ~ Robert Bringhurst

Skannaaminen

Helpotat nopeaa skannaamista pitämällä lukuvirran yksinkertaisena ja selkeänä. Valitsin jokaisen sarakkeen tekstin roikkumaan samasta reunasta, jotta lukija voi skannata tekstiä lineaarisesti.

Rivinpituus

Yritä olla tinkimättä tekstin rivipituudesta litistämällä paljon sarakkeita kapeaan tilaan, tai se hidastaa lukunopeutta. Asetan vähimmäisleveyden jatkuvan tekstin sarakkeille.

Tarrat

Harkitse tarrojen sijoittelua niin, etteivät ne vie liikaa tilaa, mutta antavat kuitenkin jonkinlaisen kontekstin tiedolle.

Sijoitin merkinnät luettelon jokaisen solun sisällön yläpuolelle, jossa ne veivät vähemmän tilaa, enkä sivuun. Ja se teki tiedoista myös helpommin skannattavia. Tyylitin tarrat eri tavalla, jotta kiinteän tarran ja muuttuvan sisällön ero on helppo erottaa toisistaan.

Kerroin tarrat eri tavalla, jotta ne on helppo erottaa toisistaan.