Najčešće UX greške na web stranicama

UX, odnosno korisničko iskustvo, ne svodi se samo na to izgleda li web moderno.

Dobar UX znači da korisnik može jednostavno:

• razumjeti što nudite
• pronaći potrebnu informaciju
• kretati se kroz web
• koristiti stranicu na mobitelu
• napraviti željenu radnju
• kontaktirati vas bez nepotrebnih prepreka

Velik broj poslovnih web stranica nema jedan veliki UX problem.

Umjesto toga imaju desetak manjih problema koji se međusobno zbrajaju.

Korisnik nešto ne razumije.

Zatim ne može pronaći cijenu.

Meni je kompliciran.

CTA nije jasan.

Forma traži previše podataka.

Na mobitelu se još pojavi popup preko pola ekrana.

Svaki pojedinačni problem možda nije dovoljan da korisnik ode, ali zajedno mogu značajno smanjiti kvalitetu iskustva i broj konverzija.

Nejasna glavna poruka

Korisnik bi vrlo brzo trebao shvatiti što tvrtka radi.

Naslovi poput:

Pokrećemo vaše ideje.

ili:

Rješenja za novu generaciju poslovanja.

mogu zvučati atraktivno, ali često ne objašnjavaju uslugu.

Puno je korisnije reći:

Izrada web stranica, SEO i web trgovina za male i srednje tvrtke.

Kreativna komunikacija može doći nakon jasnoće.

Ako korisnik u nekoliko sekundi ne može zaključiti je li došao na pravo mjesto, postoji velika šansa da će otići.

Previše sadržaja u hero sekciji

Druga česta greška je pokušati cijelu stranicu ugurati u prvi ekran.

Hero sadrži:

• dugački H1
• dva odlomka
• četiri bullet pointa
• tri CTA-a
• nekoliko logotipa
• recenziju
• veliku ilustraciju
• animaciju

Rezultat je vizualna konkurencija između svih elemenata.

Hero uglavnom treba odgovoriti na tri pitanja:

Što nudite?

Zašto je relevantno korisniku?

Što može napraviti dalje?

Detaljnije informacije mogu doći niže.

Više o tome možete pronaći u članku kako izgleda dobra početna stranica.

Loša vizualna hijerarhija

Ako svaki element izgleda jednako važno, korisnik ne zna gdje gledati.

Tipični problemi su:

• nekoliko ogromnih naslova u istoj sekciji
• svaki gumb ima drugu jaku boju
• sve kartice imaju jednaku vizualnu težinu
• tekst, CTA i dekoracije međusobno se natječu

Dobar dizajn daje prioritet.

Glavni naslov treba izgledati kao glavni naslov.

Primarni CTA treba biti važniji od sekundarnog.

Sekundarne informacije trebaju izgledati sekundarno.

Vizualna hijerarhija korisniku smanjuje količinu razmišljanja potrebnu za korištenje stranice.

Komplicirana navigacija

Glavni meni ne treba biti kompletna mapa weba.

Ako ima:

• 12 glavnih stavki
• nekoliko razina podizbornika
• nejasne nazive
• različite vrste CTA-ova

korisniku otežavate snalaženje.

Za većinu poslovnih webova dovoljno je nekoliko jasnih kategorija.

Primjer:

• Usluge
• Projekti
• Cjenik
• O nama
• Blog
• Kontakt

Ako imate puno sadržaja, sekundarne stranice mogu biti dostupne kroz interne linkove i footer.

Dobra struktura web stranice pojednostavljuje i samu navigaciju.

Kreativni nazivi u meniju

Kreativnost u navigaciji često ima loš omjer koristi i rizika.

Primjerice:

Naša priča

može biti razumljivo kao O nama.

Ali:

Otkrijte nas

više nije tako jasno.

Isto vrijedi za usluge.

Ako korisnik traži SEO, najlakše će prepoznati stavku koja se zove:

SEO

a ne:

