UX/UI i dizajn terminologija

Ulazite u svet digitalnog dizajna i nailazite na termine kao što su UX, UI, persona, wireframe, a niste sigurni šta tačno znače? Niste jedini. Granice između različitih disciplina dizajna često deluju nejasno, a specifična UX/UI terminologija može delovati zbunjujuće za početnike.

U ovom tekstu objašnjavam neke od najčešćih pojmova na koje možete naići. Prolazim kroz osnove: šta je UX, šta je UI, a šta grafički dizajn. Na kraju dajem rečnik ključnih termina koji će vam pomoći da se lakše sporazumevate sa dizajnerima, programerima i klijentima.

Šta je UX dizajn? Razumevanje korisničkog iskustva

UX dizajn (User Experience Design), ili dizajn korisničkog iskustva, je proces stvaranja proizvoda koji su korisni, laki za upotrebu i prijatni za interakciju. Fokus nije na tome kako proizvod izgleda, već kako se korisnik oseća dok ga koristi.

Zamislite da gradite kuću. UX dizajner je arhitekta. On ne bira boju zidova, već planira raspored prostorija, osigurava da su hodnici dovoljno široki, da su vrata na pravom mestu i da se kroz kuću krećete logično i bez napora.

Cilj UX dizajna je da odgovori na sledeća pitanja:

• Da li je ovaj proizvod koristan? Da li rešava stvarni problem korisnika?

• Da li je upotrebljiv? Mogu li korisnici da lako ostvare svoj cilj?

• Da li je dostupan? Mogu li ga koristiti i osobe sa invaliditetom ili drugim ograničenjem, trajnim ili privremenim?

• Da li je prijatan za korišćenje? Da li upotreba samog proizvoda stvara osećaj zadovoljstva?

UX proces često uključuje istraživanje, analizu i testiranje kako bi se osiguralo da finalni proizvod ispunjava potrebe ciljne publike.

Šta je UI dizajn? Vizuelni deo interfejsa

UI dizajn (User Interface Design), ili dizajn korisničkog interfejsa, bavi se vizuelnim izgledom i interaktivnim elementima proizvoda. Vratimo se na primer izgradnje kuće. Ako je UX dizajner arhitekta, UI dizajner je dizajner enterijera. On bira boje, nameštaj, materijale i dekoraciju kako bi prostor bio estetski privlačan i funkcionalan.

UI dizajner je odgovoran za sve što korisnik vidi i sa čime vrši bilo koji oblik interakcije na ekranu ili van njega. Neki elementi kojima se bavi UI dizajner su:

• Dugmad: Kako izgledaju, gde se nalaze.

• Ikone: Jasne, prepoznatljive i u skladu sa brend identitetom.

• Tipografija: Odabir fontova i njihova veličina radi čitljivosti, njihov odnos i hijerarhija.

• Paleta boja: Usklađenost sa brendom i psihologijom boja kako bi se postigao najbolji efekat prema korisnicima.

• Raspored elemenata: Vizuelna hijerarhija koja vodi korisnika do željenog cilja.

Ukratko, šta je UI? To je veza koja korisniku omogućava da stupi u interakciju sa proizvodom. Dobar UI je intuitivan, konzistentan i estetski privlačan.

UX i UI: ključne razlike (i kako rade zajedno)

Iako su usko povezani, UX i UI nisu ista stvar. Razlika između UX i UI je jedna od najčešćih tema diskusije. Proizvod može imati prelep UI, ali ako je UX loš (npr. komplikovana navigacija), korisnici će ga brzo napustiti. Suprotno, proizvod sa odličnim UX-om, ali lošim UI-jem, može delovati neprofesionalno i odbojno.

Najbolji proizvodi imaju i jedno i drugo.

A gde se tu uklapa grafički dizajn?

Grafički dizajn je široka disciplina koja se fokusira na vizuelnu komunikaciju i prezentaciju. Njegov primarni cilj je da prenese poruku publici koristeći tipografiju, slike, boje i forme.

Dok se UX/UI dizajn primarno bavi interaktivnim digitalnim proizvodima (aplikacije, web-sajtovi), pojam grafički dizajn obuhvata mnogo širi spektar, uključujući:

• Brendiranje: Dizajn logotipa, vizitkarti, memoranduma i drugih materijala koji čine neki brend.

• Marketing materijali: Brošure, flajeri, bilbordi, oglasi.

• Dizajn ambalaže.

• Grafike za društvene mreže.

Grafički dizajner može raditi na elementima UI dizajna (npr. kreirati ikone ili ilustracije), ali njegov fokus je na statičnoj vizuelnoj komunikaciji, dok je UI dizajner fokusiran na interaktivnost i funkcionalnost unutar digitalnog okruženja.

Ključna UX terminologija koju treba da znate

Ovo su neki od osnovnih UX termina koje ćete često sresti.

Persona

