GrafiČki korisniČki interfejs- GUI

PANEVROPSKI UNIVERZITET APEIRON

FAKULTET INFORMACIONIH TEHNOLOGIJA

POSLOVNA INFORMATIKA

Diplomski rad

„GUI ( Graphical user interface) – Grafički korisnički interfejs“

Mentor: Student:Prof. drLazo Roljić Aleksandar Balaban

Br. Indexa: 23-10/vpi

Banja Luka, Decembar 2014. godina

Diplomski rad Aleksandar Balaban

SADRŽAJUVOD.........................................................................................................................................................4

1. ŠTA JE TO GUI?....................................................................................................................................5

2. DIZAJN KROZ ISTORIJU.....................................................................................................................6

2.1. Mobilni računari i telefoni..............................................................................................................14

3. PRINCIPI DIZAJNIRANJA KORISNIČKOG INTERFEJSA..............................................................16

3.1. Forma.............................................................................................................................................16

3.2. Razumljivost sadržaja.....................................................................................................................17

3.3. Estetika...........................................................................................................................................17

3.4. Iskustvo korisnika...........................................................................................................................18

3.5. Dosljednost.....................................................................................................................................18

3.6. Minimizacija korisničkog napora....................................................................................................18

4.PROCES DIZAJNIRANJA....................................................................................................................19

4.1. Razvoj scenarija upotrebe...............................................................................................................20

4.2. Dizajn strukture interfejsa...............................................................................................................20

4.3. Dizajn standarda interfejsa..............................................................................................................22

4.3.1. Metafora interfejsa...................................................................................................................22

4.3.2.Šabloni interfejsa......................................................................................................................22

4.3.3. Objekti interfejsa.....................................................................................................................22

4.3.4. Akcije interfejsa.......................................................................................................................23

4.3.5 Ikone interfejsa.........................................................................................................................23

4.4. Dizajn prototipova interfejsa...........................................................................................................23

4.4.1. Urađena šema..........................................................................................................................24

4.4.2.HTML prototip.........................................................................................................................24

4.4.3. Jezički prototip........................................................................................................................25

4.5. Procjena kvaliteta interfejsa............................................................................................................25

4.5.1. Heuristička procjena................................................................................................................26

4.5.2. Procjena prolazka kroz interfejs...............................................................................................26

4.5.3. Interaktivna procjena...............................................................................................................26

4.5.4. Formalni testovi upotrebljivosti...............................................................................................26

2


5. PRAKTIČAN PRIMJER GUI-A...........................................................................................................27

5.1. Pravljenje baze i tabela u njoj.........................................................................................................27

ZAKLJUČAK...........................................................................................................................................43

LITERATURA..........................................................................................................................................44

3


UVOD

Sam naziv ovog rada GUI (Graphical User Interface), govori vam da ću u ovom radu

obraditi Grafički korisnički interfejs. Diplomski rad ćemo započeti sa teorijskim dijelom,

odnosno sa definisanjem GUI-a. Kroz rad ćemo takođe govoriti o istoriji grafičkog korisničkog

interfejsa, kako je nastao, te kako je napredovao kroz godine. Navešćemo takođe koji su to

principi za uspješan dizajn grafičkog interfejsa, te provesti kroz proces samog stvaranja

interfejsa. Nakon teorijskog dijela, predstaviću vam svoj projekat, odnosno praktični primjer

biblioteke. Praktični dio sam radio u MS Accessu. Opisaću vam način na koji sam načinio

biblioteku korak po korak, te pomoću slika približiti još više obrađenu temu.

4


1. ŠTA JE TO GUI?

GUI (Graphical User Interface) predstavlja grafički korisnički interfejs, odnos softversko

okruženje koje omogućava adekvatnu komunikaciju između korisnika i kompjutera kroz slike,

prozore, ikonice i menije. Cilj grafičkog korisničkog interfejsa jeste da poboljša djelotvornost i

omogući korisniku jednostavno korušćenje određenog programa. Tako bi smo mogli reci da GUI

predstavlja informacije i akcije koje su dostupne korisniku kroz određene vizuelne segmente kao

što su boja, pozicija i simetrija nasuprot interfejsu koji se zasniva na tekstu i tekstualnoj

navigaciji. Direktnom manipulaciom grafičkih elemenata obično se izvode određene akcije.

Ono što je važno jeste dizajn grafičkog korisničkog interfejsa. Kao prvo treba se napraviti

dizajn koji je prijatan za oko korisnika, koji je jednostavan za korišćenje, a isto tako i efikasan.

Ono što je dobro jeste da se dizajn može mjenjati. Korisnici su ti koji daju određene zahtjeve, te

mogu tražiti specifične izmjene, ili prepustiti dizajneru da napravi te ismjene po svojoj volji u

sklopu zahtjeva korisnika.

U nastavku rada ću objasniti sve vezano za dizajn, šta predstavlja dobar dizajn, koja su

pravila za uspješan dizaj grafičkog interfejsa, koje su njegove pozitivne strane te koje su greške u

dizajnu.

5


2. DIZAJN KROZ ISTORIJU

U današnje vrjeme upotreba računara je svakidašnja, i koristi se za razne namjene.

Računari se koriste u poslovne svrhe, ali isto tako i kao izvor informacija i zabave. Koja god

osoba da je za računarom, smatra se da će koristiti GUI. Korisnici očekuju da će pomoću

tastature i miša moći da upravljaju, odnosno zadaju računaru naredbe o otvaranju određene

ikonice, pomjeranju prozora i slično. Ako se vratimo u istoriju svatićemo da to nije uvjek bilo

tako. Vjerovatno sve zanima zašto su računari usvojili grafički korisnički interfejs za osnovni

način interakcije sa korisnicima?

Razne ideje o računaru koji koristi grafički korisnički interfejs su davno smišljene.

Vannevar Bush je bio jedan od privh koji je iznio ovakvu ideju. On je ranih 1930-tih prvi put

opisao uređaj koji je nazvao Memex. On je zamislio Memex kao uređaj u vidu stola sa dva

ekrana, u kojem bi pojedinci preko tastature i skenera mogli sačuvati svoje knjige, evidencije i

slično, i to sve koristeći veze koje su slične vezama u web dokumentima. Ali postojao je jedan

