Odjel za matematiku
Seminarski rad iz predmeta
3.1. Proces oblikovanja korisnikog suelja ............................................................................... 6
3.2. Zahtjevi na korisniko suelje ............................................................................................. 8
4. Dizajn ........................................................................................................................................ 11
4.2.1. Faze dizajniranja korisnikog doivljaja .................................................................... 15
6. Zakljuak................................................................................................................................... 19
Izgradnja korisnikog suelja softverskog proizvoda kljuna je za njegov uspjeh. Pretpostavimo
da se nalazimo u situaciji vlasnika vrhunske ideje koju elimo pretoiti u vrhunski softverski
proizvod. Ideja koju elimo realizirati u obliku softvera nije potrebna nama kao vlasniku, niti timu
ljudi koji e razvijati softver (engl. developer team). Pretpostavimo da softverski proizvod
stvaramo za svoje korisnike. Pod time mislim da bi proizvod koji planiramo isporuiti trebao biti
koristan i privlaan velikom broju ljudi razliitih spektara osobnosti, stavova, principa, potreba i
naina shvaanja kvalitete proizvoda.
Bez obzira na to kakvu vrhunsku ideju i proizvod stvaramo te koje sve tehnologije koristimo za
razvoj softvera, proizvod nee biti uspješno isporuen ako su korisnici njime zbunjeni, teško im je
razumjeti nain ponašanja proizvoda ili on ostavlja negativan utjecaj na cjelokupno iskustvo pri
korištenju. U ovom sluaju, dobro korisniko suelje moe se opisati kao razlika izmeu uspješnog
i neuspjelog proizvoda.
razvijanja softverskog produkta i upoznati itatelje sa procesima i nainima oblikovanja
softverskog korisnikog suelja. Takoer, poeljno je motivirati itatelje i potaknuti ih na dodatno,
samostalno istraivanje o temi koja se u radu obrauje.
Ovaj tekst nema cilj pokriti cjelokupu teoriju koja se krije iza izgradnje i oblikovanja korisnikog
suelja jer postoji mnogo raznih pristupa i metoda koji se koriste prilikom njegove izrade. Na izbor
metoda utjeu razni faktori od kojih su neki: veliina i zahtjevnost proizvoda koji trebamo
isporuiti, ciljne skupine koja e ga koristiti i u koju namjenu, vremensko trajanje u kojem je
proizvod potrebno isporuiti, nain upravljanja i pristupa koji se koriste pri njegovoj realizaciji i
slino.
Jednako tako, iako e neki principi i pravila kojih se treba drati biti opisani u nastavku te e biti
pojašnjena interakcija izmeu korisnika (ljudi) i raunala (engl. Human-Computer Interaction -
HCI) temeljem nekih smjernica i standarda koji se koriste pri tome, ovaj tekst nee pokriti podruja
psihologije, ergonomije, umjetnosti i ostalih slinih grana koja se koriste u svrhu poboljšanja
kvalitete korisnikog suelja, iako e neka biti spomenuta.
4
2. Korisniko suelje
Korisniko suelje (engl. User Interface – UI) je mjesto dodira na kojem se susreu softverski
sustav i njegov krajni korisnik. Mjesto ili prostor u kojem se odvija spomenuta interakcija izmeu
korisnika i raunala moemo zamisliti kao zaslon1 ureaja na kojem se sustav predstavlja kroz
njegov izgled i funkcionalnosti koje sadrava kako bi korisniku olakšao svakodnevne aktivnosti
(npr. rokovnik za praenje nadolazeih obaveza), posao (npr. softver za izradu blagajnikih
izvješa) ili zabavu (npr. raunalna ili mobilna igrica). To mjesto u kojem se odvija interakcija
nazivamo korisniko suelje i ono predstavlja bitnu poveznicu izmeu softverskog sustava i
njegovog korisnika. Korisniko suelje moe odbiti ili privui korisnika da koristi navedeni softver
te se ono izrauje zajedno u okviru istoimenog softvera.
2.1. Vrste korisnikih suelja
Kroz povijest, pojavom prvih raunala istovremeno se pojavljuju i prva korisnika suelja.
Dakako, korisniko suelje nastalo u ranim ’50.-tim godinama, neusporedivo je sa današnjim,
prvenstveno zato što korisnici nisu imali mogunost interakcije s raunalima u stvarnom vremenu2.
S obzirom na vrijeme nastanka i nain interakcije korisnika sa raunalnim sustavom, korisnika
suelja dijelimo na sljedei nain:
i. raunala na bušene kartice i njihovo korisniko suelje (engl. batch interface, 1945.)
ii. komandno suelje (engl. Command-Line Interface - CLI, 1969.)
iii. tekstualno korisniko suelje (engl.text-based user interface, 1985.)
iv. grafiko korisniko suelje (engl. Graphic User Interface - GUI, 1968.)
Takoer, korisnika suelja moemo kategorizirati po tipu, odnosno nainu na koji korisnik njima
upravlja od kojih su neka: hardverska suelja, suelja izravnog rukovanja, holografska korisnika
suelja, inteligentna korisnika suelja i sl.
2.2. Grafiko korisniko suelje
Grafiko korisniko suelje (engl. graphical user interface - GUI) je nain interakcije ovjeka
s raunalom kroz manipulaciju grafikim elementima i dodacima uz pomo tekstovnih poruka i
obavijesti. GUI programi prikazuju vizualne elemente poput:
• ikona (sliice na desktopu, tj. pozadini)
• prozora
• okviri za unos teksta
1 Korisniko suelje se korisniku realizira kroz zaslon ureaja koji on koristi, to ne znai da je fiziki zaslon ureaja
korisniko suelje nego samo medij kroz koji se suelje oituje. 2 engl.” real time”, oznaava stvarno vrijeme u kojem se neki proces ili dogaaj odvija.
5
• potvrdni okvir (kvadratii za odabir i tipa - mogue je odabrati više kvadratia –
(engl. check box))
• radijski gumb (kruii za odabir ili tipa - mogue je odabrati samo jedan krui –
(engl. radio button))
Grafiko korisniko suelje najrasprostranjenije je korisniko suelje i danas se znaajno koristi.
Ono pojednostavljuje korištenje softvera inei sve funkcije dostupnima unutar vizualnog suelja
(zaslona). Ono predstavlja niz razliitih prikaza i interakcijskih tehnika povezanih u zajedniki
sustav, odnosno skup elemenata – objekata – koji se mogu vidjeti, dodirnuti, uti ili na neki drugi
nain doivjeti, a ija je svrha provoenje odreenih operacija i zadaa.
Neke varijacije grafikih korisnikih suelja su suelja upravljana glasom (engl. voice user
interface), suelja upravljana dodirom (engl. touch user interface) te internetska korisnika suelja
(engl. web-based user interfaces).
2.3. Vanost korisnikog suelja
suelja poprima znaajnu vanost u skladu sa oekivanjima korisnika. Mobilni telefoni postaju
središte svakodnevice mnogih ljudi, a rastom tehnologije i mogunostima koje ona prua sve više
vremena trošimo drei mobilni ureaj u rukama i gledajui u njegov sadraj. Razvojem interneta
i ostvarivanjem komunikacije i mnogih slinih iskustava koje korisnik moe doivjeti putem svog
mobilnog ureaja i internetske veze, korisnici postaju zahtjevniji i njihova oekivanja svakim
danom rastu. Dakle, kako se razvija tehnologija tako se razvija i društvo.
Vrlo je vano softverski produkt predstaviti korisniku na jedinstven i originalan nain, a pruiti
mu kvalitetu i pozitivno iskustvo jer se tako postie povjerenje. Pri kreiranju bilo kakvog
korisnikog suelja vano je pratiti, planirati i prilagoavati korisnikovo kretanje kroz sustav, te
to kretanje uiniti što kraim i jednostavnijim. Ukoliko ignoriramo zahtjeve korisnika, dolazi do
zbunjivanja i frustriranja istih, pa ni vizualno najljepše suelje nee pomoi pri tom kretanju.
Estetski bogato suelje bogato je jedino u onom trenutku kada ispunjava potrebu korisnika, te kada
je potreba korisnika jedna od zadaa softverskog proizvoda. Primarni cilj pri oblikovanju
korisnikog suelja treba biti najbolja mogua iskoristivost, lakoa upotrebe te zadovoljstvo
steknuto korištenjem proizvoda.
3. Oblikovanje korisnikog suelja3
Prvo i osnovno je vano razumjeti koncept projekta, to znai zapoeti istraivanje poslovne
domene, ciljanih korisnika, dionika te postii razumijevanje „za što“ i „kako“ e se softver koristiti.
Openito, cilj oblikovanja korisnikog suelja je stvaranje korisnikog suelja koje je djelotvorno,
3 U nastavku teksta termin “suelje” oznaava grafiko korisniko suelje.
6
ugodno i jednostavno za uporabu, te korisno i privlano. Rezultat oblikovanja korisnikog suelja
njegov je dizajn.
3.1. Proces oblikovanja korisnikog suelja
Prije nego se osvrnemo na proces oblikovanja korisnikog suelja potrebno je proi kroz neke
ranije faze i poznavati one koje slijede:
i. istraivanje i analiza korisnika i korisnikih zahtjeva
ii. planiranje i formiranje prototipa
iii. inspekcija i validacija prototipa
iv. dizajniranje korisnikog suelja
Slika 1 Grafiki dijagram faza u procesu oblikovanja korisnikog suelja
Dobro osmišljeno korisniko suelje jedan je od kljunih imbenika koji odreuje kriterij
zadovoljstva softvera kod korisnika. Kvalitetno korisniko suelje poiva na dobroj organizaciji
sadraja, ekonominom nainu prikaza svake komponente, uinkovitom korištenju vizualnih
elemenata i djelotvornoj interakciji. Prilikom izrade korisnikog suelja, treba se voditi trima
osnovnim principima:
ii. maksimizirati uinkovitost minimalnog broja zadataka
iii. prezentaciju prilagoditi mogunostima korisnika
7
Slika 2 Vizualni prikaz nekih od pristupa pri izradi korisnikog suelja
Kvalitetno suelje mora osigurati primjeren prijelom teksta, itkost, pozadinu koja nije napadna i
upadljiva, primjerenu tipografiju te mogunosti višeslojnih prikaza, višestruke naine prezentacije
podataka, višestruke apstrakcije, simultane alternativne prikaze i linkove i sl.
Dobar dizajn korisnikog suelja potie jednostavnu i prirodnu interakciju korisnika i sustava i
pomae korisniku da izvrši zadane zadatke. S druge strane, loše dizajnirano korisniko suelje
moe uzrokovati pogreške korisnika pri korištenju sustava.
Slika 3 Primjer nekonzistentnog suelja (lijevo) i konzistentnog suelja (desno)
8
Kako bi proizvod udovoljio najvišim standardima upotrebe i meunarodnim standardima
certificiranja (ISO standarde4) vrlo je bitno poznavati zahtjeve koje softver treba ispuniti.
Poštivanje spomenutih standarda pomae u stvaranju proizvoda i usluga koji su sigurni, pouzdani
i dobre kvalitete. Takvi standardi pomau tvrtkama poveati produktivnost istovremeno
smanjujui pogreške. Ispunjavanjem postavljenih meunarodnih standarda osigurava se ISO
certifikacija proizvoda koja dokazuje usmjerenost ka stalnim poboljšanjima proizvoda,
konzistentnosti pri njegovoj izradi, te zadovoljstvu i zaštiti korisnika. Prema tome, karakteristike
softvera i njegovog korisnikog suelja u smislu zahtjeva sadranih u sedam principa iz dijela 10
ergonomskog standarda ISO 9241 su:
1. Prikladnost za zadatak5: suelje se smatra prikladnim za zadatak kada podrava korisnika
u uinkovitom6 i efikasnom7 dovršenju zadatka.
2. Samoopisivost: suelje se smatra samoopisivim kada je svaki korak u suelju odmah
razumljiv putem povratnih informacija iz sustava ili je objašnjen korisniku na zahtjev.
3. Kontrolabilnost: suelje je kontrolabilno kada korisnik moe pokrenuti i kontrolirati
smjer i tempo interakcije do toke u kojoj je cilj8 postignut.
4. Sukladnost s oekivanjima korisnika: suelje je u skladu s oekivanjima korisnika kada
je dosljedno i odgovara korisnikim znaajkama, kao što su poznavanje zadataka,
obrazovanje, iskustvo i obino prihvaene konvencije.
5. Tolerancija pogreške: suelje je tolerantno na pogrešku ako unato evidentnim
pogreškama u ulazu namjeravani rezultat moe biti postignut bilo bez ili sa minimalno
akcije od strane korisnika.
mijenjati tako da odgovara potrebama zadataka koji se izvršavaju, individualnim
preferencijama i vještinama korisnika.
7. Prikladnost za uenje: suelje je pogodno za uenje kada podrava i vodi korisnika u
uenju korištenja sustava.
4 ISO ( engl. International Organization for Standardization) je meunarodna organizacija za standardizaciju nastala
1947. u enevi u Švicarskoj. 5 Zadatak je skup aktivnosti koje korisnik treba izvršiti kako bi postigao eljeni cilj. 6 Uinkovitost predstavlja omjer potrošenih resursa u odnosu na tonost i potpunost kojoj korisnici ostvaruju ciljeve. 7 Efikasnost opisuje tonost i potpunost kojom korisnici ostvaruju ciljeve. 8 Cilj predstavlja namjeravani ishod.
9
Koncept upotrebljivosti definira se prema standardu ISO 9241 dio 11. On daje sljedeu
karakterizaciju upotrebljivosti:
i. Upotrebljivost9 se izraava u mjeri u kojoj su ostvareni ciljevi korištenja cjelokupnog
sustava - efikasnost
ii. Resursi koji se moraju potrošiti za postizanje ciljeva - uinkovitost
iii. Opseg u kojem korisnik pronalazi cjelokupni sustav prihvatljiv - zadovoljstvo
Efikasnost, uinkovitost i zadovoljstvo mogu se smatrati faktorima kvalitete upotrebljivosti
softvera.
Slika 4 Proces oblikovanja korisnikog suelja usredotoenog na korisnika
Slika 5 Shematski prikaz odnosa meu procesima kako bi se postiglo maksimalno zadovoljstvo korisnika
9 Upotrebljivost opisuje u kojoj mjeri odreeni korisnici mogu koristiti proizvod kako bi postigli ciljeve odreene
uinkovitosti (uinkovitost i zadovoljstvo u odreenom kontekstu korištenja).
10
Putem korisnikog suelja prezentiramo informacije korisniku. Nain prezentacije informacija
opisan je u dijelu 12, ISO 9241 standarda za organizaciju informacija (raspored, poravnanje,
grupiranje, oznake, mjesto) te za prikazivanje grafikih objekata i informacija (kratica, boja,
veliina, oblik, vizualni znakovi) pomou sedam atributa:
1. Jasnoa sadraja: sadraj informacija prenosi se brzo i precizno.
2. Razliitost informacija: prikazane informacije mogu se tono razlikovati prema
kontekstu.
4. Dosljednost: konzistentan dizajn, sukladan s oekivanjima korisnika.
5. Detekcija: pozornost korisnika usmjerena je prema potrebnim informacijama.
6. itkost i itljivost: informacije su lako itljive i pregledne.
7. Lakoa razumijevanja: znaenje je jasno razumljivo, nedvosmisleno i prepoznatljivo.
Slika 6 Primjer dobro (desna strana) i loše (lijeva strana) postignutog kontrasta boja
Slika 7 Na slici lijevo- loš kontrast boja i tekst koji je teško uoljiv i itak.
Na slici desno- dobro iskontroliran kontrast boja i itkost teksta.
11
Slika 8 Lijeva strana slike primjer je lošeg izbora boja jer svi gumbi lijevo oduzimaju jednaku panju korisnika i
korisnik ih doivljava jednako jakima. Desna strana slike dobar je izbor strukture i boje i manje je zbunjujua.
U dijelu 13 standarda ISO 9241 opisano je da se informacije za upute korisnika trebaju
razlikovati od ostalih prikazanih informacija i trebaju biti specifine za trenutni kontekst
uporabe. Upute za korisnike trebaju biti razvrstane na sljedeih pet kategorija:
1. Zahtjevi koji eksplicitno naznauju (odreene upute) ili implicitno (generiki upiti) da
je sustav dostupan za unos.
2. Povratne informacije koje daju informacije o korisnikom unosu pravodobno,
vidljivo i nenametljivo.
3. Informacije o statusu koje prikazuju ili opisuju trenutno stanje aplikacije, hardverske
i softverske komponente sustava i aktivnosti korisnika.
4. Upravljanje pogreškom ukljuujui prevenciju pogrešaka, ispravljanje pogrešaka,
korisniku podršku za upravljanje pogreškama i poruke (obavijesti) o pogreškama.
5. On-line pomo za korištenje sustava i pomo korisnicima kod izvršenja zadataka tako
da mu se omogue odreene potrebne informacije za trenutni kontekst korištenja.
4. Dizajn
4.1. Dizajniranje korisnikog suelja
Dizajn korisnikog suelja ili UI dizajn (engl. user interface design) je vizualna prezentacija
aplikacije, web stranice ili nekog drugog softverskog proizvoda iji je fokus na predvianjima
kako e korisnik koristiti softver. Jedan od baznih strukturalnih modela za izgradnju interaktivnih
sustava je referentni model IFIP korisnikog suelja. Model predlae etiri dimenzije za
strukturiranje korisnikog suelja:
iv. Organizacijska dimenzija (podrška komunikaciji i suradnji)
12
Slika 9 Vizualni prikaz modela 4 dimenzije
Ovaj je model u velikoj mjeri utjecao na razvoj meunarodnog ISO 9241 standarda koji opisuje
zahtjeve na dizajn suelja u okviru upotrebljivosti. Dizajniranje vizualne strukture i ponašanje
korisnikog suelja vaan je dio implementacije softvera na relaciji ovjek-raunalo (engl.
Human-Computer Interaction – HCI).
Metode dizajna usredotoene na korisnika (engl. User Centered Design – UCD) koriste se kako bi
se osigurala dobra prilagoenost vizualnog jezika korištenog u procesu dizajniranja sa zadacima
koje izvršavaju korisnici. Vaan aspekt HCI-a je osiguranje zadovoljstva korisnika i istraivanje
na temu poboljšanja komunikacije izmeu ovjeka i raunala. Sa gledišta raunala razmatraju se
nove tehnologije, tehnika raunalne grafike, operativnih sustava, programskih jezika i razvojnih
okruenja i sl. Iz perspektive ljudi i društva tu spada teorija komunikacije, grafike i industrijske
dizajnerske discipline, lingvistika, društvena znanost, kognitivna psihologija, socijalna psihologija
i razni ljudski imbenici i sl. HCl metoda se takoer ponekad naziva interakcija na relaciji ovjek-
stroj (engl. Human- Machine Interaction – HMI) ili interakcija na relaciji raunalo-ovjek (engl.
Computer- Human Interaction - CHI).
Loše dizajnirana suelja takvog tipa mogu dovesti do mnogih neoekivanih problema i katastrofa
(npr. loše dizajnirano suelje ili promjena standarnog tipa suelja u zrakoplovu moe uzrokovati
nepravilno rukovanje i izazvati zrakoplovnu nesreu). Dobar dizajn takvog korisnikog suelja
više se odnosi na korisnike, a manje na samu arhitekturu sustava. Naela dizajna korisnikog
suelja imaju za cilj poboljšati kvalitetu dizajna korisnikog suelja.
13
Slika 10 Gornji niz brojeva na slici - primjer lošeg izbora prikaza niza brojeva. Donji niz brojeva - primjer dobro
strukturiranog niza brojeva za prikaz korisniku.
Slika 11 Primjer dobrog nošenja sa greškom, Google Chrome browser nudi korisnicima mogunost oporavka od
pogreške.
Slika 12 Primjer lošeg dizajna za korisnike koji ne razlikuju crvenu i zelenu boju
Slika 13 Primjer dizajna prilagoenog i za korisnike koji ne razlikuju crvenu i zelenu boju
14
Prema amerikom znanstveniku Jef Raskin-u postoje dva zakona dizajna korisnikog suelja,
temeljena na izmišljenim zakonima robotike amerikog pisca Isaac Asimov-a:
1. Raunalo ne smije škoditi vašem radu ili svojom neaktivnošu dopustiti da se vaš rad ošteti.
(engl. „A computer shall not harm your work or, through inactivity, allow your work to
come to harm.“)
2. Raunalo ne smije trošiti vaše vrijeme niti zahtijevati od vas da obavite više posla nego što
je potrebno. (engl. „A computer shall not waste your time or require you to do more work
than is strictly necessary.“)
Njemaki industrijski dizajner Dieter Rams i njegov nenametljiv pristup i uvjerenje "manje je
više" generiraju bezvremensku kvalitetu dizajna njihovih proizvoda i utjeu na dizajn mnogih
drugih. Poznati su njegovi pricipi „dobrog dizajna“ (engl. „Good design“ principles). Rije je o
deset principa koje bi dobar dizajn trebao ispunjavati, a oni su redom:
1. Dobar dizajn je inovativan (engl. “Good design is innovative”)
2. Dobar dizajn ini proizvod korisnim (engl. “Good design makes a product useful”)
3. Dobar dizajn je estetski ugodan dizajn (engl. “Good design is aesthetic”)
4. Dobar dizajn ini proizvod razumljivim (engl. “Good design makes a product
understandable”)
5. Dobar dizajn je nenametljiv (engl. “Good design is unobtrusive”)
6. Dobar dizajn je iskren (engl. “Good design is honest”)
7. Dobar dizajn je dugotrajan (engl. “Good design is long-lasting”)
8. Dobar dizajn je temeljit i promišljen do najmanjih detalja (engl. “Good design is thorough
down to the last detail”)
9. Dobar dizajn je ekološki prihvatljiv (engl. “Good design is environmentally friendly”)
10. Dobar dizajn ukljuuje što je mogue manje “dizajna” (engl. “Good design involves as
little design as possible”)
4.2. Dizajniranje korisnikog doivljaja
Dizajn korisnikog doivljaja ili UX dizajn (engl. User eXperience design) je dizajn usmjeren na
postupak poveanja zadovoljstva korisnika, odnosno korisnikog doivljaja kroz proizvod
poboljšane upotrebljivosti i pristupanosti. Dizajn korisnikog doivljaja obuhvaa tradicionalni
dizajn na relaciji ovjek-raunalo (engl. „HCI“) i proširuje ga sagledavanjem svih aspekata
proizvoda ili usluge onako kako ih korisnici vide.
15
Podruje dizajna korisnikog doivljaja konceptualna je disciplina dizajna i ima svoje korijene u
ljudskim imbenicima i ergonomiji, polju koje se od kasnih etrdesetih godina prošlog stoljea,
usredotoava na interakciju izmeu ljudskih korisnika, strojeva i kontekstualnih okruenja za
dizajniranje sustava koji se bave iskustvom korisnika. Uz proliferaciju raunala na radnom mjestu
poetkom 1990-ih, korisniko iskustvo (doivljaj) postalo je briga za dizajnere. Donald Norman,
arhitekt korisnikih iskustava je izradio pojam "korisniko iskustvo/doivljaj" i uveo ga u širu
publiku.
“I invented the term because I thought human interface and usability were too narrow. I wanted
to cover all aspects of the person's experience with the system including industrial design
graphics, the interface, the physical interaction and the manual. Since then the term has spread
widely, so much so that it is starting to lose its meaning.”
— Donald Norman
Dizajn korisnikog doivljaja ukljuuje sve metode i pristupe koji maksimiziraju pozitivan utjecaj
na cjelokupno iskustvo koje osoba ima s odreenim interaktivnim sustavom i njegovim sueljem.
Takav dizajn naješe definira niz interakcija izmeu korisnika (pojedinane osobe) i sustava
(virtualnog ili fizikog), tako da zadovolji ili podri sve korisnike potrebe i ciljeve, a istovremeno
zadovolji zahtjeve sustava i ciljeve organizacije.
Kod dizajna korisnikog iskustva treba uzeti u razmatranje korisnika za kojeg se proizvod ili
usluga oblikuje, nacrte i crtee (engl. sketch and wireframe), prototip sa interaktivnim sadrajem
i simulacijama korisnikog ponašanja i pisanu specifikaciju koja opisuje ponašanje i dizajn.
Takoer, treba izraditi tijek i navigaciju ponašanja korisnika i funkcionalnosti softvera (engl. user
flow and navigation), prouiti upotrebu postojeih sredstava (revizija), precizirati vizualni
raspored informacija i oglasnog prostora, ako ga suelje sadri.
16
Prilikom dizajniranja proizvoda ili usluge za korisnika, od najvee je vanosti da su dizajneri i
korisnici „na istoj strani“, odnosno da je komunikacija i razumijevanje obostrano. Prije nego se
krene u završnu fazu dizajna potrebno je provesti detaljnu analizu, a potom i brojna testiranja kako
bi optimizirali softverski proizvod i kako bi se odrala prednost pred konkurencijom. Dizajner
korisnikog suelja trebao bi saznati što je mogue više o ljudima, procesima i proizvodima prije
faze dizajniranja. To moe uiniti tako da upozna svoje klijente ili poslovne partnere kako bi
saznao što su njihovi zahtjevi ili provodei intervjue s korisnicima u njihovom domu ili radnom
prostoru. Ova vrsta kvalitativnog istraivanja pomae dizajnerima stvoriti proizvod i uslugu koja
bolje slui korisnikim potrebama.
Nakon istraivanja dizajner treba znati ispravno protumaiti podatke koje je prikupio. Obino se
to radi putem modeliranja podataka o korisniku i njegovom okruenju. Modeliranje korisnika ili
osobe su kompozitni arhetipi temeljeni na obrascima ponašanja otkrivenih tijekom istraivanja.
Nakon što je model formiran, korisnik pomae dizajneru razumjeti njegove ciljeve u odreenim
kontekstima što je osobito korisno tijekom formiranja ideja i za validiranje koncepata dizajna.
Druge vrste modela ukljuuju modele rada, modele artikala i fizike modele.
Kada dizajner shvati korisnike potrebe i ciljeve, onda poinje skicirati okvir za interakciju-
prototip. Ova faza definira visoku razinu strukture zaslona kao i protok, ponašanje i organizaciju
proizvoda. Postoje mnoge vrste materijala koji mogu biti ukljueni u toj iteracijskoj fazi, od ploa
do papirnih prototipova. Okvir vizualnog dizajna definira atribute iskustva, vizualni jezik i vizualni
stil.
Nakon što se utvrdi vrsti i stabilni okvir za interakciju, on se prevodi iz skica na zaslone pune
rezolucije koje prikazuju korisniko suelje na razini piksela, odnosno onako kako e ih korisnik
vidjeti i koristiti na svome ureaju. U ovom trenutku, kljuno je što programerski tim blisko
surauje s dizajnerom. Njihova suradnja je neophodna za stvaranje gotovog dizajna koji moe i
biti e izgraen sve dok ostaje vjeran konceptu.
Ispitivanje upotrebljivosti provodi se kroz prototip. Ciljani korisnici dobivaju razliite zadatke za
izvoenje na prototipovima. Sve probleme ili problemi s kojima se suoavaju korisnici prikupljaju
se u bilješke, a te se bilješke koriste za izmjenu u dizajnu i ponovljenu fazu ispitivanja. Testiranje
upotrebljivosti je u svojoj sri sredstvo za procjenu, a ne stvaranje.
Slika 15 Primjer loše dizajniranog korisnikog suelja, United airlines (2013.)
17
Na gornjoj slici moe se uoiti zbunjujue i loše dizajnirano korisniko suelje zrakoplovne tvrtke
United airlines iz 2013.-e godine. Primjetimo, u sloenom padajuem izborniku (sasvim lijevo na
slici) meu ponuenim opcijama nalazi se „Use Award Miles“ mogunost izbora, a nekoliko linija
ispod nje nalazi se opcija „Book with Award Miles“. Obje od ponuenih opcija konceptualno
imaju jednako znaenje za korisnika, pa u tom sluaju kontekst nije jasan. Narušena je razliitost
informacija.
Uoimo, svaka od tih opcija referira se na akciju rezerviraj let, a niti jedna od njih se ne nalazi u
izborniku pod nazivom Rezervacije. Veina korisnika bi oekivala da e u izborniku Rezervacije
pronai opciju rezerviraj i/ili kupi kartu za novi let, uz na istom mjestu, ponuenu opciju
iskorištavanja bonus milja, ako korisnik to eli. Ovakvo suelje nema ispravnu hijerarhiju,
zbunjujue je, neorganizirano i frustrirajue za korisnike.
Takoer, postoje redudantne opcije. U sljedeem (desno) padajuem izborniku Rezervacije
ponuene su opcije „Make Flight Reservation“, „Make Hotel Reservation“ i „Make Cruise
Reservation“ svaka zasebno. Ne samo da to izbornik ini nepotrebno duljim i nepreglednijim za
korisnika, nego se postavlja pitanje zašto stranica zrakoplovne kompanije poklanja toliko prostora
sekundarnim opcijama kada veina korisnika koja dolazi na njihovu stranicu prvo eli rezervirati
let? Kada korisnik planira odmor, rezervacije hotela i slino su krajnji scenariji i ne bi trebali imati
jednak ili vei prioritet nad scenarijem rezerviranja leta, što bi trebao biti primarni cilj zrakoplovne
kompanije United airlines. Time je narušena jednostavnost dizajna te se komplicira izvršavanje
jednostavnih zadataka i produljuje vrijeme korisniku za dolazak do cilja.
Nakon prijave na poetnoj stranici sa osobnim podacima o letu, uz odabir opcije „Check Flight
Status“, korisniku se nudi mogunost uvida u stanje nadolazeeg leta. Opcija lijevo (odmah do
opcije „Check Flight Status“) nudi mogunost on-line „check-in“-a za pripadni let, ali ukoliko ju
korisnik odabere, suelje ponovno potrauje prijavu sa osobnim podacima iako je korisnik te
podatke ve unio. Suelje na taj nain moe izazvati frustraciju kod korisnika jer ga primorava da
istu radnju ponavlja uzastopno premda je korisnik ve prijavljen i rije je o istom letu. Uz još
mnoge nedostatke, ovako dizajnirano korisniko suelje vizualno zagušuje korisnika, postizanje
cilja putem takvog suelja je dugotrajno i umarajue za, raspored informacija nije hijerarhijski
grupiran i nepregledan je. Korisnik e vrlo vjerojatno odustati od rezervacije leta i potraiti neku
drugu kompaniju.
Slika 16 Primjer dobro dizajniranog korisnikog suelja, United airlines (2018.)
Na Slici 16 poboljšani je dizajn iste zrakoplovne kompanije – United airlines. Odmah se moe
uoiti poboljšana preglednost suelja, atraktivan izgled, jednostavnost i „prozranost“ prikaza
informacija. Suelje je izraeno tako da privlai korisnika – bojama, rasporedom informacija,
jednostavnošu i pristupanošu. Suelje je lako razumjeti i scenarij za rezervaciju leta je primarni
i prioritetni cilj koji je odmah dostupan korisniku. Ukratko, nedostaci i problemi ponašanja suelja
istoimene kompanije sa Slike 15 su uklonjeni ili barem poboljšani i podignuti na sasvim novu,
moderniju i korisniku dostupniju razinu za korištenje.
19
6. Zakljuak
Izgraditi i dobro oblikovati korisniko suelje temeljna je osnova za isporuku uspješnog
softverskog proizvoda. Jedan od klasinih primjera odlino osmišljenog korisnikog suelja jesu
Lego kocke. Uspješnost takvog (iako ne softverskog) proizvoda upravo je njihov dizajn suelja.
Vrlo jasan i konkretan primjer. Lego kocke su alat koji se koristi za zabavu i razvijanje kreativnosti
i mašte.
Suelje Lego kockica omoguuje spajanje elemenata i njihovu integraciju u sustave (formiranje
novih objekata) na nebrojeno mnogo razliitih naina. Oituje ih jednostavnost i lakoa korištenja,
a uporabna mo im je neiscrpna. Takvom nainu razmišljanja treba teiti dizajner prilikom
stvaranja ideje o formiranju korisnikog suelja za softver. Dizan suelja bavi se maksimizacijom
uspješne interakcije i zadovoljstva softvera i korisnika, na tehnikoj i funkcionalnoj razini. Zbilja,
dizajnirati kvalitetno i uspješno suelje nije lak zadatak i potrebno je utrošiti veliku koliinu
vremena i resursa u taj proces kako bi korisnik ostvario pozitivan korisniki doivljaj na temelju
kojega se stjee meusobno povjerenje i lojalnost. Negativno korisniko iskustvo uzrokuje
trenutno napuštanje i odlazak korisnika.
Dizajner korisnikog iskustva softvera je figurativno reeno – arhitekt – koji za rješavanje
problema istrauje i isprobava razliite pristupe rješavanju problema, jer jedinstveno rješenje ne
postoji. Dizajniranje korisnikog suelja je vizualni dio procesa u kojem se oblikuje koncept onoga
što je dizajner korisnikog iskustva predvidio u prethodnoj fazi oblikovanja. Dizajner korisnikog
suelja je „dizajner interijera“ koji cijelu priu povezuje u ugodnu vizualnu cjelinu. esto u praksi
ne postoji jasna granica izmeu dizajnera korisnikog iskustva i dizajnera korisnikog suelja, tako
da jedna osoba ili više njih zajedno je zadueno za dizajn u cjelosti. No, to ne mijenja proces
izgradnje korisnikog suelja.
Brojna istraivanja su pokazala da investiranje u efektivan dizajn suelja poveava prihod i
poboljšava stopu konverzije. „Svakih 2$ utrošenih na UX dizajn moe doprinijeti 100$ prihoda!“
– Oxidian10. Kada posjetitelji/korisnici posjete vaš proizvod oni odluku o korištenju tog proizvoda
donose u samo 7 sekundi! Takoer, smatra se da e do 2020.-e godine, korisniko iskustvo preuzeti
cijenu i proizvod kao najznaajniji faktor razlike izmeu brendova.
Ova injenica sama bi trebala biti dovoljna da sve uvjeri da ponu planirati i implementirati UX
dizajn u svoje poslovanje. Bitno je uspostaviti namjere i potrebe korisnika i dizajnirati iskustvo
oko njih. Kvalitetan UX dizajn moe doprinijeti poslovanju i poveanju korisnikog zadovoljstva
i zauzvrat, poveati prodaju, ali najvanije je jedinstvenošu i originalnošu uspostaviti povjerenje
i osigurati povratak korisnika.
https://en.wikipedia.org/wiki/User_interface_design (31.05.)
https://en.wikipedia.org/wiki/Graphical_user_interface (30.05.)
4. Design principles FTW, Ten principles for a good design,
https://www.designprinciplesftw.com/collections/ten-principles-for-good-design (01.06)
5. National institutes of standards and technology, Basic template for the development of
ISO and ISO/IEC documents,
6. Adobe Blog, The 4 golden rules of UI design,
https://theblog.adobe.com/4-golden-rules-ui-design (29.05.)
http://ui-designer.net/interface_design.htm (29.05.)
dnevnim aktivnostima, Luka Marec,
https://repozitorij.unin.hr/islandora/object/unin:1719/preview (30.05)
9. Mockplus, 6 Bad UI Design Examples & Common Errors of UI Designers,
https://www.mockplus.com/blog/post/bad-ui-design-examples (04.06)
10. Skift, 14 lessons from the best and worst sites in the airline industry,
https://skift.com/2013/03/05/14-lessons-from-the-best-and-worst-sites-in-the-airline-
http://www.wqusability.com/articles/getting-started.html (01.06.)
12. Grafiki fakultet Zagreb, Razrada koncepta raunalne animacije i interakcije s grafikim
korisnikim sueljem u svrhu unaprjeenja korisnikog iskustva, Mareni Iva,
http://eprints.grf.unizg.hr/2744/1/Z821_Mareni%C4%87_Iva.pdf (30.05.)