Veleučilište u Rijeci,

Poslovni odjel,

Stručni studij informatike.

Proces izgradnje korisničkog sučelja

IZRADILI:

Dino Višnjić

Hrvoje Španja

Rijeka,Travanj 2012.

Sadržaj

1. Uvod....................................................................................................................................3

2. Što je korisničko sučelje.....................................................................................................4

3. Razrada teme.......................................................................................................................5

3.1. Evolucija korisničkog sučelja.......................................................................................5

3.2. Važnost korisničkog sučelja na internetu.....................................................................6

3.3. Proces izgradnje korisničkog sučelja...........................................................................6

3.3.1. Analiza i razumijevanje aktivnosti korisnika........................................................7

3.3.2. Izrada “papirnate” verzije prototipa....................................................................7

3.3.3. Izrada „papirnatog“ oblikovanja prototipa i evaluacija oblikovanog prototipa s krajnjim korisnicima.........................................................................................................8

3.3.4. Izrada “dinamički” oblikovanog  prototipa.........................................................9

3.3.5. Izrada prototipa spremnog za implementaciju te implementacija konačne verzije korisničkog sučelja..............................................................................................................9

4. Grafički prikaz procesa izrade korisničkog sučelja............................................................9

5. Zaključak:.........................................................................................................................11

6. Literatura:..........................................................................................................................12

2

1. Uvod

Kada govorimo o korisničkom sučelju svima je jasno o čemu pričamo. Te koliko je

važno korisničko sučelje u radu na PC-u. Mi ćemo se potrudit pojasnit vam proces nastajanja

korisničkog sučelja te njegovu povijest i primjenu. U procesu pisanja rada koristili smo se

internetom te izvorima iz knjiga kojih je jako malo, o temi informacija ima na kapaljku pa

možemo reći da nam je bilo veoma teško napravit ovaj seminar. U ranim računalima, bilo je

vrlo malo korisničkog sučelja, osim nekoliko gumba na nekoj operacijskoj konzoli.

Korisničko sučelje je uglavnom bilo u obliku bušenih kartica ulaznih i izlaznih izvješća.

Kasnije, korisnik je dao mogućnost za interakciju s računalom on-line, a korisničko sučelje je

bilo gotovo prazan zaslon s komandnom linijom, tipkovnicom i skupom naredbi i računalnih

odgovora koje su izmjenjivali. Kao što možete primijetiti korisničko sučelje se promijenilo u

velikoj mjeri od prvih sučelja. Te danas zaslužuje punu pozornost korisnika. Možemo nadodat

da je korisničko sučelje jedna od važnijih komponenti na našem PC-u, te mora biti ugodno

oku i efikasno.

3

2. Što je korisničko sučelje

Korisničko sučelje je premosnica između računalnog sustava ili programa i korisnika.

Pomoću korisničkog sučelja upravljamo računalom, koristeći se pritom ulaznim uređajima

poput miša, tipkovnice i touchscreena (zaslona osjetljivog na dodir). Izlazni uređaj na kojem

se vizualno manifestiraju brojne naredbe, kao i naše akcije u današnjem korisničkom sučelju

je monitor. U informacijskoj tehnologiji, kod korisničkog sučelja (UI) je sve dizajnirano u

informacijski uređaj s kojima čovjek može stupiti u interakciju, uključujući zaslon,

tipkovnicu, miša, svjetleću olovku, izgled radne površine, svjetlećih znakova, poruka pomoći,

i toga kako aplikacijski program ili web stranica poziva interakcije i odgovara na njih. Vrste

korisničkih sustava su:

-Izravno manipulacijsko sučelje je ime opće klase korisničkih sučelja koji omogućuju

korisnicima da manipuliraju objektima prikazanima na njima, koristeći postupke koji su

najmanje skloni fizičkom svijetu.

-Grafička korisnička sučelja (GUI) prihvatiti ulaz preko uređaja kao što su računalne

