Kako izbjeći najčešće UX i UI pogreške

U praksi često susrećemo UX i UI pogreške u dizajnu raznih web stranica. Promišljenim pristupom, analizom stranice i ponašanja korisnika, te konstantnim testiranjem i optimizacijom sadržaja se te greške mogu smanjiti ili čak u potpunosti izbjeći. U ovom članku ćemo ponuditi rješenja za neke od najčešćih pogrešaka iz prakse. Pravovremeni ispravci grešaka rezultirat će većim zadovoljstvom korisnika i boljim rezultatima poslovanja.

Razlika između UX i UI

Započet ćemo s otkrivanjem značenja ovih akronima. UX (eng. User Experience) definira proces i skup tehnika kojima je web stranica prilagođena posjetitelju kako bi se postigao optimalni učinak stranice. Drugim riječima, prilagodba dizajna web stranice i njenih elemenata kako bi bila što lakša za korištenje i postigla željeni rezultat kod korisnika. UI (eng. User Interface) je blizak termin, i odnosi se na predstavljanje web stranice i njenih elemenata publici na razumljiv i jedinstven način, tako da kreira jasnu sliku o brendu tog proizvoda/kompanije. UI dizajn vizualnim tehnikama i interaktivnim elementima stvara tijek kojim navodi korisnika kroz sučelje stranice.

Možemo reći da su UX tehnike više tehničke i analitičke naravi za koje je u praksi zadužen front-end developer, dok su UI tehnike više u dodiru s grafičkim dizajnom. UX je odgovoran za dobro funkcioniranje elemenata stranice, dok je zadatak UI dizajna da ti elementi stvaraju koheziju i skladno pričaju priču stranice. Ova dva elementa se u praksi isprepleću, i jedan bez drugoga ne mogu zasebno funkcionirati. Stoga ćemo u ovom blogu obraditi neke od najčešćih pogrešaka koje imaju dodirne točke i u UX i UI dizajnu.

Jedinstveno iskustvo na različitim platformama

Engleska riječ za postizanje jedinstvenog korisničkog iskustva web stranice na različitim platformama ili uređajima se zove ‘Omnichannel experience’. To u praksi znači da, bez obzira koji uređaj posjetitelji koristili da bi učitali vašu stranicu, bilo da je riječ o desktopu, laptopu, mobitelu ili tabletu, njihovo iskustvo mora biti isto. Posjetitelj mora imati pristup svim elementima na mobilnoj verziji, brzo i jednostavno kao i na desktop verziji, bez potrebe za skrolanjem i zumiranjem radi bolje čitljivosti teksta i linkova. Zbog tog je nužno da vaša web stranica bude responzivna, odnosno prilagođena svim navedenim uređajima!

Ukoliko koristite neku od CMS platformi, poput WordPress-a ili Joomle, prilagođenu stranicu možete imati onoliko brzo koliko vam treba za instaliranje responzivne teme. Ako pak imate programiranu stranicu, responzivni programerski okviri poput Bootstrap, Skeleton ili Foundation će vam uvelike olakšati i ubrzati proces pisanja novog koda. Donja slika vizualno predstavlja razlike između responzivnog i neresponzivnog prikaza web stranice na mobilnom uređaju.

Izvor: http://michaelsoriano.com/10-common-uiux-mistakes-and-how-to-avoid-them/

Uočljiva i jednostavna navigacija

Posjetitelji Vaše stranice žele informacije i žele ih odmah! Pružite im jednostavnu i lako uočljivu navigaciju kako ne bi gubili vrijeme na snalaženje među šumom podataka. Dizajnirajte navigaciju tako da posjetitelj dođe kamo želi u što manje klikova.

Prvi korak u kreiranju dobre navigacije je usporedba vlastite navigacije s navigacijom konkurentske stranice. Pretražite nekoliko konkurentskih stranica, zapisujući sve ‘pluseve’ i ‘minuse’ iz perspektive Vas kao korisnika – jeste bili zbunjeni podjelom kategorija, je li svaki link funkcionirao, koliko brzo ste došli do tražene informacije i slično. Zatim se vratite na svoju stranicu i usporedite svoje doživljaje s iskustvom na vlastitoj stranici. Još bolja opcija za testiranje Vaše navigacija je vlastita analitika stranice. Proučite kako se korisnici vaše stranice snalaze u navigaciji pomoću kategorije ‘Ponašanje’ u Google Analytics sučelju. Tamo možete vidjeti na kojim to pod-stranicama najčešće posjetioci izlaze s web-a, kakav je tok korisnika na webu i slično. Primijetite li čudne obrasce i preveliki bounce rate možda je vrijeme da preispitate funkcioniranje vaše navigacije.

Kako bi vam pomogli u testiranju navigacije, navest ćemo neke od točaka provjere ispravnosti:

• Konstantnost

  za što lakšu uočljivost, navigacija se treba pojavljivati na jednak način i na istom mjestu na svim pod-stranicama weba

• Klikabilnost

  sve kategoričke podjele navigacije trebaju biti klikabilni linkovi 

