Kako kreirati web sajt prilagođen korisnicima: UX principi, saveti i najbolje prakse

Šta znači korisnički orijentisan web dizajn?

Korisnički orijentisan dizajn, odnosno user-centric design, predstavlja pristup u kom se web sajt razvija prema potrebama, očekivanjima i ponašanju stvarnih korisnika.

Umesto da se sajt organizuje isključivo prema internoj strukturi kompanije, on se gradi prema pitanjima koja korisnici imaju.

Na primer, kompanija može svoje usluge interno deliti prema odeljenjima, procesima i odgovornostima.

Korisnika, međutim, najčešće zanima:

• Da li rešavate moj problem?
• Da li ste radili sa kompanijama poput moje?
• Šta tačno dobijam?
• Koliko proces traje?
• Koliko košta?
• Kako mogu da započnem saradnju?

Korisnički orijentisan web sajt treba da pruži odgovore bez nepotrebnog traženja, nagađanja i dodatnog napora.

To podrazumeva:

• jasnu strukturu
• intuitivnu navigaciju
• razumljiv sadržaj
• brz rad sajta
• prilagođenost mobilnim uređajima
• vidljive pozive na akciju
• jednostavne forme
• dosledan dizajn
• dovoljno dokaza poverenja

Dobar UX korisniku daje osećaj da tačno zna gde se nalazi, šta može da pronađe i šta treba da uradi sledeće.

Zašto je korisničko iskustvo važno za poslovne rezultate?

Korisničko iskustvo nije samo pitanje estetike.

Ono direktno utiče na:

• stopu konverzije
• broj poslatih upita
• završene kupovine
• prosečnu vrednost porudžbine
• napuštanje sajta
• trošak akvizicije
• poverenje u brend
• rezultate oglašavanja
• organsku vidljivost

Možete imati kvalitetan proizvod, dobru ponudu i veliki budžet za oglašavanje, ali će rezultati biti ograničeni ako je korisniku teško da završi sledeći korak.

Kada Google Ads kampanja dovede korisnika na sporu, nepreglednu ili nerelevantnu stranicu, problem nije nužno u oglasu.

Isto važi za oglašavanje na društvenim mrežama. Kreativa može privući pažnju i generisati veliki broj klikova, ali sajt mora da nastavi istu poruku i pretvori interesovanje u akciju.

Svaka prepreka na sajtu povećava cenu konverzije.

Svako jasno poboljšanje može povećati vrednost postojećeg saobraćaja bez dodatnog ulaganja u oglase.

Počnite od korisničke namere

Pre nego što definišete izgled stranice, morate razumeti zašto korisnik dolazi.

Različiti korisnici mogu posetiti isti sajt sa potpuno različitim ciljevima.

Jedan želi da upozna kompaniju.

Drugi već poredi ponude.

Treći želi cenu.

Četvrti je spreman da pošalje upit.

Peti se vraća da proveri kontakt podatke ili završi kupovinu.

Zato svaka važna stranica treba da odgovori na određenu nameru.

Početna stranica

Treba brzo da objasni:

• ko ste
• šta nudite
• kome je namenjeno
• po čemu se razlikujete
• koji je sledeći korak

Stranica usluge

Treba da objasni:

• koji problem rešavate
• kako usluga funkcioniše
• šta klijent dobija
• kome je namenjena
• kako izgleda proces
• zašto može da Vam veruje

Stranica proizvoda

Treba jasno da prikaže:

• proizvod
• cenu
• glavne benefite
• specifikacije
• dostupnost
• dostavu
• povraćaj
• način kupovine

Blog tekst

Treba da odgovori na konkretno pitanje, edukuje korisnika i prirodno ga usmeri ka relevantnoj usluzi ili rešenju.

Razumevanje korisničke namere važno je i za SEO optimizaciju, jer dobra pozicija nema veliku vrednost ako sadržaj ne odgovara razlogu zbog kog je korisnik pretraživao određenu temu.

1. Kreirajte jasnu informacionu arhitekturu

Informaciona arhitektura predstavlja način na koji su stranice, informacije i funkcije organizovane na sajtu.