problem, još uvjek digitalni kompijuter nije bio izmišljen tako da nije bilo moguće da se odmah

ostvari njegova ideja.

Početkom 1937. godine počelo je stvaranje digitalnih računara. Možemo reći da je Drugi svjetski rat služio kao podstrek da se proizvedu mašine koje se mogu programirati za razne namjene izračunavanja.

Bush ponovo 1945. godine objavljuje članak koji naziva „Kako razmišljamo“, te inspiriše

mladog Douglasa Englebarta koji je diplomirao i zaposlio se u NACA institutu da pokuša

napraviti takvu mašinu.

Dok je Douglas Englebart radio istraživanje na Stenfordu, dobio je finansijsu podršku da

napravi prvi grafički korisnički interfejs. Njegova prezentacija održana je 1968. godine, te ju je

vidjelo više od 1000 ljudi. Douglas je sistem nazvao NLS sistem, odnosno On-Line System.

Njegov sistem se sastojao od tastature, miša, kompijutera povezanih u mrežu, ekrana sa

prozorima, dokumentima koji su otvoreni preko cijelog ekrana, e-mail-ova, http linkova i

komuniciranja putem video sistema. Na narednoj slici (Slika 1.) prikazaćemo kako je izgledao

Douglasov On-Line System.

6


Slika1. On-Line System

Ukoliko posmatramo današnju tehnologiju, ovaj sistem je poprilično zastario, ali tada su

korisnici bili zapanjeni, s obzirom da do tada tako nešto nije bilo viđeno.Prezentacija se posebno

svidjela inženjerima iz firme Xerox, koji su odmah zamislili budućnost u kojoj bi kancelarije bile

bez papira.Tada je Xerox bila najpoznatija firma po proizvodnji uređaja za kopiranje.

1970. godine Xerox je odlučio da napravi istraživački centar pod nazivom PARC. PARC

je bio poznat po doprinosu razvoja kompijuterskih tehnologija.Najbolji inžinjeri iz cijeloga

svijeta su radili u centru.Cilj mu je bio da napravi prvi komercijalno dostupni grafički korisnički

interface.

Prvi računar sa grafičkim korisničkim interfejsom bio je Xerox Alto računar. Na narednoj slici

prikazaćemo njegov GUI(Slika 2.).

7


Slika2. Xerox Alto Smalltalk GUI

Njega je razvila firma PARC 1973.godine. Sam računar se dosta razlikovao od tadašnjih

računara. Imao je GUI I miš koji je izumio Douglas E.. Monitor je u tadašnje vrjeme bio crno

bijeli, a veličina računara je bila tolika da može stati ispod radnog stola. Na narednoj slici (Slika

3.) vidjećete prvi računarsa GUI-em, Xerox Alto.

Slika3. Xerox Alto

8


Xerox Alto je bio desktop računar. Četiri godine nakon njegovog pojavljivanja pojavio se

i Apple računar. Kako Xerox nije znao kako da predsavi tržištu Alto, i njegovog nasljednika Star

1981. godine, Apple koristi priliku i predstavlja svoj računar tržištu sa grafičkim korisničkim

interfejsom. Nakon par posjeta Xeroxa, Apple 1983. godine predstavlja računar Lisu, koja baš

dobro ne prolazi na tržištu. Apple nije to zaustavilo, već sledeće godine na tržište izbacuje

Macintosh(Mac), koji doživljava neviđen uspjeh. Zbog svog dizajna Mac se često mogao vidjeti

u filmovima, a između ostalog koristile su ga i mnoge škole širom Amerike. Na narednoj slici

(Slika 4.) možete vidjeti kako je izgledao Apple-ov računar Macintosh sa GUI.

Slika4. Macintosh Apple

Apple izbacuje I verziju Mac OS X, gdje usvaja neke od elemenata Microsoft Windowsa

OS-a. Usvojio je elemente minimiziranja, povećanje prozora aplikacije i element gašenja,

odnosno izlazka iz prozora, uz neke male promjene.Mac OS X je na dnu ekrana stavio listu

prečica od aplikacija. Appelov novi grafički interfejs su nazvali Aqua.

Slika5. Mac OS X, Aqua grafički interfejs

9


Što se tiče kompanije Microsoft, prvi računar sa grafičkim korisnickim interfejsom

izbacuje na tržište 1985. godine. To je bio Microsoft Windows 1.01, koji možete vidjeti na

narednoj slici (Slika 6.).

Slika6. Microsoft Windows 1.01 – GUI

Hardver kod Microsoft Windowsa 1.01 je bio previše slab I nije mogao da podrži GUI.

Tek kada je Intel predstavio 80286 i 80386 procesore, Microsoft je nastavio da nadograđuje

Windows 2. Kada je Windows 2 izašao nije bilo mnogo razlike u izgledu od Microsoftovog

Windows-aa 1.01.

Razvojem grafičkih kartica omogućila se veća rezolucija prikaza, te Microsoft to koristi

na pravi način i izbacuje na tržište 1990. Godine Windows 3.0 (Slika 7.).

Slika 7. Microsoft Windows 3.0

10


Sa Windowsom 3.0 korisnici su mogli da rade u više programa odjednom. Kako je

dolazio sa novim računarima, Windows 3.0 se brzo proširio na tržištu. Ubrzo nakon toga on

postaje standard za IBM PC računare. Nakon toga Microsoft izbacuje i novu unapređenu verziju

Windows 3.1, a odmah za tom verziom i 3.11 verziju koja je imala podršku za mreže. Na

narednoj slici (Slika 8.) možete vidjeti kako je izgledao Windows 3.11.

Slika 8. Microsoft Windows 3.11

Nakon prethodno navedenih verzija, Microsoft 1995. godine izbacuje Windows 95.

Mnogo se razlikovao od prethodnih verzija. Sadržala je taskbar, start meni i slično. Postojale su

nakon toga neke nadogradnje na Windows 95, ali se nisu bas proslavile.

Slika9. Microsoft Windows 95

11


Microsoft je i dalje nastavio da izbacuje svoje proizvode, pa su tako na tržiste izasli i

Windows NT, pa zatim Windows 2000. Nakon toga na tržište izbacuje i Windows XP 2001, koja

je dolazila u dvije verzije: Windows XP professional i Windows XP home. Razlika je bila jako

