0

Sveučilište J.J. Strossmayera u Osijeku

Odjel za matematiku

Sveučilišni diplomski studij matematike i računarstva

Izrada korisničkog sučelja

Seminar iz predmeta

Softversko inženjerstvo

Student: Mirna Marković

Voditelj: doc. dr. sc. Alfonzo Baumgartner

Osijek, lipanj 2016.

1

Sadržaj Uvod ........................................................................................................................................... 2

1 Korisničko sučelje ............................................................................................................... 3

1.1 Što je korisničko sučelje .............................................................................................. 3

1.2 Povijest korisničkog sučelja ........................................................................................ 3

2 Tipovi korisničkog sučelja .................................................................................................. 4

2.1 Komandno korisničko sučelje ..................................................................................... 4

2.2 Tekstualno korisničko sučelje ..................................................................................... 4

2.3 Grafičko korisničko sučelje ......................................................................................... 5

3 Način komunikacije korisnika i sustava.............................................................................. 5

4 Proces izrada korisničkog sučelja ....................................................................................... 6

4.1 Analiza korisnika ......................................................................................................... 6

4.2 Izrada prototipa korisničkog sučelja ............................................................................ 7

4.3 Smjernice za izradu korisničkog sučelja ..................................................................... 7

5 Utjecaj veličine ekrana na izradu korisničkog sučelja ........................................................ 8

5.1 Desktop ........................................................................................................................ 9

5.2 Tablet ........................................................................................................................... 9

5.3 Mobile .......................................................................................................................... 9

6 Uloga boja u korisničkom sučelju ..................................................................................... 10

Zaključak .................................................................................................................................. 11

Literatura .................................................................................................................................. 12

2

Uvod

Svaki softverski sustav ima određenu namjenu, a njegov krajnji korisnik je pretežno

čovjek. Da bi čovjeku mogao koristiti neki softverski sustav potrebno je osmisliti i izraditi

prikladno sučelje putem kojega će on moći komunicirati sa sustavom. Sučelja putem kojih

korisnik komunicira sa sustavom mogu se uvelike razlikovati što ovisno o tipu, namjeni i

okolini u kojoj se sustav nalazi. Korisnici Nintendo Wii konzole koriste daljinske upravljače sa

senzorima 3D pokreta za upravljanje konzolom, a rezultat je kretnja lika na ekranu, s druge

strane korisnici Linux operacijskog sustava naredbe sustavu najčešće unose u tekstualnom

obliku u komandni prozor putem tipkovnice, a rezultat je prikazan u tekstualnom ili grafičkom

obliku. Kako je korisničko sučelje na neki način posrednik između korisnika i softverskog

sustava, ono uvelike pridonosi kvaliteti i upotrebljivosti sustava, stoga njegovoj izradi treba

pridati posebnu pažnju.

3

1 Korisničko sučelje

1.1 Što je korisničko sučelje

Korisničko sučelje možemo definirati kao sve grafičke, tekstualne i audiovizualne

informacije koje program ili sustav predstavlja korisniku, a korisnik ima na raspolaganju jednu

ili više ulaznih jedinica kao što su miš, tipkovnica ili mikrofon pomoću kojih obavlja interakciju

sa sustavom. Najjednostavnije rečeno, korisničko sučelje je veza između softverskog sustava i

krajnjeg korisnika, tj. čovjeka. Korisnika putem korisničkog sučelja upravlja sustavom i

ostvaruje željeni cilj, a sustav putem korisničkog sučelja prima naredbe i nakon odrađene

naredbe putem korisničkog sučelja može prikazati rezultat iste. Kvaliteta korisničkog sustava

od velikog je značaja za kvalitetu cijelog sustava, jer korisnik kvalitetu sustava češće sudi prema

kvaliteti korisničkog sučelja nego prema njegovoj funkcionalnosti. Stoga je važno dobro i

precizno analizirati, planirati, dizajnirati i izraditi korisničko sučelje za svaki pojedinačni

softverski sustav.

Danas je na svakom sustavu ili uređaju, u kojemu je prisutna digitalna tehnologija, vidljiv

