You are on page 1of 48

DIZAJN KORISNIKOG INTERFEJSA

Principi dizajna
Ljudske sposobnosti su osnova principa dizajna. Postoje razliiti generalni principi koji se mogu primeniti na proizvoljan GUI, ali i na specifine sisteme. Postoji vie naina da se definiu principi razvoja efektnog dizajna. ak se i eksperti ne slau ta predstavlja pojam dobar dizajn.

Principi dizajna

Nielsen-ova pravila - 1
Softver mora da odgovara realnom svetu fajlovi i strukture podataka trebaju se sakriti od krajnjih korisnika. Istraivanja pokazuju da isti primer pod istim imenom snimi samo 7-18% korisnika.

Nielsen-ova pravila - 2
Konzistentnost i standardi princip najmanjeg iznanaenja. Kompatibilne operacije se moraju izvravati na slian nain - Crtl-K znai razliito kod razliitih sistema. Primer Worda i tampe. Primer brisanja dokument odlazi u Recycle Bin, a deo teksta ne. Posebno obratiti panju na termine u okviru sistema, da se istim imenom nazivaju isti termini.

Nielsen-ova pravila - 2
Postoje tri vrste konzistentnosti:

interna (u okviru aplikacije), eksterna (sa ostalim aplikacijama na istoj platformi), metaforika (sa metaforama korienim u okviru GUI ili slinih objekata u realnom svetu).

Postoji miljenje da treba iskoristiti i nekonzistentnost kada kontekst i zadaci to zahtevaju.

Vizuelne nedoumice
Da li je sve jasno na prikazanom IBM telefonu koji zaista postoji?

Vizuelne nedoumice
Da li je ovo grafika ili kontrola?

Dugme je za pritiskanje, ali ta ono radi?

Nedostaju i kontrole samog prozora koji prikazuje telefon!!

Tekst je za editovanje, ali to ne radi.

Kontakt lista

Metafore

Igrice (stavaran svet)

Spreadsheet

Dobri interfejsi

Metafore
Name:_______________ Address:_______________ City:_______________ Province:_______________ Postal Code:_______________

Forme

Control Panels sa slinim kontrolama

Hijerarhijski direktorijumi

Definicija

Metafore u interfejsima

Prezentira objekte sistema kao drugaiji tip objekta


Disk se prezentira direktorijumom

Razlog
Pomou poznatih i konkretnih objekata se omoguava lake razumevanje nerazumljivih apstraktnih raunarskih koncepata i zadataka Problem Metafore definiu portrete naivnih konceptualnih modela sistema
Prezentacioni alat
je slajd projektor

Metafore u interfejsima

Zloupotreba metafora

Nielsen-ova pravila - 2

Nielsen-ova pravila - 3
Pomo i dokumentacija - mora se obezbediti objanjenje greaka i pomo zasnovana na sadraju. Treba obratiti panju da korisnici ne itaju manual-e, pre e potroiti vreme da urade odreeni zadatak nego da naue o korienju sistema. Sistem za pomo treba da omogui pretraivanje, prepoznavanje sadraja, orijentisano prema zadacima, konkretno, kratko.

Nielsen-ova pravila - 4
Sloboda korisnika interfejs i o ovome mora voditi rauna. Treba omoguiti UNDO akciju, duge operacije treba da imaju mogunost prekida i svi dijalozi moraju imati dugme Cancel.

Nielsen-ova pravila - 5
Vidljivost statusa sistema - stanje Promene kurzora za odreene akcije (prelaz preko hiperlinka), mod rada (drag/drop) aktivnost (peani sat), obeleavanje selektovanih objekata, korienje status bara za poruke i indikatore progresa. < 0.1 s: nita ne preduzimati, 0.1-1 s: kratko obavetenje, 1-5 s: kurzor za zauzeto, > 5 s: prikazati napredovanje.

Nielsen-ova pravila - 6
Fleksibilnost i efikasnost omoguiti preice koje se lako pamte za operacije koje se najvie koriste. Primer je istorija najee korienih operacija.

Nielsen-ova pravila - 7
Prevencija greaka sve dok oveku date ansu da pogrei, on e to i uraditi. Jedna mogunost je da ima samo izbor izmeu moguih reenja, tada ne moe pogreiti u na primer kucanju. Treba zabraniti nelegalne komande. Postoji vie vrsta greaka.

opisne greke kada su dve akcije veoma sline. niz akcija se zameni sa drugim nizom greke u okviru moda rada u razliitim stanjima sistema ista operacija ima razliito dejstvo (Caps Lock pritisnuto).