mala.Home verziji su nedostajali neki mrežni i administratorski alati, dok u professional verziji,

koja je bila namjenjena za poslovne korisnike, su postojali ti alati.

Microsoft 2006. godine izbacuje Windows Vistu, koja je bila veliko izdanje u odnosnu na

prethodne njihove proizvode. Ono što je Vistu činilo drugačiom jeste novi grafički korisnički

interfejs. Novi interfejs Microsoft je nazvao Aero. Možemo reći da je Microsoft prisvojio neke

elemente od Apple-a, odnosno Mac OS X, a to su providni prozori. Takođe, novi interfejs se

razlikovao od prethodnih i po tome sto je izmjenio izgled starta, i dao mogućnost pretraživača

starta, te je omogućio direktnu pretragu fajlova direktno iz prozora explorera, i još je dodao neke

od sigurnosnih mjera. Sve to ćete vidjeti na narednoj slici (Slika 10.).

Slika 10. Microsoft Windows Vista

12


Nakon Viste Microsoft na tržište 2009. godine izbacuje Windows 7. Ono što Windows 7

čini boljim od ostalih jeste smanjen broj grešaka i ubrzan rad. Međutim što se tiče grafičkog

interfejsa promjenjeno je dosta toga. Redizajniran je kalkulator, toolbar je izbačen, umjesto toga

ubačen je element,sličn kao kod Mac OS X, gdje se prečice programa mogu zakačiti. Dodato je

dosta tema za mjenjane boja prozora i pozadine. Takođe je dodato i prepoznavanje pisanog

teksta. Ono što je još izmjenjeno jeste i Microsoft Office 2007, koji je dobio potpuno novi izgled

u skladu sa Windows 7. Na narednoj slici (Slika 11.) možete vidjeti kako izgleda Windows 7.

Slika 11. Microsoft Windows 7

Sljedeća verzija pojavljuje se 2012. godine pod nazivom Windows 8. Microsoft se

potrudio i upotpunosti izmjenio grafički korisnički interface. Ono što ih je posticalo na to jeste

pojava smartphone telefona. Pošto su smartphone telefoni osjetljivi na dodir Microsoftova

zamisao je bila da predstavi OS Windows osmice bude u vidi mnogo pločica, koje bi se mogle

pomjerati prstom. Za sada još uvjek kućni računari nisu osjetljivi na dodir. Kod Windows 8 OS

da bi se pokazao početni ekran potrebno je pritisnuti tipku windows na tastaturi. U ovoj verziji je

izostavljen start meni. Na narednoj slici (Slika 12.) imaćete mogućnost da vidite kako izgleda

Windows 8.

13


Slika12. Microsoft Windows 8

Korisnicima se nije baš u potpunosti svidio ovaj grafički korisnički interfejs, pa su simulirali rad

Start menija.

2.1. Mobilni računari i telefoni

Grafički korisnički interfejs se pojavio takođe i na mobilnim telefonima. U poslijednje

vrjeme GUI se mnogo popravio što se tiče mobilnih telefona. U nastavku ćemo reći nešto o

najpoznatijim telefonima i njihovom interfejsu.

Apple je 2007. Godine izbacio iPhone. Ono u čemu se iPhone razlikovao od drugih

telefona jeste u potpunosti drugačiji interfejs. Tadašnji telefoni su imali sporo korišćenje

aplikacija i tipki, dok je iPhone ponudio nešto sasvim drugačije, a to je ekran osjetljiv na dodir.

Povlačenjem prsta preko ekrana se sve moglo obaviti na telefonu. Korišćenje je bilo jako

jednostavno i bez suvišnih i komplikovanih opcija. Te iste godine Apple je izbacio i novi

proizvod iPod, koji je imao sve osobine kao i iPhone osim telefoniranja. Iz godine u godinu

iPhone izbacuje novu seriju mobilnih telefona, i postaje jaka konkurencija svim ostalim

proizvođačima mobilnih telefona.

14


Pored iPhona pojavljuju se 2008. godine i smartphone telefoni koji koriste Android OS.

Android vremenom postaje jako dodtjeran OS, sa jakim animacijama i primamljivog izgleda.

Razlikuje se od iPhona, ali u suštini obavlja iste funkcije, i lako se prilagoditi.

Na tržište nešto kasnije dolazi i Windows Phone 2010. Godine. Postojale su dvije

verzije: Windows Phone 7 i Windows Phone 8. Nokija koja je najveći proizvođač ovih uređaja.

Microsoft je Nokiu kupio 2013. godine, a 2011. godine su objavili savezništvo.

Slika13.Iphone, Windows Phone i Android OS

Na prethodnoj slici možete vidjeti spomenute telefone I kako izgleda njihov grafički

korisnički interfejs.

15


3. PRINCIPI DIZAJNIRANJA KORISNIČKOG INTERFEJSA

Možemo reći da je kreirati grafički korisnički interfejs prava umjetnost. Kao što sam na

početku rada rekao, potrebno je napraviti sistem koji je prije svega prijatan za oko, a takođe

efikasan i jednostavan za korišćenje. U nastavku ćemo navesti neke od principa dizajniranja

korisničkog interfejsa.

3.1. Forma

Kako bi lakše radili sa informacijama i kako bi one bile pregledne, skoro svaki sistem se

djeli na određene djelove. Jedan važan koncept dizajniranja interfejsa jeste kako će djelovi

sistema biti raspoređeni. Pretežno se djele na tri djela. Prvi dio pretežno je namjenjen za

navigaciju. Drugi dio je namjenjen radu korisnika, dok je treći dio(donji dio) namjenjen

podacima o radu korisnika. Možemo reći da se pretežno sve Internet stranice dizajnirane na ovaj

način. Kako bih vam još više približio ovo, na narednoj slici (Slika 14.) je prikaz ekrana sa pet

logičkih cjelina.

Slika14. Forma sa navigacijama

16


17


Na prethodnoj slici vidimo da je na vrhu, odnosno početnom djelu navigacija koja

omogućava prolaz kroz sistem. Na centralnom dijelu vidimo rezultat pretrage, u našem slučaju

knjige. Ispod centralnog djela imamo navigaciju u okviru stranice, dok sa lijeve strane imamo