nekakav oblik korisničkog sučelja. Počevši od mobitela i računala u kojima je korisničko

sučelje danas jedan od važnijih segmenata, preko automobila do kućanskih aparata koji se danas

mogu upravljati i glasom.

1.2 Povijest korisničkog sučelja

Iako je danas način upravljanja računalima i softverskim sustavima raznolik i vrlo

jednostavan u početku to nije bilo tako. Prva korisnička sučelja, ona prema računalima,

temeljila su se na unosu tekstualnih naredbi u komandne linije, a tijek izvršavanja naredbi i

dobiveni rezultat sustav je ispisivao na ekran. Prekretnica u razvoju korisničkog sučelja svakako

je izum miša koji je omogućio pokretanje pokazivača po ekranu i slobodniju interakciju. U

skladu s tim pojavljuju se tekstualna korisnička sučelja koja su uz unosa naredbi u komandne

linije nadograđena dodatnom mogućnosti odabira naredbe iz sučelja. Daljnjim razvojem

tehnologije, točnije hardvera i grafike računala, postepeno se sve više počinju koristiti grafički

elementi u korisničkim sučeljima. Kao prvo komercijalno uspješno računalo koje je imalo

grafičko sučelje pamtimo Appleov Macintosh iz 1984. godine. Od tada do danas grafičko

sučelje je postalo standard i neizostavno je u svakom korisničkom sučelju. Daljnjim razvojem

grafike ovaj tip korisničkog sučelja je usavršen i čini interakciju korisnika i računala ugodnom

i jednostavnom. Iako grafičko korisničko sučelje danas prevladava i dalje se kod nekih sustava

koriste tekstualna ili komandna korisnička sučelja.

Slika 1: Prikaz korisničkog sučelja za Windows 10 i Windows 95

4

2 Tipovi korisničkog sučelja

Ovisno o svrsi kojoj je softverski sustav namijenjen koriste se različiti tipovi korisničkih

sučelja koja su se razvila kroz povijest. Osnovna podjela jest na komandno sučelje (CLI –

Command Line Interface), tekstualno sučelje (Text User Interface) i grafičko korisničko sučelje

(GUI – Graphical User Interface).

2.1 Komandno korisničko sučelje

Kao što je navedeno, komandno korisničko sučelje je bilo prvo koje se koristilo za

interakciju sa softverskim sustavima stoga ga možemo smatrati osnovnim načinom

komunikacije korisnika i računalnog sustavom. Komandno sučelje je najjednostavnije sučelje

za komunikaciju koju neki softverski sustav može pružiti korisniku. Ono se sastoji od

komandnog prozora u koji korisnika unosi naredbe sustavu za pokretanje različitih akcija. Kako

bi korisnik mogao koristiti ovakvo korisničko sučelje nužno je da on dobro poznaje sintaksu i

naredbe kojima se pokreću određene akcije sustava. Svaka naredba koju korisnik unese

predstavlja tekstualnu referencu na niz naredbi, odnosno instrukcija koje sustav treba odraditi.

Današnje komandne linije, odnosno konzole, isprogramirane su tako da dobro reagiraju i na

unos pogrešnih naredbi, te da upozore korisnika na moguće loše scenarije, što kod starijih

sustava nije slučaj. Prednost komandnih sučelja svakako je štednja računalnih resursa te se ona

i koriste u sustavima kod kojih je to bitna stavka i kod sustava koje će koristiti dobro potkovani

tehnički korisnici i softverski inženjeri. Kod ove vrste korisničkog sučelja nije moguće

odjednom zadati više naredbi računalu i radnje se izvršavaju linearno. Primjer ovakvog

korisničkog sučelja je MS-DOS.

Slika 2: Komandno korisničko sučelje

2.2 Tekstualno korisničko sučelje

Tekstualno korisničko sučelje je napredniji oblik komandnog sučelja i u njemu je

omogućeno uz upisivanje naredbe u komandni prozor i odabrati ju iz sučelja. Način korištenja

5

ovoga sučelja sličniji je grafičkom korisničkom sučelju, a način izvršavanja naredbi isti je kao