Nielsen-ova pravila - 7

Nielsen-ova pravila - 8
Minimizovati rad sa memorijom koristiti menije, a ne komandni jezik, koristiti polja za potvrdu umesto tekst polja, koristiti generike komande uvek gde je mogue (Open, Save, Copy), sve informacije treba da budu vidljive.

Nielsen-ova pravila - 9
Greke - izvetaj, dijagnoza i oporavak biti precizan - ne ne moe da se otvori dokument, da ne moe da se otvori dokument primer.txt predloiti konstruktivnu pomo zato se greka dogodila i kako je otkloniti, biti utiv i nonblaming - ne koristiti fatal error ili illegal sakriti tehnike detalje, dok ih korisnik ne zatrai.

Nielsen-ova pravila - 10
Estetski i minimalni dizajn Less is More. Koristiti nekoliko, dobro izabranih boja i fontova. Grupisati ih sa belim razmakom. Birati labele paljivo, koristiti koncizan jezik.

B. Tognazzini - 16 principa
Korisniku treba omoguiti sve potrebne informacije na jednostavan nain. Na primer kod opcije File-Save postoji i mogunost kreiranja novog direktorijuma. Sve korisnikove potrebe se ne mogu definisati bez detaljne analize zadataka. Efikasnost se dobija upisom inicijalnih podrazumevanih vrednosti u polja koja popunjava korisnik. Na ovaj nain ubrzava se rad - veina korisnika samo potvrdi prdloene vrednosti, bez detaljnijeg prouavanja.

B. Tognazzini - 16 principa
Treba ohrabriti korisnike da istrauju aplikaciju, jer veina na taj nain ui o samim mogunostima sistema. Ipak, uvek treba realizovati u opcije undo i cancel. Vizuelna navigacija je takoe veoma bitna, posebno kod Web aplikacija. Uvek treba naglasiti korisniku gde se trenutno nalazi, koje teme prethode ili slede tekuoj.

Realizacija GUI
Kako se informacija dobijena od korisnika predstavlja u raunarskom sistemu Kako se informacija zapisana u sistemu predstavlja korisniku Korisnika interakcija i prezentacija informacija.

Interakcija
1. Direktna manipulacija kada korisnik direktno radi sa objektom na ekranu 2. Meni selekcija korisnik bira komandu sa liste ponuenih 3. Popunjavanje forme korisnik popunjava polja forme 4. Komandni jezik koriste se specijalne komande sa parametrima da bi se sitemu reklo ta da radi 5. Prirodni jezik izdaje se naredba u prirodnom jeziku

Interakcija

Moe se koristiti vie stilova na jednoj stranici Windows i njegovo korienje. WWW iako je dizajniran za prosenog korisnika, esto se koriste i na formama bazirani interfejsi.

Prezentacija

Jednostavna direktna reprezentacija ulaznih informacija ili neka vizuelna predstava. Softver potreban za prezentaciju informacija odvojiti od samih informacija. Kontradiktornost sa objektno-orijentisanom filozofijom Ponekad je teko prepoznati koji je nain najbolji za predstavu samog objekta u trenutku njegovog kreiranja.

Izbor prezentacije

Da li je korisnik zainteresovan za preciznu vrednost podataka ili za relaciju izmeu vie vrednosti? Koliko brzo se menja vrednost podatka? Da li se mora promena vrednosti odmah prikazati korisniku? Da li korisnik treba da preduzme neku akciju u zavisnosti od promene vrednosti podatka? Da li korisnik treba da ostvari interakciju sa prikazanim informacijama direktno preko korisnikog interfejsa?

Izbor prezentacije

Informacija koja se ne menja tokom sesije moe se pre prikazati grafiki ili tekstualno u zavisnosti od aplikacije. Tekstualni prikaz zauzima manje prostora, ali se ne moe obraditi od strane korisnika odjednom. Informacija koja se ne menja treba da se prikae drugaijim stilom od informacije koja se menja. Sve staikke informacije treba prikazati u odreenom fontu, ili odreenoj boji ili povezane sa odreenom ikonom.

Izbor prezentacije
Informaciju treba prikazati u formi teksta kada je potrebna precizna informacija ili se informacija menja relativno sporo. Ako se vrednost podatka menja brzo ili je znaajna relacija izmeu podataka, obino se prikazuje grafika prezentacija.

Izbor prezentacije

Sistem snima i sumira mesenu prodaju odreene kompanije. Ova informacija se moe prikazati u tekstualnoj ili grafikoj formi. Menadere kompanije vie zanima trend i relacije izmeu odreenih meseca. Grafika prezentacija ovih podataka, na primer u obliku histograma je dosta efikasnija za ovaj prikaz od obinog teksta.

