UX dizajn savjeti kod izrade web stranica

User Experience Design (UXD ili UX) ili dizajn korisničkog iskustva je ključni element dizajna i izrade web stranica. Ovaj pojam je u biti proces poboljšanja i prilagodbe web stranicama zadovoljstvu korisnika. Poboljšanje zadovoljstva se očituje u poboljšanju upotrebljicvosti web stranica na način bolje učinkovitosti i interakcije s posjetiteljima web stranica.U ovom tekstu ćemo navesti najčešće savjete koje bi trebalo slijediti kod UX dizajna, a koje smo tijekom niza godina uvidjeli u greškama koje se pojavljuju pri web dizajnu i izradi web stranica.

Sadržaj na web stranicama

Najvažnije informacije stavite na početak – vrh web stranica ili bi trebale biti vizualno istaknute. Kako bi se posjetioci fokusirali na sadržaj bolje je se držati jednostavnijeg dizajna.

Posjetioci web stranica započinju pregledavanje web stranica s gornje lijeve strane, a prve dvije ili tri riječi se najviše čitaju. Vizualno odvojite primarne informacije kontrastom boja i veličina, od popratnih informacija.

Kod mobilnih uređaja istaknite prioritetne informacije kao što su lokacija, informacije potrebne za hitne slučajeve ili druge informacije koje bi posjetioci mogli tražiti mobilnim uređajima.

Skrolanje ili kretanje po web stranici

Posjetioci web stranice će se po web stranici kretati sve do trenutka kada im je jasno da se ispod nalaze dodatne relevantne informacije. Vizualno biste trebali izraditi takvu web stranicu koja pokazuje pokazatelj smjera skrolanja i postojanja dodatnog sadržaja. Imajte na umu da što je web stranica duža, manja je vjerovatnoća da će netko i skrolati do dna.

Sve relevantne informacije na jednoj web stranici su dobre jer je skrolanje brže od klikanja, ali nemojte pretjerivati. Imajte na umu da je dobro da posjetioci odu na  drugu drugu web stranicu zbog SEO optimizacije ako postoji potreba da tematski odvojite neki dio sadržaja.

Kontrast

Prilikom izrade web stranica po UX dizajn principima ne zaboravite i posjetioce koji imaju problema s poremećajem prepoznavanja boja. Zbog toga bi bilo dobro da upotrebaljavati kontrasnije kombinacije boja kod teksta i pozadine. Ne zaboravite i na stranice prilagođene mobilnim uređajima koje također moraju, čak i bolje, zadovoljavati ovu preporuku.

Boje

Plavu boju ne koristite za bilo koje tektove osim za linkove. Prilikom izrade web stranica jednu boju odredite za pozive za akciju i ne koristite je za bilo što drugo. Ne zaboravite da topli i svijetli tonovi boja ističu a hladne i tamne boje budu u pozadini.

Učitavanje web stranica – percepcija brzine učitavanja

Posjetiocima web stranica bi trebali osigurati da što prije dođu do tražene informacije. Vaša web stranica se svakako ne bi smjela dugo učitavati, čak i ako se radi o percepciji posjetitelja.

Percepcija brzine učitavanja web stranica temelji se na vremenu učitavanja, ponašanju prilikom učitavanja, vremenu čekanja i glatkoći animacija. Tekst na web stranicama bi se trrebao učitati prije slika kako bi posjetitelji počeli čitati prije nego se kompletna web stranica učita.

Pazite! Kašnjenja duža od nekoliko sekundi bi posjetioca mogla navesti da napusti vašu web stranicu.

Responzivni dizajn

Ako su elementi sučelja premali ili preblizu jedno drugom, teško se precizno dodiruju prilikom navigacije. Ovo će također i Google penalizirati i rangirati kao lošiju stranicu.

Minimalna veličina ciljanog područja na mobilnim telefonima bi trebala biti 1 x 1 cm, te s razmakom oko tee površine.

Imajte na umu da je kod mobilnih telefona s većim ekranom ili kod tableta jednostavnije kliknuti palcem na dnu zaslona ili na lijevoj ili desnoj strani.

Izbjegnite horizontalna ili vertikalna povlačenja za sve osim za pomicanje web stranica.