i kod komandnog korisničkog sučelja. Primjer ovakvog korisničkog sučelja je BIOS.

Slika 3: Tekstualno korisničko sučelje

2.3 Grafičko korisničko sučelje

Grafičko korisničko sučelje temelji se na vizualnim elementima koji predstavljaju

različite naredbe. Naredbe se u grafičkom korisničkom sučelju prikazuju u obliku ikona,

različitih izbornika ili gumbića koju su smješteni unutar prozora ili dijaloških okvira, a naredbe

se odabiru pomoću pokazivača upravljanim mišem. Razvojem hardvera i grafike ovaj oblik

korisničkog sučelja razvio se toliko da danas skoro svaki korisnik može upravljati sustavom s

grafičkim korisničkim sučeljem. Prednost ovakvog sučelja je što izvršavanje naredbi ne mora

biti linearno, korisnik se može brzo prebacivati sa zadatka na zadatak i može istovremeno

komunicirati s nekoliko različitih aplikacije. Lako ga koriste i korisnici bez iskustva i

poznavanja sustava i iskusni korisnici. Danas se pod grafičko korisničko sučelje ubrajaju i

sučelja upravljana dodirom i sučelja upravljana glasom koja se intenzivno razvijaju.

3 Način komunikacije korisnika i sustava

S obzirom na vrste korisničkih sučelja možemo promatrati i različite načine na koje

korisnik i sustav mogu komunicirati putem korisničkog sučelja.

Najlakši način za komunikaciju korisnika i sustava jest direktna manipulacija. To je za

korisnike brz i intuitivan način, ali zahtijeva složeniju implementaciju i moguć je samo kod

grafičkog korisničkog sučelja kod kojega je moguće prikazati akciju u vizualnom obliku.

Ovakva komunikacija pogodna je za video igre.

Izbor iz izbornika smanjuje mogućnost pogreške korisnika i zahtijeva minimalan trud korisnika,

a danas je najrasprostranjeniji način komunikacije korisnika i sustava. Iskusnim korisnicima

ovakav način zna biti prespor i zamoran, a za velike sustave izbornici znaju postati vrlo složeni.

Komunikacija putem unosa u formu je jednostavna i zahtijeva malo korisničkog truda, ali

zahtijeva dosta prostora na ekranu pa nije uvijek praktična.

6

Komandni jezik je snažan i fleksibilan način komunikacije, ali teži za savladavanje i namijenjen

prvenstveno iskusnim korisnicima zbog lošeg kontrole pogrešaka. Koristi se za kontrolu i rad

sa operacijskim sustavima.

Komunikacija putem prirodnog jezika je najnepouzdanija i zahtijeva puno više pisanja, a u

slučaju glasovnog upravljanja implementacija je vrlo složena.

4 Proces izrada korisničkog sučelja

Proces izrade korisničkog sučelja možemo promatrati kao iterativni proces podijeljen na

nekoliko osnovnih aktivnosti. Okosnicu izrade korisničkog sučelja čine:

analiza korisnika – otkrivanje želja i potreba korisnika nad sustavom

izrada prototipa – u svrhu isprobavanja i otkrivanja najboljeg mogućeg rješenja

za sustav i korisnika

evaluacija rješenja – testiranje prototipa sa korisnicima

Slika 4:Proces izrade korisničkog sučelja

4.1 Analiza korisnika

Korisničko sučelje namijenjeno je korisniku i svrha mu je olakšati interakciju korisnika i

sustava. Stoga je pri izradi korisničkog sustava ključno analizirati korisničke zahtjeve i

prilagoditi sučelje budućim korisnicima i njihovim potrebama, ali i sposobnostima.

Ovisno o razini znanja, korisnike možemo promatrati u sljedećim okvirima:

Geek – tip korisnika koji uživa u otkrivanju novih stvari i načina na koje one

funkcioniraju, rijetko koristi upute o korištenju sustava

Teenager – geek tip korisnika koji nema straha pred novim izazovima i nema potreba

za korištenjem uputa o korištenju sustava

7

Iskusan korisnik – tip korisnika koji misli da unaprijed zna kako sve funkcionira i vodi