navigaciju između sekcija. U donjem lijevom uglu vidimo statusnu liniju, odnosno informacije o

radu korisnika. Ono što je jako bitno jeste imati dobru podjelu kroz cijeli sistem. Ukoliko u svim

formama imamo iste djelove rad korisniku će biti mnogo lakši i jednostavniji. Ono što je cilj

navigacije jeste da omogući korisniku manje prelaza iz cjeline u cjelinu da bi završio svoj posao.

Da bi se to omogućilo potrebno je upotpunosti shvatiti sistem koji se načinjava.

3.2. Razumljivost sadržaja

Ono što treba da korisnički interfejs omogući jeste dostupnost informacija. Važno je da u

svakom trenutku korisnik zna gdje se nalazi i odakle je došao, a to postižemo sa jasnim

naslovima, ne važno da li se radi o glavnoj strani ili drugima. Ono što je takođe važno jeste i

datumi postavljanja informacija, radi njihove validnosti. Isto toliko je važno i da su podatci

jasno definisani, da ne bi došlo do zabune. Ukoliko postoje dvosmisleni podaci (kao što su

datumi koji se različito tumače kod nas i u SAD) potrebno je objasniti koje je tačno značenje.

3.3. Estetika

Možemo reći da je estetika jedan od važnijih principa korisničkog interfejsa. Ukoliko

korisnika zatrpamo sa bezbroj informacija i bezbroj polja za popunjavanje, pobjeći će. Ono što je

važno jeste da interfejs bude prijatan za oko korisnika. Jednostavnost je ono što je potrebno za

dobar interfejs. Naravno, uvjek imamo dva mišnjenja: mišljenja početnika i mišljenja eksperta.

Ekspertima bi bilo odlično rješenje da je površina prekrivena sa svim informacija, jer bi brže

obavljali posao, dok početnim korisnicima to stvara konfuziju u glavi. Po mom mišljenju

najbolja bi bila zlatna sredina, ni previše ni premalo informacija na glavnoj strani.

Ono što estetika uključuje jeste i dizajniranje teksta. Font koji se koristi trebao bi biti izabran u

zavisnosti kojim korisnicima je namjenjen. On ne trebao biti previše velik, isto tako ni previše

malen. Boje je potrebno koristiti samo ako imaju neki cilj(da naglase određen dio ili izazovu

neku emociju). Cilj estetike teksta jeste da je prijatan za oči čitaoca.

18


3.4. Iskustvo korisnika

Možemo reći da imamo dvije grupe korisnika. Te grupe su: korisnici koji su iskusni i

početni korisnici. Iskusni korisnici zahtjevaće interfejs koji je jednostavan za korišćenje, dok

početnici, koji su novi u korišćenju sistema, zahtjevaće sistem koji se lako uči i u kojem se lako

snalaze. Važno je da se sistem prilagodi i jednoj i drugoj grupi korisnika, s tim je važno da se

sistem i lako uči i lako koristi, a prije svega važno je da se zna koja je namjena sistema.

Razna istraživanja su pokazala da ove dve grupe korisnika različito gledaju na stvari vezane za

interfejs. Dok je iskusnijim korisnicima bespotrebno da je meni sa svim funkcijama izražen, to je

početnicima jako važno, jer im omogućava lakše savladavanje sistema. Takođe dok je statusna

linija iskusnijim korisnicima jako važna, početnicima je ne važna. Jako je teško izbalansirati

interfejs da bude jednostavan i prilagođen za obe grupe korisnika.

3.5. Dosljednost

Dosljednost je ono što se traži u korisničkom interfejsu. Korisnici uvjek žele da ih novi

sistem posjeti na nešto što su već koristili, te tako lakše savladaju njegovo korišćenje. Treba se

potruditi da korisnicima stvorite osjećaj da su takav sistem već koristili, i ako je u potpunosti

drugačiji od prethodnih i vide ga prvi put. Ako bismo trebali objasniti pojam dosljednosti, rekli

bismo da se pojam dosljednosti odnosni na sličnost sa drugim(u našem slučaju sistemima), koji

su poznati korisnicim. U korisničkom interfejsu potrebno je da bude dosljedan u mnogim

stvarima i detaljima. Potrebno je koristiti iste ikone za iste stvari, takođe i terminologiju (iste

rječi za iste elemente). Koliko je važna dosljednost toliko je važna i različitosti između firmi.

Svaka firma koristi određene boje, logo i slične stvari kako bi bili jedinstveni, i kako nebi došlo

do zbunjivanja korisnika.

3.6. Minimizacija korisničkog napora

Ono što je takođe važno jeste i napor koji korisnik ulaže tokom korišćenja sistema.

Preporučuje se „pravilo tri klika“. To pravilo nagovještava da je dobro da pomoću tri klika

mišem korisnici dođu do željene informacije.

19


4.PROCES DIZAJNIRANJA

Možemo reći da se sam proces dizajniranja sastoji od pet koraka. U nastavku ću Vam

predstaviti te korake koji su obuhvaćeni procesom. Ono što je obavezno jeste da se koraci

obavljaju jedan za drugim. Dizajneri interfejsa se nekada i više puta vraćaju na isti korak,

ukoliko je to potrebno. Na narednoj slici (Slika 15.) prikazaćemo spomenute korake te ih onda i

objasniti.

Slika 15. Koraci u procesu dizajniranja korisničkog interfejsa

Koraci koji predstavljaju proces dizajniranja korisničkog interfejsa su sledeći:

Razvoj scenarija upotrebe - ispitivanje dijagrama tokai ispitivanje slučajeva upotrebe

koji nastaju u fazi analize, te ispitivanje korisnika da bi došli do informacija o njihovim

navikama prilikom korišćenja sistema;

Dizajn strukture interfejsa – pravljenje dijagrama o samoj strukturi interfejsa;

20


21


Dizajn standarda interfejsa – dizajniranje glavnih elemenata interfejsa sistema;

Dizajn prototipova interfejsa – izrada prototipa za glavne djelove sistema;

Procjena kvaliteta interfejsa – izlaganje provjerama pojedinačnih interfejsa radi

utvrđivanja njihove ispravnosti i unapređenja.

Pošto znamo da pretežno prve verzije budu pune grešaka i zahtjevaju mnoge ispravke i