Zaboravite na dvostruke dodire na mobilnim uređajima, a razmislite kod kojih će sadržaja posjetioci koristiti vaše web stranice jednom ili sa dvije ruke.

Navigacija web stranicama

Navigacijski izbornik na vašoj web stranici bi trebao biti na logičnom i uvijek lako dostupnom mjestu. Na duljim web stranicama ili web stranicama kod kojih je potreban brži pristup, razmislite o korištenju “ljepljivih” izbornika. Navigacija ne bi trebala biti ni previše nametljiva.

Ako je hijerarhija vaše web stranice dublja od 3-4 razine, odnosno klika mišem, vrijeme je za redizajn web stranica.

Mijenjanje navigacije tijekom posjete različitim dijelovima web stranica izbjegavajte, ona bi trebala biti dosljedna.

Što staviti u navigacijske oznake? One trebaju biti specifične, ne duže od 2 ili 3 riječi. Neka započinju sa najinformativnijom riječju. Kod odabira terminologije za navigaciju su poželjni jednostavni izrazi, izbjegavajte stručne, žargonske ili modernu terminologiju. Bilo bi dobro i da korisnike obavijestite gdje se nalaze, bilo drugačijom vizualnom oznakom u navigaciji, bilo breadcrumbima.

Koristite li mega menije, oni bi trebali biti uži od stranice kako bi posjetioci lakše mogli izaći iz njih. Organizirajte veze u grupe, te napravite razliku između klikabilnih i neklikabilnih stavki.

Navigacija na mobilnim uređajima

Najčešće i najbitnije korištene opcije istaknite, a ostale sakrijte pod hamburger izbornikom. Hamburger izbornike na stolnim računalima koristite kada želite da budu manje primjetni.

Padajući izbornici bi bilo dobro da su vertikalni, nikako horizontalni, jer je se pomicai horizntalno jako nespretno.

Web obrasci

Koristite jednostavnije i uobičajne web obrasce i sučelja za unos podataka. Posjetioci web stranica bi mogli ako naiđu na nepoznato ili komplicirano sučelje odustati od unosa podataka.

Oznake i polja u obrascima poravnajte u jertikalnu liniju kako bi posjetioci web stranice imali bolji pregled. Oznake polja kod kompleksnijih obrazaca bi bilo dobro da su izvan tekstualnog polja, a ne unutar njega, kako korisnici ne bi izgubili infomariju u kojem polju “se nalaze”.

Kod dugih obrazaca, sekcije razdvojite separatorima, kako bi bilo preglednije i jednosavnije za unos.

Svakako koristite, ako je potrebno, opis unosa polja, a greške kod unosa bi bilo dobro da su u blizini polja kod kojeg je nastala greška prilikom usnosa. Poruke o greškama bi trebale biti koriste, sažete i lako razumljive.

Poveznice (linkovi)

Poveznice bi trebale biti istaknute, najčešće korištena boja za pozenice je plava (zahvaljujući Googlu), pa ako vam dizajn web stranica dopušta koristite plavu boju. Možete dodatno koristiti i podvlačenje. Plavi tekst ili podvlačenje ne koristite za elemente koji nisu poveznice. Da biste korisniku olakšali posjetu vašoj web stranici, koristite drugačije boje na posjećene pozivnice.

Tekst na poveznici bi trebao biti intuitivan, da korisnik ne mora kliknuti na poveznicu kako bi saznao gdje ona vodi.

Ako koristite referncu na neku URL adresu bi trebala voditi do te stranice.

Neki elementi na web stranicama kao što su slike proizvoda bi takođe trebali biti klikabilni –  voditi do svoje web stranice.

Gumbi (Buttons)

Gumbi na web stranicama kod dobrog UX dizajna moraju i izgledati kao gumbi, da vizualno daju informaciju da su klikabilni. To možete vizualizirati pozadinskim bojama, obrubima i oznakama. Oko sebe trebaju imati dovoljno prostora, smješteni na lako dostupnim područjima. Ako je gumb ravnog dizajna, gumbi bi trebali biti kontrasne boje u odnsu na ostali sadržaj i s odgovarajućom oznakom na njima. Također je bitna i brzina vizualnog znaka da je klik na gumb bio uspješan, i to 0,1 s nakon klika.

