Kada korisnik otvori vašu stranicu, njegov mozak u prvih nekoliko stotina milisekundi donosi odluku gdje će usmjeriti pažnju. Tu odluku ne donosi svjesno – vodi ga raspored, veličina, boja i razmak elemenata. Upravo to nazivamo vizuelnom hijerarhijom: način na koji organizujete sadržaj tako da oko prirodno prepozna šta je najvažnije, šta dolazi sljedeće, a šta je sporedno. Loša hijerarhija znači da korisnik mora razmišljati o tome gdje da gleda, a svaka sekunda razmišljanja je sekunda bliže napuštanju stranice. Dobra hijerarhija je nevidljiva – posjetilac jednostavno zna kuda da ide.
Šta je zapravo vizuelna hijerarhija
Vizuelna hijerarhija je redoslijed kojim korisnik percipira elemente na ekranu. Ona nije stvar ukusa nego rezultat mjerljivih principa percepcije. Naš vizuelni sistem reaguje na kontrast prije nego na sadržaj: prvo registrujemo nešto što je veliko, izraženo ili izdvojeno, pa tek onda čitamo. To znači da dizajner zapravo ne odlučuje samo kako će stranica izgledati, nego u kojem će se redoslijedu informacije pojaviti u svijesti korisnika.
Cilj nije da sve bude jednako vidljivo. Naprotiv. Ako je sve naglašeno, ništa nije naglašeno. Hijerarhija funkcioniše tek kada postoje jasni nivoi: primarni element koji nosi glavnu poruku ili akciju, sekundarni koji podržava, i tercijarni koji daje kontekst. Tek kada ta tri nivoa postoje i jasno se razlikuju, stranica počinje da vodi umjesto da zbunjuje.
Alati kojima se gradi hijerarhija
Hijerarhija se ne postiže jednim potezom nego kombinacijom nekoliko vizuelnih sredstava koja zajedno usmjeravaju pogled. Najvažnija su sljedeća.
- Veličina – veći elementi privlače pažnju prvi. Naslov mora biti vidljivo veći od podnaslova, a podnaslov od tijela teksta.
- Kontrast i boja – element koji odudara od okoline ističe se bez obzira na veličinu. Zato dugmad za glavnu akciju koristi izraženu, izdvojenu boju.
- Težina i debljina – podebljan tekst ili teži font signaliziraju važnost unutar istog reda veličine.
- Razmak – prazan prostor oko elementa daje mu težinu. Izolovan element djeluje važnije od onog stiješnjenog među drugima.
- Pozicija – vrh stranice i lijeva strana dobijaju pažnju prirodno, jer tako čitamo. Ono što je centrirano i iznad pregiba nosi najveću vrijednost.
Snaga ovih alata je u tome što djeluju zajedno. Dugme može biti malo, ali ako ima jak kontrast i okolni prazan prostor, i dalje će biti prva stvar koju korisnik primijeti.
Kako oko zaista putuje kroz stranicu
Istraživanja ponašanja korisnika pokazuju da se pogled ne kreće nasumično. Na stranicama bogatim tekstom, kao što su blogovi ili rezultati pretrage, oko često prati oblik slova F: korisnik pročita prvi red, spusti se i skenira početak sljedećih redova, pa klizne niz lijevu ivicu. Na stranicama sa manje teksta i jakim vizuelima dominira Z putanja: od gornjeg lijevog ugla ka desnom, pa dijagonalno ka donjem lijevom i nazad nadesno.
Ovo nisu pravila kojih se treba slijepo držati, nego obrasci koje vrijedi razumjeti. Ako znate da korisnik najvjerovatnije počinje gore lijevo i završava dole desno, tu ćete postaviti najvažniju poruku i poziv na akciju. Borba protiv prirodnih obrazaca čitanja gotovo uvijek završava lošije od saradnje s njima.
Tipografija kao kostur hijerarhije
Najveći dio sadržaja na webu je tekst, pa je tipografska hijerarhija često najvažniji posao. Ovdje ne mislimo na biranje lijepog fonta nego na sistem veličina i razmaka koji jasno odvaja nivoe informacija. Dobar tipografski sistem ima ograničen broj veličina, dosljedan ritam i jasan kontrast između naslova, podnaslova i tijela teksta.
Praktične smjernice za tekst
- Koristite najviše tri do četiri veličine teksta na jednoj stranici. Više od toga stvara šum.
- Tijelo teksta neka bude udobno za čitanje, obično između 16 i 20 piksela, sa redom dovoljno dugim da se ne lomi prečesto.
- Razmak iznad naslova neka bude veći od razmaka ispod, kako bi naslov vizuelno pripadao tekstu koji uvodi.
- Visina reda od oko 1,5 daje tekstu prostora da diše i ubrzava čitanje.
Tipografija postavljena na ovaj način čini da stranica izgleda uređeno i prije nego što korisnik pročita ijednu riječ. To je dio onoga što razdvaja amaterski od profesionalnog dojma, a o čemu vodimo računa na svakom projektu izrade web stranica.
Tipične greške koje ruše hijerarhiju
U praksi se hijerarhija najčešće ne kvari nedostatkom ideja nego viškom. Kada svaki element pokušava da bude važan, korisnik gubi orijentaciju. Evo grešaka koje viđamo najčešće.
| Greška | Posljedica |
|---|---|
| Više od jednog glavnog poziva na akciju u istom pogledu | Korisnik ne zna šta se od njega očekuje pa ne radi ništa |
| Premalo praznog prostora | Elementi se stapaju i sve djeluje jednako, pažnja se rasipa |
| Previše različitih boja i veličina | Vizuelni šum koji umara i sakriva ono bitno |
| Naslovi koji se jedva razlikuju od teksta | Korisnik ne može skenirati stranicu i preskočiti na ono što ga zanima |
| Najvažniji sadržaj smješten ispod pregiba | Velik dio posjetilaca ga nikada ne vidi |
Zajednička nit svih ovih grešaka je odsustvo odluke. Hijerarhija zahtijeva da se nešto svjesno proglasi manje važnim, a to je teško jer svaki dio sadržaja nekome izgleda ključno. Posao dobrog dizajna je upravo da napravi taj izbor umjesto korisnika.
Kako provjeriti hijerarhiju svoje stranice
Postoji nekoliko jednostavnih provjera koje svako može uraditi bez specijalnih alata. One brzo otkrivaju da li stranica zaista vodi pogled ili samo izgleda zauzeto.
- Test škiljenja – zaškiljite u stranicu dok se detalji ne zamute. Elementi koji i dalje iskaču trebali bi biti oni najvažniji. Ako iskače pogrešna stvar, hijerarhija ne radi.
- Test pet sekundi – pokažite stranicu nekome na pet sekundi pa pitajte čega se sjeća. To otkriva šta zaista dominira.
- Test jedne akcije – pitajte se koja je jedna stvar koju želite da korisnik uradi na ovoj stranici. Ako je teško odgovoriti, vjerovatno ima previše konkurentnih poruka.
- Pregled u sivim tonovima – uklonite boju i pogledajte da li hijerarhija opstaje samo na osnovu veličine i kontrasta. Ako se oslanja isključivo na boju, propašće za dio korisnika sa slabijim vidom.
Ove provjere nisu zamjena za pravo testiranje sa korisnicima, ali su odličan prvi korak. Najveći broj problema s hijerarhijom vidljiv je već iz ovih nekoliko minuta pažljivog gledanja.
Hijerarhija kao temelj rezultata
Vizuelna hijerarhija nije ukras nego infrastruktura. Ona direktno utiče na to koliko brzo korisnik razumije ponudu, koliko lako pronalazi ono što traži i da li uopšte dolazi do akcije koja vam je važna. Stranica sa jasnom hijerarhijom djeluje povjerljivo i profesionalno, a ta percepcija se prenosi i na proizvod ili uslugu koju nudite. Ako želite da vaš sajt ne samo izgleda dobro nego i sistematski vodi posjetioce ka cilju, pogledajte kako pristupamo dizajnu i razvoju kroz naše usluge ili nam se javite da zajedno analiziramo vašu trenutnu stranicu.