poboljšanja, ovaj proces je jako važan. Kao što sam prethodno spomenuo dizajneri se nekada

više puta vraćaju na isti korak upravo radi ispravljanja grešaka i usavršavanja sistema. Često

imamo demo verzije, gdje su korisnici u mogućnosti da ispitaju određen interfejs i doprinesu

njegovom poboljšanju. U nastavku rada ću pojedinačno proći kroz faze i detaljno ih opisati.

4.1. Razvoj scenarija upotrebe

Ono što predstavlja scenario upotrebe jeste koraci koje korisnik prolazi da bi obavio

određen zadatak. Scenario je pretežno tekstualni opis, koji je povezan sa dijagramima tokova

podataka i slučajevima upotrebe. Njegov cilj jeste prepoznati koje su potrebe korisnika moguće

tokom korišćenja sistema. Da bih vam približio ovo navešću primjer. Prilikom kupovine

određenog proizvoda postoje dvije vrste kupaca: kupci koji će bezciljno tražiti proizvod koji će

im zapasti za oko i oni kupci koji su sa ciljem došli da kupe određen proizvod i brzo obave

kupovinu. I jedan i drugi primjer se smatra posebnim scenariom upotrebe.

4.2. Dizajn strukture interfejsa

Ono što definiše glavne djelove IS jeste upravo struktura interfejsa. Struktura interfejsa se

predstavlja sa strukturnim dijagramima. Na strukturnim dijagramima se vidi sve vezano za

interfejs, od ekrana, forme, pa sve do izvještaja i prelaza između njih. Za svaki glavni dio sistema

se pravi po jedan dijagram. Možemo reći da je ovaj dijagram jako sličan i dijagramu toka

podataka. Razlika ova dva dijagrama jeste što u dijagramima strukture ne postoje neka posebna

pravila za načinjavanje. Na narednoj slici (Slika 16.) predstavićemo kako to izgledaju dijelovi

interfejsa i veze između njih.

22


Slika16.Dijagram strukture interfejsa

Kao što možete primjetiti na prethodnoj slici djelovi interfejsa su predstavljeni

pravougaonicima, dok su veze predstavljene linijama. U pravougaoniku imamo tri djela. U

prvom dijelu je zapisan jedinstveni broj, drugi, odnosno srednji dio je namjenjen jedinstvenom

nazivu interfejsa, dok treći dio je namjenjen broju koji označava proces dijagrama toka podatka.

Možemo vidjeti na prethodnoj slici da jedan proces može imati više različitih interfejsa, pa npr

proces 1.1.1 ima interfejse 1.1, 1.2 i 1.3. Isto tako proces može imati samo jedan interfejs kao što

je kod nas primjer proces 1.1.3.1. Linije koje povezuju dijelove interfejsa predstavljaju

hijerarhiju, mada neki dijelovi mogu biti povezani sa dijelovima iz drugih hijerarhija.Kada se

načini dijagram strukture interfejsa, sledeći zadatak je da se provjere koliko njegova podudarnost

sa scenariom korišćenja. Pomoću toga se mogu otkriti greške u sistemu, i ako dođe do toga,

dijagram se ispravlja. Već sam prethodno spomenuo da se zato dizajneri vraćaju više puta na isti

korak.

23


4.3. Dizajn standarda interfejsa

Ono što predstavlja standard interfejsa jesu glavni elementi dizajna koji su slični

pojedinačnim ekranimam, formama i izvještajima u sistemu. Mogu se koristiti različiti standardi

za pojedine djelove u sistemu. U nastavku ću opisati neke od djelova interfejsa.

4.3.1. Metafora interfejsa

Prije počinjanja pravljenja interfejsa, analitičari su ti koji trebaju da zamisle kako bi u

suštini trebao da radi taj interfejs. Kao i u svemu tako i u dizajniranju određenog sistema,

potreban je prvobitni model po kome će se načiniti taj sistem. Možemo reći da metafora

interfejsa u suštini predstavlja koncept realnog svjeta koji se kasnije koristi kao model za samu

izradu sistema. Metafora interfejsa pomaže korisnicima da u potpunosti razumiju sistem i stvore

sliku o funkcijama koje on podržava. Sistem može imati jednu ili nekoliko metafora za svaki dio

sistema. Cilj je pronaći metaforu koja će u potpunosti odgovarati sistemu. Ukoliko je metafora

loša može doći do zabune korisnika, i ne shvatanja sistema.

4.3.2.Šabloni interfejsa

Template ili šablon interfejsa predstavlja generalni izgled svih dijelova sistema. On

obuhvata formu svih ekrana, način zamjene prozora, uobičajno mjesto čestih komandi itd.

Možemo reći da je šablon interfejsa taj koji sklapa sve dijelove sistema u jednu cijelinu.

4.3.3. Objekti interfejsa

Entiteti i skladišta podataka, odnosno osnovni dijelovi sistema su u suštini objekti

interfejsa. Imena objekata interfejsa se navode u šablonu koji sam prethodno objasnio. Ono što je

važno jeste da imena budu što jasnija, odnosno da budu razumljiva korisniku. Ponekad zna doći

do neslaganja oko imena objekta između korisnika i analitičara.

24


4.3.4. Akcije interfejsa

Gramatika se određuje prethodno opisanim šablonom, a pod gramatikom se smatra

redoslijed označavanja objekta i poduzimanje akcije. Imamo različite interfejse. Neki od njih

koriste gramatiku u kojoj se prvo označi objekat pa odabere akcija, a kod nekih interfejsa se prvo

odabere akcija pa označi objekat.

4.3.5 Ikone interfejsa

Ikone interfejsa predstavljaju male slike koje asociraju korisnike kako koristiti nešto.

Ikonama se predstavljaju objekti, akcije i njihovo stanje, odnosno da li su obrisani ili su tek

unešeni. Jako je teško dizajnirati ikone, jer na tako maloj površini potrebno je predstaviti

kompleksno značenje nečega. Preporučuje se da dizajneri koriste već poznate ikonice korisniku,

kao što su na primjer, disketa - da bi smo sačuvali nešto, bijeli papir – otvaranje nove strane i

slično. Ove ikonice korisnici su već imali priliku da vide u nekim drugim sistemima i unaprijed

će znati njihovo značenje, te će im biti lakše raditi na novom sistemu. I ako svi koriste ikonice,

