Tablični prikaz podataka



Pregled sadržaja

Jedna od najvažnijih zadataka prilikom izrade web stranice je sposobnost organiziranja svih potrebnih informacija kako bi ih čitatelji mogli brzo skenirati te s lakoćom čitati. Organizacijom podataka u tablice omogućujemo jednostavan pregled velike količine informacija.

U članku ćemo razraditi koja su načela dobre prakse izrade tablica.

Tablični prikaz informacija u modernom web dizajnu

Dobar tablični prikaz je onaj koji korisnicima omogućuje brzo skeniranje podataka i jednostavnu analizu te eventualno lako sortiranje, filtriranje i drugo manipuliranje informacijama u njoj.

U prošlosti, kada je izrada web stranica bila još u ranoj fazi tehnologija, tablice su se koristile za izradu layouta tj. strukture dizajna stranice. Takav rad bio je nespretan za izradu i održavanje informacija premda je ipak služio svrsi sve do pojave <div> tagova.

Elementi tablice

Struktura tablica nije se promijenila od početne specifikacije a trenutno se ne naziru neke promjene pa moguće da ni neće. Tablica sadrži proizvoljan broj redova i stupaca a unutrašnje ćelije mogu biti pojedinačne ili spojene.

Naslovi ćelija

Svaka tablica bi trebala imati naslov svakog stupca a ponekad i naslov reda. Takvi naslovi drugačije su opisani u kodu.

Naslovi su obično u stilovima definirani kontrastnije, podebljanih slova ili malo drugačije boje pozadine. Takav način prikazivanja čini tablicu lakšim za čitanje i može otkloniti eventualnu zabunu.

Kod iznimno dugih podataka, vrlo dobra ideja je učiniti naslove fiksiranima tako da bez obzira kada korisnik skrola prema dolje, naslovi ćelija su uvijek vidljivi i stoje na samom vrhu. Isti je slučaj kada imamo jako puno vertikalnih stupaca, tada ćemo njihove naslove učiniti fiksiranima.

Opis tablice

Pod opis mislimo na kratak opis koji ćemo podesiti pomoću <caption> oznake. U praksi smo iznimno rijetko naišle na slučajeve kada se to tako tehnički riješilo međutim opis tablice s navedenom oznakom je dobar pokazatelj tehnički pomno oblikovane web stranice.

Ispunjenje praznih ćelija

Kada su neke ćelije prazne, dobro ih je ipak ispuniti crticom, ikonom ili nečim drugim kako bi signalizirali korisniku da podatka nema te da struktura tablice i dalje bude jasna. Također, može izgledati ljepše nego da ostavimo prazni prostor.

Naglasak na važnim podacima

Uobičajeno je da prilikom većih količina podataka istaknemo one stupce ili retke koje su osobito važne korisnicima.

Ikone

Korištenjem prikladnih ikona možemo pomoći sadržaju bolje organizira, da izgleda čisto i dodatno motivira korisnike. Primjerice, kada tablica ima stavke koji su uključeni u neki paket možemo koristiti strelice ili križiće.

Kontrola veličine ćelija ili sakrivanje podataka

Tablice koje su složene možemo dodatno učiniti jednostavnijima za upotrebu tako da korisnici imaju opcije za kontrolu prikazivanja podataka.

Ako podatkovni redak čini više informacija koje se generalno odnosi na cijeli taj red, nema nikakvih problema. Na klik reda ili zasebnog gumba signaliziranog pomoću ikone korisnik može prikazati informacije po čitavoj širini ispod osnovnih podataka. S druge strane, novi podaci ne moraju ni biti dio tablice već se može koristiti neka varijanta skočnog (modalnog) prozora koji će se prikazati kao popup preko cijelog ekrana ili samo sa strane. S obzirom na to da nam je tada na raspolaganju daleko više prostora koje možemo iskoristiti kako želimo, slobodni smo koristiti mnoge druge elemente kao što su pozivi na akciju.

Kontrola cijelih stupaca ili redaka

Primjerice, kada tablicu čini više stupaca a nekim čitateljima mogu biti od koristi samo nekolicina stupaca a ostali dio tablice je nebitan, tada je vrlo zgodno rješenje programirati tablice tako da korisnici sami mogu premješttati stupce i organizirati ih u redoslijed kakav požele. Neke aplikacije mogu omogućiti na raspolaganje i posve sakrivanje stupaca. Kada se radi na taj način, potrebno je omogućiti dodatan gumb koji će resetirati tablicu u prvobitno stanje bez da korisnik mora osvježiti stranicu.

Sortiranje podataka

Kada omogućujemo sortiranje, pored naslova stupaca ćemo staviti prikladnu ikonu koja će korisniku dati do znanja da se može sortirati. Sortiranje bi korisnici mogli raditi po abecedi ili prema vrijednostima nekih polja.

Filtriranje podataka

Osnovno filtriranje podataka omogućuje korisnicima manipuliranje informacija u tablici prema određenim parametrima. Primjerice, prikazivanje podataka koji sadrže neku vrijednost ili koje su se dogodile unutar raspona datuma. Napredno filtriranje omogućuje podešavanja nekoliko parametara za različite stupce.