tipkovnice i miša i osigurati izraženi grafički izlaz na monitor računala . Postoje barem dva

različita načela koja se široko koriste u GUI dizajnu: Objektno-orijentirana korisnička sučelja

(OOUIs) i aplikacijski orijentirana sučelja.

-Web-based korisničko sučelje i web korisničkih sučelja (WUI) su podrazred GUI-a da

prihvati ulaze i osigura izlaze stvaranjem web stranica koje se prenose putem interneta i

pregledavaju od strane korisnika koristeći web preglednike.

-Zasloni osjetljivi na dodir su zasloni koji prihvaćaju unos dodirom prstiju ili olovke . Koristi

se u sve većem broju kod mobilnih uređaja, industrijskih procesa i strojeva, self-service

strojeva itd.

4

Korisničko sučelje uključuje tri osnovna dijela:

Mehanizam navigacije određuje na koji način korisnik postavlja zahtjeve prema sustavu tj.

kako korisnik kaže sustavu što da radi.

Mehanizam ulaza definira način na koji će korisnik unijeti informaciju u sustav.

Mehanizam izlaza definira način na koji sustav isporučuje informaciju korisnicima.

3. Razrada teme

3.1. Evolucija korisničkog sučelja

Prva korisnička sučelja su bila komandna, naredbe su se unosile preko tipkovnice, a

tijek i rezultat su se ispisivali na ekranu. Komandna sučelja su nastala 1950-tih, kada su se za

ispis tijeka i rezultata radnje koristili teleprinteri. Značajan napredak je ostvaren kada je ulogu

teleprintera zamijenio CRT monitor. Izum miša je bio presudan za daljnji razvoj korisničkih

sučelja jer je pomoću mišem upravljanog pokazivača na ekranu dodana nova dimenzija u

interakciji korisnika i računala. Miš je izumio Douglas Engelbart, sa Stanfordskog Sveučilišta,

1964, a prvi prototip je predstavljen 1968. Prototip je bio nazvan X-Y Position Indicator, a bio

je smješten u drvenu kutiju s kotačićima, čiji su okretaji upravljali pomakom kursora na

ekranu. Nakon komandnih, na scenu su stupila tekstualna korisnička sučelja, koja su i dalje u

formi teksta ispisivala naredbe na ekranu. Za razliku od komandnih, nije bilo potrebno unositi

naredbe, već ih je bilo moguće pozivati odabiranjem unutar sučelja. Kako se razvijao hardver

i grafičke sposobnosti računala, tako su se počeli koristiti vizualni elementi u korisničkom

sučelju. Pionir te ideje je bio Xerox, koji je 1974. predstavio prototip Alto računala.

Komercijalni nasljednik Alta, Xerox Star, radi visoke cijene nikada nije postigao željeni

uspjeh. Prvo komercijalno uspješno računalo s grafičkim korisničkim sučeljem bilo je Apple

Macintosh, 1984 godine. Nakon uspjeha Macintosha, grafičko korisničko sučelje je postalo

standard za sva buduća računala. Microsoft je već s Windowsima 1.0 slijedio navedene

trendove, a prva komercijalna inačica Windowsa s grafičkim korisničkim sučeljem je bila

Windows 3.1.

Svi današnji operacijski sustavi koriste napredna grafička sučelja, koja su proizašla iz

Xeroxove ideje, a sa svakom generacijom operacijskih sustava sučelja su se usavršavala.

5

3.2. Važnost korisničkog sučelja na internetu

Kako je svaka web stranica 80% korisničko sučelje s jedne strane i 20% informacija s

druge, podrazumijeva se da web developer mora dobro poznavati i razumjeti pravila user

interfaceing-a. U našem slučaju mora poznavati pravila na kojima počiva interakcija čovjeka i

računala. Gotovo je nemoguće napraviti web site kojim će se korisnici često služiti bez