Digitalni rast.

Navigacija nije idealno mjesto za zagonetke.

Previše izbora

Velik broj opcija može smanjiti vjerojatnost da će korisnik napraviti bilo koju.

Primjer hero sekcije:

• Zatražite ponudu
• Dogovorite poziv
• Pogledajte usluge
• Pogledajte projekte
• Preuzmite vodič

Koja je glavna akcija?

Ako ni dizajner ne može odmah odgovoriti, korisnik će još teže.

Bolje je imati:

Primarni CTA: Zatražite ponudu

Sekundarni CTA: Pogledajte projekte

Detaljnije o tome obradili smo u vodiču gdje postaviti CTA na web stranici.

Nejasni CTA-ovi

Tekst CTA-a treba objasniti što se događa nakon klika.

Slabiji primjeri:

• Klikni
• Nastavi
• Više
• Pošalji

Bolje:

• Zatražite ponudu
• Pogledajte cijene
• Pogledajte projekte
• Dogovorite konzultacije
• Pošaljite upit

Korisnik tada unaprijed zna kamo ide.

CTA vodi na pogrešno mjesto

Ako gumb kaže:

Pogledajte cijene

a vodi na početnu stranicu, stvorili smo nepotreban dodatni korak.

Ako kaže:

Zatražite ponudu

korisnik bi trebao doći direktno do forme ili stranice za slanje upita.

CTA treba ispuniti obećanje sadržano u tekstu gumba.

Nema CTA-a

Suprotna greška je završiti važnu stranicu bez ikakvog sljedećeg koraka.

Korisnik pročita:

• uslugu
• proces
• cijene
• FAQ

i nakon toga dobije footer.

Ako je spreman kontaktirati vas, mora sam tražiti način.

Svaka važna komercijalna stranica treba imati jasan završni CTA.

Sve usluge na jednoj stranici

Ako tvrtka nudi nekoliko važnih usluga, svaka često zaslužuje zaseban prostor.

Jedna stranica s deset kartica i po dvije rečenice o svakoj usluzi može biti korisna kao pregled.

Ali ne i kao jedini sadržaj o tim uslugama.

Zasebna stranica omogućuje detaljno odgovoriti na pitanja korisnika.

O tome smo detaljnije pisali u članku što treba imati stranica usluge.

Predugački blokovi teksta

Korisnici web uglavnom skeniraju.

Veliki blok od 20 redaka bez podnaslova djeluje zahtjevno čak i kada je sadržaj kvalitetan.

Pomozite čitanju kroz:

• kraće odlomke
• H2 i H3 naslove
• liste
• istaknute ključne informacije
• dovoljno praznog prostora

Dugačak sadržaj nije problem.

Loše strukturiran sadržaj jest.

Premalo sadržaja

Druga krajnost je stranica koja gotovo ništa ne objašnjava.

Primjer:

Nudimo kvalitetnu SEO optimizaciju prilagođenu vašem poslovanju. Kontaktirajte nas.

Korisniku nije odgovoreno:

• što uključuje SEO
• kako izgleda proces
• koliko traje
• koliko košta
• kako se mjeri rezultat

Minimalizam u dizajnu ne znači minimalnu količinu korisnih informacija.

Tekst pisan samo za tvrtku

Poslovni webovi često koriste puno rečenica poput:

Mi smo vodeća tvrtka…

Naša misija je…

Naš tim ima…

Te informacije mogu biti relevantne, ali korisnika prvenstveno zanima:

Što to znači za mene?

Umjesto:

Imamo deset godina iskustva.

možete dodati:

Deset godina iskustva pomaže nam ranije prepoznati tehničke i sadržajne probleme koji inače izlaze tek pred objavu.

Činjenica tada dobiva korisničku vrijednost.

Generičke tvrdnje

Gotovo svaka tvrtka na webu navodi:

• kvalitetu
• profesionalnost
• pouzdanost
• individualni pristup