se za ustaljenim standardima i praksama, te ih očekuje implementirane u svakom

sustavu

Neiskusan korisnik – tip korisnika koji ima strah od noviteta, boji se samostalno

istraživati sučelje, želi obaviti osnovne akcije sustava i za njih želi točne upute kako ih

treba odraditi

Idealno korisničko sučelje trebalo bi odgovoriti na sve zahtjeve svih tipova korisnika, no s

obzirom na navedene tipove te je vrlo teška zadaća. Stoga se pri analizi korisnika treba

koncentrirati na bitna pitanja koja pomažu u definiranju i oblikovanju korisničkog sučelja:

Tko su korisnici sučelja?

Koliko je različitih vrsta korisnika koji će sustav koristiti i koji su to?

Koji je cilj korisnika koji će koristiti sustav?

Koje vještine posjeduje korisnik koji će koristiti sustav i koliko je njegovo iskustvo?

Kako on želi koristiti sustav (na kojim uređajima, u kojim okolnostima, ...)?

Koje su osnovne i najbitnije funkcionalnosti sustava koje korisnik treba? i dr.

Odgovori na navedena pitanja sa poslovnim ciljem sustava i svim korisničkim zahtjevima

trebaju biti smjernice za dizajniranje i izgradnju korisničkog sučelja. Također bitno je dobro

balansirati financijske resurse, vrijeme, ciljeve sustava i dostupne tehnologije sa korisničkim

zahtjevima, što ponekad zna biti zahtijevan posao. Pristup dizajniranja korisničkog sučelja kod

kojega su potrebe korisnika na prvom mjestu i u kojemu je korisnik uključen u proces

dizajniranja naziva se „user-centered design“ i on uvijek zahtijeva izradu prototipa korisničkog

sučelja.

4.2 Izrada prototipa korisničkog sučelja

Početak izrade prototipa jest izrada nacrta budućeg prototipa u papirnatom ili digitalnom

obliku. U ovoj fazi odlučuje se o mogućem razmještaju elemenata u grafičkom sučelju, a

korisnik može biti uključen u proces. Nakon dobivenog nacrta, točnije dizajna prototipa, on se

može razvijati u napredniji automatizirani prototip koji korisnici mogu testirati i on se dodatno

može mijenjati nakon evaluacije ili se odmah može prijeći na samu izradu korisničkog sučelja.

Izrada prototipa učinkovit je način za otkrivanje potreba korisnika.

4.3 Smjernice za izradu korisničkog sučelja

U iterativnom procesu izrade prototipa i evaluacije krajnji cilj i rezultat je implementacija

korisničkog sučelja. Pri dizajnu i izradi korisničkog sučelja dobro je držati se određenih,

unaprijed utvrđenih, pravila, standarda i principa.

Osnovno je da korisničko sučelje mora biti jednostavno i lako za korištenje, pa se dizajneri

korisničkih sučelja najčešće drže pravila „tri klika“. Tim pravilom želi se postići da korisnik u

najviše tri klika mišem, tri akcije na tipkovnici ili tri dodira po ekranu može doći do glavnih

funkcija sustava ili glavnog izbornika. Akcije koje su korisniku najbitnije i koje su od velikog

značaja za sustav potrebno je smjestiti na takva mjesta u aplikaciji da zadovoljavaju pravilo tri

klika, odnosno na takozvane „crvene rute“.

Korisničko sučelje također mora biti blisko korisniku što znači da ono treba biti u skladu sa

korisnicima koji će ga najviše koristiti. Mogućnost oporavka u smislu ispravke greške i

ponašanje sustava u skladu s očekivanjima korisnika, tj. minimum iznenađenja pridonose

8

pouzdanosti sustava. Pregledno i organizirano sučelje s lako uočljivim kontrolama i

kompaktnom strukturom ključno je za kvalitetu, a ono se postiže prateći Gestalt načelo. Gestalt

načelo zasnovano je na ideji da čovjek cjelinu dijeli u grupe po različitim principima i

sličnostima kao što su bliskost (proximity), simetrija (symmetry), povezanost (closure), sličnost