Ako gumbi rade neke radnje koje su nepovratne, na primjer brisanje podataka ili promjena nekih podataka bi trebali zahtijevati više angažmana korisnika kako bi se spriječilo slučajno klikanje.

Banneri

Posjetioci web stranica su slijepi za bannere. Ne trude se gledati ništa što liči na reklamne bannere, pa sve što liči na njih pokušajte izbjegavati.

Pretraživanje (search)

Polje za pretraživanje koristite uvijek, osim ako imate premalu web stranicu s malo sadržaja. Polje za pretraživanje bi trebalo biti intuitivno, izgledati kao tekstualno polje. Ako baš morate, ili na mobilnim uređajima, će biti dovoljna i ikona za pretraživanje. Polje za pretraživanje bi trebalo biti i lako dostupno, često se nalazi u gornjem desnom kutu. Širina polja za pretraživanje bi trebala biti tolika da se vidi cijeli upit za pretraživanje.

Karouseli

Karousele u principu izbjegavajte osim u iznimnim slučajevima jer svaki novi slajd briše sjećanje na predhodni. Posjetioci se mogu usredotočiti samo na jednu stvar u isto vrijeme. Vrlo je mali postotak posjetitelja web stranica koji klika po slajdovima, pa se na njih ne oslanjajte previše.

U karouselima točkice na mobilnim uređajima su teško vidljive a ako su klikabilne teško ih je pogoditi prstom pa ih izbjegavajte. Možda je alternativa točkicama na mobilnim uređajima prikaz malih sličica sa lijeve ili desne strane.

Ako je moguće, umjesto strelica za navigaciju koristite opisne oznake. Na ovaj način će opsjetioci web stranica znati što je na sljedećem ili prijašnjem slajdu. Automatski izmjenjivi slajdovi se trebaju izbjegavati ili zaustaviti kada se od posjetioca očekuje neka interakcija.

Akordeoni

Akordione koristite kada je nužno komprimiranje dugog sadržaja. Svakako omogućite skupljanje proširenog sadržaja.

Korištenje akordiona ima prednosti kod mobilnih uređaja jer se kraće stranice lakše koriste od skokova na web stranici.

Pomoć i savjeti

Svaka web stranica bi trebala biti intuitivna. Posjetitelji nerado koriste pomoć za korištenje web stranica. Ako je to ipak nužno i potrebno ponudite pomoć u obliku vodiča ili često postavljenih pitanja.

Pomoć i upute bi trebale biti kratke, vizualno različite od drugih elemenata sučelja i popračene grafičkim elementima, tamo gdje je to nužno.

Ikone

Ikone vizualno moraju opisati svoj cilj pa moraju biti jednostavne i prepoznatljive. Koristite ih samo kada je to potrebno, kada želite vizualno nešto istaknuti ili prikazati kao infografiku. Nikako ih nemojte koristiti samo radi ukrasa.

Čitljivost i preglednost

Čitljivost se ne odnosi na to možete li nešto pročitati i razmujeti nego želite li to pročitati. Većina posjetitelja web stranica prvo pregleda a zatim čita tekst na web stranicama. Složite tekstove tako da su vizualno različiti kako biste olakšali pregledavanje i time privukli posjetitelje da pročitaju tekst.

Povečati čitljivost znači koristiti veći razmak između stavki za nabrajanje, oznaka, linija i odlomaka. Odabir odgovarajućeg fonta prilikom izrade web stranica doprinosi čitljivosti. Pri tom vodite računa o čitljivosti fonta i stilovima. Izbjegavajte manje veličine slova i kondenzirane fontove u tijelu teksta.

Velike tekstove razdvojite u odlomke tako da je samo jedna misao u jednom odlomku..

Kod podešavanja za mobilne uređaje provjerite da lije veličina naslova odgovarajućeg omjera sa ostatkom sadržaja.

Ne koristite italic fontove, oni su teži za čitanje, i ne pišite VELIKIM SLOVIMA. Izbjegavajte pisanje samo VELIKIM SLOVIMA čak i kod naslova ili podnaslova. Kao i za italik fontove, ovo je također teže čitati.