Upotreba harmonike za organizaciju informacija

Pregled sadržaja

Često se mučimo s kreiranjem kvalitetnog i dobro koncipiranog sadržaja kojima ćemo popuniti osnovne web stranice ali ponekad imamo toliko informacija da moramo pronalaziti načine kako ga obuzdati. Nije svaka informacija od podjednake važnosti za korisnika i potrebno je napraviti neke rezove a da ipak sadržaj prikažemo ako zatreba. U tome nam može pomoći funkcionalnost harmonike.

Što je harmonika

Harmonika je okomito složen popis naslova koji otkrivaju ili skrivaju povezane dijelove sadržaja. Drugim riječima, komponenta harmonike građena je od nekoliko sekcija i svaka sekcija ima naslov i tijelo. Tijelo svih sekcija je obično sakriveno i tek na klik njenog naslova se ono proširi i prikaže, slično kao što se glazbena harmonika izvlači i širi prema želji. Korisnik tako postupno otkriva više detalja dodirom ili klikom kada to zatraži. Shodno time, dizajn uvijek prikazuje kritično bitne informacije a sve je ostalo lako dostupno ako se zatraži.

Harmonika je klasično idejno rješenje i naširoko je prihvaćena komponenta korisničkog sučelja. Omogućuje da na web stranici imamo više sadržaja a da ne smlavimo korisnika odjednom sa previše informacija. Slična je po sučelju s karticama (tabovima) ali ne isključuje i njihovu upotrebu, štoviše obje komponente zajedno se mogu nadopunjavati.

S obzirom na to da uključuje i dozu interaktivnosti, web stranica nije samo statički prikaz teksta i sadržaja već se dobije na efektu a i korisnici vole komunicirati sa stranicom koja će zanimljivo reagirati na njihove akcije.

Kada je dobro koristiti harmoniku

Sadržaj prikazan na način harmonike ima velike prednosti u određenim situacijama. Korisno je i u slučajevima kada sadržaj nije toliko bitan da mora biti odmah vidljiv, kao što je slučaj kod prikazivanja čestih pitanja i odgovora (eng. FAQ). Takva prezentacija ima smisla jer korisnik vrlo lako može vidjeti pregled pitanja te samo ako mu neki odgovor zaista i zatreba tada ga može kliknuti i pročitati.

Harmonika je od velike pomoći kada je sadržaj ograničen na vrlo male prostore poput mobilnih uređaja. Pregledavati vrlo duge web stranice na mobitelu je vrlo nezgodno i šteti korisničkom iskustvu. Stoga je tu dobro rješenje sažeti podatke, umanjiti pretjerano skrolanje i omogućiti jednostavniji pregled sadržaja da korisnici odluče što žele čitati a što ignorirati.

Ukratko harmoniku stoga koristimo:

  • za organizaciju srodnih informacija
  • kada je prostor ograničen a sadržaj nam je velik
  • kako bi skratili web stranicu i smanjili nepotrebno skrolanje

Kada harmonike izbjegavamo

Harmonika isto tako ima neke negativne strane. Kada korisnicima odmah treba biti prikazan veći dio sadržaja ili sav sadržaj kako bi se odgovorilo na njihove potrebe, tada je bolje preskočiti implementaciju harmonike. U tim slučajevima je bolje uštediti korisnicima nepotrebno klikanje i pravilno oblikovati sadržaj za dobru prezentaciju.

Kada sav sadržaj nije odmah prikazan već su dijelovi sakriveni, time smanjujemo svijest korisnika da taj sadržaj uopće i postoji te ga oni mogu posve zanemariti. Brojnim istraživanjima znamo da nitko ne čita sadržaj slovo po slovo, riječ po riječ od samog početka prema kraju. Korisnici skeniraju sadržaj, letimično prelaze preko njega i ako nismo pravilno podesili točke fokusa, nije rijetkost da se takvi dijelovi uopće niti ne primijete.

Također i u slučajevima kada web stranica može biti izuzetno dugačka, bolje rješenje je razdijeliti sadržaj na nekoliko stranica i povezati ga pomoću paginacije ili klasične navigacije. Primjer bi mogao biti popularan trend jednostranih web stranica (eng. single-page), no u svakom slučaju je bolje imati suvislu i pravilno hijerarhijsku razrađenu stranicu na više razina. I radi informacija korisnicima a i radi SEO optimizacije za tražilice.

Koje su dobre prakse izrade harmonike