Korisnik ne treba da zna kako je Vaša kompanija interno organizovana da bi pronašao uslugu koja mu je potrebna.

Navigacija treba da koristi nazive koje publika prepoznaje i razume.

Umesto nejasnih izraza kao što su:

• Rešenja
• Naš pristup
• Mogućnosti
• Digitalna transformacija

često je korisnije koristiti direktnije nazive:

• Google Ads
• Izrada web sajta
• Izrada web shopa
• Video reklame
• SEO optimizacija
• Kontakt

Kreativan naziv može zvučati zanimljivo, ali ne sme da ugrozi jasnoću.

Dobra struktura sajta treba da omogući

• da se najvažnije stranice pronađu u nekoliko koraka
• da glavni meni ne bude prenatrpan
• da srodne usluge budu logično grupisane
• da korisnik uvek zna gde se nalazi
• da postoje jasne veze između sadržaja
• da stranice nemaju nepotrebna ponavljanja

Interno povezivanje dodatno pomaže korisnicima i pretraživačima da razumeju odnos između tema.

Na primer, tekst o landing stranicama može prirodno voditi ka usluzi izrade web sajta, izrade internet prodavnice ili sistemu infrastrukture za konverzije.

2. Napišite naslov koji odmah objašnjava vrednost

Prvi ekran stranice treba brzo da odgovori na tri pitanja:

• Gde sam?
• Da li je ovo relevantno za mene?
• Šta mogu da uradim sledeće?

Naslov ne treba da bude samo kreativan. Mora da bude razumljiv.

Na primer:

Nejasno:

Digitalna rešenja za novu eru poslovanja

Jasnije:

Izrađujemo profesionalne web sajtove koji Vašu ponudu pretvaraju u upite

Druga verzija direktno govori šta kompanija radi i koji rezultat korisnik može da očekuje.

Dobar glavni naslov treba da:

• jasno definiše ponudu
• koristi jezik korisnika
• izbegava prazne marketinške fraze
• komunicira glavnu vrednost
• bude razumljiv bez dodatnog objašnjavanja

Podnaslov zatim može proširiti poruku i objasniti proces, ciljnu grupu ili ključne benefite.

Korisnik ne treba da skroluje pola stranice da bi razumeo čime se bavite.

3. Organizujte sadržaj prema pitanjima korisnika

Kompanije često pišu o sebi.

Korisnici žele da znaju šta Vaša ponuda znači za njih.

Umesto da stranica počne dugom istorijom kompanije, bolje je prvo objasniti:

• problem koji rešavate
• rezultat koji korisnik želi
• način na koji mu pomažete
• razlog zbog kog može da Vam veruje

Sadržaj treba podeliti u jasne celine sa opisnim podnaslovima.

Korisnici retko čitaju svaku reč redom. Najčešće skeniraju stranicu i traže deo koji je relevantan za njih.

Zato koristite:

• kratke pasuse
• razumljive podnaslove
• istaknute ključne poruke
• liste kada olakšavaju čitanje
• konkretne primere
• jasne pozive na akciju

Važne informacije ne treba skrivati iza generičkih naslova kao što su „Saznajte više“ ili „Naša priča“.

Naslov sekcije treba da objasni šta se u njoj nalazi.

4. Uklonite nepotrebne odluke

Svaki dodatni izbor zahteva mentalni napor.

Ako korisniku ponudite deset ravnopravnih dugmadi, pet vrsta navigacije i veliki broj različitih pravaca, odluka postaje teža.

Dobar UX vodi korisnika prema sledećem logičnom koraku.

To ne znači da sajt treba da ima samo jednu stranicu ili jedno dugme.

Znači da treba da postoji jasna hijerarhija.

Primarni poziv na akciju

Predstavlja najvažniji sledeći korak:

• Zatražite ponudu
• Zakažite konsultacije
• Kupite proizvod
• Pošaljite upit
• Rezervišite termin

Sekundarni poziv na akciju

Namenjen je korisniku koji još nije spreman za glavni korak:

• Pogledajte projekte
• Saznajte kako radimo
• Preuzmite vodič
• Pogledajte specifikacije
• Pročitajte iskustva klijenata