Proizvoljna veličina ćelija

Kada tablica sadrži više informacija koji su različite veličine, primjerice, neke ćelije ili cijeli redovi mogu imati duži tekst te bi zbog toga cjelokupni izgled tablice izgledao neprivlačno. Mijenjanjem veličine stupaca korisnici bi mogli u potpunosti vidjeti skraćene podatke.

Isto tako, korisnicima možemo omogućiti opciju sakrivanja i otkrivanja pojedinih dijelova. Nekada ćelija može sadržavati neku sličicu ili drugi vizualni tip sadržaja.

Paginacija

Paginacija omogućuje navigaciju do drugog dijela sadržaja. Dodatna opcija je kada korisniku omogućimo odabir veličine prikazanih redova, primjerice 20, 50 ili 100 redova odjednom. S druge strane, beskonačna paginacija je također moguća i tada se korisniku postupno učitavaju rezultate kako skrola. Međutim, beskonačno skrolanje je nezgodno jer korisnik nema fiksnu točku gdje se nalazi u svakom trenutku a i sve mu se resetira nakon osvježivanja (eng. refresh) web stranice.

Pretraživanje tablice

Kod veoma opsežnih podataka i velikih tablica, implementacija može biti takva da zahtijeva upotrebu paginacije jer se svi podaci naprosto ne mogu odjednom prikazati na web stranici. U tom slučaju, vrlo je korisno osigurati polje za pretraživanje što će posjetitelji sigurno znati cijeniti. Pretraživanje može biti globalno za bilokoji podatak u tablici i tada postoji samo jedno polje za unos podataka ili može biti vezano za svaku grupu podataka zasebno i tada se polje postavlja u svaki stupac.

Kontrola dodatnih radnji

Kada korisnik ima opcije manipuliranja sadržajem, primjerice, pojedine redove može brisati ili urediti, tada se gumbi mogu pojaviti na prelazak mišem preko reda. Takvim načinom izbjegnut ćemo prekomjerno gomilanje suvišnih podataka na tablici a korisnik i dalje ima potpunu kontrolu.

Ako korisnik ima slobodu uređivanja sadržaja, nije nužno da uopće i postoji neki gumb koji će mu omogućiti uređivanje teksta. Svaka ćelija može biti zapravo polje za unos podataka jedino je grafički dio polja sakriven. Korisnik tada jednostavno klikne na tekst i uredi ga.

Stiliziranje tablice

Stiliziranje tablice može jako utjecati na korisnika koji gleda tablicu i proučava podatke. Sadržaj u tablicama ima najveću važnost te nije dobro pretjerati s dizajniranjem, naprotiv, pretjerano kićenje može korisnika odbiti. Jednostavnost i preglednost podataka mora biti ultimativni cilj svake prezentacije. Pogledajmo koji su načini kojima možemo začiniti tablice i učvrstiti preglednost i kontrolu nad podacima.

Obrubi

Po zadanim postavkama, svaka ćelija je obrubljena linijama. Međutim, takav izgled može biti i suviše grub i pretjeran. Ipak, korekcijom jačine obruba te smanjivanjem intenziteta boje možemo zadržati obrube kako bi i dalje držali informacije odvojenima i tek pomalo naglasili raspored ćelija.

Pozadinske boje

Najveća karakteristika tablica mora biti čitljivost podataka. Kada su svi redovi i stupci jednolični, teško je korisnicima zadržati pažnju i omogućiti im da su svi podaci jednostavno prezentirani. Tek blagom nijansom pozadinske boje sadržaj možemo učiniti preglednim i lakšim za čitanje. Takav dizajn je vrlo efikasan i korisnici mogu vrlo lako skenirati informacije. Tablice bi trebale uvijek težiti jednostavnim bojama.

Razmak u ćelijama

Svaki sadržaj da bi bio čitljiv mora imati dovoljno prostora između teksta i obruba ćelije. Ako i obrub ne postoji, ipak je prazni prostor taj koji čini veliku razliku za visoku čitljivost i dobar dizajn.

Kod velikih podataka, manja visina u redu će omogućiti pregled više podataka odjednom bez dodatnog skrolanja. Ipak, suviše gusto dovodi do zakrčavanja informacijama. Rješenje? Dopustite korisnicima da sami kontroliraju veličinu reda pomoću jednostavnog gumba.

Vizualni sažetak tablice

Dobar primjer velike količine podataka je pružiti korisniku sažetak informacija u obliku nekog grafa (graf u obliku torte, vertikalni stupčasti grafikon itd.). Takav pregled omogućit će korisniku da sagleda situaciju u cjelini prije nego se baci u dublje istraživanje.

Sažetak

Mnoštvo podataka neće biti od velike koristi bez neke mogućnosti da ih vizualiziramo i organiziramo te učinimo svrsishodnima. Tablice nam omogućuju jednostavnu i preglednu prezentaciju podataka. A dobro korisničko iskustvo je ono koje je bazirano na dobroj prezentaciji sadržaja te dostupnim kontrolama koje korisnici lako manipuliraju.