Persona je fiktivni lik kreiran na osnovu istraživanja (u procesu koji se naziva UX research), koji predstavlja tipičnog korisnika vašeg proizvoda. Pomaže timu da se fokusira na potrebe i ciljeve stvarne publike, a ne na sopstvene pretpostavke. Persona ima ime, godine, zanimanje, ciljeve i frustracije.

User journey map

Ovo je vizuelni prikaz svih koraka i emocija kroz koje korisnik prolazi dok koristi vaš proizvod ili uslugu da bi ostvario određeni cilj. Mapa putovanja pomaže u identifikaciji bolnih tačaka i prilika za poboljšanje.

Wireframe

Wireframe je osnovni, pojednostavljeni (low fidelity) prikaz strukture web stranice ili aplikacije. Fokusiran je isključivo na raspored elemenata, hijerarhiju informacija i funkcionalnost, bez boja, fontova i slika. To je kao nacrt ili kostur dizajna.

Low fidelity

Low fidelity dizajn predstavlja ranu i pojednostavljenu verziju dizajna. Njegova svrha je da brzo prikaže raspored elemenata, tok korisnika i osnovnu funkcionalnost, bez gubljenja vremena na boje, tipografiju ili vizuelne efekte. Ovakav pristup omogućava brzu iteraciju, lakšu saradnju sa timom i povratne informacije u najranijoj fazi razvoja. Zbog svoje jednostavnosti, idealan je za testiranje ideja, rešavanje problema i definisanje pravca pre ulaganja u finalni dizajn.

High fidelity

High fidelity dizajn predstavlja detaljno razrađenu i vizuelno finalizovanu verziju proizvoda ili interfejsa. U ovoj fazi definišu se tipografija, boje, stilovi, razmaci, animacije i kompletan vizuelni identitet, dok funkcionalnost i korisnički tok izgledaju gotovo kao kod gotovog proizvoda. Ovakvi prototipi omogućavaju realističan prikaz korisničkog iskustva, precizno testiranje i jasnu komunikaciju sa naručiocima ili programerima. Ovaj nivo vernosti se koristi kada je koncept potvrđen i spreman za finalne dorade, prezentaciju ili razvoj.

Prototip (prototype)

Prototip je interaktivni model finalnog proizvoda koji se koristi za testiranje pre nego što počne programiranje. Može biti low fidelity (klikabilni wireframe) ili high fidelity, koji izgleda i funkcioniše skoro kao pravi proizvod.

Usability testing

To je proces posmatranja stvarnih korisnika dok koriste vaš proizvod kako bi se identifikovali problemi u upotrebljivosti. Učesnicima se daju zadaci, a dizajneri prate gde nastaju problemi, zbunjenost ili frustracija.

Osnovni UI termini

Slede UI termini koji opisuju vizuelni deo dizajna.

Dizajn sistem

Dizajn sistem je centralizovana kolekcija svih komponenti, pravila i standarda koji se koriste u kreiranju proizvoda. Uključuje sve: od boja i tipografije do specifičnih dugmadi i formi. Njegov cilj je da osigura konzistentnost i ubrza proces dizajna i razvoja.

Paleta boja

Set boja koje se koriste u dizajnu interfejsa. Dobra paleta je usklađena sa brendom i koristi se strateški da izazove određene emocije i usmeri pažnju korisnika (npr. korišćenje jarke boje za glavne pozive na akciju).

White space

Prazan prostor između elemenata na ekranu. Beli prostor/white space (koji ne mora biti beo) je ključan za čitljivost, organizaciju i smanjenje vizuelne buke. Daje elementima prostora da dišu.

Responzivni dizajn

Pristup dizajnu koji omogućava da se web-sajt ili aplikacija automatski prilagođava različitim veličinama ekrana, od desktop monitora do tableta i mobilnih telefona. Cilj je pružiti optimalno iskustvo na svakom uređaju.

Hijerarhija

Vizuelna hijerarhija je princip organizovanja elemenata kako bi se jasno pokazala njihova važnost. Najvažniji elementi (npr. naslov) su veći, deblji ili drugačije boje kako bi privukli pažnju pre manje važnih (npr. sporedni tekst).

Šta treba zapamtiti

Razumevanje osnovne UX/UI i dizajn terminologije je prvi korak ka stvaranju boljih digitalnih proizvoda. Sada znate da UX dizajn postavlja temelje i osigurava funkcionalnost, UI dizajn daje vizuelni izgled i čini interakciju prijatnom, dok grafički dizajn služi široj svrsi vizuelne komunikacije.

Ovi termini nisu samo stručni žargon. Iza njih stoje koncepti koji vode proces stvaranja proizvoda koje će korisnici voleti. Sledeći put kada čujete reč „wireframe“ ili „persona“, znaćete tačno o čemu se radi.

Kako to izgleda na stvarnom projektu pokazuje dizajn mobilne aplikacije eNovcanik.

Imate ideju za aplikaciju ili web-sajt, ali niste sigurni odakle da počnete? Mogu da vam pomognem da je pretvorite u funkcionalan i lep digitalni proizvod. Javite mi se za besplatne konsultacije.