Izbor prezentacije

Podatke koji se dinamiki menjajuje obino najbolje predstaviti grafiki koristei analognu reprezentaciju. Kontinualan analogni prikaz daje korisniku neki oseaj za relativne vrednosti. Grafiki prikaz temperature - temperatura blizu maksimalne vrednosti

Izbor prezentacije

Alfanumerika prezentacija - grafika u formi dijaloga ili ikona Isticanje grafikih elemenata se moe iskoristiti i za privlaenje korisnikove panje na promene odreenih parametara Velika koliina informacija - apstraktna vizuelizacija - veza ka podacima. Ikone koje opisuju vremenske prilike, mrea telefona ili raunara pomiu povezanih vorova, hemijski elementi, model molekula u 3D, arhitektura sajta u formi stabla.

Prezentacije

Prezentacije

Formalni sistem ili mapiranje eljenih informacija

Na primer:
decimalni: binarni: rimski: 34, 100010, XXXIV

Prezentacije
Kako je prezentacija smetena ili organizovana unutar ekrana

34, 34,

34

Brojevi naroda MAJA od 1 do 19

Brojevi naroda u Egiptu

iji je let najbolji?


Duina Prekinuto putovanje Presedanja...
depart arrive AC 117 Vancouver - Calgary 7:00 9:00 Cdn 321 Vancouver - Calgary 9:00 12:00 Cdn 355 Calgary - Montreal 13:30 19:30 AC 123 Calgary - Toronto 12:30 16:30 AC 123 Toronto - Montreal 16:45 17:30 *time zone: +1 van-cal, +2 cal-tor, mtl
7 9 11 Cdn 321 10 12 14 16 18 13 15 17

Vancouver
AC 117

Calgary

AC 123

Cdn 355

Toronto

Montreal

10

12

14

16

18

20

ija je prezentacija bolja?


Zavisi preteno od zadatka

Koja je tana vrednost?

Kako se maksimalne vrednosti performansi uporeuju?

Kako se performanse menjaju tokom vremena?

N: 11.0 Sred.vred. Xs : 9.0 Sred.vred. Ys : 7.5 Standardna greka: 0.1 Suma kvadrata: 110.0 Regeresiona suma kvadarata: 27.5 Ostaci sume korena Y: 13.8 Koeficijent korelacije: 0.8 N-ti koren: 0.7 Regresiona linija: Y=3+0.5X

Grafika prezentacija podataka

80,000. 75,000. 70,000.


Improvement

65,000. 60,000. 55,000. 50,000. 45,000. 40,000. 140.0

160.0

180.0

200.0

220.0

240.0

260.0

280.0

300.0

Selling price

Grafika prezentacija podataka

Izvoz vina iz Francuske tokom1864. godine

Opte greke!
esto, informacije ne predstavljaju samo lep grafiki prikaz i zbog toga treba biti obazriv!!! Grafiki redizajn na raunaru od strane amatera moe da donese svata!!!!
Dear Sir; This is a really exciting opportunity! Take advantage of it ! 10 10 8 8 6 4 2 2 0

Osnovne osobine

Mogunost uenja koliko vremena treba novom korisniku da bi postao familijarana sa aplikacijom? Brzina operacija koliko je vreme odziva sistema u toku korisnikovog praktinog rada? Robustnost koliko je sistem tolerantan na korisnikove greke? Oporavak koliko uspeno se sistem oporavlja od moguih greaka? Adaptivnost kako sistem reaguje kada ga koristi vie korisnika?

Osnovne osobine

Sistematsko razvijanje interfejsa moe da bude veoma skup proces koji bi ukljuivao strunjake iz razliitih oblasti i grafike dizajnere. Ovaj proces moe ukljuiti i dizajniranje i izvoenje veeg broja eksperimenata sa tipinim korisnicima u specijalnim laboratorijama sa posebnom opremom. Na ovaj nain realizovan proces razvijanja interfejsa je ekonomski nerealan za sisteme razvijene za male organizacije sa limitiranim resursima.

Korisniki zahtevi

Upitnike - informacije o misljenju korisnika o razvijenom interfejsu. Precizna pitanja ne Napiite va komentar o korisnikom interfejsu Nadgledanje rada korisnika sa sistemom i njihove reakcije na odreene operacije. Video snimke o tipinom korienju sistema jeftinija oprema - kompletna video analiza veoma skupa Dodavanje softvera koji e sakupljati informacije o najvie korienim opcijama i najeim grekama.

You might also like