SVEUĆILIŠTE/UNIVERZITET „VITEZ” VITEZ FAKULTET POSLOVNE INFORMATIKE STUDIJ CIKLUS; GODINA STUDIJA: VII CIKLUS: IV GODINA SMIJER: INFORMACIONE TEHNOLOGIJE
GRAFIČKI KORISNIČKI INTERFEJS SEMINARSKI RAD
Travnik, 2017 godine.
0
SVEUĆILIŠTE/UNIVERZITET „VITEZ” VITEZ FAKULTET POSLOVNE INFORMATIKE STUDIJ CIKLUS; GODINA STUDIJA: VII CIKLUS: IV GODINA SMIJER: INFORMACIONE TEHNOLOGIJE
GRAFIČKI KORISNIČKI INTERFEJS SEMINARSKI RAD
Sadržaj: 1. UVOD.................................................................................................................................... 3 2. KORISNIČKI INTERFEJS.......................................................................................................... 4 1.1. Pojam korisničkog interfejsa ......................................................................................... 4 1.2. Usability („upotrebljivost“) korisničkog interfejsa ........................................................ 4 1.3. Vrste korisničkog interfejsa........................................................................................... 6 1.4. Grafički korisnički intefejs ............................................................................................. 6 1.4.1. Dizajn grafičkog korisničkog interfejsa kao deo aplikacije ..................................... 9 3. Korisnički interfejs Web aplikacije ..................................................................................... 10 3.1. Elementi korisničkog interfejsa ................................................................................... 10 4. Zaključak............................................................................................................................. 13 5. Literatura............................................................................................................................ 15 Popis slika ............................................................................................................................... 16
2
1. UVOD Grafički
korisnički
interfejs ili GUI (eng. graphical
user
interface)
jeste
metod interakcije sa računarom kroz manipulaciju grafičkim elementima i dodacima uz
pomoć
tekstovnih
poruka
i
obavještenja.
Izgovara
se
približno
kao gooey na engleskom jeziku, tj. gui, na bosanskom jeziku. GUI programi prikazuju vizuelne elemente poput ikone, prozora i drugih elemenata. Prethodnici GUI programa su izumljeni na Stanford univerzitetu, na čelu sa Douglasom Englebartom i koristili su tekstualne linkove za upravljanje. Kasnije su istraživači na Xerox PARC-u unaprijedili i otišli dalje od samo tekstualnih linkova i počeli da koriste grafički interfejs za njihov Alto računar. To je bila prethodna svih današnjih grafičkih interfejsa, pa se tako ponekad i danas koristi skraćenica PUI (PARC User Interface). PUI je i tada koristio prozore, menije, dugmiće, štrih kockice, ikone kao i uključivanje nekog pokaznog uređaja kao što je miš. Prvi put ga je iskoristio Apple na svojim Macintosh računarima i operativnim sistemima, dok je kasnije Microsoft kopirao Appleove ideje u njihovim prvim verzijama Windows operativnog
sistema.
Primjeri
nekih
grafičkih
interfejsa
su macOS, Microsoft Windows, NEXTSTEP i X Window System od kojeg su nastali Qt (KDE), GTK+ (GNOME), i Motif (CDE). Pomoću grafičkog interfejsa korištenje današnjih računara je mnogo jednostavnije nego u doba DOS operativnog sistema koji je bio prilično negostoljubljiv prema novim korisnicima računara. Većina današnjih operativnih sistema se upravlja preko grafičkog interfejsa, dakle pomoću kursora, ikona, prozora i drugih elemenata.
3
2. KORISNIČKI INTERFEJS Korisnički interfejs (User Interface, UI) predstavlja skup načina na koje ljudi, tj. korisnici
ostvaruju interakciju sa određenom mašinom, uređajem, računarskim
programom ili drugim složenim alatom, tj. sistemom1. Korisnički interfejs obezbeđuje način za:
Input, omogućavajući korisnicima da vrše manipulaciju nad sistemom
Output, omogućavajući sistemu da proizvede efekte manipulacije koju je izvršio korisnik.
1.1. Pojam korisničkog interfejsa Da bi radili sa sistemom, korisnicima je potrebna mogućnost da kontrolišu sistem i da odrede stanje sistema. Na primjer, prilikom vožnje automobila, vozač koristi volan da bi kontrolisao pravac kretanja vozila, pedale za gas i kočnicu i menjač da bi kontrolisao brzinu vozila. Vozač određuje poziciju vozila gledajući kroz vjetrobrane, a tačnu brzinu kretanja očitavajući brzinomer. Korisnički interfejs automobila je u cjelosti sastavljen od instrumenata koje vozač može da koristi kako bi uspješno koristio automobil za vožnju. Termin korisnički interfejs se najčešće koristi u kontekstu računarskih sistema i električnih uređaja.
1.2. Usability („upotrebljivost“) korisničkog interfejsa Dizajn korisničkog interfejsa utiče na količinu truda koju korisnik mora uložiti da bi obezbijedio input u sistem i time vršio manipulaciju nad sistemom, da bi interpretirao output sistema i da bi naučio kako da koristi sistem. Usability predstavlja efikasnost kojom korisnik može obaviti određeni zadatak u sistemu kao i lakoću upotrebe sistema, odnosno jednostavnost vršenja inputa i interpretiranja outputa sistema. Usability je najčešće karakteristika samog korisničkog interfejsa, mada može biti i u vezi sa funkcionalnošću proizvoda. Time se opisuje koliko je proizvod upotrebljiv za svrhu kojoj je namijenjen od strane predviđenih korisnika i koliko njegova upotreba
1
Wikipedia, the free encyclopedia, http://www.wikipedia.org/, “User Interface”
4
obezbijeđuje efikasnost, efektivnost i zadovoljstvo korisnika prilikom upotrebe proizvoda. Sve ove karakteristike nisu uvijek dio korisničkog interfejsa, ali su ključni elementi za upotrebljivost nekog proizvoda. Aspekti
interakcije ljudi i računara (Human Computer Interaction, HCI) su
obuhvaćeni standardom ISO 9241 kojim su precizirani pravi ciljevi te interakcije: djelotvornost, efikasnost i zadovoljstvo. Ostvarenje ovih ciljeva se može utvrditi sjledećim mjerilima2: Trajanje obuke – koliko je vremena potrebno tipičnim pripadnicima neke grupe korisnika da nauče da korste komande koje su relevantne za neki skup zadataka. Brzina
rada
–
koliko
je
vremena
potrebno
za
izvršavanje
reprezentativnih zadataka. Učestalost grešaka korisnika – koliko često korisnici griješe prilikom reprezentativnih zadataka i o kakvim je greškama riječ. Iako same greške i njihovo ispravljanje mogu da se uračunaju u brzinu rada, način na koji se greške rješavaju je toliko značajna komponenta interfejsa da joj treba posvetiti posebnu pažnju. Zadržavanje usvojenih znanja – u kojoj mjeri su korisnici u stanju da zadrže stečena znanja nakon isteka određenog perioda – sata, dana ili nedelje. Zadržavanje znanja može biti u tijesnoj vezi sa vremenom trajenja obuke, a učestalost korišćenja tu takođe predstavlja važan faktor. Subjektivno zadovoljstvo – koliko se korisnicima sviđaju pojedini aspekti interfejsa. Odgovor na ovo pitanje može se dobiti putem intervjua ili detaljnih istraživanja u kojima postoje skale ličnog zadovoljstva i prostor za komentare korisnika.
Ben Shneiderman i Catherine Plaisant, Dizajniranje korisničkog interfejsa (Beograd: FAR i CET, 2006). 2
5
1.3. Vrste korisničkog interfejsa U računarstvu korisnički interfejs računarskog programa predstavlja grafičke, tekstualne ili zvučne poruke, tj. informacije koje program prezentuje korisniku i kontrolne sekvence (kao što su pritisci tastera na tastaturi, pomijeranje miša ili označavanje po ekranu osjetljivom na dodir) koje korisnik sprovodi kako bi kontrolisao program. Prema načinu kako korisnik zadaje komande sistemu i kako sistem odgovara na te komande, srećemo više vrsta korisničkih interfejsa, najčešće su to:
Grafički korisnički interfejs (GUI) – prima input preko uređaja kao što su tastatura i miš i obezbijeđuje uređen i povezan output na monitoru.
Web-bazirani korisnički interfejs – prima input i obezbjeđuje output generisanjem web strana koje se transportuju internetom i gledaju uz pomoć
programa za pregled sadržaja – web browsera. Novije
implementacije koriste razne klijent i server tehnologije kao što su AJAX, Microsoft.NET, Java, PHP i slično, da bi omogućile kontrolu u realnom vremenu i time eliminisale potrebu za ponovnim učitavanjem sadržaja i osvježavanjem koji su karakteristični za tradicionalne HTML bazirane web browsere.
Command-line interfejs – korisnik upisuje komande koristeći tastaturu a sistem odgovara ispisujući tekstualne poruke na monitoru. Najčešće se koristi prilikom administracije sistema i sličnih zadataka.
Touch interfejs – grafički korisnički interfejs koji koristi ekran osjetljiv na dodir i time kombinuje input i output uređaj u jednom. Najčešće se koristi u mašinama za industrijsku proizvodnju ili u bankomatima itd.
1.4. Grafički korisnički intefejs Grafički korisnički interfejs korisniku omogućava interakciju sa računarskim sistemom putem grafičkih prikaza, posebnih grafičkih elemenata kao što su okviri,
6
prozori, meniji, dugmad i slično, zajedno sa tekstom da bi se korisniku predstavile informacije i akcije koje su mu na raspolaganju. Korisnik obično sprovodi akcije direktnom manipulacijom datih grafičkih elemenata. Evolucija grafičkog korisničkog interfejsa
Ilustracija 1 Xerox Alto računar, prethodna računara sa grafičkim korisničkim interfejsom
Predhodnik grafičkog korisničkog interfejsa su otkrili istraživači na Stanford Research institutu, pod vođstvom Douga Engelbarta. Oni su razvili tekstualnobazirane hiperveze kojima se upravlja pomoću miša. Kasnije su istraživači u Xerox PARC (Palo Alto Research Center) istraživačkom centru koncept hiperveza usavršili i proširili na grafičke elemente i time stvorili grafički korisnički interfejs kao osnovni korisnički interfejs za Xerox Alto računar. Skoro svi moderni grafički korisnički interfejsi opšte namjene, vode porijeklo od tog sistema. Ovakav grafički korisnički interfejs se sastoji od posebnih grafičkih elemenata koji imaju svoju prepoznatljivu grafičku prezentaciju i definisano ponašanje. Ti elementi su prozori, meniji, komandni tasteri (buttons), radio dugmad, check box, ikone itd. Pored tastature prilikom interakcije korisnika i sistema koristi se i računarski miš kao pokazni uređaj.
7
Najpoznatiji grafički korisnički interfejsi su oni korišteni u modernim operativnim sistemima kao što su Windows, Mac OS X ili X Window System. Primena grafičkih korisničkih interfejsa potiče iz Xerox PARC istraživačkog centra tokom sedamdesetih godina 20 veka. Te ideje i koncepte preuzela je kompanija Apple i koristila ih u svom prvom Macintosh računaru. Kasnije su IBM i Microsoft preuzeli mnoge ideje od Apple-a i razvili Common User Access specifikaciju, koja je osnova koriničkog interfejsa koji je u upotrebi u Windows i OS/2 operativnim sistemima, kao i Unix Motif sistemu za korisnički interfejs. Ove ideje su dalje usavršavane i dovele su do pojave modernih grafičkih korisničkih interfejsa koji su u primjeni u modernim verzijama operativnih sistema Windows, Mac OS X i raznih Unix baziranih ili GNU/Linux računarskih sistema.
Ilustracija 2 Prozor sa prikazom stabla foldera i fajlovima u Windows -u XP - primjer modernog korisničkog interfejsa
Tako skoro svi moderni grafički korisnički interfejsi u velikoj mjeri imaju zajedničke elemente slične funkcije i vizuelnih karakteristika. Razlike među modernim grafičkim operativnim sistemima na nivou dizajna korisničkog interfejsa se mogu prevazići uz mogućnost podešavanja korisničkih opcija, kojima se može dobiti izgled elemenata korisničkog interfejsa koji emulira neki drugi sistem.
8
1.4.1. Dizajn grafičkog korisničkog interfejsa kao dio aplikacije Dizajn grafičkog korisničkog interfejsa predstavlja važnu odrednicu u programiranju aplikacije. Zadatak ove discipline je da poveća upotrebljivost programa i njegovu funkcionalnost. Vidljivi elementi grafičkog korisničkog interfejsa predstavljaju „lice“ aplikacije. Tu spadaju grafički elementi koji se koriste za interakciju sa programom. Najčešći elementi grafičkog korisniškog interfejsa su prozori (window) , dugmad ili komandni tasteri (button), meniji (menu), klizači (scroll bar), polja za štikliranje (check box), radio dugmad ili opciona dugmad (radio button), polja za unos teksta (text box), itd. Krupniji elementi grafičkog korisničkog interfejsa, kao što su prozori, obično obezbeđuju okvir ili kontejner za prezentovanje sadržaja ili za smeštanje drugih elemenata interfejsa. Sitniji elementi obično služe kao alati za korisnički input. Dobro dizajnirani elementi korisničkog interfejsa nekog sistema su međusobno funkcionalno nezavisni i indirektno su povezani sa funkcionalnošću programa, tako da grafički korisnički interfejs dobro osmišljenog sistema može lako biti prilagođen potrebama i ukusu korisnika, omogućavajući mu da izabere kako će program izgledati – izborom nekog od ponuđenih skinova (skin).
Ilustracija 3 Primjeri elementata grafičkog korisničkog interfejsa u operativnom sistemu Windows XP
Moderni grafički operativni sistemi imaju svoj prepoznatljiv izgled koji je zajednički za sve aplikacije i omogućava korisniku da lahko usvoji novi program i da ga intuitivno koristi na osnovu iskustva stečenog u radu sa drugim programima. Prepoznatljivi elementi korisničkog interfejsa operativnog sistema Windows izgledaju isto ili veoma slično u raznim programima koje taj operativni sistem izvršava.
9
3. Korisnički interfejs Web aplikacije Korisnički interfejs Web aplikacije zahtijeva posebnu pažnju prilikom razvoja. Postavljanjem aplikacije na Internet, broj korisnika takvih aplikacija dobija nevjerovatne razmjere. Svaki od tih korisnika ima svoje zahtjeve, tehničke mogućnosti, lične mogućnosti čime se broj zahtjeva na koje treba odgovoriti povećava. Teorija po kojoj je korisnik bio u centru pažnje se polako napušta. Umjesto scenarija u kome se čeka na reakcije korisnika i sistem prilagođava njima, teži se tome da se mišljenje korisnika formira na osnovu korisničkog interfejsa. Praksa je pokazala da na korisnika utiču određeni aspekti, tako da poštujući principe za svaki od njih moguće je napraviti korisnički interfejs koji bi odgovarao svima. Kreiranje korisničkog interfejsa je kombinacija nauke i umjetnosti.
3.1. Elementi korisničkog interfejsa Kao što je već ranije rečeno, najčešće korišteni elementi korisničkog interfejsa su prozori (window) , dugmad (button), meniji (menu), klizači (scroll bar), polja za štikliranje (check box), radio dugmad (radio button), polja za unos teksta (text box), itd. Kod web aplikacija prozor je browser u kome se pokreće ta aplikacija. Najveći dio površine browsera predstavlja kontejner odnosno okvir u koji se smještaju ostali elementi. Web browser-i omogućavaju korisnicima kretanje naprijed i nazad kroz dijelove (sekvence) dokumenta kao i hronološki vraćanje na prethodno posjećenu stranicu. Meniji omogućavaju korisniku da izvršava komande selektujući je iz ponuđene liste. Opcije se selektuju mišem
ili
nekim
drugim
pokazivačkim uređajem, a dobra praksa
je
da
se
omogući
i
aktiviranje komandi iz menija putem tastature – korišćenjem
Ilustracija 4 Primjer izgleda menija u web aplikaciji
10
prečica. Meniji su praktični zato što pokazuju koje su komande dostupne u okviru aplikacije. Menu bar se prikazuje na vrhu i najčešće je to padajući meni. Kada korisnik izabere neku opciju u meniju prikazuje se njen sadržaj. Ovaj postupak može biti rekurzivan, odnosno meniji mogu imati više nivoa dubine i sadržati podmenije. Dugmad se, najčešće, koriste da se na jednostavan način „okine“ događaj. Najčešće su to komande za pretrazivanje, prihvatanje promjena, brisanje objekata, dodavanje objekata. Tekst na dugmetu treba da ima opis akcije koja će se dogoditi klikom na to dugme. Radio dugmad ili opciona dugmad pružaju korisniku mogućnost da izabere jednu iz seta ponuđenih opcija. Radio dugmad su uređena u grupe od dva ili više i prikazana su na ekranu najčešće kao krugovi. Najčešće se ove kontrole vizueliziraju
tako
da
prazan
krug
simbolizuje opciju koja nije izabrana, a krug sa tačkom u centru predstavlja opciju koja je izabrana. Opciona dugmad su međusobno isključiva, tako da u jednom trenutku može biti izabrana samo jedna od ponuđenih opcija. Ukoliko korisnik izabere neku opciju, ostale automatski postaju neobilježene. Polje za štikliranje je element grafičkog korisničkog okruženja, koji omogućava korisniku da izabere proizvoljan broj opcija od ponuđenih, ili da ne izabere nijednu. Ovo polje može imati samo dvije vrednosti, tačnu i netačnu. Može se koristiti i samo jedno polje za štikliranje, za pojedninačnu opciju koju korisnik može uključivati ili isključivati. Klizači su dodatak grafičkom korisničkom okruženju koji nastavljaju tekst, sliku ili čak vrijeme na nekoj video aplikaciji. Korisni su ukoliko sadržaj nije vidljiv u cijelosti zbog veličine ekrana ili prozora. U Microsoft .NET dokumentaciji ovaj
11
element se naziva „scroll box“, dok se u drugim razvojnim okruženjima može naći i pod imenom „elevator“, „puck“ ili „wiper“. Može biti horizontalan i vertikalan, najčešće se predstavlja u obliku izduženog pravougaonika koji ima na sebi dio (bar) za pomijeranje kroz dokument, kao i dvije strelice na krajevima za preciznije podešavanje. Polja za unos teksta, najčešće, pružaju korisniku mogućnost da unosi tekst koristeći tastaturu, da se kreće kroz tekst i selektuje neke njene dijelove ili da vrši izmijenu postojećeg testa. Text box omogućava korisniku da unese tekstualne informacije koje se koriste u programu. Može sadržati horizontalni klizač, vertikalni ili kombinacju.
12
4. Zaključak Tokom rada sa Visual Studio 2003 alatima otkrio sam mnoge mogućnosti koje to integrisano razvojno okruženje pruža. Ovaj alat se, prije svega,
ističe u lakoći
programiranja i lahkom povezivanju elemenata. Njegovo okruženje je pravi primjer user-friendly korisničkog interfejsa. I pored toga što predstavlja jedan veoma kompleksan proizvod, uspijeva da korisnika ne optereti svojom veličinom, nego da mu transparentno pomaže u radu i olakšava korišćenje. Okruženje .NET Framework je veoma bogato raznim klasama za skoro svaku namjenu i veoma je lahko za upotrebu. Savladavanjem osnovnih principa, lahko se stečeno iskustvo može primijeniti i na ostale dijelove biblioteke. Ipak postoje i neki nedostaci. Kao glavna zamjerka tokom razvoja korisničkog interfejsa za ovaj informacioni sistem, bio je problem u vezi sa riješavanjem konzistentnosti izgleda svih kontrola i formi kroz sve stranice aplikacije. ASP .NET je pokazao teškoće u pravljenu tema, koje bi očuvale konzistentnost aplikacije. Ova slabost je u novoj verziji ASP.NET 2.0 dobrim dijelom otklonjena uvođenjem tehnologije pod nazivom master pages. Na taj način se, u velikoj meri, olakšava rad sa istovetnim ili sličnim elementima na strani, koji lahko mogu da se parametrizuju. Drugi problem na koji sam naišao je kvalitet HTML koda, koji generiše vizuelni dizajner strana i kontrola ugrađen u Visual Studio 2003. Ovako generisane kontrole na ekranu u renderovanom obliku izgledaju dobro, ali kada se pogleda u generisani kod, tu nalazimo mnogo nepotrebnog i redundantog koda koji nepotrebno opterećuje alikaciju i značajno smanjuje performanse, posebno u uslovima sporije mrežne komunikacije ili slabe propusne moći mreže. Pažljivijim generisanjem kontrola koje se ugrađuju na web strane ili u ekstremnom slučaju, ručnim kodiranjem HTML-a tih kontrola, može se dobiti izuztetno kvalitetno rešenje koje je značajno boljih performansi u izvršavanju preko mreže jer je količina prenijetih podataka koji služe za konstruisanje korisničkog interfejsa svedena na manje od 30% originalne veličine. Ukoliko se na početku razvoja informacionog sistema, nakon prikupljanja korisničkih zahtijeva oni dobro definišu, korisnički interfejs se može već tada razvijati nezavisno od ostatka sistema. Na taj način možemo dobrim dizajnom sistema obezbijediti mogućnost da se MVC (Model-View-Controler) model strukture
13
programa primijeni na web aplikaciju i time omogući nezavisna realizacija komponenata aplikacije kao što su: korisnički interfejs, poslovna logika i čuvanje podataka. Ovim radom demonstrirani su neki od principa dizajniranja korisničkog okruženja. Daljim unapređenjem se može posvetiti veća pažnja dostupnosti (accessability ) i njegovom prilagođavanju i drugim uređajima kao što su PDA, mobilni telefon ili slični prenosni uređaji koji su sve popularniji. Korisničko iskustvo je podržano mogućnošću da se bira izgled aplikacije: moderan ili klasičan. Ovim se korisniku ostavlja mogućnost izbora da prilagodi izgled cjelokupne aplikacije svojim afinitetima, a u cilju veće udobnosti korisnika u radu.
14
5. Literatura -
Wikipedia, the free encyclopedia, http://www.wikipedia.org/, “User Interface
-
Ben Shneiderman i Catherine Plaisant, Dizajniranje korisničkog interfejsa (Beograd: FAR i CET, 2006).
15
Popis slika Ilustracija 1 - Xerox Alto računar, prethodna računara sa grafičkim korisničkim interfejsom .........................................................................................................................................................7 Ilustracija 2 - Prozor sa prikazom stabla foldera i fajlovima u Windows-u XP - primjer modernog korisničkog interfejsa ..............................................................................................................8 Ilustracija 3 - Primjeri elementata grafičkog korisničkog interfejsa u operativnom sistemu Windows XP .....................................................................................................................................9 Ilustracija 4 - Primjer izgleda menija u web aplikaciji ................................................................. 10
16