(similarity), kontinuiranost (continuity) i dr. Bitno je obratiti pažnju na različitost korisnika i

prilagoditi sučelje da bude pristupačno što većem broju različitih korisnika. Neovisno o tipu,

korisnici najčešće žele povratnu informaciju za svoje akcije, pa im je to potrebno i pružiti. Kako

bi sustav u očima korisnika bio smislena cjelina važno je voditi računa o konzistentnosti jer

ljudi vide ono što očekuju (engl.: People see what they expect to see.), pa im to treba i

omogućiti.

Slika 5: Grupiranje sličnih funkcionalnosti

Slika 6: Konzistentnost sučelja

Slika 7: Prikaz stanja

5 Utjecaj veličine ekrana na izradu korisničkog sučelja

Danas je pri dizajniranju i izradi korisničkog sučelja važno uzeti u obzir uređaj i tip ekrana

na kojem će se sučelje prikazivati. Što je više različitih uređaja na kojima sustav može raditi i

s kojima se može integrirati, to je zahtjevniji posao dizajnera korisničkog sučelja koji ga mora

9

prilagoditi svim uvjetima i prilikama. Od pametnih satova s ekranima veličine oko 1,2'' pa do

pametnih televizora s ekranima većima od 32'', svi zahtijevaju intuitivno, pregledno i praktično

korisničko sučelje. U nastavku su navedene smjernice kako prilagoditi korisničko sučelje nekim

osnovnim tipovima ekrana.

5.1 Desktop

Pri dizajniranju sučelja za sustave koji se koriste na računalima i laptopima gdje veličina

ekrana i rezolucija mogu varirati od 13.3'' do 17'' i od 1024 x 768 do 1920 x 1200 potrebno je

iskoristiti njihovu osnovnu prednosti, tj. veličinu ekrana ali i osigurati fleksibilnost zbog svih

postojećih kombinacija veličina i rezolucija. Dobro je koristiti grid sustav za strukturiranje,

iskoristiti veličinu zaslona za horizontalnu navigaciju i velike padajuće izbornike za što bolje

filtriranje sadržaja, te iskoristiti što više prostora za interaktivno iskustvo korisnika. Desktop

inačica korisničkog sučelja nekoga sustava trebala bi pružiti korisniku što više od sustava za

koji je izrađena.

5.2 Tablet

Kod izgradnje korisničkih sučelja za mobilne uređaje i tablete najbitnije je osigurati

interakciju sa sustavom na dodir (engl. touchscreen). Bitno je osigurati veća dodirna područja,

prilagoditi izbornike i filtriranje sadržaja malom ekranu pomoću harmonika izbornika, koristiti

naprijed-natrag navigaciju i button-like dizajn za osnovne, jednostavne akcije. U slučaju da

postoji i desktop inačica toga sustava potrebno je osigurati konzistentnost vizualnog identiteta,

ali ne žrtvovati „usability“ za prezentiranje istog sadržaja kao na desktop inačici.

5.3 Mobile

Glavna i osnovna misao vodilja za sučelja na malim mobilnim uređajima jest: uštedjeti

što više prostora i ne žrtvovati korisničko iskustvo zbog manjka prostora. Kako bi se navedeno

postiglo bitno je znati točan razlog zbog kojeg korisnici koriste mobilnu inačicu sustava i što

od nje očekuju, te u skladu s tim izbaciti sve dodatne mogućnosti koje sustav nudi i fokusirati

se na bitno. Ukoliko je mobilna inačica jedina za neki sustav, poželjno je voditi se istim

pravilom i držati se minimalističkog dizajna koji naglašava osnovne funkcionalnosti sustava i

stavlja ih u prvi plan, a dodatne stavlja u drugi plan kako ne bi ometale korisnika. Neki od

primjera su: harmonika navigacija, uklanjanje reklama i notifikacija, fleksibilne slike, povećani

font i prostor za unos teksta i slično.

10

Slika 8: Korisničko sučelja web aplikacije na ekranima različitih veličina

6 Uloga boja u korisničkom sučelju