Iako je sama komponenta u suštini vrlo jednostavna, postoje određene korekcije koje možemo obaviti ovisno o tome kakav sadržaj imamo i s ciljem kako bi eliminirali točke pogrešnog tumačenja. Ovisno o implementaciji, istodobno može biti svaka stavka prikazana, samo jedna ili neke od njih.

Što se treba dogoditi kada korisnik klikne na karticu koja je sažeta a u tom trenutku je otvorena druga kartica? Želimo li sve druge stavke automatski sakriti ili ih ostaviti kako jesu i reagirati samo na tu određenu sekciju?

Svaki klik mora nositi određenu vrijednost, drugim riječima, ne treba gomilati kartice samo reda radi.

Naslovi

Naslovi moraju biti dovoljno opisni i primamljivi da ih korisnici požele kliknuti.

Najčešće će biti poravnati ulijevo. Naravno, nije uvijek tako jednostavno jer naslovi (heading tagovi) mogu sadržavati puno više informacija. Primjerice, kada se radi o informacijama vezanima za red letenja avionom, naslov može sadržavati točno vrijeme i datum polaska, peron (izlaz) i drugo.

U svakom slučaju, naslov je bolje imati što kraći, jasniji a opet da je dovoljno deskriptivan. S tehničke strane, dobro je slijediti pravilno ugniježđene naslove (h2-h6), ovisno o preostalom sadržaju na stranici kako je osmišljeno arhitekturom informacija.

Tijelo sadržaja može slobodno imati bilokakve tipove sadržaja – podnaslove i odlomke, liste, slike, grafikone, čak i iframe koji povlači druge web stranice.

Pravilna upotreba ikone

Dobra praksa je koristiti ikone koja će dodatno vizualno prezentirati korisniku stanje, tj. prikazuje li se sadržaj svakog naslova ili je on sakriven. Drugim riječima, ikona je kao zeleno svjetlo – ako je aktivna, tada je aktivan i njezin sadržaj. Ako je crvena, tada njen sadržaj ne možemo vidjeti.

Ikona je vrlo značajna jer dio korisnika neće znati da je naslov u suprotnom klikabilan. Također znamo da se neki korisnici fokusiraju isključivo na pritisak same ikone, premda je moguće kliknuti na cijeli naslov jer on funkcionira kao gumb. Nakon što se sadržaj prikaže, ikona se treba promijeniti kako bi ukazivala na mogućnost ponovnog sakrivanja sadržaja.

Koju ikonu koristiti?

Tipom ikone jasno korisnicima komuniciramo njenu svrhu i ponašanje koje očekujemo od korisnika. Obično su dva glavna tipa ikona popularna u komponenti.

Jedan tip je strelica usmjerena prema dolje kada je sadržaj naslova sakriven. Za aktivnu fazu, strelica se suptilnom animacijom preusmjeri prema gore. To je u slučaju kada harmonika klizi vertikalno (od gore prema dolje) dok ćemo u slučaju horizontalnog kretanja (lijevo prema desno) koristiti prikladno usmjerene ikone tom smjeru.

Drugi tip je “plus” ikona za neaktivan sadržaj a “minus” ikona za aktivnu.

Pozicija i poravnanje ikone

Ikona se idealno nalazi s desne strane naslova i uvijek je vertikalno poravnata s ikonama drugih sadržaja. U rijetkim slučajevima, ikona se može postaviti ispred naslova kada je sadržaj ugniježđen, tj. kada svaka kartica može dodatno sadržavati unutrašnju harmoniku. U tom slučaju ikona funkcionira više poput stabla.

Pristupačnost

Harmonika mora biti kodirana imajući na umu pristupačnost svih korisnika.

Korisnicima obavezno treba omogućiti kretanje tipkovnicom kako na cijeloj web stranici tako i na samoj harmonici. Pomoću tab tipke korisnici se mogu kretati od naslova do naslova a pomoću kombinacije tipka Shift + Tab kretati se prema nazad. Kada odaberu željeni naslov, pritiskom na tipku Enter ili Space prikaže se tijelo odabranog sadržaja.

S tehničke strane, moramo pomno odabrati prikladne aria atribute na elementima (aria-expanded, aria-disabled, aria-labelledby).

Za više informacija pogledajte članak digitalne pristupačnosti.

Sažetak

Komponenta harmonike je dobro rješenje kada želimo skratiti preveliki sadržaj i učiniti ga pristupačnijim korisnicima. Nadamo se da vam je ovaj članak pomogao shvatiti njezin način funkcioniranja i razjasniti slučajeve kada bi ona mogla biti učinkovita.