Kad otvorite web stranicu, aplikaciju, webshop ili bilo koji drugi digitalni proizvod, prvo primjećujete ono što vidite i koristite na ekranu. To su gumbi, izbornici, kartice, ikone, obrasci, boje, raspored sadržaja i svi ostali elementi preko kojih komunicirate s proizvodom. Upravo se taj dio naziva UI.
UI ili korisničko sučelje ima važnu ulogu u tome kako korisnik doživljava web stranicu ili aplikaciju. Ako je sučelje jasno, logično i jednostavno za korištenje, korisnik će se lakše snaći, brže doći do informacije i imati bolji dojam o cijelom brendu. Ako je sučelje neuredno, zbunjujuće ili prenatrpano, korisnik će se brže frustrirati i vjerojatno otići.
UI je kratica za user interface, odnosno korisničko sučelje. To je prostor u kojem korisnik komunicira s digitalnim proizvodom. Najčešće se radi o zaslonu, ali može uključivati i zvuk, glasovne naredbe, animacije, povratne poruke sustava i druge interaktivne elemente.
Jednostavno rečeno, UI je sve ono što korisnik vidi i koristi kako bi obavio neku radnju. To može biti klik na gumb, otvaranje izbornika, upisivanje podataka u obrazac, pretraga proizvoda ili prelazak na drugu stranicu.
Primjerice, kada korisnik na webshopu klikne na gumb „Dodaj u košaricu“, koristi dio korisničkog sučelja. Kada na mobilnoj aplikaciji otvori izbornik, filtrira proizvode ili pošalje upit putem obrasca, i dalje komunicira s UI-jem.
Cilj UI dizajna nije samo da nešto izgleda lijepo. Njegov je zadatak omogućiti korisniku da se lako snađe, razumije što treba napraviti i bez poteškoća dođe do cilja.
UI dizajner oblikuje vizualne i interaktivne elemente digitalnog proizvoda. To uključuje raspored sadržaja, stil gumba, izgled obrazaca, navigaciju, ikone, kartice, boje, tipografiju i druge detalje koji utječu na korištenje proizvoda.
Drugim riječima, UI dizajner osmišljava kako će proizvod izgledati i kako će korisnik komunicirati s njim na ekranu.
To ne znači samo biranje boja i fontova. Dobar UI dizajn uključuje i razumijevanje ponašanja korisnika, poznatih obrazaca korištenja i logike iza svakog elementa.
Ako korisnik na web stranici restorana želi brzo rezervirati stol, UI dizajner će paziti da obrazac za rezervaciju bude lako uočljiv, da polja budu jasna i da cijeli proces traje što kraće.
Primjer: Batak online rezervacije
UI i UX se često spominju zajedno, ali ne znače isto.
UI se odnosi na vizualne i interaktivne elemente koje korisnik vidi i koristi. UX, odnosno korisničko iskustvo, odnosi se na širu sliku, tj. kako se korisnik osjeća tijekom korištenja proizvoda, koliko mu je sve jasno, brzo i logično.
UI je, pojednostavljeno rečeno, ono što korisnik vidi. UX je ono što korisnik doživljava.
Zamislite webshop s lijepim bojama, modernim fontovima i urednim karticama proizvoda. To je UI. Ali ako korisnik ne može lako pronaći dostavu, ne razumije korake kupnje ili mu je proces naplate kompliciran, UX nije dobar.
Dobar UI ne može u potpunosti nadoknaditi loš UX, ali ni dobar UX ne može ostaviti jak dojam bez kvalitetnog sučelja. Zato UI i UX u praksi moraju surađivati.
UI dizajn uključuje:
To je dio koji korisnik izravno vidi na web stranici ili u aplikaciji.
UX dizajn uključuje:
UX određuje koliko koraka korisnik mora proći da bi poslao upit, a UI određuje kako će ti koraci izgledati na ekranu.
Korisničko sučelje ima velik utjecaj na prvi dojam, korištenje i rezultate digitalnog proizvoda. Ako korisnik odmah vidi da je stranica jasna, uredna i jednostavna za korištenje, veća je vjerojatnost da će ostati duže, pregledati sadržaj i napraviti željenu radnju.
Dobar UI je važan jer:
Kad je sučelje logično i poznato, korisnik se ne mora dodatno snalaziti. Lakše dolazi do informacija, proizvoda ili usluge.
Korisnik očekuje da kontakt, lokaciju i obrazac za ponudu pronađe brzo i bez traženja po više podstranica.
Primjer: Atauctus web stranica
Vizualni dojam često utječe na to kako korisnik doživljava cijeli brend. Neuredno ili zastarjelo sučelje može ostaviti dojam neozbiljnosti, čak i ako je usluga kvalitetna.
Ako je korisniku jednostavno pronaći proizvod, poslati upit ili rezervirati termin, veća je šansa da će to stvarno napraviti.
Primjerice, webshop s jasnim filtrom, vidljivom cijenom, preglednom košaricom i jednostavnom naplatom ima veće šanse za prodaju od webshopa koji izgleda zbunjujuće i traži previše klikova.
Kad sučelje ne stvara prepreke, korisnik ima osjećaj kontrole. To je posebno važno kod obrazaca, prijava, kupnje i svih radnji koje uključuju više koraka.
Cilj svakog korisničkog sučelja je olakšati interakciju između čovjeka i proizvoda. No ta interakcija ne mora uvijek izgledati isto. Ovisno o uređaju i načinu korištenja, postoje različite vrste korisničkih sučelja.
GUI je najčešći oblik korisničkog sučelja. Temelji se na vizualnim elementima kao što su ikone, prozori, gumbi, kartice i izbornici.
To je sučelje koje koristite kada pregledavate web stranicu na računalu, koristite mobilnu aplikaciju ili upravljate webshopom.
To mogu biti početna stranica web shopa, izbornik na web stranici restorana ili sučelje internet bankarstva.
Primjer: e-Kupi početna stranica
VUI omogućuje upravljanje sustavom pomoću glasa. Korisnik daje naredbe glasom, a sustav odgovara ili izvršava radnju.
Najpoznatiji primjeri su Siri, Alexa i Google Assistant.
Primjer: Siri
Ovakvo sučelje je korisno kada korisnik ne želi ili ne može koristiti ekran i tipke, primjerice u vožnji ili pri korištenju pametnih uređaja u domu.
Kod ove vrste sučelja korisnik upravlja sustavom pokretima tijela, ruke ili prstiju. Najčešće se koristi kod uređaja proširene stvarnosti i virtualne stvarnosti, ali i kod zaslona osjetljivih na dodir.
Neki od najčešćih su: povećavanje slike prstima na mobitelu, upravljanje sadržajem u AR aplikaciji i korištenje VR naočala.
Primjer: povećavanje i smanjivanje u Google Mapsu
Dobro korisničko sučelje sastoji se od niza elemenata koji zajedno čine jasnu i funkcionalnu cjelinu. Iako ih korisnici često uzimaju zdravo za gotovo, upravo oni u velikoj mjeri određuju koliko će proizvod biti jednostavan za korištenje.
Kontrole unosa služe za to da korisnik može unijeti podatke ili pokrenuti određenu radnju.
To uključuje:
Kada korisnik na webshopu bira veličinu proizvoda ili potvrđuje uvjete kupnje, koristi kontrole unosa. Isto vrijedi i za kontakt stranicu, gdje upisuje ime, e-mail i poruku.
Primjer: Atauctus kontakt forma
Informacijske komponente korisniku daju povratnu informaciju ili dodatno objašnjenje.
To mogu biti:
Ako korisnik učitava dokument ili završava online prijavu, traka napretka mu pokazuje dokle je stigao. Ako pogrešno upiše e-mail adresu u obrazac, poruka ispod polja treba jasno objasniti što nije u redu.
Primjer: pogreška prilikom Facebook prijave
Navigacijske komponente pomažu korisniku da se kreće kroz sadržaj i razumije gdje se nalazi.
To uključuje:
Na većem webshopu korisniku je puno lakše snaći se ako može koristiti pretragu, filtere i jasne kategorije nego da sve proizvode mora pregledavati ručno.
Primjer: ASOS
Njihova je uloga grupirati povezane elemente i održavati sučelje urednim i preglednim. Oni određuju širinu sadržaja, razmake, poravnanja i strukturu pojedinih dijelova stranice.
Primjeri kontejnera su:
Primjer: Zara kartica proizvoda
Dobro korisničko sučelje se ne temelji samo na estetici. Iza njega stoje principi koji pomažu da sučelje bude jasno, logično i ugodno za korištenje.
Korisnik treba imati osjećaj da zna što radi i što će se dogoditi nakon njegova klika ili unosa. Sučelje ne smije djelovati nepredvidljivo.
Ako korisnik pošalje obrazac, treba odmah dobiti jasnu potvrdu da je poruka uspješno poslana. Ako briše stavku iz košarice, dobro je omogućiti opciju poništavanja radnje.
Primjer: Zalando - poništavanje uklonjenog proizvoda
Isti elementi se trebaju ponašati na isti način kroz cijelu stranicu ili aplikaciju. Ako je jedan gumb plav i označava primarnu radnju, onda i drugi primarni gumbi trebaju izgledati slično.
Dosljednost se odnosi na:
Primjerice, nije dobro da na jednoj stranici gumb za slanje bude „Pošalji“, na drugoj „Potvrdi“, a na trećoj „Nastavi“, ako sve rade praktički istu stvar.
Sučelje treba biti ugodno i bez nepotrebnog napora. To znači da elementi trebaju biti dovoljno veliki za klik, tekst čitljiv, razmaci uredni, a sadržaj logično raspoređen.
To je posebno važno na mobitelima, gdje korisnik koristi prst, a ne miš. Premali gumbi, prenatrpan sadržaj i loš razmak brzo stvaraju frustraciju.
Korisnik ne bi trebao previše razmišljati o osnovnim radnjama. Što je sučelje jasnije i jednostavnije, to je manje mentalnog napora potrebno za korištenje.
To znači da treba:
Primjerice, ako stranica odmah prikazuje deset različitih CTA gumba, iskačući prozor, više bannera i nekoliko boja koje se natječu za pažnju, korisnik će se teže fokusirati.
Dobar UI ne nastaje slučajno. Potrebno je razumjeti korisnike, promatrati kako koriste proizvod i stalno poboljšavati detalje koji utječu na jasnoću i jednostavnost korištenja.
Svaki element na stranici treba imati svoju svrhu. Ako ne pomaže korisniku da lakše dođe do cilja, vjerojatno mu nije ni potreban.
Ako korisnik dolazi na stranicu kako bi rezervirao termin, onda obrazac za rezervaciju, kontakt i usluge trebaju biti vidljivi i lako dostupni.
Primjer: CARWIZ rent a car
Pogledajte kako korisnici koriste slične proizvode, što očekuju i gdje najčešće zapinju. Korisne informacije možete dobiti iz recenzija, anketa, korisničkih upita ili analitike ponašanja na stranici.
Ako korisnici redovito pitaju gdje se nalaze cijene, radno vrijeme ili kontakt, to je znak da ti elementi nisu dovoljno jasno postavljeni u sučelju.
UI dizajn nije samo uljepšavanje ekrana. Njegov zadatak je rješavanje problema.
Primjerice, ako korisnici često napuštaju košaricu, možda problem nije u proizvodu ili cijeni, nego u tome što je proces kupnje predug, gumb za nastavak nije vidljiv ili je forma previše komplicirana.
Dobar UI treba biti pristupačan i uključiv. To znači da sadržaj mora biti čitljiv, kontrast dovoljno jak, redoslijed elemenata logičan, a navigacija jasna.
Primjerice, osobe sa slabijim vidom trebale bi bez većih poteškoća pročitati tekst, prepoznati poveznice i koristiti osnovne funkcije stranice.
Dobar UI može napraviti veliku razliku u tome kako korisnici doživljavaju vašu web stranicu ili aplikaciju. Jasno, pregledno i logično sučelje ne utječe samo na izgled, nego i na to koliko će se korisnici zadržati, koliko će im korištenje biti jednostavno i hoće li na kraju poslati upit, rezervirati termin ili obaviti kupnju.
Ako želite web stranicu koja je funkcionalna, intuitivna i prilagođena korisnicima, naša agencija za web dizajn vam može pomoći. Javite nam se online ili na +385 99 368 6979 i zajedno ćemo izraditi sučelje koje izgleda profesionalno i radi u korist vašeg poslovanja.
Kontaktirajte nas online klikom na gumb ispod ili nazovite broj: +385 (0)99 368 6979.
