Dizajn sajta i korisničko iskustvo
Svaki sajt ima vizuelnu hijerarhiju, bilo da ste je od starta planirali ili ne. Razlika je u tome da li ona radi u vašu korist ili protiv vas.
Vizuelna hijerarhija je redosled kojim posetilac konzumira informacije na stranici, šta prvo vidi, šta drugo, i gde mu pogled prirodno odlazi. Kada je taj redosled jasan i promišljen, posetilac bez napora stiže do vaše ponude i dugmeta za akciju. Kada nije, gubi se u moru informacija i odlazi.
U ovom tekstu ćemo vam objasniti kako vizuelna hijerarhija funkcioniše i kako da proverite da li vaš sajt vodi posetioce tamo gde treba.
Kada posetilac otvori stranicu, njegov mozak ne čita sadržaj od vrha do dna kao knjigu. Umesto toga, oko skenira stranicu i traži uporišne tačke, elemente koji se vizuelno ističu. Tek kada ih pronađe, mozak odlučuje da li vredi ostati i čitati dalje.
Ti uporišni elementi su ono što čini vizuelnu hijerarhiju. Ona se gradi kroz četiri osnovna principa:
Veći elementi privlače pažnju pre manjih. Zato je naslov uvek veći od teksta ispod njega. Ako je sve na stranici iste veličine, ništa se ne ističe i mozak nema odakle da počne.
Element koji se vizuelno razlikuje od okoline automatski privlači pogled. Tamno dugme na svetloj pozadini, ili obojeni naslov u moru sivog teksta. Bez kontrasta, stranica deluje kao jedan ravnomeran blok.
Elementi na vrhu stranice i u levom delu ekrana dobijaju više pažnje, jer tako funkcioniše prirodan obrazac čitanja. Ono što stavite iznad fold linije (deo stranice vidljiv bez skrolovanja) ima daleko veći uticaj od onoga što je skriveno na dnu.
Prazan prostor oko elementa signalizira važnost. Element okružen praznim prostorom deluje značajnije od elementa koji je stisnut između drugih sadržaja. Prazan prostor nije „izgubljen” prostor, već alat koji usmerava pažnju.
Kada ova četiri principa rade zajedno, nastaje stranica na kojoj posetilac tačno zna gde da gleda i šta da uradi. Kada ne rade, nastaje vizuelni haos.
Na sajtovima bez jasne hijerarhije, svi elementi se bore za pažnju posetioca istovremeno.
Ako je naslov jedva malo veći od običnog teksta, ili su dugmad iste boje kao pozadina sekcije, a tekst ide od ivice do ivice… svaka sekcija izgleda podjednako važno, što u praksi znači da ništa ne izgleda važno.
Rezultat je predvidljiv: posetilac skenira stranicu, ne pronalazi jasno uporište, i odlazi. Ovo se direktno vidi u brojkama. Ako vaš sajt ima visoku stopu napuštanja (bounce rate), a pritom imate pristojan broj posetilaca, vizuelna hijerarhija je jedno od prvih mesta gde treba da tražite problem.
Evo konkretnog obrasca koji često srećemo kod srpskih firmi. Početna stranica sadrži dugačak blok teksta o istoriji firme, ispod kojeg sledi spisak svih usluga istim fontom i istom veličinom, a tek na samom dnu, posle višestrukog skrolovanja, stoji kontakt formular. Posetilac koji je došao sa konkretnim problemom nikada neće stići do tog formulara jer ga ništa na stranici ne vodi ka njemu.
Dobra vizuelna hijerarhija na sajtu funkcioniše kroz tri jasna nivoa, i svaki ima svoju ulogu.
Ovo je ono što posetilac mora da vidi u prvoj sekundi. Glavni naslov stranice treba da bude ubedljivo najveći tekstualni element, sa dovoljno praznog prostora oko sebe da dominira. On govori posetiocu: „Na pravom si mestu. Evo šta nudimo.”
To su podnaslovi, kratki opisi, ključne prednosti ili istaknuti brojevi koji pojašnjavaju glavnu poruku. Oni su vizuelno manji od naslova, ali i dalje veći i istaknutiji od običnog teksta. Njihova uloga je da zadrže pažnju i pruže dovoljno informacija da posetilac nastavi dalje.
Ovde spadaju opisi usluga, cene, detaljniji tekstovi, ali i vaše dugme za akciju. Poziv na akciju, iako pripada trećem nivou po količini informacija, mora biti vizuelno istaknut kontrastnom bojom i dovoljno veličine da privuče klik. To je izuzetak od pravila, jer hijerarhija nije samo o veličini, već o strateškom usmeravanju pažnje.
Kada ova tri nivoa postoje i jasno se razlikuju jedan od drugog, posetilac prolazi kroz stranicu bez prepreka. Naslov ga zaustavi, dodatne informacije ga ubede da nastavi, a poziv na akciju mu pokaže sledeći korak.
Za širu sliku o tome kako dizajn sajta, uključujući hijerarhiju, boje, navigaciju i brzinu, zajedno utiču na prodaju, pogledajte naš kompletan vodič o uticaju dizajna sajta na prodaju.
Ne morate biti dizajner da biste procenili da li vaš sajt ima jasnu vizuelnu hijerarhiju. Evo dva praktična testa koja možete uraditi odmah.
Zamolite nekoga ko nikada nije video vaš sajt da ga otvori i posle tačno pet sekundi zatvori. Pitajte ga tri stvari: čime se bavite, šta nudite i šta je trebalo da uradi na stranici. Ako ne može da odgovori na bar dva od tri pitanja, vaša hijerarhija ne komunicira dovoljno brzo i dovoljno dobro.
Otvorite svoju stranicu i lagano skrolujte od vrha do dna. Obratite pažnju da li na svakom ekranu (delu stranice koji vidite bez daljeg skrolovanja) postoji jedan element koji jasno dominira. Ako u bilo kom trenutku cela površina ekrana izgleda ravnomerno, bez jasnog fokusa, to je mesto gde posetioci verovatno gube interesovanje.
Ovi testovi neće vam dati savršenu analizu, ali će vam pokazati najkritičnije probleme. Često su to problemi koje vlasnici sajta ne primećuju jer su previše vezani za sopstveni sadržaj i teško mu nalaze manu.
Vizuelna hijerarhija je nevidljiva struktura koja određuje da li vaš sajt prodaje ili samo prikazuje neophodne informacije. Zapamtite: svaka stranica treba tri jasna nivoa, veličina i kontrast i razmak su vaši glavni alati, a poziv na akciju mora da se vizuelno ističe bez obzira na to gde se nalazi.
Ako sumnjate da vizuelna hijerarhija na vašem sajtu ne radi kako treba, popunite naš kratki upitnik i pomoći ćemo vam da identifikujete tačno gde gubite posetioce. Treba vam manje od 2 minuta.