Takve tvrdnje same po sebi ne znače puno.

Bolje je pokazati konkretan dokaz.

Primjer:

Prije objave provjeravamo kontakt forme, ključne korisničke putove, mobilni prikaz i glavne preglednike.

To govori više o kvaliteti od same riječi “kvalitetno”.

Više o trust elementima možete pronaći u vodiču kako izgraditi povjerenje na webu.

Nema cijena ni okvira

Ne mora svaka usluga imati fiksnu cijenu.

Ali potpuna tajnost oko budžeta može stvarati nepotrebnu prepreku.

Korisniku često možete dati:

• početnu cijenu
• raspon
• pakete
• primjer projekta
• faktore koji utječu na cijenu

Kod Legatecha su konkretni paketi dostupni na stranici izrada web stranica – cijena i paketi.

Previše popupova

Jedan popup može biti koristan.

Problem nastaje kada korisnik istovremeno dobije:

• cookie banner
• newsletter popup
• chat
• push notification prompt
• popup s popustom

Prije nego što je vidio sadržaj, već mora nekoliko puta kliknuti “X”.

To stvara trenje prije nego što ste uopće imali priliku pokazati vrijednost.

Chat koji smeta

Chat može biti koristan kanal.

Ali widget koji:

• automatski otvori veliki prozor
• proizvodi zvuk
• prekriva CTA
• zauzima velik dio mobilnog ekrana

može imati suprotan učinak.

Chat treba biti dostupan, ali ne mora zahtijevati pažnju korisnika.

Autoplay video i zvuk

Video može biti odličan element.

Automatski zvuk gotovo nikada nije dobar prvi dojam.

Korisnik može otvoriti web:

• na poslu
• u javnosti
• tijekom sastanka

Neočekivani zvuk vrlo brzo dovodi do zatvaranja taba.

Video također treba optimizirati jer može značajno povećati težinu stranice.

Previše animacija

Animacije mogu pomoći usmjeriti pažnju.

Ali ako svaki element mora:

• fadeati
• rotirati se
• dolaziti sa strane
• čekati scroll trigger

korisnik počinje čekati dizajn.

To je obrnuto od onoga što želimo.

Najvažniji sadržaj treba biti brzo dostupan.

Animacija ga može podržati, ali ne smije biti prepreka.

Loš kontrast

Svijetlosivi tekst na bijeloj pozadini može vizualno izgledati elegantno.

Ali može biti neugodan za čitanje.

Isto vrijedi za:

• tekst preko fotografija
• pastelne CTA gumbe
• tanke fontove
• hover stanje koje gotovo nestane

Dizajn treba biti dovoljno kontrastan da sadržaj ostane lako čitljiv.

Premali font

Jedna od najjednostavnijih UX grešaka.

Sitni tekst možda omogućuje da više sadržaja stane na ekran, ali korisnik ne bi trebao ulagati dodatni napor samo da ga pročita.

Posebno na mobitelu.

Tipografija treba biti dizajnirana za čitanje, a ne samo za screenshot stranice.

Previše različitih stilova

Ako web koristi:

• pet veličina gumba
• četiri stila kartica
• šest različitih radiusa
• mnogo boja
• nekoliko nepovezanih fontova

stranica počinje izgledati nedosljedno.

Design system nije važan samo dizajnerima i developerima.

Dosljednost korisniku pomaže prepoznati obrasce.

Ako isti tip elementa uvijek izgleda slično, lakše ga je koristiti.

Loša mobilna verzija

Jedna od najvećih UX grešaka je tretirati mobitel kao posljednji korak projekta.

Problemi se tada samo pokušavaju “zakrpati”.

Primjerice:

• prevelik H1
• kartice koje postaju beskonačno dugačke
• tablice koje izlaze iz ekrana
• popupovi preko sadržaja
• CTA gumbi premaleni za touch

Mobilni prikaz treba uzeti u obzir od početka.

