1

UI DIZAJN

PRINCIPI, TEORIJE I SMJERNICE

2

KNJIGA

Designing the User Interface:

Strategies for Effective Human-Computer Interaction

Fifth Edition

Ben Shneiderman & Catherine Plaisant

in collaboration with Maxine S. Cohen and Steven M. Jacobs

Addison-Wesley Computing

ISBN-10: 0-321-53735-1

ISBN-13: 978-0-32153735-5

3

UVOD

Na osnovu iskustva UI dizajnera i istraživača razvijene su:

• Smjernice: specifične i praktične• dobre prakse i oprez protiv opsanosti

• Principi: za analizu i poređenje alternativa dizajna• Teorije: opisuju objekte i akcije sa konzistentnom

terminologijom

4

UVOD

UI se uvijek mogu poboljšati

Loš UI

Stres

Loš radni učinak

Greške (Šteta)

5

NAVIGACIJA INTERFEJSOMPrimjer smjernica National Cancer Instituta:

• standardiziraj sekvence zadataka• osiguraj da su ugniježdeni linkovi deskriptivni• koristi jedinstvene i deskriptivne naslove• koristi radio buttons za međusobno isključive izbore• razvij stranice koje će se korektno printati• koristi thumbnail za pregled većih slika

6

SMJERNICE ZA PRISTUPAČNOSTU.S. Rehabilitation Act – Section 508

• omogući tekst ekvivalent za svaki element koji nije tekst• za svaku multimedijalnu prezentaciju na bazi vremena

sinhroniziraj ekvivalentne alternative (titlove ili audio opise)• uočljivost: informacija koja je uočljiva u boji treba da bude

jednako uočljiva i bez boje• predvidljivost: neka web stranice izgledaju i rade na

predvidljiv način

7

ORGANIZACIJA EKRANA

Smith and Mosier (1986) nude 5 ciljeva višeg nivoa Konzistentnost prikaza podataka

terminlogija, skraćenice, formati, boje i sl. Efikasna asimilacija informacija

format poznat operatoru i vezan za zadatak Minimalno opterećenje memorije korisnika

nepotrebno memorisanje, lako završavanje zadataka Kompatibilnost prikaza podataka sa unosom

format unosa podataka=formatu prikaza informacija Fleksibilnost korisničke kontrole prikaza podataka

raspored kolona, sortiranje redova

8

PRIVLAČENJE PAŽNJE KORISNIKAAko je prikazana važna informacija

• intenzitet (samo 2 nivoa)• markiranje (podvlačenje, uokvirivanje, indikacija)• veličina (max 4 veličine)• izbor fontova (do 3 pointa)• inverzno bojenje• blinkanje (2-4 Hz, prikaz ili boja)• boja (max 4 standardne boje)• audio (nježni tonovi i oštri tonovi)

NE pretjerivati u ovim tehnikama

2-9

10

UNOS PODATAKA

Može biti/uzrokovati: trošenje vremena frustraciju opasne greške

Smjernice za unos podataka - Smith i Mosier: konzistentnost transakcija za unos podataka minimalne ulazne akcije korisnika minimalno opterećenje memorije korisnika kompatibillnost unosa i prikaza podataka fleksibilnost kontrole unosa podataka

11

UNOS PODATAKA

minimalne ulazne akcije korisnika veća produktivnost manje šansi za greške klik mišem ili pritisak prstom umjesto kucanja dugih stringova selekcija umjesto kucanja

nema potrebe za memorisanjem strukturira donošenje odluke nema grešaka u kucanju

bez redundantnih unosa podataka smatraju se gubljenjem vremena

izbjegavati promjenu ulaznog uređaja eksperti korisnici preferiraju kucanje 6 do 8 karaktera

12

PRINCIPITemeljitiji, šire primjenljivi i robusniji nego smjernice

Temeljni principi, ne idealni dizajn

• odrediti nivo vještine korisnika• identificirati zadatke

Pet primarnih stilova interakcije

Osam zlatnih pravila dizajna interfejsa