• Jasna podjela kategorija

  sve kategorije i potkategorije navigacije moraju biti jasno odijeljene grafički

• Točni nazivi

  korisnik mora znati što ga očekuje i prije nego klikne na link navigacije po nazivu linka

Relevantan sadržaj

U očima korisnika nema goreg scenarija nego kad web stranica koju posjeti s ciljem informiranja ili kupnje nema strukturiran i relevantan sadržaj. Što god imate reći, recite to jednostavno i u par rečenica! Prosječan korisnik ima vrlo kratak attention span, odnosno period u kojem imate njegovu pozornost, stoga nema potrebe da natrpavate sadržaj stranice nepotrebnim elementima. Ako je korisnik došao kupiti majicu, nema potrebe da mu na istoj stranici nudite i mobitel ili ga obasipate reklamama nevezanima za sadržaj. Svijetleći i pop-up oglasi koji iskaču nasred ekrana i preveliki broj formi s različitim call-to action linkovima na istoj stranici odvlače pažnju od onoga što je bitno. U fokusu mora biti ono zbog čega je korisnik i došao, ništa više od toga.

Na ovom primjeru stranice koja nudi feng-shui uređenje interijera možete vidjeti kako oglasi za kreme protiv starenja i preveliki Facebook box odvlače pažnju od onoga po što je korisnik stvarno došao.

Raščlanjivanje informacija

Važno je znati da korisnici ne čitaju sve što se nalazi na Vašem webu! Jednom kada dođu, u potrazi za nekom specifičnom informacijom, oni brzinski skeniraju web kako bi u što kraćem roku pronašli ono što ih zanima i zatim se fokusirali na to. Kako bi im pomogli da što prije nađu ono što traže i ne odustanu od potrage, dizajnirajte stranicu tako da važan sadržaj poput login forme, kontakt forme, free trial buttona, navigacije i sl., učinite centralnim ili istaknutim dijelom stranice. Postoje različite grafičke opcije kako da istaknete dio stranice. To možete učiniti postavljanjem raznih „buttona“, slika, ilustracija, ikona, istaknutih fontova i sl. Dolje možete vidjeti primjer isticanja “free trial” pomoću okvira s ugrađenim klikabilnim buttonom na web stranici EnvatoTuts+.

Različite veličine i tipovi fonta mogu uvelike pomoći korisniku u shvaćanju namjene nekog tekstualnog sadržaja. Primjerice, naslovi članaka su uvijek pisani najtamnijim i najvećim fontom, podnaslovi su pisani tamnijim fontom od ostatka teksta i odvojeni bijelim prostorom u paragrafe, nazivi autora mogu biti potpuno drugog tipa fonta i sl. Takva stilizacija teksta je jedan od temeljnih načela vizualne hijerarhije.

Izvor: http://michaelsoriano.com/10-common-uiux-mistakes-and-how-to-avoid-them/

In – site pretraživači

Česta pogreška, koja se događa u praksi kod webova s unutarnjom pretragom, je ne blokiranje ostatka stranice prilikom filtriranja rezultata pretrage. Ako se stranica ne blokira, korisnici i dalje mogu unositi upite tijekom pretrage, što otežava rad filterima i može dovesti do pada pretraživača. Jednostavno rješenje ovog problema je dodavanje dodatnog sloja ili overlay-a kako bi blokirao daljnje aktivnosti korisnika. Dok se rezultati učitavaju, a korisnici čekaju, potrebno ih je na neki način obavijestiti o tijeku procesa. Dodavanje progress bara i/ ili poruke s objašnjenjem o tijeku procesa, možete spriječiti ljutnju korisnika i njihov preuranjen odlazak sa stranice. Uzimajući u obzir prosječnog korisnika web-a, obavijest o procesu bi trebala biti napisana jednostavnim, svakidašnjim rječnikom, a po želji se može i personalizirati ili uključiti ime brenda.

Izvor: http://michaelsoriano.com/10-common-uiux-mistakes-and-how-to-avoid-them/

Forme i upitnici

U današnje vrijeme zaista nema puno web stranica koje nemaju postavljenu barem jednu formu za ispunjavanje. Svrha takvih formi je prikupljanje podataka o potencijalnim korisnicima u marketinške svrhe, no ponekad takve forme mogu biti prava gnjavaža za korisnike. Postavite sebe u situaciju posjetitelja svoje stranice – je li vaša forma preopsežna, trebaju li vam svi ti podaci, što je cilj te forme? Često se dogodi da su preopširne forme krivac za visoki bounce rate stranice.

Druga vrlo česta pogreška koja se tiče formi je da se ne mogu podnijeti klikom na tipku „Enter“. Ovo često iritira desktop i laptop korisnike koji vrlo brzo tipkaju i ne žele potrošiti dodatnu sekundu vremena na klikanje mišem kako bi podnijeli ili spremili dovršenu formu. Ovaj problem se može riješiti dodavanjem Javascript koda.

Izvor: http://michaelsoriano.com/10-common-uiux-mistakes-and-how-to-avoid-them/