Detaljnije o tome pročitajte u članku što je mobile-first dizajn.

Horizontalni scroll

Na standardnoj poslovnoj stranici korisnik uglavnom ne očekuje horizontalni scroll.

Ako cijela stranica slučajno može kliziti lijevo-desno zbog jednog elementa koji prelazi viewport, to vrlo brzo djeluje kao tehnička greška.

Česti uzroci su:

• fiksne širine
• velike slike
• tablice
• animirani elementi
• negativni margini

To treba testirati na različitim veličinama ekrana.

Premali klikabilni elementi

Mala ikona može vizualno izgledati dobro, ali touch korisniku treba dovoljno veliko klikabilno područje.

Posebno:

• close ikone
• carousel kontrole
• checkboxovi
• male strelice
• mobilni menu elementi

Korisnik ne bi trebao precizno ciljati nekoliko piksela.

Preduga kontakt forma

Kontakt forma često se nalazi neposredno prije konverzije.

Ako tada od korisnika tražite 15 obaveznih polja, riskirate gubitak osobe koja je već bila spremna javiti se.

Za prvi upit često je dovoljno prikupiti nekoliko osnovnih informacija.

Više o tome možete pronaći u članku kako napraviti dobru kontakt formu.

Loše poruke greške

Ako forma kaže:

Invalid field.

korisnik mora pogađati što je problem.

Bolje:

Unesite ispravnu e-mail adresu.

Dobra error poruka treba objasniti:

• što nije u redu
• gdje je problem
• kako ga ispraviti

I ne treba obrisati sve prethodno unesene podatke.

Nema potvrde nakon akcije

Korisnik klikne:

Pošalji upit

i ništa se vizualno ne dogodi.

Je li poslano?

Treba li ponovno kliknuti?

Forma mora imati jasno stanje uspjeha.

Isto vrijedi za:

• dodavanje u košaricu
• newsletter prijavu
• rezervaciju
• upload

Svaka važna interakcija treba korisniku dati feedback.

Neispravni linkovi

Broken link je mali problem s velikim utjecajem na dojam kvalitete.

Posebno ako se radi o glavnom CTA-u.

Redovito treba provjeravati:

• interne linkove
• CTA-ove
• menu
• projekte
• stare blog članke

Stranice i URL-ovi se s vremenom mijenjaju.

404 bez pomoći

Korisnik će ponekad završiti na nepostojećoj stranici.

Dobra 404 stranica treba mu pomoći vratiti se.

Može ponuditi:

• povratak na naslovnu
• glavne usluge
• pretraživanje
• kontakt

Poruka:

404 Error

bez ičega drugoga je propuštena prilika.

Spora stranica

UX počinje prije nego što se stranica potpuno prikaže.

Ako korisnik mora dugo čekati, ostali elementi dizajna možda neće ni dobiti priliku.

Na performanse mogu utjecati:

• slike
• fontovi
• JavaScript
• pluginovi
• third-party skripte
• hosting

Brzina je zato UX problem jednako koliko i tehnički problem.

Layout koji skače

Još jedan neugodan problem je kada se sadržaj pomiče tijekom učitavanja.

Korisnik želi kliknuti gumb, ali se iznad njega učita slika i gumb se pomakne.

To može dovesti do pogrešnog klika.

Takva nestabilnost posebno je frustrirajuća na mobitelu.

Nema praznog prostora

Pokušaj da se iskoristi svaki pixel obično smanjuje preglednost.

Prazan prostor pomaže:

• odvojiti sekcije
• naglasiti važne elemente
• olakšati čitanje
• smanjiti osjećaj kaosa

White space nije praznina koju treba popuniti.

On je dio layouta.

Previše praznog prostora

I suprotno može biti problem.

Neke moderne stranice imaju toliko velike vertikalne razmake da korisnik mora scrollati cijeli ekran kako bi došao od jednog naslova do jednog odlomka.

Prazan prostor treba stvarati ritam.