• sprječavaju greškeAutomatska i ljudska kontrola

13

ODREĐIVANJE NIVOA VJEŠTINE KORISNIKA

„upoznaj korisnika“

Razumij svoju publiku i dizajniraj za njih

Ne pravi pretpostavke u vezi sa korisnicima

Izađi i susretni ih

Prikupi podatke

Izvrši testiranje na korisnicima

Shvati kako se razlikuju, koji su im ciljevi, potrebe, kako razmišljaju i osjećaju

14

ODREĐIVANJE NIVOA VJEŠTINE KORISNIKA Jednostavna ideja/težak cilj Starost, pol, fizičke i kognitivne sposobnosti,

kulturna i etnička pozadina, trening, motivacija, ciljevi i karakter

Lokacija, ekonomski profil, posebne potrebe, pristup prema tehnologiji

Ciljevi dizajna bazirani na nivou vještine Početnici Srednje naučeni korisnici Eksperti česti korisnici

15

ODREĐIVANJE NIVOA VJEŠTINE KORISNIKA Početnici

ne znaju ništa ni o zadatku ni o konceptima interfejsa znaju koncepte zadatka ali ne interfejsa (GPS u autu) uključi instrukcije, dijalog boxove, online help reduciraj broj akcija

Srednje naučeni korisnici poznat im je zadatak i koncepti interfejsa prepoznavanje radije nego sjećanje

Eksperti česti korisnici zahtijevaju brz odziv i odgovor

Multi-layer design (univerzalna upotrebljivost)

16

IDENTIFICIRANJE ZADATAKA

Obično uključuje višesatno posmatranje i intervjuisanje korisnika

Treba poduzeti sve protiv ograničene funkcionalnosti

Razbijanje zadataka višeg nivoa

• na atome akcije (izvršene sa jednom komandom)

Relativne frekvencije zadataka

• Česti zadaci: jednostavni i brzi za izvršavanje• pritisak na specijalno dugme

• Dozvoljeno je produžavanje nekih zadataka koji nisu česti

17

IZBOR NAČINA INTERAKCIJE

Direktna manipulacija

Menu izbor

Popunjavanje forme

Komandni jezik

prirodni jezik

Hibridi

18

SPEKTAR DIREKTNOSTI

19

8 ZLATNIH PRAVILA UI DIZAJNA

Primjenjljiva u većini interaktivnih sistema

Izvedena iz iskustva

Zahtijevaju validaciju i prilagođavanje za specifične domene dizajna

Nekompletna ali korisna

20

8 ZLATNIH PRAVILA UI DIZAJNA

1. Težiti ka konzistentnosti sekvence akcija u sličnim situacijama identična terminologija u promptovima, menijima i help

ekranima konzistentna boja, layout, kapitalizacija, fontovi

2. Stremiti univerzalnoj upotrebljivosti prepoznavanje potreba različitih korisnika početnici/eksperti, starost, invaliditet, tehnološka

različitost

3. Nuditi informativni feedback česte/manje bitne akcije: skroman feedback rijetke/važne akcije: značajniji feedback

21

8 ZLATNIH PRAVILA UI DIZAJNA

4. Dizajnirati dijaloge da okončaš akciju Akcije imaju početak, sredinu i kraj Uključiti feedback (npr. stranicu za potvrdu)

5. Spriječiti greške spriječiti ozbiljne greške korisnika zasiviti neodgovarajuće menije ako se greška dogodi, ponuditi instrukcije za oporavak

jednostavne, konstruktivne i specifične instrukcije navesti korisnike da oporave samo pogrešni dio

6. Dozvoliti lako obrtanje akcija smanjuje napetost

22

8 ZLATNIH PRAVILA UI DIZAJNA

7. Podržati internu poziciju kontrole

• iskusni korisnici žele da imaju interfejs pod kontrolom• ne vole iznenađenja i promjene u poznatim ponašanjima

8. Smanjiti opterećenje kratkoročne memorije

• sedam ± dva komada informacije• izbjegavati pamćenje preko više ekrana

23

PITANJA

?