dubljeg razumijevanja ovog područja. Korisničko sučelje (user interface - UI) glavno je

pomagalo korisniku za pregledavanje informacija objavljenih na web site-u, a kako se web

tehnologija razvija, pravila koje se moraju pri njegovoj izradi poštivati trebala bi zapravo biti

vrlo slična kao i pravila za izradu klasičnih aplikacija.

Pri izradi trebalo je poštovati sljedeća ograničenja:

- koristiti gotove grafičke elemente koji su dostupni isključivo pod GPL licencom

- grafičke alate koristiti samo za minimalne zahvate

- većinu posla obaviti kodirajući sučelje, a minimalno koristiti bitmap elemente (bitmapa je

prikaz od najmanje jednog do teoretski beskonačnog broja polja na površini određene

veličine, koji zajedno tvore mozaik složen da čini cjelovitu sliku. Pri tome se polja moraju

dodirivati, ali i ne i preklapati)

- težiti konzistentnosti, ravnoteži i funkcionalnosti sučelja

- primjenjivati i uvažavati preporuke za izradu web UI-ja

3.3. Proces izgradnje korisničkog sučelja

Izgradnja korisničkih sučelja koja inteligentno prikazuju informacije je težak zadatak.

U ovom trenutku, dizajneri su prisiljeni predvidjeti svaku situaciju koja bi mogla proizaći u

aplikaciji i odlučiti koje grafičke tehnike su najučinkovitije u kojoj situaciji. Postoji nekoliko

faza i procesa u dizajnu korisničkog sučelja, od kojih su neki više zahtjevniji od drugih,

ovisno o projektu. Prikupljanje funkcionalnih zahtjeva - sastavljanje popisa funkcionalnosti

koje zahtijeva sustav za postizanje ciljeva projekta i potencijalnih potreba korisnika.

6

3.3.1. Analiza i razumijevanje aktivnosti korisnika

Osnovni problem nastaje prilikom oblikovanja i tehničkog realiziranja korisničkih

sučelja sustava koja će komunikaciju između čovjeka i računala učiniti jednostavnijom i

učinkovitom, usmjerenom obavljanju željenog zadatka, a koja  će ujedno istodobno

posjedovati transparentnost nužno za razvijanje korisnikove neopterećenosti samim sučeljem.

Analizom i razumijevanjem aktivnosti korisnika postići ćemo da korisnik može u potpunosti i

sa visokom upotrebljivošću koristit i razumjeti što se nalazi na korisničkom sučelju, a

potrebno je odgovorit na sljedeća pitanja:

•što korisnik želi sustavom obaviti

•kako korisnik doživljava proces

•koje dijelove sustava korisnik želi nadzirati (i kako)

•koji dijelovi sustava trebaju poticaj korisnika (i kako)

•koji se automatizmi u upravljanju mogu ugraditi

•pomoć korisniku

3.3.2. Izrada “papirnate” verzije prototipa

Kada korisnici postignu dogovor o tome koji se elementi trebaju nalaziti u korisničkom

sučelju i kako bi ti elementi trebali biti raspoređeni izrađuje se papirnata verzija prototipa.

U ovom slučaju primjenjuje se prelazak kroz scenarija i pomoću crteža sučelja. Scenarij se

koristi kako bi se predstavio niz interakcija sa sustavom. Cilj prototipa je da dopusti

korisnicima da dobiju direktno iskustvo u radu sa sučeljem. Izrada prototipa može imati dvije

faze: U ranoj fazi može se koristiti prototip u papirnom obliku;

Dizajn se onda prerađuje i razvija u sofisticirani automatski prototip. Papirni prototip

je učinkovit način dobivanja korisnikove reakcije na prijedlog dizajna.

7

3.3.3. Izrada „papirnatog“ oblikovanja prototipa i evaluacija oblikovanog prototipa s

krajnjim korisnicima

