Za publiku je važno da je sadržaj organiziran. Knjige imaju poglavlja, filmovi imaju scene, a podcasti epizode. Istu organizaciju treba primijeniti i na izgled web stranice što se može učiniti primjenom hijerarhije na elemente dizajna. Vizualna hijerarhija samo je otmjen način za raspoređivanje elemenata od najvažnijih do najmanje važnih.

Gledatelj definira što mu je najvažnije; dizajner mu samo daje neke naznake. Prva informacija koju gledatelj uočava, određena je kao najvažnija i stoga se nalazi na vrhu hijerarhije. Elementi koji slijede gledateljevu pažnju su oni koji su niže rangirani u vizualnoj hijerarhiji.

Vizualna hijerarhija igra veliku ulogu u dizajnu korisničkog sučelja. Na primjer, razmislite o tome kako izgleda dobra odredišna stranica. Logo tvrtke na vrhu, izbornik na vrhu ili lijevo, elementi manjeg značaja prema dnu itd. Raspored elemenata u dizajnu web stranice ima svoju svrhu!

Vizualna hijerarhija je raspored elemenata u dizajnu prema redoslijedu važnosti svakog elementa. Vizualna težina, odnosno vizualni kontrast, koji svaki element nosi ono je što definira njegovu važnost u odnosu na druge elemente u dizajnu.

Sljedeća načela treba promatrati kao zlatna pravila vizualne hijerarhije. Ove smjernice pomažu grafičkim i  web dizajnerima da proizvedu rezultate koji privlače pozornost na prava mjesta, a pritom ih je lijepo gledati.

Prvo ćete pročitati ovo

Zatim ćete pročitati ovaj tekst.

Ovo ćete pročitati zadnje.

Vjerojatnije je da ćete nešto čuti što je glasnije. U vizualnoj hijerarhiji nema slušnog volumena, ali veličina i razmjer elemenata imaju sličan učinak.

Što je element veći, veća je vjerojatnost da ćemo ga prvoga vidjeti. Elemente koji nisu toliko važni mogu se smanjiti kako bi se smanjila vidljivost i naglasak.

To ne znači nužno da najvažniji elementi moraju biti ogromni. Veličine treba koristiti umjereno jer preveliki elementi mogu pokvariti ostatak dizajna, dok se elementi koji su premali mogu izgubiti u sadržaju.

Drugi način da se važni elementi istaknu je boja i kontrast. U svijetu (ili web stranici) punom crnog i bijelog, malo boje čini veliku razliku. Visok kontrast će izvući sve glavne točke poruke koje želite prenijeti čitatelju.

Kontrastne boje imaju još jedan učinak u vizualnoj hijerarhiji: mijenjaju percipiranu udaljenost elemenata. Tople boje će se isticati na tamnoj pozadini i izgledati bliže od hladnih boja na tamnoj pozadini. S druge strane, hladne boje ističu se na svijetloj pozadini pa izgledaju bliže od toplih boja na svijetloj pozadini. Kod dizajna vizualne hijerarhije važno je razumjeti i teoriju boja.

Boju i kontrast također treba koristiti umjereno – prekomjerna upotreba može zbuniti gledatelje jer će odjednom sve izgledati važno i bit će nemoguće vizualno odrediti što je najvažnije. Zapamtite, vizualna hijerarhija bi trebala služiti kao vodič.

Font poput Times New Romana sastoji se od različitih težina, veličina i stilova Times New Romana. Na primjer, Times New Roman Italics u 16px je drugačiji font od Times New Roman Bold u 36px.

Težina, veličina i stil fonta je ono što može pomaknuti informacije više (ili niže) u vizualnoj hijerarhiji. Mogu se koristiti pojedinačno ili zajedno kako bi neke riječi bile moćnije od drugih.

Jedan font se može koristiti u cijelom dizajnu, ali različiti fontovi unutar tog tipa slova i dalje imaju moć rasporediti tekstualne elemente prema njihovoj važnosti. Veći i deblji font znači da je važniji, dok manji i tanji tekst postaje sekundaran.

Ako želimo privući pozornost na određeni sadržaj, treba mu dati malo prostora. Negativni prostor ostavljen oko obrasca, gumba ili važnog dijela teksta dodatno ga ističe. Na dobar način!

Iako možda mislite da će više elemenata natrpanih na vašoj stranici izgledati bolje, varate se. Web stranica postaje prenatrpana i puna informacija koje je teško razdvojiti po važnosti ako ih pokušamo smjestiti u „jedan ekran“ što mnogi klijenti traže.

Bijeli ili negativni prostor nije uzaludno prazan. On može pomoći da se važni elementi istaknu na lijep način i postigne hijerarhija sadržaja koja čitatelju prenosi pravu poruku.

U svim kulturama ljudi čitaju od vrha do dna. Ovo je najpredvidljiviji način na koji čitamo, ali što ako imamo vremena samo za brzo skrolanje po stranici? Postoje dva obrasca koje ljudsko oko može slijediti kada brzo upija informacije, bilo da se radi o ilustraciji, web stranici ili tiskanom članku.

F-uzorak se obično primjenjuje na način na koji čitamo stranice s puno teksta, poput ove na kojoj se sada nalazite. Čitatelj će „skenirati“ stranicu u obliku slova “F” (ili “E”): prvo preko vrha stranice gdje će pročitati najvažniji naslov, a zatim niže na lijevoj strani stranice gdje će pročitati manje važne naslove, podebljane i podcrtane informacije itd.

Dizajn s više slika i manje blokova teksta obično se sastavljaju u Z-uzorak. U ovom uzorku, čitač će skenirati vrh stranice s lijeva na desno. Ovdje se nalaze najvažnije informacije na web stranicama. Čitateljeve oči se zatim pomiču dolje i dijagonalno u suprotni kut i skeniraju donji dio stranice na isti način na koji su skenirale gornji, formirajući tako oblik “Z”.

Veliki broj web stranica je dizajniran na ovaj način. Najvažnije informacije gotovo su uvijek na gornjoj traci: logotip, navigacijska traka, CTA gumb itd. Donja traka, koja je povezana dijagonalnom linijom “Z”, uključuje druge važne informacije kao što su kontakt podaci ili veze na drugi važan sadržaj u skočnom prozoru i sl.

Skoro pa ni malo! Ovo je najmanje važan h6 naslov, pa ćemo ovdje zaključiti da je vizualna hijerarhija pravilo u dizajnu kojeg se treba držati jer sugerira čitatelju što će prvo pročitati i tako ispričati priču na pravi način.

Vizualna hijerarhija je učinkovita, moćna i nije nešto što možemo zanemariti prilikom dizajniranja, pogotovo ako želite da važne informacije budu pravilno istaknute.

Ako vam je ova objava pomogla u shvaćanju vizualne hijerarhije elemenata na web stranici, napišite nam to u komentaru na dnu stranice.