Vizuelna hijerarhija

Vizuelna hijerarhija je raspored po kojem oko samo od sebe prvo vidi ono najvažnije na stranici, pa tek onda ostalo.

Posjetilac ne čita stranicu redom. Baci pogled, uhvati dvije ili tri stvari, i po njima odluči je li došao na pravo mjesto. Hijerarhija odlučuje koje su to stvari. Kad nije postavljena, odlučuje slučaj, a slučaj rijetko izabere ono zbog čega ste stranicu i pravili.

Čime se hijerarhija pravi

Sredstava ima pet, i ne vrijede jednako.

Veličina. Najjače i najjednostavnije. Naslov od trideset piksela i naslov od osamnaest se ne takmiče.

Prazan prostor. Element oko kojeg ima zraka izgleda važnije od elementa stisnutog među ostale. Ovo je sredstvo koje se najrjeđe koristi, jer prazan prostor izgleda kao propuštena prilika, a zapravo je ono što ostatak čini čitljivim.

Kontrast. Razlika prema pozadini. Tamno na svijetlom se vidi, sivo na svijetlosivom se preskače, i o tome više stoji pod paletom boja.

Položaj. Ono što je na vrhu i lijevo se čita prvo, jer tako čitamo. Dugme na dnu stranice je dugme koje polovina ljudi nikad ne vidi.

Boja. Korisna, ali najslabija od svih, i jedina koja dio ljudi ne primijeti. Boja koja nosi cijeli naglasak je hijerarhija koja ne radi za daltoniste i ne radi na jakom suncu.

Pravilo jednog cilja po ekranu

Na svakom dijelu stranice postoji jedna stvar koju biste najradije da posjetilac uradi.

Ako su na vrhu tri dugmeta iste veličine i iste boje, nijedno nije prvo. Posjetilac ne bira brže nego sporije, jer svaki izbor traži odluku.

To ne znači da ostalo nestaje. Znači da se razlikuje: jedno dugme puno, ostala s okvirom ili kao običan link. O tome kako se to dugme piše više stoji pod pozivom na akciju.

Isto vrijedi za tekst. Kad je pola pasusa podebljano, podebljano više ništa ne znači.

Kako se provjerava bez alata

Postoje dvije provjere koje traju minut i ne koštaju ništa.

Prva: zažmirite dok slika ne postane mutna. Ono što i dalje prvo primijetite je ono što stranica naglašava. Ako je to slika u pozadini, a ne ponuda, znate gdje je problem.

Druga: smanjite stranicu dok se tekst ne može pročitati. Ostaju oblici i mrlje. Redoslijed kojim ih oko hvata je stvarni redoslijed vaše stranice, bez obzira na ono što piše.

Za sajt koji već ima posjetioce postoji i treća, s podacima: heatmapa pokazuje dokle ljudi skrolaju i gdje klikću, pa se pretpostavka može provjeriti umjesto braniti.

Hijerarhija na telefonu

Na malom ekranu sve pada u jedan stupac i raspored s računara prestaje postojati.

Ono što je stajalo desno sada je ispod, često daleko ispod. Ako je tamo bio obrazac za upit, on je na telefonu na kraju stranice.

Zato se redoslijed odlučuje za telefon prvo. Tek kad se zna šta ide prvo, drugo i treće u jednom stupcu, taj se redoslijed širi na velik ekran, o čemu više pod responsive dizajnom.

Druga stvar koju mali ekran mijenja je dodir. Element može biti savršeno naglašen, a prstom nedohvatljiv, jer je premalen ili prelijepljen uz drugi.

Gdje se najčešće lomi

Na početnoj stranici, kad slika u pozadini nosi cijeli prostor, a rečenica koja objašnjava čime se firma bavi stoji sitno ispod nje.

Na stranici usluge, gdje je sve napisano istim slovima iste veličine, pa je to zid teksta kroz koji se ne vidi struktura.

U cjenovnicima i tabelama, gdje nijedna opcija nije istaknuta, pa kupac bira najjeftiniju jer je to jedini vidljiv kriterij.

U obrascima, gdje je dugme za slanje iste težine kao dugme za poništavanje.

I u zaglavlju, gdje je meni od dvanaest stavki od kojih su dvije zaista važne, a sve izgledaju isto.

Hijerarhija i pristupačnost

Dvije stvari koje izgledaju kao ista stvar, a nisu.

Vizuelna hijerarhija je ono što vidi oko. Struktura naslova u kodu je ono što čita program. Naslov koji izgleda kao naslov, a u kodu je običan podebljan tekst, postoji samo za dio publike.

Zato se veličina i oznaka rade zajedno: h2 za odjeljak, h3 za pododjeljak, a izgled se podešava posebno. Više o tome pod pristupačnošću.

Kad ovo nije vaš problem

Ako imate stabilan promet i ljudi redovno stižu do obrasca, hijerarhija radi i ne treba je dirati.

Ako nemate promet, red je obrnut. Najljepše poređana stranica bez posjetilaca ne donosi ništa, pa prvo ide to odakle ljudi uopšte dolaze.

I ako se stranica upravo radi iz početka, ovo se rješava u skici, prije boja i slika, jer je tada besplatno.

Greške koje najčešće viđamo

Prva su tri jednako jaka dugmeta na istom ekranu.

Druga je naslov koji zvuči lijepo, a ne govori čime se firma bavi, pa najjači element stranice ne nosi nikakvu informaciju.

Treća je gusto slaganje bez praznog prostora, u želji da sve stane iznad prvog skrola.

Četvrta je podebljavanje i velika slova umjesto stvarne razlike u veličini.

Peta je hijerarhija složena na velikom ekranu, pa nikad provjerena na telefonu.

Šesta je izgled naslova napravljen bez ispravnih oznaka u kodu, pa čitač ekrana ne vidi nikakvu strukturu.

Lista za provjeru

• Znate li, po stranici, koja je jedna stvar najvažnija?
• Vidi li se ta stvar kad stranicu zamutite ili smanjite?
• Postoji li na svakom ekranu samo jedno naglašeno dugme?
• Ima li dovoljno praznog prostora oko onoga što je važno?
• Radi li isti redoslijed i kad se sve složi u jedan stupac?
• Je li kontrast teksta dovoljan i na slabijem ekranu?
• Odgovaraju li oznake naslova u kodu onome što se vidi?
• Je li poziv na akciju vidljiv prije nego što treba skrolati?

Pojmovi koje ćete čuti uz vizuelnu hijerarhiju

• Prazan prostor: razmak oko elemenata, koji nosi pola hijerarhije.
• Kontrast: razlika u svjetlini između teksta i pozadine.
• Iznad prevoja: dio stranice vidljiv prije skrolanja.
• Provjera žmirenjem: gledanje zamućene stranice da bi se vidio stvarni naglasak.
• Tipografija: izbor i veličine pisma, glavno sredstvo hijerarhije.
• Skeniranje: način na koji ljudi gledaju stranicu umjesto da je čitaju.