Korisničko sučelje treba dizajnirati na način da se minimizira trud koji korisnik treba uložiti

za obavljanje neke akcije. Trud u obavljanju akcije preko korisničkog sučelja se sastoji u

korištenju ulaznih uređaja preko kojih korisnik komunicira sa aplikacijom, tj. smanjenje klika

mišem i pritisaka tipki tipkovnice. Kod izrade „papirnatog prototipa“ Elementi

sučelja se nacrtaju i onda se kao kod crtanih filmova slažu slike sučelja da bi se pokazalo što

se dešava u navigaciji ili drugim aktivnostima korisnika. Većina dizajnera primjenjuje pravilo

“tri klika” po kojem bi korisnici trebali biti u mogućnosti otići od glavnog menija ili početka

sustava do informacije ili akcije koju žele u ne više od tri klika mišem ili tri pritiska na tipku.

Cilj dizajna korisničkog sučelja je dobiti sučelje koje je lako za korištenje i nije “baš previše

ružno”, a u isto vrijeme omogućava korisniku obavljanje određenog posla sa minimalno

napora i vremena. Glavni problem prilikom dizajna korisničkog sučelja je prevelika količina

informacija koje sučelje treba pružiti korisniku, a premalo mjesta za smještanje tih

informacija. Najčešće je potrebno koristiti više ekrana, formi, stranica (izvještaja) da bismo

prikazali sve informacije što korisniku komplicira sučelje . U izradi prototipa pridržavaju se

pravila koja smo istaknuli ranije. Nakon toga prototipovi se predstavljaju korisnicima i oni

predlažu potrebne izmjene, tu se dešava finalno oblikovanje. Procjenu dizajna korisničkog

sučelja treba izvesti kako bi se ocijenila njegova pogodnost.

Sveobuhvatna procjena je vrlo skupa i nepraktična za većinu sustava. Idealno, sučelje bi

trebalo vrednovati prema specifikaciji upotrebljivosti. Međutim, takve specifikacije se rijetko

izvode. S obzirom da se sve veći naglasak stavlja na otvorenost sustava i aplikacija, prilikom

oblikovanja sučelja, osim funkcionalnosti i zadovoljavanja ergonomskih zahtjeva, pozornost

treba obratiti i na standardizaciju sučelja. Smisao tog ograničavanja kreativnosti je da se

korisnik nađe u poznatom okruženju i lakše privikne na rad sa novom aplikacijom. Nova

rješenja, ako su dovoljno dobra, biti će prihvaćena od strane korisnika i proizvođača i naći će

svoje mjesto u "standardu".

8

3.3.4. Izrada “dinamički” oblikovanog   prototipa

U ovom stadiju je važno učinit oblikovanje dinamičnim i atraktivnim na neki način, kako bi

oblikovanje bilo zanimljivije korisnicima.

Postoje tri osnove tehnike izrade prototipa:

a) Script-driven prototip - razvija skup skripti i zaslona prikaza pomoću alata poput

Macromedia Director. Kada korisnik radi s njim, zaslon se mijenja i

prikazuje sljedeći sadržaj.

b) Visual programming - koristi se jezik dizajniran za brz razvoj kao što je Visual Basic.

c) Internet - based prototip - koristi web browser i pripadajuće skripte.

3.3.5. Izrada prototipa spremnog za implementaciju te implementacija konačne

verzije korisničkog sučelja.

Ako ne razumijete ono što korisnici žele raditi sa sustavom, onda nemate realnu

perspektivu izrade učinkovitog sučelja. Korisnička analiza se mora opisati u smislu da je

korisnici i drugi dizajneri mogu razumjeti. Scenariji u kojima se opisuju tipični dijelovi

korištenja, su jedan od načina na koji se opisuje ove analiza. Implementacija je preslikavanje s

apstraktnog tipa podataka na konkretni tip podataka, pri čemu ostaju sačuvana njegova bitna