Bitna stavka grafičkog korisničkog sučelja svakako su i boje elemenata. Teorija boja je

zasebna znanost, a svoje mjesto pronašla je i u izradi korisničkog sučelja. Ona proučava kako

boje utječu na različite ljude, kako određene boje utječu na skupinu ljudi, a kako na pojedince,

emocije koje određene boje pobuđuju i slično.

Boje dijelimo u tri osnovne skupine tople, hladne i neutralne.

U tople boje ubrajamo crvenu, narančastu i žutu i sve varijacije te tri boje. One se u dizajnu

koriste za naglašavanje emocija, sreće i energije. Elementi crvene boje, ako što su gumbići,

poruke ili obavijesti, najčešće su upozorenje na opasnost ili neuspjelu akciju. Narančasta se

često upotrebljava kao boja upozorenja i opomene.

Hladne boje su zelena, plava, ljubičasta i sve njihove varijacije, a u dizajnu se koriste kako bi

dale notu profesionalizma i smirenosti. Zeleni elementi označavaju pozitivne akcije, uspjeh i

potvrdu, a plavi su najčešće informativne poruke i akcije koje su neutralne ili pozitivne za

sustav.

Neutralne boje su crna, bijela, smeđa, siva i njihove varijacije, a one daju sučelju dozu

elegancije i minimalizma. Najčešće se koriste za tipografiju i osnovni sadržaj sučelja u

kombinaciji sa toplim ili hladnim bojama.

Uz navedena semantička svojstva koje boje daju elementima na korisničkom sučelju, one se

mogu koristiti kako bi u korisniku pobudile određene emocije. Iskoristi li se to svojstvo spretno

i promišljeno, pogotovo na web korisničkim sučeljima, korisniku će se osjećati ugodno i

poželjet će se vratiti, odnosno ponovno koristiti to sučelje.

Slika 9: Boje i ikone označavaju akciju, tekst ispod gumbića nije potreban

11

Zaključak

Korisničko sučelje je mjesto na kojem se korisnik prvi put susreće s nekim softverskim

sustavom. Iako se kaže da odijelo ne čini čovjeka, tako ni korisničko sučelje ne čini softver, ali

činjenica ja da većina korisnika kvalitetu softverskog sustava sudi prema njegovu korisničkom

sučelju, a ne prema funkcionalnostima koje on nudi. Osim što korisničko sučelje daje

pripadnom softverskom sustavu vizualni identitet, ono omogućuje komunikaciju korisnika i

sustava i zbog toga je ono važan element softverskog sustava. Dobro osmišljeno sučelje koje

prati zahtjeve korisnika služit će korisniku u potpunosti i omogućiti mu laganu interakciju sa

sustavom i nesmetano obavljanje akcija. Upravo iz tog razloga važno je pri dizajniranju sučelja

prikupiti što više informacija od budućih korisnika i tako maksimizirati njihovo zadovoljstvo.

Danas prevladavaju grafička korisnička sučelja i najviše pažnje posvećuje se prilagodbi sučelja

nekog sustava većem broju uređaja i ekrana, što je dosta zahtjevan posao. Razvojem tehnologije

razvijaju se i drugi oblici korisničkih sučelja kao što su hologrami i glasovno upravljanje

prirodnim jezikom. Iako ta napredna korisnička sučelja olakšavaju korisniku interakciju sa

sustavom i već su u upotrebi kao naprimjer Siri na iPhone-u, korisnicima je i dalje lakše, brže i

draže koristiti dobro, staro grafičko sučelje.

12

Literatura

1. https://en.wikipedia.org/wiki/User_interface

2. User interface design, David Little, King's Collage London

(http://www.slideshare.net/littleddotnet/user-interface-design-definitions-processes-

and-principles-15366100)

3. GoodUI (http://goodui.org/)

4. Color Theory for Designers: Part 1, Meaning of Color , Smashing magazine

(https://www.smashingmagazine.com/2010/01/color-theory-for-designers-part-1-the-

meaning-of-color/)

5. Software User Interface Design

(http://www.tutorialspoint.com/software_engineering/software_user_interface_design.

htm)