ikonice često znaju i da zbune korisnika, te se zato koriste tekstualni opisi, koji se pojave ukoliko

zadržite miš na određenoj ikonici.

4.4. Dizajn prototipova interfejsa

U početku se koristio papir kako bi se približilo to šta će biti prikazano u svim dijelovima

sistema. Danas imamo prototip interfejsa koji predstavlja simulaciju ekrana, raznih formi koje

sadrži sistem. Ono zbog čega se za svaki interfejs pravi prototip jeste da bi samim programerima

i korisnicima bilo jasno kako će se ponašati načinjen sistem. Danas je sve češća upotreba

računarskih alata za izradu prototipova. Postoje tri pristupa dizajniranju prototipova, a to su:

Urađena šema, HTML prototip i jezički prototip. Pretežno se koristi kombinacija sva tri tipa. U

nastavku ću vam svaki pojedinačno opisati.

25


4.4.1. Urađena šema

Šta predstavlja urađena šetma? Da to je svakako najjednostavniji prototip za koji je

potreban samo paapir i olovka. Na papir stavljamo figure koje pokazuju kako bi trebalo da

izgleda ekran. Na narednoj slici (Slika 17.) prikazana je urađena šema, gdje možemo vidjeti i

prelaze iz ekrana u ekran.

Slika17.Urađena šema

4.4.2.HTML prototip

U današnje vrijeme najčešći prototipovi su HTML. Ovi prototipovi služe da u potpunosti

predstave kako će sistem stvarno izgledati. Možemo reci da su ovi prototipovi serija Web

stranica u HTML-u, gdje korisnik može da stekne osjećaj korišćenja sistema koji se tek pravi.

Ovaj vid prototipa je mnogo bolji od uređenih šema. Ukoliko sistem koji je u fazi izrade nije

Web sistem u HTML, prototipovi neće prikazati u potpunosti tačan izgled ekrana, ali prikazaće

dovoljan prikaz kako bi se korisnik mogao orjentisati i vidjeti pretežno sve stvari.

26


4.4.3. Jezički prototip

Treći način prototipova jesu prototipovi koji se prave koristeći određene alate ili

programske jezike. Ti prototipovi se prave u programskom jeziku u kojem će biti napravljen i

sam sistem. Imaju isti cilj kao i HTML prototipovi. Cilj im je da korisnici imaju pristup i pregled

kretanja kroz sistem. Mnogo je zahtjevnija izrada ovih prototipova, od bilo kojih drugih, ali je

zato i efikasnija. U ovom prototipu korisnik dobija tačan izgled kako će određeni sistem

izgledati.

4.5. Procjena kvaliteta interfejsa

Nikada ne možemo garantovati da će dizajn interfejsa biti po ukusu svakog korisnika,

zato postoji procjena kvaliteta interfejsa. Cilj procjene kvaliteta interfejsa jeste da se interfejs što

je više moguće poboljša i prilagodi većini korisnika. Dizajneri naprave grešku pretežno u tome

što dizajniraju sistem po svom ukusu, koji je previše komplikovan običnim korisnicima.

Potrebno je da što više ljudi obavi procjenu, uključujući i krajnje korisnike tog interfejsa.

Po pravilu trebalo bi se odmah dizajnirati interfejs po načinjavanju samog sistema. Tako

bi od samog početka mogle da se zaobiđu velike greške i bude manje izgubljenog vremena na

ispravljanju većih grešaka. Normalno je da svaki sistem sadrži greške koje se moraju ispraviti.

Mnoge organizacije stavljaju procjenu na kraju razvoja sistema. Po mom mišljenju to je greška,

jer ukoliko se otkriju neispravnosti, organizacija ima veliki problem pri uklanjanju tih istih

neispravnosti.

Imamo nekoliko pristupa procjeni interfejsa. Neke od njih su: heuristička procjena,

procjena prolazka kroz interfejs, interaktivna procjena i formalni testovi upotrebljivosti. U

nastavku ću opisati sve navedene procjene interfejsa.

27


4.5.1. Heuristička procjena

Upoređivanje načinjenog interfejsa sa principima dizajniranja interfejsa možemo reći da

predstavlja heurističku procjenu. U ovoj procjeni tim koji je zadužen za razvoj pravi spisak svih

principa, nakon toga ga neki od članova tima provjeravaju i zaključuju da li je interfejs u skladu

sa stavkama. Nakon toga se sprovode neka od potrebnih unapređenja. Ovo je najlošiji tip

procjenjivanja, jer nema dodirnih tačaka sa korisnicima.

4.5.2. Procjena prolazka kroz interfejs

U procjeni prolazka kroz interfejs članovi tima koji dizajniraju taj sam interfejs, upoznaju

korisnike sa prototipom i objašnjavaju kako će se interfejs koristiti. Korisnici tako mogu da

imaju uvid u to kako će završni interfejs da izgleda, te iznjeti svoje mišljenje ukoliko im se nešto

ne svidi.

4.5.3. Interaktivna procjena

Interaktivna procjena je procjena kroz koju krajni korisnici prolaze sa nekim od članova

tima koji načinjavaju taj interfejs. Korisnici prolaze kroz prototipove i daju svoje mišljenje o

tome šta im se sviđa ili šta bi promjenili u samom interfejsu. Ako se kod više korisnika na istom

mjestu ponovi nezadovoljstvo, to znači da je potrebna izmjena interfejsa na tom mjestu. U

interaktivnoj procjeni se koriste HTML prototipovi ili jezički prototipovi, nije moguće koristiti

uređene šeme.

4.5.4. Formalni testovi upotrebljivosti

Najskuplji vid procjene interfejsa su upravo formalni testovi upotrebljivosti, te se zato

koriste samo kod velikih projekata. Ovaj vid procjene se obavlja samo uz pomoć jezičkih

prototipova. Formalne testove samostalno obavljaju korisnici uz video nadzor, i praćenje svakog

njihovog koraka u programu. Ono što sadrži test jeste upravo prolazak kroz scenarije upotrebe

koje sam prethodno naveo u radu. Testiranje ne traje dugo u prosjeku jedan do dva časa. Nakon

testiranja korisnika, analiziranje rezultata traje nekoliko dana, dok se pregledaju sve snimljene