Primarna akcija treba da bude vizuelno jasnija.

Kada je sve istaknuto, ništa nije zaista istaknuto.

5. Kreirajte doslednu navigaciju

Navigacija treba da bude predvidiva.

Korisnik očekuje:

• logo u gornjem levom uglu
• glavni meni pri vrhu stranice
• kontakt ili CTA dugme u zaglavlju
• footer sa dodatnim informacijama
• iste obrasce ponašanja na svim stranicama

Nekonvencionalan dizajn može izgledati originalno, ali ne treba da oteža osnovne zadatke.

Dobra navigacija:

• koristi jednostavne nazive
• ne sadrži previše stavki
• jasno prikazuje podmenije
• dobro radi na mobilnim uređajima
• zadržava dosledan raspored
• omogućava lak povratak na prethodni nivo

Kod većih sajtova mogu pomoći:

• breadcrumbs navigacija
• filteri
• interna pretraga
• kategorije
• povezani sadržaji
• jasno označene aktivne stranice

Korisnik ne treba da pamti kako je došao do određene informacije.

Sajt treba da mu pokaže put.

6. Dizajnirajte prvenstveno za mobilne korisnike

Mobilni dizajn nije umanjena verzija desktop sajta.

Na manjem ekranu korisnik ima:

• manje prostora
• manje precizan unos
• promenljive uslove interneta
• kraću pažnju
• drugačiji način držanja uređaja

Zato svaki važan element mora biti prilagođen mobilnom korišćenju.

Proverite:

• da li je tekst dovoljno velik
• da li su dugmad laka za dodir
• da li su forme jednostavne
• da li se meni lako koristi
• da li se slike pravilno prikazuju
• da li sadržaj ima dobar razmak
• da li CTA ostaje vidljiv
• da li stranica zahteva horizontalno pomeranje
• da li se popup prozori mogu lako zatvoriti

Mobilni korisnik ne treba da uvećava ekran da bi pročitao tekst ili pritisnuo dugme.

Za internet prodavnice mobilno iskustvo je posebno važno, jer problem u izboru varijante, korpi ili checkout-u može direktno zaustaviti kupovinu.

Zato izrada web shopa mora da obuhvati ceo put korisnika, od otkrivanja proizvoda do potvrde porudžbine.

7. Brzina sajta je deo korisničkog iskustva

Korisnici ne doživljavaju brzinu kao tehničku metriku.

Doživljavaju je kao kvalitet sajta.

Sporo učitavanje može da izazove:

• napuštanje stranice
• manje pregledanih proizvoda
• nižu stopu konverzije
• slabije rezultate kampanja
• manji broj poslatih formi
• pad poverenja

Najčešći uzroci sporog sajta uključuju:

• prevelike slike
• nepotrebne skripte
• previše dodataka
• neoptimizovane video materijale
• loš hosting
• komplikovane animacije
• tehnički neefikasan razvoj

Brzina ne znači da sajt mora biti vizuelno siromašan.

Znači da svaki element treba da ima jasnu funkciju i da bude pravilno optimizovan.

Prilikom razvoja sajta potrebno je testirati:

• početno učitavanje
• brzinu ključnih stranica
• mobilne performanse
• reakciju dugmadi
• forme
• korpu i checkout
• spoljne integracije

Tehničke performanse su jedan od ključnih elemenata infrastrukture za konverzije, jer korisnik ne može da konvertuje na stranici koju ne može brzo i pouzdano da koristi.

8. Koristite vizuelnu hijerarhiju

Vizuelna hijerarhija pokazuje korisniku šta je najvažnije.

Ona se gradi kroz:

• veličinu naslova
• razmak
• poziciju elemenata
• kontrast
• grupisanje
• ponavljanje
• smer pogleda
• isticanje CTA dugmadi

Ako naslov, opis, cena, fotografija, benefiti i dugmad imaju istu vizuelnu težinu, korisnik ne zna gde prvo da pogleda.

Dobro dizajnirana stranica vodi pogled kroz sadržaj.

Na stranici proizvoda redosled može biti:

1. Naziv proizvoda
2. Glavna fotografija
3. Cena
4. Najvažniji benefit
5. Izbor varijante
6. Dugme za kupovinu
7. Dostava i garancija
8. Detaljan opis

Na stranici usluge redosled može biti:

1. Problem i rezultat
2. Kratak opis usluge
3. Ključni benefiti
4. Proces
5. Dokazi
6. Poziv na akciju

Vizuelni dizajn treba da podrži sadržaj, a ne da se takmiči sa njim.

9. Pišite jednostavnim i preciznim jezikom

Korisničko iskustvo ne zavisi samo od rasporeda elemenata.

Zavisi i od reči.

Nejasan sadržaj može da napravi isti problem kao loša navigacija.

Izbegavajte:

• nepotreban stručni žargon
• duge i komplikovane rečenice
• generička obećanja
• neodređene izraze
• interne poslovne termine
• previše engleskih izraza kada postoji jasan domaći ekvivalent

Umesto:

Implementiramo multidisciplinarna rešenja za digitalnu transformaciju poslovnih ekosistema.

Jasnije je:

Povezujemo marketing, web, prodaju i automatizaciju u sistem koji podržava rast kompanije.

Dobar web sadržaj treba brzo da prenese:

• šta nudite
• kome pomažete
• kako izgleda saradnja
• šta korisnik dobija
• šta treba da uradi sledeće

Jasnoća nije pojednostavljivanje brenda.

Jasnoća je znak da dobro razumete svoju ponudu.

10. Smanjite trenje u formama

Forma je često poslednji korak između interesovanja i konverzije.

Svako dodatno polje može smanjiti broj prijava.

To ne znači da svaka forma mora imati samo ime i email adresu.

Broj pitanja treba da odgovara vrednosti i složenosti sledećeg koraka.

Za jednostavan upit mogu biti dovoljni:

• ime
• email ili telefon
• poruka

Za kvalifikacionu prijavu mogu biti potrebni:

• kompanija
• web sajt
• usluga
• okvirni budžet
• poslovni cilj
• vremenski okvir

Važno je da korisnik razume:

• zašto se određeni podatak traži
• šta će se dogoditi nakon slanja
• kada može očekivati odgovor
• da li su podaci bezbedni

Forma treba da:

• jasno označi obavezna polja
• prikaže razumljive greške
• sačuva već unete podatke
• dobro radi na telefonu
• potvrdi uspešno slanje
• ne zahteva nepotrebne informacije

Kroz CRM i automatizaciju odnosa sa kupcima, poslata forma može automatski pokrenuti potvrdu, dodelu upita odgovornoj osobi i dalji proces komunikacije.

Time se korisničko iskustvo nastavlja i nakon izlaska sa sajta.

11. Izgradite poverenje na pravom mestu

Korisnik neće poslati upit ili završiti kupovinu ako nije siguran da može da Vam veruje.

Dokazi poverenja mogu uključivati:

• reference klijenata
• studije slučaja
• rezultate
• sertifikate
• recenzije
• fotografije tima
• adresu i kontakt podatke
• jasne uslove kupovine
• politiku povraćaja
• garanciju
• poznate metode plaćanja

Važno je gde se ti elementi prikazuju.

Ako korisnik ima dilemu u vezi sa dostavom, informacija o dostavi treba da bude blizu dugmeta za kupovinu.

Ako se pita da li imate dovoljno iskustva, relevantna referenca treba da se nalazi u okviru stranice usluge.

Ako razmišlja o bezbednosti plaćanja, ne treba da traži odgovor duboko u footeru.

Dobar UX predviđa sumnju i odgovara na nju pre nego što postane razlog za odustajanje.

12. Ne sakrivajte važne informacije

Nedostatak informacija ne stvara uvek radoznalost.

Često stvara sumnju.

Korisnicima mogu biti važne:

• cene
• cenovni raspon
• način obračuna
• rok izrade
• dostava
• dostupnost
• proces saradnje
• uslovi otkazivanja
• šta je uključeno
• šta nije uključeno

Nije uvek moguće objaviti tačnu cenu, posebno kod kompleksnih usluga.

Ipak, možete objasniti:

• od čega cena zavisi
• koji je minimalni obim projekta
• kako se ponuda formira
• šta je uključeno u saradnju
• kakav tip klijenta je odgovarajući

Transparentnost pomaže korisniku da se sam kvalifikuje i smanjuje broj nerelevantnih upita.

13. Dizajnirajte pristupačan web sajt

Pristupačnost znači da što veći broj ljudi može da koristi sajt bez prepreka.

To uključuje korisnike koji imaju:

• slabiji vid
• ograničenu pokretljivost
• poteškoće sa razlikovanjem boja
• privremenu povredu
• sporiju internet vezu
• manji ekran
• potrebu za korišćenjem tastature ili čitača ekrana

Osnovne prakse uključuju:

• dovoljan kontrast teksta i pozadine
• opisne alternativne tekstove za slike
• jasne oznake formi
• logičan redosled naslova
• dovoljno velika dugmad
• mogućnost korišćenja tastaturom
• razumljive poruke o greškama
• izbegavanje oslanjanja samo na boju

Pristupačnost nije dodatak koji se razmatra na kraju projekta.

Ona je deo kvalitetnog korisničkog iskustva.

14. Održavajte doslednost dizajna

Svaka stranica ne treba da izgleda kao da pripada drugom sajtu.

Doslednost pomaže korisniku da brže razume interfejs.

Ona uključuje:

• tipografiju
• boje
• dugmad
• ikonice
• razmake
• kartice
• forme
• navigaciju
• naslove
• poruke o greškama

Ako isto dugme jednom označava slanje forme, drugi put otvaranje stranice, a treći put nema nikakvu funkciju, korisnik gubi poverenje u sistem.

Sistem dizajna i jasna pravila brenda olakšavaju održavanje doslednosti na većem broju stranica.

Kroz Brand Identity & Governance vizuelni identitet ne posmatramo samo kao logo i boje, već kao sistem pravila koji omogućava da svaki kontakt sa brendom deluje povezano i prepoznatljivo.

15. Testirajte sa stvarnim korisnicima

Tim koji svakodnevno radi na sajtu više ga ne vidi isto kao novi korisnik.

Zna gde se nalazi svaka informacija. Razume interne termine. Navikao je na strukturu.

Zato je važno posmatrati kako sajt koriste ljudi koji ga prvi put vide.

Možete proveravati:

• da li pronalaze određenu uslugu
• da li razumeju ponudu
• gde očekuju da kliknu
• da li mogu da završe kupovinu
• gde zastaju
• koja pitanja ostaju bez odgovora
• šta im stvara nepoverenje

Testiranje ne mora uvek biti komplikovano istraživanje.

Čak i nekoliko strukturisanih razgovora može otkriti problem koji analitika ne objašnjava.

Kombinujte:

• razgovore sa korisnicima
• testiranje zadataka
• ankete
• snimke sesija
• heatmap prikaze
• analitiku događaja
• podatke iz pretrage sajta
• pitanja prodajnog tima

Brojke pokazuju gde problem postoji.

Korisnici često objašnjavaju zašto.

16. Koristite podatke za kontinuirano unapređenje

Web sajt nije završen kada bude objavljen.

Nakon lansiranja počinje proces učenja.

Pratite:

• najposećenije stranice
• ulazne i izlazne stranice
• stopu konverzije
• klikove na CTA
• napuštanje formi
• korišćenje menija
• interne pretrage
• ponašanje po uređajima
• brzinu stranica
• najčešće greške

Kroz merenje rezultata i atribuciju podatke sa sajta povezujemo sa kampanjama, leadovima, prodajom i prihodima.

Tako ne analiziramo samo koliko je korisnika kliknulo na dugme, već i:

• koji klik je doveo do kvalitetnog leada
• koji izvor donosi profitabilne kupce
• koja stranica doprinosi prodaji
• gde korisnici odustaju
• koje unapređenje ima najveći potencijal

Svaku važnu promenu treba postaviti kao hipotezu.

Na primer:

Verujemo da će kraća forma povećati broj prijava bez pada kvaliteta leadova.

Zatim se unapred definiše:

• šta menjamo
• koja metrika odlučuje
• koliko test traje