svojstva, U fazi implementacije korisničkog sučelja, sučelje se dovršava pri čemu se vodi

računa o iskustvima do kojih se došlo pri razvoju i evaluaciji prototipa. U ovoj se fazi vrši

(probno) testiranje cijelog projekta. Malim grupama studenata/korisnika predstavlja se

program. Vrši se analiza pogreški ukoliko ih ima, prikupljaju se mišljenja studenata/korisnika

vezano za izgled korisničkog sučelja i sl.

4. Grafički prikaz procesa izrade korisničkog sučelja

Atributi upotrebljivosti (usability)

9

U sljedećoj tablici su dati atributi upotrebljivosti:

Atribut Opis

LearnabilityKoliko vremena je potrebno da novi korisnik postane produktivan u radu sa sustavom.

Brzina operacijaKoliko dobro sustavski odziv odgovora korisničkoj radnoj navici.

Robustnost Koliko je sustav tolerantan na greške korisnika.Mogućnost oporavka (Recoverability)

Koliko je sustav dobar pri oporavku od grešaka.

Adaptivnost (Adaptability) Koliko usko je sustav vezan sa pojedinačnim modelom rada.

Upotrebljivost je uglavnom karakteristika korisničkog sučelja, ali je također povezana

s funkcionalnošću proizvoda i procesa dizajna. Ona opisuje koliko dobro se proizvod može

koristiti za svoju namjeravanu svrhu i njezine ciljane korisnike s ekonomičnosti,

učinkovitosti i zadovoljstvom, uzimajući u obzir zahtjeve iz konteksta uporabe.

Na sljedećoj slici je prikazan proces dizajna korisničkog sučelja. Nakon analize

irazumijevanja koris-ničkih aktivnosti, stvara se papirna verzija prototipa i radi

njegova evaluacija. Zatim se kreira dinamička verzija prototipa, pristupa njegovomizvršenju

i ponovo radi evaluacija i tek nakon toga pristupa se implementaciji finalnog korisničkog

sučelja.

10

Tablica1. Atributi upotrebljivosti

5. Zaključak:

Principi dizajna korisničkog sučelja služe kao pomoć pri izradi samog sučelja.

Interakcija stilova uključuje direktnu obradu, sustave izbornika, fill-in obrasce, jezik naredbi

i prirodni jezik. Grafički prikaz bi trebalo iskoristiti za predstavljanje trendova

i približnih vrijednosti. Potrebno je koristiti digitalne displeje kada se zahtjeva veća

preciznost. Boje treba koristiti u određenim slučajevima i dosljedno.

Dizajn korisničkog sučelja uključuje korisničku analizu, prototipove i njihovu evaluaciju.

Cilj korisničke analize je da upozna dizajnera s načinom na koji korisnici zapravo rade.

Prototip korisničkog sučelja je postepeni proces gdje se u početku prototip razvija

na papiru, koji se kasnije koristi kao osnova za automatizirane sučelje prototipove.

Ciljevi evaluacije su dobivanje povratne informacije (feedback-a) o tome kako poboljšati

dizajn sučelja i da bi se ocijenilo kako sučelje zadovoljava kriterije upotrebljivosti.

11

Slika1. Proces izrade korisničkog sučelja

6. Literatura:

[1.] http://www.vidipedija.com/~vidipedi/index.php?title=Korisni%C4%8Dko_su

%C4%8Delje

[2.] http://www.tonimilovan.com/2006/11/15/korisnicko-sucelje/

[3.] http://web.efzg.hr/dok//inf/pozgaj/sazeci/06%20Tehnike%20oblikovanja%202.pdf

[4.] http://en.wikipedia.org/wiki/User_interface

[5.] http://en.wikipedia.org/wiki/User_interface_design

[6.] http://adria.fesb.hr/~zmiletic/Projektiranje%20informacijskih%20sustava/

11.%20Dizajn%20sucelja.pdf

12