P7: Softverski alati za izradu korisničkog interfejsa

1. Interakcija čovek-računar
P7:Softverski alati za izradu korisničkog interfejsa
Doc. dr Aleksandar Spasić, dipl.inž.el.

2. Sadržaj teme
SOFTVERSKI ALATI ZA IZRADU KORISNIČKOG INTERFEJSA
7.1 Metode za izradu specifikacije
7.1.1 Gramatike
7.1.2 Stabla menija
7.1.3 Dijagrami prelaza
7.1.4 Dijagrami stanja
7.2 Softverski alati za izradu korisničkog interfejsa
7.2.1 Alati za skiciranje korisničkih interfejsa
7.2.2 Alati za razvoj softvera
7.3 Softverski alati za evaluaciju korisničkog interfejsa
SOFTVERSKI ALATI ZA IZRADU KORISNIČKOG INTERFEJSA

3. 7.1. Metode za izradu specifikacije
Softverski alati za razvoj korisničkog interfejsa se koriste da bi se
automatizovale aktivnosti izrade korisničkog interfejsa. Ovi alati su po
svojoj prirodi grafički, pa korisnicima obezbeđuju brz razvoj interfejsa
najčešće raspoređivanjem komponenti korisničkog interfejsa i
povezivanjem funkcionalnosti.
Alati za izradu interfejsa najčešće koriste princip WYSIWYG. Ideja ovog
principa je da se korisnik oslobodi potrebe da zamišlja kako će rezultat, u
ovom slučaju korisnički interfejs, na kraju da izgleda, već da se u to ima
uvid u toku njegove izrade. Pored ovog principa, alati za izradu interfejsa, u
velikoj meri eksploatišu i princip direktne manipulacije. Složeniji interfejsni
elementi (glavni prozor, dijalozi) se formiraju od palete osnovnih
komponenti. Ove komponente se prevlače na radnu površinu, tu im se
direktno menja veličina i neka tipična svojstva (npr. naslov). Za sva
dodatna podešavanja se koristi lista osobina (eng. property sheet).
Povezivanje funkcionalnosti se svodi na kreiranje metoda koji obrađuju
događaje koje generišu komponente, a najčešće nakon interakcije sa
korisnikom.

4. 7.1. Metode za izradu specifikacije
Prvi korak u razvoju interfejsa je da se zapišu i prodiskutuju moguće
alternative.
Podrazumevani jezik za pisanje specifikacija u mnogim poljima je prirodni
jezik, pa se i kod korisničkog interfejsa za početne specifikacije koristi
prirodni jezik i skice. Međutim, specifikacije koje se pišu prirodnim jezikom
su najčešće duge, nejasne i dvosmislene, te zato teško mogu da budu
korektne, konzistentne i kompletne.
Alternativa prirodnom jeziku su formalni jezici za koje se definišu gramatike,
pa se jednostavno može vršiti i automatska provera validnosti iskaza.
Formalna gramatika se kod korisničkih interfejsa može koristiti za opisivanje
sekvenci akcija. Međutim, ovakve gramatike su najčešće vrlo kratke, pa su
zato dijagrami prelaza i grafičke specifikacije mnogo prikladnije.
Pored gramatika, koriste se i metodi stabla menija koji se koriste za
specifikaciju hijerarhije menija, dijagrami prelaza kao opštiji metod koji
svoju primenu nalazi i u oblasti specifikacije interfejsa, kao i dijagrami
stanja.

5. 7.1. Metode za izradu specifikacije
7.1.1 Gramatike
Formalne gramatike predstavljaju moćno sredstvo za specifikaciju
tekstualnih komandi ili izraza koje neki program treba da razume. Kao takve
bile su nezamenljivo sredstvo kod nekadašnjih interfejsa zasnovanih na
komandnoj liniji.
Upotreba gramatika kod interaktivnih sistema je ograničena na aplikacije
koje koriste obradu simboličkih izraza, kao npr. proračuni izraza kod tabela
(eng spreadsheets) ili validacija vrednosti unosa IP adrese, broja telefona,
JMBG-a i sl.
U računarstvu se za definisanje formalnih jezika najčešće koristi Bekusova
normalna forma (BNF). BNF predstavlja formalni meta jezik za
predstavljanje kontekstno-slobodnih gramatika, odnosno gramatika
programskih jezika.

6. 7.1. Metode za izradu specifikacije
7.1.1 Gramatike
Meta simboli BNF-a su: ::= sa značenjem „je definisano kao“, | sa
značenjem „ili“ i uglaste zagrade <> koje se koriste da uokvire neterminale.
Evo kako je moguće u BNF-u definisati stavku iz telefonskog imenika
(kontakt):
<Kontakt> ::= <Naziv> <Telefon>
<Naziv> ::= <Prezime> “,” <Ime>
<Prezime> ::= <tekst>
<Ime> ::= <tekst>
<tekst> ::= <slovo> | <slovo><tekst>
<slovo> ::= “A” | “a” | “B” | “b” | ... | “Z” | “z”
<Telefon> ::= <kod _države> <kod mesta> <lokalni broj>
<kod_države> ::= “+” <cifra> <cifra> <cifra>
<kod_mesta> ::= <cifra> <cifra>
<lokalni_broj> ::= <cifra> <cifra> ... <cifra>
<cifra> ::= “0” | “1” | “2” | ... | “9”