trake i baze iz računara. Pretežno od pet do deset korisnika učestvuje u ovim testovima. Kako

znati izmjeriti kvalitet? Mjerilo kvaliteta su obično vrjeme za koje je korisnik završio zadatke,

njegove napravljene greške i zadovoljstvo korisnika.

28


29


5. PRAKTIČAN PRIMJER GUI-A

Kao što sam već naveo tema praktičnog dijela mog rada je aplikacija za malu

biblioteku.U nastavku ću prikazati kako sam modelirao i napravio jednu malu bazu podataka ,te

na nju napravio jednostavni grafički korisnički interfejs-GUI. Za izradu praktičnog dijela rada

sam koristio Microsoft Office Access 2007, alatku iz Microsoft Office 2007 paketa.

Cilj mog praktičnog rada je da se pokaze kako se pravi baza podataka nadograđuje GUI i

kako se on uopšte pravi.Takođe će pokazati relacije u samoj bazi. U ovom dijelu to ću opisati i

pokazati korak po korak.

5.1. Pravljenje baze i tabela u njoj

Slika 18. Pravljenje baze

Nakon što otvorimo MS Access, imamo opciju Blank Database (strelica pod brojem 1.),

biramo tu opciju, nakon toga upisujemo ime baze i idemo na opciju Create (strelica br.2), (Slika

18.). Upravo smo uspješno kreirali praznu bazu podataka, koju moramo da modeliramo i

napunimo sa podacima.

30

1

2


31


Slika 19. Pravljenje tabela u bazi

1. Opciju Table design koristimo da bi napravili novu tabelu u nasoj bazi, tu takođe

možemo da dizajniramo i izgled naših tabela.

2. Nakon sto napravimo novu tabelu, dodajemo joj entitete. U primjeru mog rada ja sam

napravio 3 tabele (Članovi, Knjige i Protokol). Tabela Članovi ima sledeće enititete :

ClanID, ime, prezime, datum rodjenja i adresa stanovanja. Tabela Knjige ima sledeće

enititete: KnjigaID, NazivKnjige, Pisac, Nobelovac,GodinaIzdavanja i Vrsta književnog

dijela. Tabela Protkol ima sledeće enititete: ProtkolID, ClanID, KnjigaID,

DatumVraćanja i DatumZaduživanja.

3. Kada smo odredili entitete u našim tabelama, svakom od entiteta dodjeljujemo određeni

tip podataka koji će taj entitet koristiti. Tipovi podataka koje sam ja koristio u svojim

tabelama su Text, Number, Date/Time i Auto Number (Auto Number je tip podataka koji

koristi bojeve koji se automtski povećavaju sa svakim sledećim unosom u tabelu).

32

2

1

3


Takođe jedno od entiteta u svakoj tabeli dodjeljujemo opciju primarni ključ. Primarni

ključ je ključno polje u tabeli koje služi da se kontroliše način na koji se informacije iz jedne

tabele povezuju sa drugim tabelama.

Slika 20. Veza tabela u bazi podataka

1. Ovo je najjednostavniji nacin kako povezati tabele u bazi podataka,povezujemo ih preko

primarnog ključa.Imamo mogućnost povezivanja jedan na jedan i jedan na više.To u

principu znaci da jedan entitet iz tabele možemo povezati sa više drugih entiteta iz vise

tabela, ili samo sa jednom tabelom.U slučaju brisanja ili izmjene podataka u jednoj tabeli

to će se odraziti na drugu tabelu sa kojom je ta tabela povezana.

Da sam koristio ovaj način povezivanja prilikom pravljenja baze,u tabeli Protokol bi u

entitetima ClanID i KnjigaID prikazivali samo ID ,zato cemo koristiti opciju Lookup Wizard,da

bi se umjesto ID-a prikazivali traženi podaci u teksutalnom obliku koji se povlace iz tabela

vezanih za tabelu Protokol.

33

1


Slika 21. Lookup Wizard

Svi koraci Lookup Wizarda

Slika 22. Lookup Wizard step by step

34

1 2

3 4


U tabeli Protokol smo na ClanID i KnjigaID pod menijem za Data Type isli na opciju

Lookup Wizard

1. Biramo koju kolonu hocemo da pregledamo (Lookup);

2. Biramo koju tabelu cemo za to koristiti;

3. Nakon što smo izabrali tabelu biramo podatke koje trazimo iz te tabele.Tu sam prikaze

podatake koje ce se prikazivati u rezultujućoj tabeli;

4. Dajemo ime rezultujućoj koloni.

Nakon sto smo to uradili za kolonu ClanID isto to uradimo i za kolonu KnjigeID pošto želimo i

podatke iz te kolone.

Slika 23.Primjenjeni Lookup Wizard u tabeli Protokol

Da bi olakšali unos podataka napravićemo Forme.One služe za jednostavnije unošenje

podataka u bazu.To podsjeća na papirni obrazac koji pokazuje informacije iz baze u

jednostavnom obliku,korisnik ne vidi tabele nego samo informacije.

35


Slika 24. Pravljenje formi

1. Forme pravimo tako što idemo na opciju Create – Forms – More Forms i tu pokrećemo

Form Wizard.

Slika 25. Koraci u pravljenju Formi

36

1

2

3

45


37


2. Nakon sto pokrenemo Wizard odaberemo tabelu Protokol i dodamo sve kolone iz nje

3. Biramo da li želimo prikaz unosa podataka po kolonama,tabeli itd...

4. Biramo izgled Forme

5. Dajemo ime formi i idemo na opciju finish čime je pravljenje forme završeno

Kao što vidimo olakšano nam je unošenje podataka preko forme nego da smo podatke

unosili u samoj tabeli.Na dnu forme imamo strelicu po kojoj se krećemo po formi.

Slika 26. Krajnji izgled forme

Nakon toga sam napravio Query ili Upit.Query je komponent baze kojom se koristimo

kada želimo naći i promjeniti određene podatke iz jedne ili više tabela.Query možemo koristiti

kao podlogu za izvještaje ili forme.

38


Slika 27. Pravljenje Query-a

Slika 28. Koraci Query Wizarda

39

1

2

3

4


1. Pravljenje upita ( Query ) se vrši preko opcije Create – Query Wizard.Nakon što