Ne umjetno produžavati stranicu.

Carousel bez razloga

Slideri i carouseli često se koriste kako bi više sadržaja stalo na isto mjesto.

Problem je što dio korisnika nikada neće vidjeti drugi ili treći slide.

Ako je informacija važna, možda ju ne treba sakriti iza interakcije.

Carousel ima smisla kada priroda sadržaja to opravdava.

Ne samo zato da sekcija izgleda dinamičnije.

Accordion za sve

Accordion je odličan za:

• FAQ
• sekundarne detalje
• dodatne tehničke informacije

Ali ako je cijela stranica niz zatvorenih accordiona, korisnik mora stalno klikati da bi uopće vidio osnovni sadržaj.

Ključne informacije trebaju biti dostupne odmah.

Web ignorira cilj korisnika

Možda najveća UX greška od svih.

Tvrtka želi:

dobiti upit.

Ali korisnik prvo želi:

• saznati cijenu
• pogledati projekte
• razumjeti proces
• vidjeti što je uključeno

Ako web odmah pokušava gurati kontakt bez odgovora na ta pitanja, ciljevi nisu usklađeni.

Dobar UX povezuje poslovni cilj s korisnikovim putem do odluke.

Kako pronaći UX probleme?

Ne morate sve zaključivati intuitivno.

Možete koristiti:

• analitiku
• heatmape
• session recording
• feedback korisnika
• testiranje na stvarnim uređajima
• vlastito promatranje korisnika

Ponekad je dovoljno dati web osobi koja ga nikad nije vidjela i pitati:

Što ova tvrtka radi?

Gdje bi kliknuo da želiš cijenu?

Kako bi poslao upit?

Ako korisnik mora dugo tražiti odgovor, dobili ste vrijedan signal.

Promatrajte stvarne korisnike

Ljudi koji su sudjelovali u izradi weba znaju kako on funkcionira.

Zato često ne primjećuju probleme.

Znate da se kontakt nalazi iza određenog gumba.

Znate što znači interna terminologija.

Novi korisnik to ne zna.

Promatranje stvarne osobe dok pokušava obaviti jednostavan zadatak može otkriti probleme koje mjesecima niste primjećivali.

Rješavajte prioritete

Ne treba odmah raditi kompletan redesign.

Prvo riješite najveće prepreke.

Primjer:

1. korisnik ne razumije ponudu
2. nema jasnog CTA-a
3. mobilni meni je problematičan
4. kontakt forma je preduga
5. web je spor

Takvi problemi imaju veći potencijalni utjecaj od promjene radiusa na karticama s 12 na 16 piksela.

UX nije jednokratan zadatak

Korisničko iskustvo se može poboljšavati nakon objave.

Web daje stvarne podatke o tome:

• što ljudi posjećuju
• što klikaju
• gdje odustaju
• koje forme šalju
• koje sadržaje čitaju

Na temelju toga možete prilagođavati:

• strukturu
• sadržaj
• CTA-ove
• forme
• navigaciju

Dobar web nije nužno onaj koji je savršen prvi dan.

Dobar je onaj koji se može kontinuirano poboljšavati.

Jednostavnost nije dosada

Neki od najboljih UX elemenata gotovo su nevidljivi.

Korisnik samo:

• pronađe uslugu
• razumije cijenu
• pogleda projekt
• ispuni formu

bez razmišljanja o sučelju.

To je često znak da dizajn radi dobro.

Korisnik nije došao proučavati navigaciju.

Došao je riješiti svoj problem.

Ako želite širu sliku o tome kako treba funkcionirati kvalitetna poslovna stranica, pročitajte što čini dobar poslovni web.

Ako korisnici dolaze na stranicu, ali brzo odlaze, dodatne uzroke obradili smo u članku zašto korisnici napuštaju web.

Ako planirate novi web ili redizajn postojećeg, pogledajte naše pakete i cijene izrade web stranica.