7. 7.1. Metode za izradu specifikacije
7.1.1 Gramatike
BNF notacija je u širokoj upotrebi uprkos svojim nedostacima koji se
ogledaju u nemogućnosti specificiranja semantike.
Osnovna dobit primenom ove tehnike je u preciznom zapisivanju određenih
definicija koje je kasnije jednostavno proveriti u softveru. Nedostatak
gramatika je u tome što su, kada narastu teške za praćenje, a zbunjujuće su
za većinu korisnika.
Veliki nedostatak gramatika je i nemogućnost baratanja modernim idiomima
korisničkih interfejsa kao što su: forme za unos, direktna manipulacija i
grafički razmeštaj komponenti.

8. 7.1. Metode za izradu specifikacije
7.1.2 Stabla menija
Stabla menija predstavljaju jednostavno i
moćno sredstvo za specifikaciju koje
korisnicima, rukovodiocima, programerima i
drugim zainteresovanim stranama pruža
detaljan pregled mogućnosti sistema.
Kao svaka mapa, stablo menija prikazuje
veze visokog nivoa, ali i detalje niskog nivoa.
Stablo menija nam pruža uvid u kompletnu
strukturu, pa se zato koristi i za proveru
konzistentnosti, kompletnosti, dvosmislenosti
i redundanse. Slično stablu menija, moguće
je formirati i stablo dijaloga.
Poput stabla menija i stablo dijaloga
obezbeđuje pregled čitavog sistema i proveru
konzistencije i kompletnosti.

9. 7.1. Metode za izradu specifikacije
7.1.3 Dijagrami prelaza
Problem sa stablima menija je taj što ne prikazuju celokupnu strukturu
mogućih korisničkih akcija. Tako, na primer, stablima menija nije moguće
predstaviti da se neka stavka u meniju koristi da vrati korisnika na prethodni
podmeni ili da se naznači kako se vrši obrada grešaka. Ovi detalji se
namerno ne koriste kod stable menija da ne bi narušili njihovu čistu
strukturu. Međutim, za neke aspekte procesa razvoja interfejsa potrebno je
omogućiti specificiranje svih mogućih prelaza.
Takođe, za stilove interakcije koji se ne zasnivaju na menijima, najčešće
možemo da identifikujemo određen broj stanja i mogućih prelaza između
njih koji ne moraju da uvek odgovaraju strukturi stabla. Dijagrami prelaza
predstavljaju opštiju notaciju od stabla menija koja se koristi u ovakvim
situacijama.

10. 7.1. Metode za izradu specifikacije
7.1.3 Dijagrami prelaza

11. 7.1. Metode za izradu specifikacije
7.1.3 Dijagrami prelaza
Dijagram prelaza je zapravo graf u kome čvorovi odgovaraju stanjima
sistema, dok potezi predstavljaju moguće prelaze između ovih stanja. Svaki
prelaz je definisan korisničkom akcijom koja ga inicira, a opciono i
odgovorom sistema.
Dijagrami prelaza se direktno prevode u konačne automate. Konačni
automati predstavljaju dobro poznat koncept iz računarstva koji nam
omogućava da izvršimo određene automatske provere specificiranog,
dijagrama stanja. Provere koje se na ovaj način mogu izvršiti su: da li se
može doći do svih stanja i da li se može napustiti svako stanje.

12. 7.1. Metode za izradu specifikacije
7.1.4 Dijagrami stanja
Dijagrami prelaza predstavljaju efikasno sredstvo za predstavljanje toka
akcija i praćenje tekućeg stanja i dostupnih opcija. Međutim, ovi dijagrami
brzo narastaju i nakon toga, zbog svoje veličine postaju zbunjujući.
Modularnost je moguća ukoliko se čvorovi grupišu u podgrafove. Na
složenost dijagrama, takođe, negativno utiču veze svih stanja sa stanjem
gde se prikazuje pomoć, povratne veze između stanja kao rezultat akcije za
vraćanje unazad, ili veze svih stanja sa stanjem za gašenje aplikacije.
Dijagrami stanja takođe imaju problem sa predstavljanjem konkurentnosti i
sinhronizacije.

13. 7.1. Metode za izradu specifikacije
7.1.4 Dijagrami stanja
Alternativa za dijagrame prelaza koja rešava većinu iskazanih problema
su dijagrami stanja (statechart). Dijagrami stanja nude mogućnost
grupisanja podgrafova u podstanja, tako da se prelazi koji se ponavljaju
mogu izvući van podgrafa i primeniti na podstanje. Za potrebe
predstavljanja korisničkih interfeJsa dijagrami stanja se proširuju
mehanizmima za prikaz konkurentnih radnji i tačaka sinhronizacije.
Dijagrami stanja su deo UML (eng. Unified Modeling Language)
specifikacije, što ih čini vrlo dostupnim kroz razne alate koji podržavaju
UML.

14. 7.1. Metode za izradu specifikacije
7.1.4 Dijagrami stanja