pokrenemo Query wizard.Tu imamo ponuđene opcije par različitih upita,ja sam za svoj

radi izabrao Simple Query wizard.

2. Iz tabela biram podatke koji nam najčešće trebaju.Iz tabele Clanovi sam uzeo podatke za

ime i prezime,iz tabele Knjige sam uzeo kolone NazivKnjige i Pisac, dok sam iz tabele

Protokol uzeo podatke o DatumuZaduzivanja i DatumuVracanja knjiga.

3. Biramo detaljno prikazivanje da se prikažu svi podaci

4. Dajemo ime Upitu izavršavamo wizard(čarobnjaka)

Ovaj Query možemo koristiti kod štampanja izvještaja koji nam može biti potreban kada

budem trebali neke informacije u pisanoj formi.To radimo pomoći opcije Reports ili izvještaji.

Reports ili izvještaji služe za štampanje informacija iz baze.Oni se ne razlikuju mnogo od

obrazaca ,jedino što u izvještaju možemo gledati informacije,ali i lakše računati neke podatke

koji su nam potrebni ili dodavati slike.

Slika 29. Pravljenje Report-a

1. Idemo na tab Create ,pa na opciju Report Wizard;

2. Nakon toga u padajucem meniju biramo upit koji smo maloprije napravili,dodajemo sve

podatke iz tog upita.

40

1

2


Slika 30. Koraci Report wizarda

3. Grupisanje podataka po tome kako ih želimo vidjeti(clanovi,knjige,protokol)

4. Dodatno nivoi grupisanje, npr.( Ime,NazivKnjige itd.)

Slika 31. Koraci Report Wizarda

41

3 4

56

7

8


42


5. Možemo sortirati polja u opadajućem ili rastićem nizu

6. Biramo okvir i polozaj

7. Biramo izgled Reporta ,koji se u završnici prikazuje

8. Dajemo ime i završavamo pravljenje

Takođe možemo da izvršimo mjenjanje izgleda reporta.Kliknemo na opciju design view

na Report i otvori nam se meni gdje možemo da podešavamo krajnji izgled reporta.

Slika 32. Mjenjanje izgleda reporta

43


Slika 33. Krajnji izgled reporta

Na kraju pravimo Switchboard koji povezuje bazu sa GUI-jem tj. to je GUI.Switchboard

predstavlja par komandi koje mi spajamo sa bazom i njenim dijelovima,reportima,lookupom itd.

Krajnji korisnik aplikacije će koristiti switchboard ,u tabele i ostalo uopste ne mora ulaziti.

44


Slika 34. Kreiranje Switchboard manager-a

1. Idemo na Database Tools ,nakon toga kliknemo na opciju Switchboard manager;

2. Nakon toga idemo na opciju Edit ,gdje dajemo ime Switchboardu ( Biblioteka );

3. Nakon imenovanja switchboarda,idemo na opciju New gdje dodajemo tipke.

Slika 35. Koraci u pravljenju switchboard

45

1

2

3


Slika 36. Koraci u pravljenju switchboarda

4. Unos podataka.To je prva tipka u našem GUI-ju.Komanda će biti Open Form in Edit

mode,tada se unos pozicionira na prvi postojeći podataka u tabeli.Form je protokol gdje

se unosi i ova tipka se veže za tabelu Protokol.

Slika 37. Koraci u pravljenju Switchboarda

46

4

5


5. Naredna tipka koju pravmo je Stampanje.On će služiti za štampanje izvještaja (Reporta).

Komanda će biti Open Report. Kao switchboard koristimo report protokol koji smo

napravili prije.

Slika 38. Koraci u pravljenju Switchboarda

6. I jos jedna tipka koju ćemo dodati je Izlaz iz aplikacije. Komanda za nju je Exit

Application.

47

6


Pozatvaramo sve i to je kraj pravljenja GUI-a za ovu bazu.

Slika 39. Konačan izgled aplikacije

48


ZAKLJUČAK

Iz ovoga rada možemo zaključiti da je za rani razvoj grafičkog korisnčkog interfejsa

pretežno zaslužan Douaglas Englebert, ali su u njegovom razvoju učestvovali i mnogi drugi ljudi

i kompanije iz te branše. Takođe možemo primjetiti da se iz godine u godinu GUI mjenjao i sve

više unapređivao. Kompanije su, možemo reći, posuđivale neke stavke jedni od drugih i

predstavljali kroz svoje ideje, te tako unapređivali dalji razvoj interfejsa. Tako je došlo i do novih

generacija igraćih konzola. Neke od njih dolaze sa uređajima kao kamere sa mikrofonom, koji su

snimali pokrete i reagovali na dodir (to su Microsoft Xbox One).

Zaključili smo, takođe, da pri dizajniranju grafičkog korisničkog interfejsa treba voditi

računa da prije svega bude prijatan za oko, a takođe efikasan i jednostavan za korišćenje i

prilagođavanje. Na tome radi veliki broj stručnjaka, i iz godine u godinu nam nude sve bolja i

bolja grafička riješenja za interfejs.

Iz zadnjeg dijela, gdje sam uradio praktični primjer, odnosno aplikaciju za malu

biblioteku, mgli ste vidjeti kako sam modelirao i napravio jednu malu bazu podataka, a zatim na

nju napravio jednostavni grafički korisnički interfejs – GUI. Možete, takođe vidjeti da sam za

izradu ove aplikacije koristio Microsoft Access 2007, alatku iz Microsoft Office 2007 paketa.

49


LITERATURA

1. Butow, E. (2007). User Interface Design for Mere Mortals. Addison Wesley Professional.

2. (2007). In P. A. Laplante, What every engineer should know about software engineering . CRC Press.

3. Leslie Cortes, M. (1997, May). Designing a Graphical User Interface. Retrieved Octobar 2014, from http://medicalcomputing.org/archives/0agui.php

4. Reimer, J. (2005, May). A History of the GUI. Retrieved Octobar 2014, from ArsTechnica: http://arstechnica.com/features/2005/05/gui/

5. Shari, L. P., & Joanne, M. A. (2006). Softverskoinženjerstvo, teorijaipraksa.Beograd: CET.

50

GrafiČki korisniČki interfejs- GUI

Documents

Transcript of GrafiČki korisniČki interfejs- GUI