hci_e_skripta.pdf

Prof. dr Dragan Ivetić

INTERAKCIJA ČOVEK RAČUNAR

skripta

“We made a big mistake 300 years ago when we separated technology and humanism...

So there for the enlightenment, guys. IT'S TIME TO PUT THE TWO BACK TOGETHER.”

Michael Dertouzos

(Interviwed in Scientific American, July 1997)

Novi Sad, 2006. godine

•1

dr Dragan Ivetidr Dragan IvetiććINTERAKCIJA INTERAKCIJA ČČOVEK RAOVEK RAČČUNAR UNAR -- UVODUVOD

0

O nastavnikuO nastavniku

dipl. ing. elek. - rač. i aut., 1990, FTNMr teh. nauka - formalizmi u SE, 1994, FTN,Dr teh. nauka - integracija HCI i SE, 1999, FTN.DAAD, RWTH Aachen, 1997.ACM school "SW architecture", Prague, 1998.

TMD, prizemlje, 9C,450-716, ili 350-122 / lok. 764, 171.http://pipin.tmd.ns.ac.yu/[email protected],

Dr Dragan Ivetić, vanredni profesorDr Dragan Ivetić, vanredni profesor


0

UM vs. PADOBRANUM vs. PADOBRAN

UM je kao padobran, radi samo kad je OTVOREN !UM je kao padobran, radi samo kad je OTVOREN !

?

•2


0

Interakcija – šta je to? IInterakcija – šta je to? IMan-Machine dialogue (interaction) upotrebljen prvo u GB, 1949., Ergonomics Research Society

Svaka komunikacija između čoveka i kompjutera, bilo da je ona direktna ili indirektna.

Način komunikacije (odnos) čoveka sa mašinom.

....

To je korisnički interfejs.


0

HCI Ledeni bregHCI Ledeni breg

Interakcione tehniketasteri tastature i miša, meni

Model korisnikovih objekatakorisnikovi objekti za završavanje zadataka,

njihove osobine, ponašanje i odnosi

Vizuelniznaci, povratne veze i estetika

•3


0

Interakcija – šta je to? IIInterakcija – šta je to? IIHCI je disciplina koja se odnosi na projektovanje, evalvaciju iimplementaciju interaktivnih kompjuterskih sistema koje koriste ljudi pri čemu se proučavaju i glavni fenomeni koji ih okružuju. HCI takođe proučava: performanse zadataka koje zajednički obavljaju ljudi i kompjuteri, strukturu komunikacije čovek-kompjuter, sociološku i organizacionu interakciju tokom projektovanja sistema, čovekove mogućnosti da koristi kompjuter (uključujući mogućnost da uči), algoritme i programiranje samog interfejsa, inženjerske probleme koji se pojavljuju tokom projektovanja i izgradnje interfejsa i procese specifikovanja, projektovanja i implementacije interfejsa.


0

Out of the way, hacker! A User is

coming!!!

NEMA MESTA IMPROVIZACIJINEMA MESTA IMPROVIZACIJI

•4


0

A KAKVI SU NAM KORISNICI? A True Story from a Novell NetWire SysOp

A KAKVI SU NAM KORISNICI? A True Story from a Novell NetWire SysOp

Caller: "Hello, is this Tech Support?" Tech Rep: "Yes, it is. How may I help you?" Caller: "The cup holder on my PC is broken and I am within my warranty period. How do I go about getting that fixed?" Tech Rep: "I'm sorry, but did you say a cup holder?" Caller: "Yes, it's attached to the front of my computer." Tech Rep: "Please excuse me if I seem a bit stumped, it's because I am. Did you receive this as part of a promotional, at a trade show? How did you get this cup holder? Does it have any trademark on it?" Caller: "It came with my computer, I don't know anything about a promotional. It just has '4X' on it."


0

A KAKVI SU NAM KORISNICI? još nekoliko priča iz životaA KAKVI SU NAM KORISNICI? još nekoliko priča iz života

Dobar dan, ja sam Marta, ne mogu da štampam. Svaki put kada pokušam pojavi se poruka Ne mogu da nađem štampač.Čak sam podigla štampač i stavila ga ispred monitora, ali kompjuter još uvek kaže da ne može da ga nađe...

kada se interfejsom od kompjutera pravi osoba

Podrška: Šta je sada na vašem monitoru gospođice?Korisnik: Meda koga mi je moj dečko kupio u supermarketu.

Podrška: Vaša lozinka je malo slovo j kao jabuka, i veliko slovo V kao Viktor, i broj 7.Korisnik: Da li je 7 velikim ili malim slovima?

•5


0

A KAKVI SU NAM KORISNICI? još nekoliko priča iz životaA KAKVI SU NAM KORISNICI? još nekoliko priča iz života

Korisnik: Moja tastatura uopšte ne radi. Podrška: Da li ste sigurni da je priključena za kompjuter? Korisnik: Ne. Ne mogu da vidim zadnju stranu kompjutera. Podrška: Podignite tastaturu i napravite 10 koraka unazad. Korisnik: OKPodrška: Da li je i tastatura pošla za Vama? Korisnik: Da.Podrška: To znači da tastatura nije priključena. Ima li tamo još jedna tastatura? Korisnik: Da, ovde je još jedna tastatura. Aaaa...ova radi!

dovitljiva podrška


0

A KAKVI SU NAM KORISNICI? još nekoliko priča iz životaA KAKVI SU NAM KORISNICI? još nekoliko priča iz životaKorisnik ne može da se "nakači" na Internet.Podrška: Da li ste sigurni da koristite ispravnu lozinku? Korisnik: Da siguran sam. Video sam da je i moj kolega uneo istu. Podrška: Možete li da mi kažete koja je vaša lozinka? Korisnik: Pet zvezdica.

Podrška: MS tehnična podrška, mogu li Vam pomoći? Korisnik: Dobar dan! Čekao sam više od 4 sata na vas. Možete li mi reći koliko dugo treba da čekam pre nego što budete mogli da mi pomognete? Podrška: Uff..? Izvinite, ne razumem Vaš problem? Korisnik: Radio sam u Word-u i kliknuo na help dume pre više od četiri sata. Možete li mi reći kada ćete konačno moći da mi pomognete?

•6


0

ČOVEK

Ergonomija

Obrada informacija

Jezik, komunikacija

KOMPJUTER

U/I uređajiTehnike dijaloga

Kompjuterska grafika

Stil dijaloga Arhitektura dijaloga

UPOTREBA I KONTEKST

Oblast primene

Ogledni sistemi i studijeEvalvacione tehnike

RAZVOJ

Socijalne organizacije i posao

Sprega kompjutera i čoveka i adaptacija

Projektni pristupi

Implementacione tehnike i alati

ACM SIGCHI Curricula for HCI, 1992.ACM SIGCHI Curricula for HCI, 1992.


0

Multidisciplinarna priroda HCIMultidisciplinarna priroda HCI

KOGNIT.PSIHOL.

SOCOL.I ORGAN.PSIHOL.

ERGONOMIJA

INŽENJERING

DIZAJN

ANTROPOLOG.SOCIO

LOGIJA

FILOZOFIJA

LINGVISTIKA

VEŠT.INTELI.

RAČUN.NAUKE

•7


0

Cilj i dinamika predmetaCilj i dinamika predmetaRAZUMETI i KORISTITI saznanja o čoveku i okruženju tokom projektovanja, razvoja, evalvacije i eksploatacije interaktivnog softvera.

4 časa nedeljno, jedan semestar,60 školska časa, auditorno / prezentacija

4 časa nedeljno, 60 školska časamultimed. PC + MS Win., samostalni zadaci


0

Teme izučavanja ITeme izučavanja I1. Faktor čoveka u interaktivnim sistemima2. Teorije, principi i smernice u razvoju interfejsa3. Proces razvoja korisničkog interfejsa

TEST 1 – čovek, teorija i razvoj4. Ekspertske revizije, testiranje utilitarnosti i pregledi5. Softverski alati6. Direktna manipulacija7. Meni, forme i dijalozi

TEST 2 – utilitarnost, alati, VR/AR, dijalozi

•8


0

Teme izučavanja IITeme izučavanja II

8. Multiprozorske strategije9. Interakcioni uređaji i vreme odgovora i prikaza10.Štampana uputstva, sistem pomoći i tutori11.Pretraživanje, vizuelizacija informacija i WWW

TEST 3 – prozori, uređaji, dokumentacija, vizuelizacija


0

LiteraturaLiteratura1. SKRIPTA (referentni materijal) ALI SA VAŠIM

BELEŠKAMA/KOMENTARIMA2. Ben Shneiderman: Designing the User Interface – Strategies

for Effective Human-Computer Interaction, 3rd Ed., 1998.2. Alan Dix, Janet Finlay, Gregory Abowd, Russel Beale:

Human-Computer Interaction, 2nd Ed., 1998.3. Jenny Preece, Yvonne Rogers, Helen Sharp, David Benyon,

Simon Holland, Tom Carey: Human-Computer Interaction, 1995.

4. Marry B. Rosson, John M. Carroll: Usability Engineering –Scenario-Based Development of HCI, 2002.

5. Dragan Ivetić: Formalna specifikacija korisničkog interfejsa interaktivnog grafičkog sistema, FTN, 1999.

•9


0

Zadaci i način polaganja ispitaZadaci i način polaganja ispitaLABORATORIJSKE VEŽBE

Čine sledeće grupe aktivnosti• U/I uređaji korisnika sa posebnim potrebama,• Modelovanje interakcije i evalvacija utilitarnosti zadate

aplikacije/sajta, 1. zadatak, 30% ocene pismenog.• Razvoj interfejsa aplikacije i sistema pomoći za dati

zadatak, 2. zadatak, sama aplikacija 50% ocene pismenog a sprovedena evalvacija utilitarnosti aplikacije je 20% ocene pismenog.

PREDAVANJA• Testovi na kraju termina predavanja tokom nastave


0

Problemi u HCI USA izbori 2000Problemi u HCI USA izbori 2000

•10


0

Problemi u HCI Unos odredišta avionaProblemi u HCI Unos odredišta aviona

This story from New York Times 24 Aug 96 p7.

The crash of a Cali-bound American Airlines jet last December in Colombia, S.A., occurred because the plane's captain entered an incomplete command into the onboard computer - and the default action taken by the software pointed the plane in the wrong direction. The beacons at the Cali and Bogota airports both begin with the letter R, which is the only character the pilot typed; instead of proceeding toward Cali, the plane turned in the opposite direction (toward Bogota) and crashed into a mountain.


0

Problemi u HCI Skrivene opcije

Problemi u HCI Skrivene opcije

•11


0

ŠTA TREBA DA RADI DOBAR INTERFEJS?ŠTA TREBA DA RADI DOBAR INTERFEJS?Sve ono što korisnik očekuje.

•1

drdr DraganDragan IvetiIvetiććINTERAKCIJA INTERAKCIJA ČČOVEK RAOVEK RAČČUNARUNAR -- ČČOVEKOVEK

1

Faktor čoveka u interaktivnim sistemimaFaktor čoveka u interaktivnim sistemima

• kako ljudi primaju, obrađuju i memorišu informacije, rešavaju probleme i stiču iskustvo

KOGNITIVNA PSIHOLOGIJAKOGNITIVNA PSIHOLOGIJAproučavanje načina na koje ljudi obavljaju svoje svakodnevne poslove i kako izlaze na kraj sa eksplozivnim žagorom konfuzionih stimulansa koji konstantno bombarduju njihova čula.


1

Tok izlaganjaTok izlaganja

1. CILJEVI User Interface Engineering (function vs. usage)

2. LJUDSKA RAZNOLIKOSTČovekove karakteristikeRadno okruženjeRazličitosti (lično, kulturno, internacionalno,

korisnici sa posebnim potrebama i stariji)

•2


1

Ciljevi User Interface Engineering ICiljevi User Interface Engineering I

Definisati ciljnu grupu korisnika za dati interfejs (The Libraryof Congress primer). Korisnici evoluiraju i menjaju se!Za svaku grupu i zadatak evaluirati projektantske odluke kroz naredne merljive faktore na datim benchmark zadacima:

VREME UČENJA – koliko vremena zahteva tipičan član grupe da nauči kako koristiti komande relevantne za dati zadatak.

PERFORMANSA – koliko vremena treba članu grupe da reši dati zadatak (uključujući greške i korekciju).

GREŠKE – koliko i kakve greške čini član grupe tokom rešavanja datog zadatka (za error handling).


1

Ciljevi User Interface Engineering IICiljevi User Interface Engineering IIVREME PODSEĆANJA – kako tipičan član grupe održava

svoje znanje posle sata, nedelje, meseca ... (blisko vremenu učenja i zavisno od broja ponavljanja).

SATISFAKCIJA – koliko se tipičnom članu grupe sviđaju različiti aspekti proizvoda (intervjui, ankete sa slobodnim unosom odgovora, pisani izveštaji...)

Nemoguće sve podjednako zadovoljiti (treba trade-offs), npr. ako je dozvoljeno duže učenje – mogu biti uključeni i makroi, forsiranje niske pojave greške ruši performansu...Testiranje projektantskih alternativa na (papir, executable) mock-ups; pre implementacije napisati dokumentaciju radi provere projektovanog rešenja...

•3


1


1. CILJEVI User Interface Engineering (function vs. usage)

3. LJUDSKA RAZNOLIKOSTČovekove karakteristikeRadno okruženjeRazličitosti (lično, kulturno, internacionalno,

korisnici sa posebnim potrebama i stariji)


1

Obrada informacijaObrada informacija

OKOLINA

KODI-RANJEKODI-

RANJE

KOMPA-RACIJAKOMPA-RACIJA

IZBORREAKCIJE

IZVRŠAV.REAKCIJE

ULAZI (STIMULI)

IZLAZI (REAKCIJA)

Barber 1988. godine dao osnovni model, pa ga proširio.

MEMORIJAMEMORIJA

P

A

Ž

NJ

A

•4


1

Ulazni kanaliUlazni kanali

Od pet čula, najinteresantnija su

svetlost u bioelektrični signal, najviše informacija,

vibracija u bioelektrični signal, dodatne informacije,

pritisak u bioelektrični signal, dodatne informacije


1

Čulo vidaČulo vida

Svetlo u bioelektrične signale

• 120 miliona štapića, osetljivi na intenzitet svetlosti, periferni vid, noću C/B

• 6 miliona cilindara, tri tipa za tri svetlosne, detektovanje boja pri normalnoj jačini svetlosti,

• Y nervne ćelije, na rubu, detektovanje pokreta.• X nervne ćelije oko žute mrlje, spoznavanje šare,

•5


1

Primer centričnosti vidaPrimer centričnosti vida

A B C D E F • H I J K


1

KOMPARACIJA - na primeru vizuelne percepcijeKOMPARACIJA - na primeru vizuelne percepcije

Interna prezentacija stimulansa se poredi sa memorisanom.

• Percepcija veličine i dubine - prostorni ugao, preklapanje i familijarnost,• Percepcija osvetljenosti - koliko svetlosti emituje objekat (kontrast - razlika intenz. svetlosti fronta i pozadine), bolja osvetljenost - bolja percepcija ali i flicker (periferna vizija),• Percepcija boja - boja (talasna dužina svetlosti - oko 150 boja), intenzitet (osvetljenost boje) i saturacija (količina belog u boji). Kombinacija svega - 7 miliona boja/nijansi.

•6


1

KOMPARACIJA - šta to pišeKOMPARACIJA - šta to piše

8IE CT T


1

KOMPARACIJA - ko je gdeKOMPARACIJA - ko je gde

Šveđanka i Japanka su iste visine? Ili Japanka stoji negde dalje od Šveđanke?

Kako dočarati da je Šveđanka u pozadini?

sivilom senkom preklapanjem

•7


1

TRAJNA MEM.

MEMORIJAMEMORIJA

PERCEPCIJA

RADNA MEM.AUDIOMEM.

VIDEOMEM.

MOTORIKA


1

• bafer stimulansa koji neprekidno dolaze iz svih čula

• baferovanje traje najviše 0,05 sekundi

• primer persistentnosti - pomeranje prsta ispred očiju

• pažnja pomera neku informaciju u radnu memoriju

• déjà vu

SENZORSKA MEMORIJASENZORSKA MEMORIJA

•8


1

RADNA MEMORIJARADNA MEMORIJA

• čuva informacije koje su prolazne,

• međurezultati 23*6 ili početak rečenice tokom čitanja,

• baferovanje traje najviše 0,2 sekunde,

• ograničen kapacitet,

• pristup radnoj memoriji najviše 70 ms,

• pravilo 7 ± 2 (tel. broj), grupisanje informacija.


1

TRAJNA MEMORIJATRAJNA MEMORIJA

• naš osnovni resurs - čuva sve što znamo, • činjenične informacije, eksperimentalno znanje, proceduralna pravila ponašanja

• ogromnog, možda beskonačnog, kapaciteta,

• dva tipa trajne memorije:• pristup trajnoj memoriji reda stotina ms,

• epizodna, sekvence događaja i iskustva, rekonstrukcija realnog događaja,• semantička, mreža strukturiranih činjenica, koncepata i sposobnosti dobijenih iz epizodne (učimo iz iskustva).

•9


1

PAŽNJAPAŽNJA

• sprečava information overload u našim glavama, • iz senzorske u radnu mem. - samo interesantne info.,

• cocktail party phenomenon,• dva tipa pažnje:

• fokusirana, praćenje jednog događaja, dijalog,• deljena, praćenje više događaja, vožnja i dijalog,

• iz radne u trajnu memoriju - samo rezultati,

• usmeravanje pažnje u korisničkom interfejsu:• prostorno ili vremensko strukturiranje (desktop i pulldown), bojama, alarmi (flashing, reverse, audio).


1

Čulo sluha IČulo sluha I

Promena pritiska pojačana opnom i srednjim uhom konvertuje se u bioelektrični signal.

• skoro periodična promena ali i aperiodična,• opseg vibracija pritiska od 20 Hz do 20 kHz - visina,• amplituda – glasnoća,• ? – boja,

•10


1

Čulo sluha IIČulo sluha IIFletcher - Munsen psiho-akustične krive,prosečan čovek osetljiv na frekvencije od 1 kHz – 6 kHz,naglasak pri prenosu i kompresiji.


1

Čulo sluha IIIČulo sluha III

• filterisanje ušne školjke,

• IID - Interaural Intensity Difference

• ITD-Interaural Time Difference - 50ms

3D slušanje

•11


1

Čulo dodiraČulo dodira

Pritisak, odnosno vibracija se konvertuju u bioelektrični signal.

• vibracije (< 5kHz) u bioelektrični signal,

• pritisak u jednoj tački u bioelektrični signal,HAPTIČKI senzori daju osećaj oblika

TAKTILNI senzori daju osećaj materijala/teksture


1

Rešavanje problemaRešavanje problema

je proces pronalaženja rešenja nepoznatog zadatka koristeći sve znanje koje imamo pri čemu smo u stanju adaptirati informacije tako da nam koriste i u novoj situaciji.

NAJPOZNATIJE TEORIJE1. GESTALT teorija, 1940-tih, oslanja se na korišćenje već

stečenog znanja, odnosno putem pokušaja i grešaka.

2. PROBLEM SPACE teorija, 1970. godine, um je information proccessor - kao i svaki drugi automat u prostoru stanja.

3. Teorija ANALOGIJE, podseća na Gestalt, uspostavlja se veza poznate i nove (nepoznate) oblasti/stanja.

•12


1

Gestalt teorijaGestalt teorija

Rešavanje problema je i produktivno i reproduktivno.Produktivno jer se oslanja na pronicljivost (insight) i restukturiranje problema.Reproduktivno jer se oslanja na stečeno znanje pri čemu je moguće da se fiksiranjem na poznato propuste važne osobine problema.

Produktivno – majmuni nastavljaju štapove da bi dohvatili voće a možda je i reproduktivno jer su oni ipak nekad bili u divljini.

Produktivno – problem klatna (soba sa dve vrpce sa plafona dovoljno razmaknuta da se ne mogu istovremeno uhvatiti, klešta i spojnicu – da se vrpce spoje).


1

Problem space teorijaProblem space teorijaProblem space - skup stanja problema, operatori prelaza,

inicijalno i ciljno stanje. Operatori prelaza se koriste da se stigne u ciljno stanje.

Ogroman broj stanja forsira heuristiku u izboru operacija. Means-ends je najpoznatija heuristika, uporediti inicijalno sa ciljnim stanjem i izabrati operacije da se smanje razlike. Problem – premestiti orman sa jednog na drugi zid, prvo u mislima. Potproblem – težina ormana, izbaciti stvari iz njega.

Ograničenje je kapacitet radne memorije koja aktivno učestvuje tokom pronalaženja operacija.

•13


1

Teorija analogijeTeorija analogije

Osnovno je dovesti u vezu novu oblast sa već poznatom oblašću pa se operacije poznate oblasti prenesu u novu oblast.

Nova oblast – zračenje tumora sa minilanim uticajem na zdrave organe.

Poznata oblast – osvajanje utvrđenja neprijatelja okruženog minskim poljem.

Lakše do analogije što su oblasti (ili neke njene operacije) po nekom elementu bliže jedna drugoj.


1

Sticanje iskustva/veštine/znanja-skillSticanje iskustva/veštine/znanja-skillTri osnovna nivoa sticanja skill-a:1. Učenik koristi opšta pravila kojima interpretira činjenice o

problemu. Sporo i zahtevno u pristupu memoriji.2. Učenik razvija pravila specifična zadatku.3. Učenik podešava pravila tako da se poveća performansa. Proceduralizacija pomera 1. u 2., uklanja pravila zahtevna za memorijom i zamenjuje konkretne vrednosti promenljivama.Generalizacija pomera 2. u 3., generalizuje specifične slučajeve u generalizovane osobine tih slučajeva. Korak 1 intezivno koristi znanje, korak 2 se oslanja na poznate procedure a korak 3 je skilled behaviour koje je često automatiozovano (voziti kola ili bicikl) i teško ih eksplicitno objasniti.

•14


1

GreškeGreškePri interpretiranju i manipulisanju informacijama možemo načiniti greške koje mogu biti trivijalne ili ozbiljne.

SLIPS su greške nastale zbog promena u kontekstu skilled behaviour. U automatizovanom ponašanju promenimo neki aspekt koji dovodi do kraha. Vožnja auta kući i prolazak kroz STOP jer je vožnja familijarnija od zaustavljanja.

MENTAL MODELS su greške nastale zbog nekorektnog razumevanja, ili modelovanja, situacije ili sistema. Mentalni modeli su često parcijalni, ne razumemo kompletnu situaciju ili sistem, odnosno oni su zasnovani na pogrešno interpretiranim činjenicama o sistemu ili situaciji.Dugme kraj vrata lifta gasi svetlo...


1

Radno okruženjeRadno okruženjeveoma utiče na satisfakciju korisnika, njegovu performansu i nisku verovatnoću greške.American National Standard for Human Factors Engineering of Visual Display Terminal Workstation (1988) definiše:• visinu radne površine i prikaznog uređaja,• prostor ispod radne površine za noge,• širinu i dubinu radne površine,• podesivost visine i ugla stolice i radne površine,• k-ke stolice: dubina i ugao sedanja, podrška leđa i lumbarnog dela, nasloni za ruke i šake ...

Antropolozi, sociolozi, industrijski psiholozi, dizajneri ....

•15


1

Internacionalne različitostiInternacionalne različitostikulturna, etička, rasna, lingvistička, ... pozadina

Internacionalizacija UI je posledica globalizacije i bavi se narednim elementima interakcije:• karakteri, brojevi, specijalni karakteri, akcent,• levo-desno vs. desno-levo vs. vertikalno čitanje/pisanje,• format datuma, sata, iznosa i valute,• mere (dužina, težina, ...),• telefonski brojevi i adrese,• imena i titule,• kapitalizacija i punkcija,• sekvenca sortiranja,• ikone, dugmići, boje,• gramatika i pravopis,• formalizmi, etiketiranje, metafore ...


1

Korisnici sa posebnim potrebamaKorisnici sa posebnim potrebama

Korisnici sa oštećenim vidompovećavanje površine prikaza, konverzija izlaza/ulaza u Brajovu azbuku ili glas,

Korisnici sa oštećenim sluhomkonverzija audio informacija u video,

Korisnici sa oštećenom motorikomspecijalni ulazni uređaji (posebne tastature, tasteri, džojstici, praćenje oka, head-mounted optical mouse),

Korisnici sa problemom u učenju/čitanju (2% u USA)vizuelizacijom protiv teksta, manje konfuznih grafika i daktilografije...

•16


1

Stariji korisniciStariji korisnici

Sve veći deo populacije koji sa rezervom prihvata novotarije – opterećenost iskustvom.

Prilagoditi UI njihovim fizičko-psihičkim mogućnostima:veći font, jači kontrast, ulazni uređaji koji su lakši za upotrebu, glasniji audio, jednostavniji komandni jezik..

San Francisko-based Senior Net (>55 godina)olakšava komunikaciju, igrice, servisne informacije...evidentno je psihičko/fizičko poboljšanje korisnika

•1

drdr DraganDragan IvetiIvetićć -- INTERAKCIJA INTERAKCIJA ČČOVEK RAOVEK RAČČUNARUNARTEORIJE, PRINCIPI I SMERNICETEORIJE, PRINCIPI I SMERNICE

2

HCI teorije, principi i smerniceHCI teorije, principi i smerniceUspešni projektanti interaktivnih sistema znaju da moraju ići iznad intuitivnog rasuđivanja koristeći:

Visokonivovske teorije i modele, daju okvir i/ili jezik za diskusiju o pitanjima koja su nezavisna od aplikacije.

Srednjenivovske principe, korisni pri kreiranju i komparacijiprojektantskih alternativa.

Specifične i praktične smernice, sadrže pravila koja mogu projektovanje učiniti efikasnijim.


2


1. VISOKONIVOVSKE TEORIJEza modelovanje u HCI

2. PRINCIPI prepoznavanje različitosti 8 zlatnih pravila

3. SMERNICE zaprikaz podatakaunos podatakaupotrebu bojabalansiranje automatizacije i korisnikove kontrole

•2


2

TeorijaTeorijaništa nije toliko praktično kao dobra teorija

za observaciju ponašanja, opis aktivnosti, projektnog rešenja, komparaciju dva projektna rešenja i trening.

EKSPLANITORNA PREDIKTIVNAza komparaciju rešenja tokom izvršenja na nivou motorike (keystroking time), perceptivnom nivou (vreme čitanja teksta, liste) ili na kognitivnom nivou (kombinacija podzadataka).


2

Četvoronivovski pristup u modelovanjuČetvoronivovski pristup u modelovanjuFoley & van Dam kasnih 1970tih dali hijerarhiju kojom se stiže do dobrih rezultata uz permanentno dokumentovanje veza elemenata na različitim nivoima:KONCEPTUALNI NIVO – korisnikova mentalna slika

interaktivnog sistema.SEMANTIČKI NIVO – opisuje značenja razmenjenih komandnih

ulaza korisnika i kompjuterski prikazanih izlaza.SINTAKSNI NIVO – definiše kako se jedinice (reči), koje daju

semantiku, sastavljaju u rečenice koje naređuju kompjuteru da završi zadatak. Sintakse interakcije: glagol-imenica, imenica-glagol, objekt-operacija.

LEKSIČKI NIVO – operiše sa detaljima uređaja i preciznim mehanizmima kojima korisnik specifikuje sintaksu.

•3


2

GoalsOperatorsMethodsSelection rules& KeystrokeLevelModel

GoalsOperatorsMethodsSelection rules& KeystrokeLevelModel

Card, Moran i Newel 1980tih dali prediktivne teorije za sve nivoe modelovanja interaktivnih sistema.GOALS – korisnikov cilj, šta namerava da uradi.OPERATORS – osnovne akcije koje korisnik mora da uradi

kako bi koristio sistem (pritisni X ili pročitaj dijalog).METHODS – podzadaci koje može da završava po različitim

putanjama – jedna putanja je završen zadatak.SELECTION – mehanizam za izbor putanje završetka zadatka,

a i za definisanje pravila (rules) različitim korisnicima.GOMS model zatvaranja prozora.

Modifikovan sa PetriNets uštedeo je desetinu M$ telefonskoj kompaniji NYNEX.


2

GOMS primerGOMS primer

GOAL : Zatvori_prozor[ select GOAL: Metoda_desnog_X

Pomeri_kursor_misa_goredesnoLevi_klik_misem_na_X_dugmic

GOAL: Metoda_levog_XPomeri_kursor_misa_gorelevoLevi_klik_misem_na_ikonu_aplikacijeU_pull_down_meniju_lociraj_CloseLevi_klik_misem_na_opciju_Close

GOAL: Matoda_Alt_F4Pritisni_i_drzi _taster_AltPritisni_taster_F4]

•4


2

KLM uvodKLM uvodKomparacija rešenja tokom izvršenja na nivou motorike, kompleksni zadaci dekomponovani pomoću GOMS...Modeluje pomoću 5 različitih operatora: motorni, mentalni i odgovor sistema:K pritisak na dati taster tastature,B pritisak na taster miša,P pointiranje, pomeranje pointer uređaja na cilj,H homing, premeštanje ruke sa/na tastature na/sa miša,D crtanje linije pomoću pointer uređaja,M mentalna priprema za fizičku akciju,R reakcija sistema, može se ignorisati ako korisnik ne

čeka na nju (eho tokom unosa).


2

Standardne vrednosti KLM operatoraStandardne vrednosti KLM operatoraOperator Napomena Vreme(s)

K dobar (90 r/m) 0,12srednji (40 r/m) 0,28početnik 1,20

B dole ili gore 0,10klik 0,20

P Fitt-ov zakon 0,1 log2((rastojanje/veličina cilja)+0,5)prosečno pointiranje 1,10

H na/sa tastature 0,40D crtanje -M mentalna priprema 1,35R reakcija sistema -

•5


2

KLM primerKLM primer

Ispravljanje jednoslovne greške u tekstu....1. ruka na miša H<miš>2. pozicioniranje posle slova_za_brisati MPB<levim>3. povratak na tastaturu H<tastatura>4. brisanje karaktera Backspace-om MK<backspace>5. unos ispravnog karaktera MK<karakter>6. repozicioniranje tekst kursora H<miš>MPB<levim>7. reakcija sistema R

T = TH + TMPB + TH + TMK + TMK + THMPB + TR == 3 TH + 2 TP + 2 TB + 4 TM + 2 TK + TR == 3*0,4 + 2*1,10 + 2*0,2 + 4*1,35 + 2*0,28 + 0 = 9,76 sekunde


2

Norman-ov ciklus akcija-evalvacijaNorman-ov ciklus akcija-evalvacija

eksplanitorni pristup modelovanja interakcije, 1988. godine USTANOVI

CILJ FORMIRAJNAMERU

FORMIRAJSEKVENCU

AKCIJA

IZVRŠISEKVENC.

AKCIJA

OSMOTRISTANJESISTEMA

INTERPR.STANJESISTEMA

EVALVIR.STANJESISTEMA

STANJE SISTEMA REFLEKTUJE CILJ KORISNIKA

•6


2

Gulf of Evaluation

Doprinos Norman-ovog ciklusa IDoprinos Norman-ovog ciklusa I

GULFS OF EXECUTION – razlika između korisnikove formulacije akcije koje vode cilju i akcija koje sistem dozvoljava, ako je razlika 0 interakcija je uspešna.

GULFS OF EVALUATION – razlika između reprezentacije sistema i korisnikovih očekivanja, ako je potrebno više napora da korisnik interpretira stanje sistema -interakcija je neuspešna.

PERCEPCIJAINTERPRETACIJADAVANJE SMISLA

CILJAKCIONI PLAN

EGZEKUCIJAGulf of Execution


2

Doprinos Norman-ovog ciklusa IIDoprinos Norman-ovog ciklusa II

Imajući na umu Norman-ov ciklus, može se zaključiti da korisnik greši jer:

1. može ustanoviti neadekvatan cilj,

2. ne može uočiti odgovarajući HCI objekt (ikona, labela...),

3. ne zna kako da definiše ili izvrši akciju,

4. dobija neodgovarajuću (misleading) povratnu vezu (reakciju).

•7


2

Widget-level teorijeWidget-level teorije

Widget – osnovni elementi WindowsIconsMenusPointers stila interfejsa ali i buttons, toolbars, palettes i dialog boxes.

Widget–level teorije zasnovane na simplifikaciji – visoki nivo apstrakcije viđen u user-interface builders.

Uglavnom kao prediktivne teorije – jednom testiran i kvantifikovan widget kasnije se samo koristi bez detalja.


2

MS Windows widgetsMS Windows widgets icons

window

dialogue

desktop

taskbar

pointer

pop-up menu

pull-down menu

toolbar

toolbox

menubar

•8


2



2. PRINCIPI prepoznavanje različitosti 8 zlatnih pravila



2

Princip 1: Prepoznati različitosti IPrincip 1: Prepoznati različitosti ISKUP PROJEKTANTSKIH REŠENJA = ljudske različitosti * spektar zadataka * spektar situacija * frekvencija upotrebeUSAGE PROFILES – poznavati korisnika,

K-ke korisnika: godine, pol, fizičke mogućnosti, obrazovanje, kulturno i etičko nasleđe, obuka, motivacija... Korisnici u jednoj grupi se razlikuju! Generalna kategorizacija:1. Novajlije ili korisnici po prvi put – znaju malo o zadatku i interfejs konceptima; profesionalci koji poznaju zadatak ali slabi sa interfejsom. Razviti interfejs jednostavnog rečnika i akcija, informativni feedback, deskriptivne poruke o greški, dobra uputstva i step-by-step tutori sprečavaju odbojnost i motivišu rad i učenje o interfejsu i zadatku.

•9


2

Princip 1: Prepoznati različitosti IIPrincip 1: Prepoznati različitosti II2. Kolebljivog znanja – znaju o zadatku i široko znanje interfejs koncepata ali slabog pamćenja strukture menija i lokacija interfejsa. Razviti interfejs metodičke strukture, konzistentne terminologije, izgled takav da prepoznaje a ne podseća, poruke punog značenja, on-line help.3. Svakidašnji eksperti – znaju zadatak i interfejs i gledaju da što pre završe zadatak. Razviti interfejs sa brzim odgovorom, kratki feedback, kapaciteta da sa par klikova završi zadatak (makroi), dobrodošlo svako skraćenje toka interakcije.

Jedna aplikacija – više klasa korisnika, višenivovska struktura gde sam korisnik bira nivo ili se on automatizuje kroz neku opciju – npr: brzina (informativnost) feedback-a.


2

Princip 1: Prepoznati različitosti IIIPrincip 1: Prepoznati različitosti III

TASK PROFILES – poznavati zadatak. Dekomponovati akcije zadataka na pravi broj atomskih akcija koje korisnik pokreće jednostavnom komandom. Premali atomi – frustracija jer mora izdati puno komandi (MS Word preko 700 komandi/opcija),preveliki atomi – manje opterećen interfejs komandamaali one su generalizovane (uključuju mnogo opcija).Frekvencija pojavljivanja zadatka – frekvetniji se jednostavno pokreću (Ins), drugi (Alt+) a ostali samo iz menija.Matrica zadataka i korisnika ([korisnik,zadatak] = frekvencija) je pogodna za višekorisničke aplikacije.

•10


2

Princip 1: Prepoznati različitosti IVPrincip 1: Prepoznati različitosti IV

STIL INTERAKCIJE – poznaje korisnika i zadatak, tek tada odabrati neki od narednih stilova interakcije : Direktna manipulacija – popularan, asinhroni tok, pokaži i pritisni, brz za upotrebu, kasnije više reči.Meniji – manje asinhron, jasna struktura i lakši za početnike, projektantski napor za strukturiranje.Form fillin – ili popuni praznine stil, jedva asinhron, uobičajen u informacionim sistemima, slika realnog dokumenta, jedina opasnost je unos loših podataka. Komandni jezik – slabo sinhron, glagol-imenica, osećaj kontrole i inicijative, slaba obuka – samo sintaksa, velika verovatnoća greške.Govorni jezik – asinhron, prirodan, HAL9000.


2

Princip 2: Osam zlatnih pravila IPrincip 2: Osam zlatnih pravila I

1. TEŽITI KONZISTENTOSTI – najčešće prekršeno, identična terminologija u svim elementima UI, konzistentne boje, lejeri, fontovi, kapitalizacija...

2. OMOGUĆITI FREKVETNIJIM KORISNICIMA UPOTREBU PREČICA – veća brzina interakcije, skrivene komande i makroi.

3. DAVATI INFORMATIVNI FEEDBACK – za svaku akciju korisnika dati feedback, skromniji za frekventije akcije a značajniji za manje frekventne.

4. PROJEKTOVATI DIJALOGE NAGLAŠENE ZATVORENOSTI– sekvence akcija grupisati da imaju početak i kraj, dati feedback na kraju grupe, ponuditi memorisanje.

•11


2

Princip 2: Osam zlatnih pravila IIPrincip 2: Osam zlatnih pravila II

5. PONUDITI PREVENCIJU I RUKOVANJE GREŠKOM – input line guard, ako pogreši tada jednostavna korekcija (samo što je loše a ne sve), sistem mora preživeti.

6. DOZVOLITI PONIŠTAVANJE EFEKATA AKCIJE (UNDO) –veliko olakšanje kod početnika – sami istražuju.

7. INTERNO PODRŽAVATI KONTROLU – frekventni korisnici vole da imaju osećaj pune kontrole sistema, bez iznenađujućih akcija sistema.

8. REDUKOVATI OPTEREĆENJE RADNE MEMORIJE – 7 ± 2, jednostavan prikaz, konsolidovati višeprozorske prikaze, uvoditi skraćenice, kodove i sekvence akcija sa obaveznim online podsetnikom.


2



2. PRINCIPI prepoznavanje različitosti8 zlatnih pravila


•12


2

Smernice za prikaz podataka ISmernice za prikaz podataka ISpoj psiholoških principa i smernica proizašlih iz prakse.

ORGANIZOVANJE PRIKAZA – Smith & Mosier 1986. god. 1. Konzistentnost prikaza podataka – terminologija, skraćenice, formati, boje, kapitalizacija...2. Efikasna asimilacija informacija od strane korisnika- format familijaran korisniku i zadatku, kodiranje bojom, kodiranje veličinom (barem 50%),- kratke, jednostavne i afirmativne rečenice,- uređenje lista stavki ako ništa drugo onda abecedno,- poravnavanja u tabeli (tekst ulevo a cifre udesno po decimalnoj tački), - upotreba korektnih mernih jedinica i broja cifara u razlomljenom delu broja (plata na 4 decimale?)


2

Smernice za prikaz podataka IISmernice za prikaz podataka II

3. Minimalno opterećivanje memorije korisnika – malo pamćenja sa jedne na drugu stranicu/prozor, - kratke (zatvorene) sekvence akcija da se smanji mogućnost da se nešto zaboravi,- labelisati svaku stranicu/prozor oslikavajući trenutni položaj u sekvenci stranica/prozora, kao i sam sadržaj,- ponavljati zaglavlja dugačkih spiskova/tabela ali i naziva redova kod dugačkih redova,4. Kompatibilnost prikazanih podataka sa unetim –poklapanje formata, lepo da izlazni budu i editable5. Fleksibilnost u korisnikovom upravljanju prikazom –npr. korisnik može preurediti redosled kolona prikaza

•13


2

Smernice za unos podatakaSmernice za unos podatakaUnos je dominantan posao operatora zato oprezno s njim!Smith & Mosier 1986. godine ponudili 5 smernica: 1. Konzistentnost unosa podataka – sličnu sekvencu akcija

koristiti, terminologija, skraćenice, formati, boje...2. Minimalan broj akcija korisnika tokom unosa – veća

produktivnost/manja greška, manje kucanja (tipograf. greška) do 8 karaktera, više selekcija (memo), bez redudantnosti unosa istih podataka

3. Minimalno opterećivanje memorije korisnika – bez memo. liste kodova i sintaksno kompleksnih komandnih stringova

4. Kompatibilnost unetih podataka sa prikazanim – formati5. Fleksibilnost u korisnikovom upravljanju ulazom –

korisnik voli unositi podatke svojim redosledom koga može kontrolisati ako tako ne ruši konzistentnost unosa


2

BojeBoje

• čine izvršavanje zadatka atraktivnijim (igrice, upravljačke šeme, skeniranje ljudskih organa...) ali postoji i opasnost,

• boje mogu• prijati ili smetati očima,• dati akcent neinteresantnom prikazu,• obezbediti suptilnu diskriminaciju u kompleksnom

prikazu,• naglasiti logičku organizaciju prikaza,• privući pažnju na upozorenja,• izazvati jaku emocionalnu reakciju radosti, uzbuđenja,

straha ili besa.

•14


2

Smernice za upotrebu boja ISmernice za upotrebu boja I

KONZERVATIVNO KORISTITI BOJE• početnici bi da sve blješti,• SOFTVER privlači pažnju, ali blizu smeta,• pogrešno bojenje može da zavede korisnika na loš put,• meni sa 12 stavki i 12 boja je jako loše; sa 4 boje bolje ali

isto obojene stavke se mogu smatrati sličnim; jedna boja za naslov, druga za stavke, treća za instrukcije a četvrta za greške – bolje ali i dalje šareno; najbolje - crno na belom sa bold i kurzivom a boja samo za veliko naglašavanje,

LIMITIRATI BROJ BOJA• u jednom alfanumeričkom prikazu do četiri boje,• u čitavoj sekvenci prikaza do sedam boja,


2

Smernice za upotrebu boja IISmernice za upotrebu boja IIISKORISTITI BOJU KAO KODNU TEHNIKU• ubrzava prepoznavanje više nego kodiranje tekstom,• dužnici u crvenom,• avioni na većoj visini plavi a na nižoj beli,• Borlad IDE i ključne reči,OSIGURATI DA KODIRANJE BOJOM PODRŽAVA ZADATAK• dato kodiranje ne sme biti suprostavljeno zadatku,• ako se i oznake aviona oboje – teže ih je pročitati,POJAVLJIVANJE KODIRANJA BOJOM UZ MINIMALNO

UČEŠĆE KORISNIKA• kodiranje bojom ne sme pasti na leđa korisniku svaki put

kada izvršava zadatak,• dužnici u crveno samo kada zatraži proveru stanja računa,

ali u listingu prosečnog priliva u standardnoj boji,

•15


2

Smernice za upotrebu boja IIISmernice za upotrebu boja IIIKODIRANJE BOJOM TREBA DA KONTROLIŠE KORISNIK• ne samo izbor boja nego da i uključi/isključi kodiranje,PRVO DIZAJNIRATI MONOHROMATSKI• naglasak je u sadržaju koji je logički OK,• isticati uvlačenjem, okvirom, veličinom, podvlačenjem...• pa boja možda i ne treba (i za crno/bele monitore),RAZMATRATI POTREBE KORISNIKA SA PROBLEMOM U

PREPOZNAVANJU BOJA• oko 8% populacije Evrope i Severne Amerike ima problema,• najčešće crveno i zeleno se ne razlikuje – sivo,• crveno – roze (ne)razlikuje i ne zna da opiše,KORISTITI BOJE KAO POMOĆ PRI GRUPISANJU• istom bojom članove grupe, a dijagonalno suprotnom članove semantički suprotne grupe,


2

Smernice za upotrebu boja IVSmernice za upotrebu boja IVBITI KONZISTENTAN U KODIRANJU BOJOM• uspostaviti pravila kodiranja na početku projekta,• odstupanja zbunjuju korisnika - pogrešna interpretacija,BITI SVESTAN ZNAČENJA BOJA U KODIRANJU• od korisnika tražiti značenje boja u datom zadatku,• crvena – u saobraćaju stop ili opasnost, u hemiji je toplo,

finansijski gubitak, isključeno u automatici, radost u Kini,BITI SVESTAN UPARENOSTI BOJA• zasićene dijagonalne boje zamaraju čoveka,BOJAMA UKAZATI NA PROMENU STANJA• termometar, brzinometar, obrtomer...PROBLEMI:• drugi hardver može da poremeti boje, kalibracija,• štampanje ili konverzija može biti problem.

•16


2

Balansiranje automatizacije i korisnikove kontrole I

Balansiranje automatizacije i korisnikove kontrole I

Da se eliminišu čovekove akcije samo kada nema odlučivanja

čovek

mašina

industrijskarevolucija

judgement forunpredictableevents

PRIMER: kontrola leta, automatizovano raspoređivanje i rutiranje jako velikog broja letova istovremeno, ali i dalje čovek aktivan za slučaj vanrednih situacija (otvorena samo jedna pista), jedan avion sa lošim motorom a drugi ima bolesnog putnika (kapetan koji je pojeo ribu) ...


2

Balansiranje automatizacije i korisnikove kontrole II

Balansiranje automatizacije i korisnikove kontrole II

U kućnoj i ofis automatizaciji promovisani su AGENTIAgenti (autonomni i adaptivni, da se nađu korisniku koga neostavljaju ravnodušnim) mogu biti:• vidljivi (često human-like, human-human interaction),

Apple 1987. i Knowledge Navigator, Sue in HP 1990. i crtaći u MS.

• skriveni (prate i predviđaju naredne korake i potrebe korisnika), WWW search, MS Office...

Skriveni agenti su više prihvatljivi jer manje nerviraju, iznenađuju jer skreću pažnju, slabe pomoći...Ljudi više vole da imaju kontrolu nad onim što rade bez iznenađenja – Control Panel.Vidljivi su pogodni u tutorima i sličnim aplikacijama.

•17


2

Koliko antropološko? IKoliko antropološko? I• jeftin trik - PC priča, prepoznaje gestikulaciju,• atribucija inteligencije, autonomije, slobodne volje ili znanja

može obmanuti, zbuniti i zavesti korisnika,• jasna razlika između ljudi i kompjutera (mašina),

• prihvatiti grešku a ne okriviti kompjuter,• mada antropološki interfejs može biti dobar za neke, druge

može uznemiriti (osećaj da je korisnik glup),• nikako drug, partner ili roditelj, nego transparentan, • 26 studenata Apple antropološkog interfejsa (HI THERE!

IT’S NICE TO MEET YOU, I SEE YOU ARE READY NOW)smatrali su ga manje iskrenim od mehaničkog pozdrava (PRESS THE ENTER KEY TO BEGIN SESSION),

• podstrek (EXCELLENT, THAT’S GOOD, YOU’RE GREAT) je bio manje efektan od (6 CORRECT – 2 NONCORRECT),


2

Koliko antropološko? IIKoliko antropološko? II

• upotreba animiranog ljudskog lica – zabavno ali ne toliko upotrebljivo – problem sinhronizacije,

• govor/lik u softveru koristiti veoma ograničeno, • bez upotrebe prvog lica u interakciji,• korisniku se obraćati s ciljem vođenja kroz interakciju a ne

prekor (I don’t understand numbers You entered, osuda Numerics Illegal, umesto jednostavnog Use letters only),

• animirane likove samo u igricama i obrazovnom softveru za najmlađe.

•18


2

Usable, useful and aesthetic?Usable, useful and aesthetic?


2

Usable, useful and aesthetic?Usable, useful and aesthetic?

•1

drdr DraganDragan IvetiIvetićć -- INTERAKCIJA INTERAKCIJA ČČOVEK RAOVEK RAČČUNARUNARPROCES RAZVOJA KORISNIPROCES RAZVOJA KORISNIČČKOG INTERFEJSAKOG INTERFEJSA

3

Proces razvoja korisničkog interfejsa IProces razvoja korisničkog interfejsa I• Razvoj HW/SW beše čisto funkcionalan od inž. za inž.• Oldtimer je bio funkcionalan a Henry Ford “... customer get

any color as long as it is black...”,


3

Proces razvoja korisničkog interfejsa IIProces razvoja korisničkog interfejsa II

Porastom populacije korisnika HW/SW (posebno od 1990. godine) sve više se okreće interakciji – usability engineering – i njenom institucionalizovano/sistematičnom razvoju.

Predmet standardizacije u Nordijskim zemljama.

Razvijeno dosta strategija za uobličavanje njihove organizacije, projekata i budžeta u razvoju HCI.

•2


3


1. TRI STUBA HCI RAZVOJA 2. METODOLOGIJE RAZVOJA

SE metodologije i HCIUser-centeredParticipatory designScenario basedUsage based


3

Tri stuba HCI razvojaTri stuba HCI razvoja

Teorije iModeli

Algoritmii Prototip

Kontrolis.ekperim.

AKADEMSKA ISTRAŽIVANJA

USPEŠAN KORISNIČKI INTERFEJS

SMERNICE SW ALATIREVIZIJE I

TESTIRANJEUTILITARNOSTI

•3


3

Softverski alatiSoftverski alati

Nejasna predstava o izgledu sistema na početku razvoja, koje su implikacije projektantskih odluka ...

Značajne korekcije po implementaciji su teške, skupe, zahtevaju vremena i iritirajuće za osoblje.Značajna pomoć da se ima skica, odštampan izgled, poluizvršna verzija (prototip) da bi vidi&dopuni.Papir (tabla) i olovka, word processor, drawing software, builders (HyperCard, Borland, Microsoft, Sun Java).U krizi softvera alati su velika pomoć, zasebna nastavna jedinica, izborili novi pristup razvoju SW jednostavnog ponašanja – OUTSIDE – IN APPROACH.


3

Revizije i testiranje utilitarnostiRevizije i testiranje utilitarnosti

Intenzivne probe (bez kostima, svetala i sl.) i kritike pretpremijere su osnov uspešne premijere i čitave sezone ...

Avio industrija – zračni tuneli, drveni prototipovi kabine/nosa, motora/elisa, probni letovi, promotivni letovi – komercijala. Slično i interaktivni sistemi zahtevaju male i/ili velike pilot testove pre upotrebe, prvo sa ekspertima, odabranim korisnicima, alfa i beta grupama korisnika pa tek onda tržište.Kritičniji sistemi zahtevaju i formalnu analizu i reviziju.

Veliki značaj pa stoga i zasebna nastavna jedinica za ekspertsku reviziju, testiranje utilitarnosti i ostale evalvacione metode...

•4


3


1. TRI STUBA HCI RAZVOJA 2. METODOLOGIJE RAZVOJA

SE metodologije i HCIUser-centeredParticipatory designScenario basedUsage based


3

SE metodologije i HCISE metodologije i HCIOko 60% projekata propadne, 25% se nikad ne završi a ostalih 35% parcijalno realizuje zadatke.

Tragovi vode ka propustima u početnim fazama razvoja –velikim delom i na pitanja korisničkog interfejsa. SE metodologije su orijentisane ka funkciji, budžetu i rasporedu. Tržište je ta SE pitanja zavela pod normalno a HUMAN-ENVIRONMENT ISSUE se pojavilo što je odvelo ka standardizaciji interakcije (severnoevropske zemlje). HCI uticaj raste i utiče na SE (Hartson & Hix 1993.) – star life cycle, UML, SW builders, semantička slika.

40 - 50% koda i vremena je posvećeno korisničkom interfejsu.

•5


3

Proces razvoja korisničkog interfejsaProces razvoja korisničkog interfejsaCiljevi

Rezultati

METODE

User and task

description

Who users are and their

key tasks

Taskcentereddesign

Partici-pateddesign

Usercentereddesign

Evaluate

Throw-away paper

prototypes

Brainstorm designs

Psychology of everyday

things

Userinvolvement

Represe-ntation &metaphors

Participatoryinteraction

low fidelity protot. meth.

Task scenario

walkthrough

Testableprototypes

Refineddesigns

Graphicalscreen

design

Interfaceguidelines

Styleguides

Usability testing

high fidelity protot. meth.

Heuristicevaluation

α/β system or complet. specificat.

Completeddesigns

Fieldtesting


3

User-Centered Design ProcessesUser-Centered Design Processes

•6


3

U centru pažnjeU centru pažnje

KORISNIK/njegov zadatak/radno okruženje A NE SISTEM...

... is based on understanding the domain of work or play in which people are engaged and in which they interact with computers, and programming computers to facilitate human action. ...

Golden rule of interface design: Know The Userdodatno je promovisao intezivnu evalvaciju kroz različite klase prototipova...

The user is justlike me


3

Participatory designParticipatory design

dalje proširuje user-centered filozofiju da korisnici budu učesnici u razvoju tokom CELOG ŽIVOTNOG CIKLUSA, boravak na radnom mestu, zakon u severnoj Evropi

Korisnici su prvoklasni članovi razvojnog timaaktivni kolaboratori vs. pasivnih učesnika

Korisnici kao eksperti u domenu primenepoznaju kontekst posla (niži šefovi, uglavnom radnici)

Iterativna prirodapermanentna evalvacija sa korisnicima (kamen spoticanja jer može biti skupo po domensku proizvodnju)

•7


3

Dobre i loše strane participacije korisnikaDobre i loše strane participacije korisnika

• odlični za sugerisanje projektnog rešenja– mora biti konkretan i vidljiv

• donose važno “narodno” znanje konteksta rada– to znanje često nedostupno razvojnom timu

• teško je da se organizuje skup pravih korisnika– skupo, bez entuzijazma i volje, ...

• nemaju ekpertizu u projektovanju– ne očekivati da dođu sa projektnim rešenjem

na osnovu skica, problemi u komunikaciji• korisnik nije uvek upravu

– ne očekivati da uvek zna šta hoće, preuveličavanje zbog plate


3

Tehnike uključivanja korisnikaTehnike uključivanja korisnika

• Barem razgovarajte sa korisnicima– iznenađujuće mnogo projektanata to ne čini!

• Kontekstualno intervjuisanje + posete na radnom mestu– intervjuisati ih dok rade svoj posao– identifikovati korisnikove zahteve, očekivanja,…

• Objašnjavati projektna rešenja– opisati šta nameravate da radite– prihvatiti sve napomene (projekat je subjekt revizija)– važno je da se poseduje vizuelizacija i demo verzije

(lakše je izmamiti reakciju korisnika)

•8


3

Aktivnosti i prototipoviAktivnosti i prototipoviSTART

CILJ

Brainstorm različitih reprezentacijaIzbor reprezentacije

Rough out stil interfejsa

Low fidelity papirni prototipovi

Task centered walkthrough i redesignFino podešavanje interfejsa,

dizajniranje prikazaHeuristična evalvacija i redesignTestiranje utilitarnosti i redesign

Medium fidelity prototipovi

Testiranje ograničene funkcionalnosti

Alpha/Beta testovi

High fidelity prototipovi

Sistem koji radi


3

Low fidelity prototipoviLow fidelity prototipoviPAPIRNI PROTOTIPOVI– mock-up izgleda, osećaja i

funkcionalnosti interfejsa– brz i jeftin za pripremu i

modifikacijuKoristi se za– brainstorm razmatranje reprezentacija– izazivanje reakcija korisnika (modifikacije/sugestije)

SKICE– crtanje krokija pojavljivanja sistema– grubost nagoni ljude da se koncentrišu na visokonivovske

koncepte– teško za predviđanje progresije dijaloga

Computer Telephone

Last Name:

First Name:

Phone:

Place Call Help

•9


3

Low fidelity prototipovi - storyboardingLow fidelity prototipovi - storyboarding

Serija ključnih frejmova (originalno sa filma – scena)• snapshots interfejsa u određenim tačkama interakcije• korisnici mogu brzo evalvirati smer kretanja interfejsa

Computer Telephone

Last Name:First Name:Phone:

Place Call Help

Help->

Computer Telephone

Last Name: GreenbergFirst Name:Phone:

Place Call Help

Dialling....

Cancel

Callconnected...

Computer Telephone


Place Call Help

Connected

Hang up

Callcompleted...

Return

Help ScreenYou can enter either theperson's name or theirnumber. Then hit theplace button to call them

Call bynameComputer Telephone


Place Call Help

Establishingconnection->


3

Limitiranje funkcionalnosti prototipaLimitiranje funkcionalnosti prototipa

VERTIKALNI PROTOTIPOVI– podrazumevaju detaljnu funkcionalnosti samo za

nekoliko odabranih mogućnosti– opšte projektantske ideje se mogu testirati

HORIZONTALNI PROTOTIPOVI– podrazumevaju celokupni izgled interfejsa bez

podrazumevajuće funkcionalnosti– moguća samo simulacija bez realnog rada

SCENARIO– opisi partikularno fiksirane

upotrebe sistema

Vertical prototype

Scenario

Horizontal prototype

Full interface

•10


3

Low fieldelity prototipovi - PictiveLow fieldelity prototipovi - PictivePlastic Interface for Collaborative Technology Initiatives through Video Exploration

Projektovanje sa kancelarijskim materijalom– višestruke zalepljene beleške i/ili plastične folije– beleške različitih veličina predstavljaju ikone, menije,

prozore i slično, što se unapred može pripremiti.Demonstracija interakcije manipulacijom papira i plastike

– novi interfejs se kreira u hoduSnimanje sesija za kasniju analizu

– obično se završava hrpom papira i plastike.buttons combo box

entries menu

alert box

tabs


3

Medium fiedelity prototipoviMedium fiedelity prototipovi

Razvoj prototipa pomoću kompjutera, – simulacija samo nekih mogućnosti interfejsa

• atraktivno/šarmantno za korisnikeKoristi se

– kako bi obezbedio sofistikovan ali i ograničen scenario da korisnik proba

– obezbeđuje testiranje suptilinijih projektantskih odlukaMoguće opasnosti

– korisnik često reaguje “u malom”– korisnik stidljivo izaziva projektanta– korisnik stidljivo dodiruje dizajn– menadžment može pomisliti da je gotovo

•11


3

Integracija prototipova u proizvodIntegracija prototipova u proizvod

THROW-AWAY– prototip se koristi samo da izazove reakciju korisnika– kreiranje prototipa mora biti brzo, u suprotnom je jako

skupoINKREMENTALNA

– proizvod se razvija od komponenti (modula)– svaka komponenta se prototipuje i testira pa se

ugrađuje u finalni proizvodEVOLUCIONA

– prototip se menja kako bi uključio sve projektantske promene/odluke

– evoluciono postaje finalni proizvod


3

Softverski paketi za crtanjeSoftverski paketi za crtanje

Kreiranje svake storyboard scene na kompjuteru– veoma tanak vertikalni prototip– nema "osećaja" interakcije

Control panel for pump 2

coolant flow 45 %

retardant 20%

speed 100%


coolant flow 0 %

retardant 20%

speed 100%

DANGER!sledeći

crtež

Shut Down Shut Down

(za shutdown

klik)

•12


3

Skript simulacijeSkript simulacije

Kreiranje storyboard sa media alatima– promena scene jednostavnim ulazom korisnika – jednostavan vertikalni prototip

Davati korisniku veoma jednostavne opise/zadatke– izgleda da se ponaša kao realni sistem– svaka devijacija ruši simulaciju Control panel for pump 2

coolant flow 45 %

retardant 20%

speed 100%

Shut Down


coolant flow 0 %

retardant 20%

speed 100%

DANGER!

Shut Down


3

Graditelji interfejsaGraditelji interfejsa

Alati za slaganje uobičajenih widgets

Odličan za prikaz look & feel interfejsa– širi horizontalni prototip– ograničen sa widget library

Vertikalna funkcionalnost se selektivno dodaje

– programiranjem

•13


3

Wizard of OzWizard of Oz

Metod testiranja sistema koji ne postoji (IBM, 1984)– Human wizard simulira odgovore sistema i interpretira

ulaze korisnika prema datom algoritmu– kompjuter simulira odgovarajuće izlaze


3

Scenario based designScenario based design

DEFINICIJE “a narrative or story that describes the activities of one or more persons, including information about goals, expectations, actions, and reactions” (Rosson & Carroll)“A scenario is a description of users and stakeholders using artifacts within environments carrying out tasks or activities”

PISANJE SCENARIJA • kreiranje aktera i analiza rezultata rada na "fieldwork"• pisanje scenarija koristeći stakeholders kao aktere• scenariji ne moraju biti stvarni događaji, nego priča

zasnovana na zadacima, artifaktima i ostalim subjektima pronađenim na fieldwork

• pokazati interakciju aktera koristeći ekstra detalje

•14


3

Scenario based design frameworkScenario based design framework

Analiza stakeholdersi field studija

Problem scenarijiTvrdnje o trenutnoj

praksi

Metafore, IT,HCI teorije,smernice

Iterat. analize tvrdnji utilitar.

i redesign

Scenariji aktivnosti

Informacioni scenariji

Scenariji interakcije

Specif. utilitarnostiSumativnaevalvacija

Formativnaevalvacija

Prototip i evalvacija

Projektovanje

Analiza


3

Usage based designUsage based designfokusiran na posao koji korisnik teži da obavi i na to šta softver mora da obezbedi njemu kroz korisnički interfejs kako bi se posao uspešno završio.• Naglasak je na upotrebi (intenciji korisnika) a ne samog

korisnika per se.• On jeste user-centered ali je daleko iznad scenarija jer su

oni opterećeni sa previše detalja – essential use cases. User Roles

Role3

Role1 Role2

Role1 Role3

Role2

User-Role Map

Use Cases

Doing1 Doing2

Use-Case Map

Doing2

Doing1

Content Model

Context1Context2

Navigation Map

Context2

Context1

Visual and Interaction

Design

•15


3

ATM primerATM primer

SCENARIO: User inserts card; system reads magnetic stripe; requests PIN; user type PIN; system confirms PIN through network, and then prompts the user to select an action using the green buttons. The user keys in a selection, then is prompted to select an account type using the blue buttons; the user selects. The system prompts for an amount, the user keys in amount and press OK button to confirm. Finally, the system tells the user to remove the card, the card is removed, and the system disgorges the desired cash, which the user removes and pockets.

user intentions system responsibilitiesidentify self verify identity

offer choicesselect give moneytake money and run.

ESENCIJALNI ATM USE CASE :

•1

drdr DraganDragan IvetiIvetićć -- INTERAKCIJA INTERAKCIJA ČČOVEK RAOVEK RAČČUNARUNAREKSPERTSKE REVIZIJE, TESTIRANJE UTILITARNOSTI I PREGLEDIEKSPERTSKE REVIZIJE, TESTIRANJE UTILITARNOSTI I PREGLEDI

4

EVALVACIJAEVALVACIJAProjektanti se oduševe svojim rešenjem toliko da ga često zaborave evalvirati.ŠTA EVALVIRATI:• da li smo razumeli zahteve korisnika,• rane ideje konceptualnog modela,• prve prototipove rešenja,• sve kompletnije prototipove rešenja,• finalno rešenje,• upotrebu rešenja.KADA EVALVIRATI:• tokom čitavog razvoja – od prvih skica do gotovog

proizvoda (design – test - redesign),• tokom eksploatacije proizvoda.


4

DECIDE okvir evalvacije interfejsa IDECIDE okvir evalvacije interfejsa I

Determine the goals the evaluation addressesKoji su krajnji ciljevi evalvacije? Ko ih zahteva i zašto?Kako ovi ciljevi utiču na rešenje?

Primer: identifikovati osnovnu metaforu na kojoj zasnivati razvoj, kako nova tehnologija utiče na korisnike/posao, interfejs konzistentan?..

Explore the specific questions to be answered.Svako pitanje mora da vodi utvrđenim ciljevima.

Choose the evaluation paradigm and techniques to answer the questions.FIELD studija, testiranje korisnika ili ekspertske revizije. Putem slobodnog razgovora, ankete, opservacije…

•2


4

DECIDE okvir evalvacije interfejsa IIDECIDE okvir evalvacije interfejsa II

Identify the practical issuesPrimer: izbor korisnika, evalvatora i opreme, kako

ostati unutar budžeta i vremenskog rasporeda..

Decide how to deal with the ethical issues.Kako se od korisnika traži mišljenje/znanje, sačuvati sva njegova prava i pružiti sva objašnjenja.

Evaluate, interpret and present the data.zavisi od paradigme i tehnike a da se dostigne postavljeni cilj evalvacije.


4


1. EKSPERTSKE REVIZIJE2. TESTIRANJE UTILITARNOSTI 3. PREGLEDI4. EVALVACIJA TOKOM EKSPLOATACIJE

•3


4

Ekspertske revizijeEkspertske revizije

• ekspertiza u user-interface ili aplikacionom domenu,• stalni članovi tima ili konsultanti,• revizije za kratko vreme u ranim i/ili kasnim fazama formalni

izveštaji sa identifikovanim problemima i/ili preporukama za izmene,

• senzitivni izveštaji prema projektantima (ego), kroz diskusiju, objektivno evalvirati tuđi napor,

• ostaviti projektantima da traže rešenja problema,• trajanje od pola dana do jedne nedelje što zavisi od domena

zadatka i/ili operativnih procedura,• dobro je imati rezultate što svežije ekspertize kako projekat

napreduje.


4

Metode ekspertske revizije IMetode ekspertske revizije I

HEURISTIČNA EVALVACIJA (inspekcija utlitarnosti)• odrediti slaganje sa kratkom listom projektantskih

heuristika (npr. 8 zlatnih pravila), • poželjno je da eksperti poznaju heuristike i da su u stanju

da ih interpretiraju i primene,• tim od 3-5 članova, jedan član otkrije do 35% a 5 članova i

do 75%,• za jednostavan interfejs oko 1h.REVIZIJA PO SMERNICAMA• odrediti slaganje sa dokumentom smernica organizacione

ili neke druge prirode, • kako dokument može imati hiljade stavki, vremenski je

zahtevna revizija, do par nedelja za velike sisteme.

•4


4

Metode ekspertske revizije IIMetode ekspertske revizije II

COGNITIVE WALKTHROUGH• eksperti kao korisnici u tipičnom (ali i kritičnom) zadatku, • the day in the life of the user,• samostalni explore walkthrough ali kasnije i javni sa ostalim

ekspertima, projektantima i korisnicima radi projekcije novih walkthroughs ali i provociranja reakcije.

INSPEKCIJA KONZISTENTNOSTI• konzistentnost između više interfejsa, materijala za obuku i

sistema pomoći, • terminologija, boje, lejauti, ulazni i izlazni formati...


4

Metode ekspertske revizije IIIMetode ekspertske revizije III

FORMALNA INSPEKCIJA UTILITARNOSTI• courtroom-style sastanak sa moderatorom kao sudijom, za

predstavljanje interfejsa radi diskutovanja o prednostima i slabostima – projektanti iznose dokaze o problemima,

• edukativno za početnike u projektovanju i menadžmentu,• puno vremena za pripremu i više ljudstva uključno nego u

drugim metodama.

•5


4

Organizacija ekspertske revizijeOrganizacija ekspertske revizije

• revizije u nekoliko tačaka razvoja kada su eksperti raspoloživi a razvojni tim spreman za feedback,

• broj eksperata zavisi od kompleksnosti projekta i alociranih resursa ali ne previše eksperata (narcisoidnost),

• od 3 do 5 eksperata najefikasniji kao komplementarna aktivnost testiranju utilitarnosti,

• u istim uslovima kao i korisnici tokom eksploatacije (buka, stres) mada i u povoljnijim uslovima (tišina, mir),

• bird's-eye view, soba sa izlepljenim screenshots,• PROBLEMI: eksperti nemaju dovoljno znanja o domenu ili

korisnicima, dolaze iz različitih ekspertiza - često sukobljeni saveti – birati one sa odgovarajućim znanjem, iskustvom, stažom u organizaciji – ponovo zvati da vide finalni SW.


4



•6


4

Korisnost vs. utilitarnostKorisnost vs. utilitarnostKorisnost se odnosi na stepen poklapanja funkcionalnosti sistema sa potrebama korisnika i zadataka koji se trebaju rešiti.Utilitarnost se odnosi na stepen kojim interfejs olakšava rešavanje zadataka i inkorporira kriterijume kao što su lakoća učenja, lakoća upotrebe, zaštita od katastrofalnih grešaka i mera podrške korisniku (satisfakcija).

Ljudska performanse,vreme i greške

Kognitivnost,mentalni modeliplanova i akcija

Kolaboracija, dinamika grupe ikontekst radnog mesta


4

Prvi koraci ...Prvi koraci ...

• znaci ozbiljne potrebe ranih 1980tih,• tradicionalisti se prvo opirali – lepa ideja ali vreme i resursi

nisu dozvoljavali,• prisilili sve kompleksniji zadaci i sve žešća tržišna utakmica.

Raspolaganje rezultatima testiranja utilitarnosti• menadžerima – indikator progresa razvoja i olakšava

realokaciju resursa,• projektantima – realni feedback i predlozi korekcija, sistem

od automatizovanog ka automatskom.

•7


4

Laboratorije utilitarnostiLaboratorije utilitarnostiIzdvojili se od fakulteta pa prešle u firme (IBM na Floridi, pa

MS, SUN...) pa danas i kao nezavisne kuće.Laboratorije učestvuju u:• ranim fazama analize zadatka ili revizije projekta, • obezbeđenju informacija o softverskim alatima i literaturi,• razvoju skupa zadataka za testiranje utilitarnosti "u kući".

IBM je lider i njegov kompleks laboratorija na Floridi čine• 16 laboratorija kružno raspoređenih,• 3x3m prostor za subjekta i ogledalom odvojeni opserveri,• simulacija uslova (buka, vreme, aero, temperatura, mirisi...),• sve moguće opservacije (A, V, zdravstveni, motorika...),• centralna baza podataka,• sprovode 10-15 projekata godišnje.


4

Testiranje korisnika tokom razvojaTestiranje korisnika tokom razvoja

• empirijska evalvacija je moguća u svakoj fazi, obezbeđuje čvrsta fakta ali je teško samo njih interpretirati,

• formativna evalvacija (tokom procesa razvoja),– radi sa scenarijima i prototipovima svakog oblika,

• sumativna evalvacija (na kraju procesa razvoja),– procena kvaliteta sistema i interfejsa.

projektovanje implementacija

Formativna: Šta i kako redizajnirati?

Sumativna: Koliko smo dobro uradili?

•8


4

Ciljevi empirijske evalvacijeCiljevi empirijske evalvacije

Razumeti šta se događa u praksi• kvalitet interfejsa,• problemi u radu sa interfejsom,• koji faktori utiču na kvalitet (metafore, mentali modeli,

look&feel, dokumentacija...).

Razumeti zašto se to dešava• često sami korisnici kažu ili se može zaključiti iz

opservacije i analize,• grade se modeli kako bi se spoznali razlozi.


4

Testiranje korisnika – metode i svrhaTestiranje korisnika – metode i svrha

METODE• razviti i implementirati scenario ili prototip,• snimati ponašanje korisnika,

– tipičnu upotrebu ili kritične slučajeve,– keystroke,– razmišljanje naglas,

• intervjuisati o subjektivnim impresijama,• analizirati ponašanje korisnika.

SVRHA• shvatiti korisnikove metode i probleme (rešavanja i

interakcije),• otkriti proces razmišljanja korisnika.

•9


4

Testiranje korisnika – prednosti i maneTestiranje korisnika – prednosti i mane

PREDNOSTI• opservacija realne upotrebe realnog sistema.

MANE• često poznati samo limitirani aspekti sistema,• obično se sprovodi u laboratoriji na "toy problems" sa

izmišljenim podacima,• ističe samo prvu upotrebu sistema, šta će biti posle

nedelju, mesec, godina rada sa sistemom.

PRIMER• testiranje tekst procesora 1984. - treneri ne vole da čitaju

veliku dokumentaciju novog softvera (Carroll & Mack).


4

Standardni koraci u testiranju korisnikaStandardni koraci u testiranju korisnika

1. Podesiti ambijent za opservaciju.2. Opisati svrhu opservacije i saopštiti korisniku da ima

pravo odustati u svakom trenutku.3. Opisati i demonstrirati opremu u prostoriji.4. Objasniti kako da "misli naglas" i da mu/joj nećete pružati

nikakvu pomoć tokom testa.5. Opisati zadatak i uvesti korisnika u sistem.6. Insistirajte da vas korisnik pita pre opservacije.7. Opservacija pa debrifing subjekata.8. Analizirajte dobijene podatke.9. Organizujte rezultate tabelarno.10. Interpretirajte rezultate u kontekstu drugih rezultata.

•10


4

Etička pitanjaEtička pitanja

OSNOVNI PRINCIPI• bez povređivanja (fizičkih i psihičkih),• dobrovoljna participacija,• pravo na privatnost.

KORISTITI ISTRAŽIVAČKE PROTOKOLE I SAGLASNOSTI• objasniti studiju i njenu svrhu – potpis na saglasnost,• anonimnost,• mogućnost odustajanja u svakom trenutku.

UPOTREBA VIDEO PODATAKA – škakljivo pitanje


4



•11


4

Pregledi (surveys)Pregledi (surveys)

• familijarni, nisu skupi i generalno prihvatljiv pratilac testiranja utilitarnosti i ekspertske revizije,

• veliki broj respondenata (nekoliko hiljada korisnika) koji nose osećaj autorstva nad dobijenim rezultatima.

KLJUČNO• jasni ciljevi i razvoj fokusiranih stavki koje vode ciljevima,• pripremljeni pregledi moraju biti:

– revidirani među kolegama,– testirani na malom uzorku korisnika,– sprovedeni na velikom uzorku (min 12%-18% populacije),

• unapred pripremiti statističku obradu i prezentaciju.


4

Smernice za razvoj anketeSmernice za razvoj ankete• kratko i slatko → jasno i koncizno,• izbegavati dugačka pitanja, • biti svestan loših odgovora:

– motivisane greške (ostaviti što bolji utisak),– memorijske greške (nemoguće se setiti),– komunikacijske greške (pitanje nije jasno ILI odgovor

nije jasan),• pažljivo birati reči (sramota ih je pitati šta znači),• izbegavati direktna i usmeravajuća pitanja,• redosled pitanja (generalna pa specifična),• pitanje u pitanju,• pitanje mora da vodi evalvacionom cilju (ne samo DA/NE,

malo i ZAŠTO, na kraju otvorena pitanja),• korektan format odgovora na pitanja.

•12


4

Formati odgovora na anketna pitanja IFormati odgovora na anketna pitanja I

CHECK BOXESPol → muški ženski

OPSEZI

Starost → - 6 7 – 18 19 – 27 28 – 40 41 – 65 66 +

• bez preklapanja,• intervali odgovarajući svrsi (semantički zavisni),

“Koliko sati nedeljno provedete na Internetu?”0 - 1 1 - 2 2 – 3 3 – 40 40+

• uređenost konzistentna pitanju ili intuitivna.


4

Formati odgovora na anketna pitanja IIFormati odgovora na anketna pitanja II

KVAZI SKALE• izabrati broj iz opsega brojeva

Zaspaću na ovim dosadnim predavanjima.

• idetifikuju se svi mogući iskazi o stvari koja se evalvira,• formiraju se grupe iskaza,• formira se skala (od 3 do 7 podeoka na skali),• svakom podeoku se dodeli iskaz/predstavnik grupe.

54321

Apsolutno NENEUzdržanDAApsolutno DA

•13


4

Formati odgovora na anketna pitanja IIIFormati odgovora na anketna pitanja III

SEMANTIČKI DIFERENCIJALNE SKALE• odmeravaju polarnost datih odgovora na pitanje,

Koliko često gledate sapunice na TV?Nikad Veoma često1 2 3 4 5 6 7 8 9 10

• polovi se označe pridevima,• participant bira između polova.

ELEKTRONSKA vs. PAPIRNATA ANKETA


4



•14


4

Evalvacija tokom eksploatacije IEvalvacija tokom eksploatacije I

• zainteresovani svi uključeni u održavanje SW (60% cene),• rezultati uzrokuju promene koje će biti prihvatljivije za

korisnike jer su ih sami inicijalizovali,• metode evalvacije interfejsa tokom upotrebe:INTERVJUI I DISKUSIJA U GRUPI• individualni intervjui sa korisnicima forsirajući specifična

pitanja (vremenski i materijalno zahtevno), • posle diskusija u grupi kako bi dokučili univerzalnost

prethodno dobijenih komentara i konstruktivnih primedbi,• velika korporacija je sprovela 45 minutne intervjue sa 66 od

4300 radnika o internom sistemu za razmenu poruka –rezultovalo sa 42 predložene izmene sistema.


4

Evalvacija tokom eksploatacije IIEvalvacija tokom eksploatacije II

KATALOGIZACIJA PODATAKA O PERFORMANSI KORISNIKA• u SW ugrađena funkcija trajnog memorisanja podataka o

performansi korisnika (brzina rada, broj i tip grešaka, koliko pokretana neka akcija ili tražena pomoć, najbolje da se sve beleži ali kada će da radi nešto korisno...),

• osnova za održavanje/unapređenje HW/SW ali i interfejsa,• najfrekvetnija poruka o greški (greška u kodu, bolje

uputstvo, obuka, komandna sintaksa...),• nula frekventna poruka (greška u kodu ili korisnik izbegava

tu komandu),• beleženje podataka ne sme da ugrozi privatnost korisnika.

•15


4

Evalvacija tokom eksploatacije IIIEvalvacija tokom eksploatacije III

ONLINE ili TELEFONSKE KONSULTACIJE• telefonom (besplatno ili po minuti), online (konsultant ima

kopiju korisnikovog prikaza), chat ili E-mail (staff@...), • korisniku je olakšanje ako zna da postoji neko da pomogne,• konsultanti veliki izvor informacija o utilitarnsoti.ONLINE SANDUČE SA SUGESTIJAMA ili RAPORTIRANJE

GREŠAKA• E-mail slanje sugestija (US Congress website 20 na dan), • neke SW kuće ugrađuju u proizvode fillin izveštaj koji se

automatski pojavljuje po nastanku greške, korisnik ga popuni (neke stavke se automatski popunjavaju – kôd proizvoda i korisnika, stanje SW i slično) i automatski se šalje SW kući.


4

Evalvacija tokom eksploatacije IVEvalvacija tokom eksploatacije IV

ONLINE BULLETIN BOARD ili NEWSGROUP• slanje otvorenih poruka i pitanja o nekoj temi (šta je

najpogodnije u mom slučaju...) kada nije poznata konkretna adresa gde se pomoć nalazi,

• moguće i pregledati postojeće jer je to već neko pitao,• kreiraju sami korisnici ili SW kuće.USER NEWSLETTER ili KONFERENCIJE• postoji značajan broj korisnika geografski razuđenih, • tradicionalno, nepotreban hardver, sloboda proučavanja

(mesto, vreme...)• stvara osećaj pripadnosti/prestiža,• konferencije propagiraju lično upoznavanje.

•1

drdr DraganDragan IvetiIvetićć -- INTERAKCIJA INTERAKCIJA ČČOVEK RAOVEK RAČČUNARUNARSOFTVERSKI ALATISOFTVERSKI ALATI

5

Softverski alatiSoftverski alati

Razvoj dobrog interfejsa zahteva egzistenciju:1. jednostavnih i brzih metoda za grubo skiciranje

interfejsa/toka interakcije – korisnik vidi šta se može da bi izneo svoje potrebe i zahteve,

2. preciznih metoda za razradu detalja sa korisnicima ali i za razmenu mišljenja sa specijalizovanim kolegama,

3. mehanizama da se SE specijalistima jednoznačno kaže šta se to treba implementirati,

4. konstantna evalvacija projektantskih alternativa i krajnjeg rezultata razvoja.


5


1. SPECIFIKACIONE METODEtekstualne (gramatike, UAN)grafičke (dijagrami toka, prelaza, stanja)

2. INTERFEJS BILDERI

3. ALATI ZA EVALVACIJU

•2


5

Specifikacione metodeSpecifikacione metode

• dobra notacija za beleženje i diskusiju projektantskih alternativa,

• prirodni jezik – opširan, nejasan ali i dvosmislen,• formalni i pseudoformalni – kratak, nedvosmislen i nejasan

za početnike,– tekstualne: gramatike, User Action Notation,– grafičke: dijagrami toka interfejsa, prelaza i stanja.


5

àlo Požega, àlo Požega, javi se, àlo ...àlo Požega, àlo Požega, javi se, àlo ...

IBIS, REDIBIS, NUNQVAM

MORIERS IN BELLO

IBIS, REDIBIS, NUNQVAM

MORIERS IN BELLO IBIS,

REDIBIS, NUNQVAM,MORIERS IN

BELLO

IBIS, REDIBIS,

NUNQVAM,MORIERS IN

BELLO

•3


5

GramatikeGramatike

• (Extended) Backus-Naur Form, specijalizacija u TAG,• precizna, mehanički izvršiva,• nerazumljiva, dugačka, refined nature,• odgovara komandnoj interakciji a za direktnu manipulaciju

samo sekvencionisanje akcija,• BNF primer unosa stavke telefonskog imenika:

<stavka> ::= <pretplatnik> <tel_broj><pretplatnik> ::= <string> <string><string> ::= <slovo> | <slovo><string><slovo> ::= A|B|C|Č|Ć|D|DŽ|Đ|E|F|G|H|I|J|K|L|LJ|M|N|NJ|O|P|R|S|Š|T|U|V|Z|Ž|<tel_broj> ::= <cifra> | - | <cifra> <tel_broj><cifra> ::= 1|2|3|45|6|7|8|9|0


5

User Action NotationUser Action Notation

• pre svega za direktnu manipulaciju jer UAN prati korisnika, feedback i reakciju sistema u tabelarnoj formi,

• primer startovanja aplikacije dvostrukim klikom na ikonu,• originalno je razvijen više kriptografski i sažetije jer umesto

reči koristi simbole, na primer:– Mv , pritisak na taster miša,– M^ , otpuštanje tastera miša,– ~ [ikona] , pomeranje kursora na ikonu,– file ! , file - ! , istaknut / normalan prikaz ikone, – outline(file) > ~ , uokvireni prikaz fajla se prevlači ...

•4


5

eXtendedUAN primer startovanja ikoneeXtendedUAN primer startovanja ikone

Pokreni dodelj. apl.

Ukini fokus ikoni

Pokrenuta ikona

Otpusti tast. miša

Pritisni tast. miša

Otpusti tast. miša

Daj fokus ikoni

Selektovana ikona

Pritisni tast. miša

Prati kursor miša

Pom. miša na ikonu

Lociraj ikonu

Unutrašnjaakcija

Vidljivaakcija

Stanje interfejsa

Vidljivaakcija

Unutrašnjaakcija


5

Dijagrami toka interfejsaDijagrami toka interfejsa

• klasa menu-selection & dialog-box hijerarhija (stabla),• dobra projektantima, menadžerima, korisnicima (na zidu)...

• dijagram tok interfejsa – opisuje tok interfejsa (strelice) referišući se na objekte interfejsa,

• primer ATM mašine,• dobro za pregled, opšta slika, svi mogući tokovi s jednog

mesta,• slabo detalja – pre svega dizajnerskih.

jedanmeni

sekvencamenija

stablomenija

acikličnimeni

cikličnimeni

•5


5

ATM primerATM primer :JeziciMeni

:KarticaDajUput

:KarticaGreška

:PINUnosUput

:PINGreška

:IznosMeni

:IznosGreška

:NovacUzmiUput

:KarticaUzmiUput

selektuje jezik

Ubaci karticu

Unos PIN

Selektuje i

Uzmi banknote

Uzmi karticu

Kraj

Kraj

:KarticaUzmiUput

Uzmi karticu


5





•6


5

Interfejs bilderiInterfejs bilderi

• prvo su bili samo za razvoj prototipa, da bi kasnije uključili komercijalne jezike i postali pravi SE alati,

• koliko proizvođača – toliko naziva: Rapid prototyper, User Interface Builder, User Interface Management System, User Interface Development Environment, Rapid Application Development – outside in program development,

• osnovne karakteristike i smernice odabira UI bildera,• primenljivi

– za projektovanje i razvoj SW jednostavnog ponašanja,– u automatizaciji SE procesa.


5

Karakteristike interfejs bildera IKarakteristike interfejs bildera I

NEZAVISNOST KORISNIČKOG INTERFEJSA• separacija razvoja interfejsa od funkcionalnog jezgra,

• forsira primenu najboljeg na obe strane (komunikacija),• dozvoljava podršku različitim platformama,• ustanovljava poziciju projektanta i evalvatora interfejsa.

Alati za razvoj interfejsa

Programska okruženja

Komponenta interfejsa

Funkcionalna komponentaKorisnici

Evalvator

Interna komunikacija

Interni

dijalog

Povratne veze iterativnog razvoja

Ekst

erni

di

jalo

g

Projektant interfejsa Aplikativni progrmer

•7


5

Karakteristike interfejs bildera IIKarakteristike interfejs bildera II

METODOLOGIJA I NOTACIJA• razvoj novih projektantskih procedura,• mehanizam razmene ideja o projektnom rešenju.BRZ RAZVOJ PROTOTIPA• veoma rano mogu se proveriti ideje,• test, izmene, test, izmene...• uključuje korisnike, menadžere i klijente.PODRŠKA SOFTVERU• povećava produktivnost,• omogućava proveru ograničenja i konzistentnosti,• neguje timski rad,• olakšava održavanje.


5

Interfejs bilderi u projektovanjuInterfejs bilderi u projektovanju

• što pre fizički dizajn pa ako može i malo funkcionalnosti to je bolje,

• izmamiti reakciju korisnika i članova tima – komunikacija,• različiti nivoi sposobnosti bildera:

– SW za crtanje - mirne slike stanja interfejsa: Adobe Photoshop, Draw, MS PowerPoint...

– SW sa animacionom podrškom – kreiranje storyboards i medium fiedelity prototipova: Apple HyperCard, Macromedia Director & Flash...

– SW sa programskom podrškom – fizičko programiranje (procedures, toolkits, library), poluvizuelno programiranje (Borland, MS, Sun) do vizuelnog programiranja (LabView by National Instruments).

•8


5

Interfejs bilderi u automatskom programiranju

Interfejs bilderi u automatskom programiranju

• automatizovane sve faze razvoja SW,• sistem koji generiše gotov SW za specifikovani problem ili

odmah generiše rezultate specifikovanog problema,• interfejs bilderi automatizuju samo početne faze razvoja –

analize i projektovanja – zasnovane na modelima,• poznati bilderi (UIMS)

• DIGIS (Direct Interactive Generation of Interact. Sys.), '93• BOSS, '94• Mobi-D (Model-Based Interface Designer), '97

• DA SVI SE OBLAČIMO U KINESKOM STILU


5





•9


5

Alati za evalvacijuAlati za evalvaciju

• sistem za evalvaciju korisničkog interfejsa (posebno GUI) je najlakše implementirati kao deo bildera, i to tako da

– samo daje izveštaje tokom projektovanja (provera konzistentnosti termina, fontova ...; broj upotrebljenih boja, broj widgets po dijalog boksu, balansiranje stabla dijaloga/menija...),

– run-time logging SW beleži frekvenciju poruka o greški, selekcija stavki menija, pojavljivanja dijalog bokseva, pozivanja sistema pomoći...,

• empirijska studija na 60 korisnika pokazala da je nekonzistentnost terminologije (search, browse, query) usporilo performansu od 10% do 25%.

•1

drdr DraganDragan IvetiIvetićć -- INTERAKCIJA INTERAKCIJA ČČOVEK RAOVEK RAČČUNARUNARDIREKTNA MANIPULACIJADIREKTNA MANIPULACIJA

6


1. PRIMERI SISTEMA DIREKTNE MANIPULACIJE

2. OBJAŠNJENJA DIREKTNE MANIPULACIJE

3. VIZUELNO RAZMIŠLJANJE I IKONE

4. PROGRAMIRANJE DIREKTNOM MANIPULACIJOM

5. DIREKTNA MANIPULACIJA NA DALJINU6. VIRTUELNA I AUGMENTATIVNA STVARNOST


6

Primeri sistema direktne manipulacijePrimeri sistema direktne manipulacije

• skretanje automobilom – obrtanje točka upravljača ulevo ili glasovna naredba skreni za 22 stepena suprotno od kazaljki

• primeri direktne manipulacije– komandna linija vs. tekst editori vs. tekst procesori,– tabele unakrsnog proračuna,– rukovanje prostornim podacima,– video igrice,– Computer-Aided Design,– automatizacija kancelarije.

•2


6

Linija – ekran – WYSIWYG ILinija – ekran – WYSIWYG I• ranih 1980tih – linija po linija teksta,

– mogućnost korekcije pre štampe,– lake izmene (svaki kurziv u podvučeno),– da bi se videla stranica treba odštampati.

• polovinom 1980tih – WORDSTAR i vi na UNIXu,– the one true editor,– jednom se proba, nikad se ne napušta,– vidiš stranicu ali da li će takva biti i hard-copy.

• ranih 1990tih – WhatYouSeeIsWhatYouGet procesori, MS Word,– prikaz i više stranica odjednom u pravom formatu,– kursor simbolizuje akciju korisniku,– labelirane ikonice alata za najčešće akcije,– obezbeđen brz feedback za svaku akciju korisnika,


6

Linija – ekran – WYSIWYG IILinija – ekran – WYSIWYG II– efikasna undo funkcija kao i automatska korekcija,– tekst procesor je koren mnogih tehnoloških izdanaka

– integracija grafike, animacije, fotografije, tabela,– desktop-publishing SW,– slide-presentation SW,– hipermedijalna okruženja,– upotreba makroa (end-user programming),– pravopis, gramatika i rečnik,– document assembler (compose contract or will).

Stiglo do preko 700 operacija i mnoštvo objekata na interfejsu a krenulo od unosa slova i brojeva (SGML za formule).

•3


6

MS Word for WindowsMS Word for Windows


6

Tabele unakrsnog proračunaTabele unakrsnog proračuna

• prvi je VisiCalc, Dan Bricklin, Harvard Business School, kasnih 1970tih – 254 reda x 63 kolone,

– slogan "it jumps" – korisnikovo oduševljene automatskim promenama po kolonama kada se jedna ćelija izmeni.

• 1980tih je vladao LOTUS 1-2-3,– grafikoni.

• po kupovini IBM nestao pa MS Excel, – mnoštvo direktne manipulacije – pokaži i pritisni,– integracija sa grafikom, 3D prezentacije i povezivanje

sa bazama podataka.

•4


6

MSExcelMSExcel


6

Rukovanje prostornim podacimaRukovanje prostornim podacima

• prirodnije – dati prostornu prezentaciju u formi mape koja obezbeđuje familijarniji model realnosti,

• Spatial Data Management System, MIT – mapa sveta, zoom na Pacifik, svi brodovi koji se kreću, zoom, informacije o tovaru/putnicima/oružju/ruti/vlasniku/tehn. podaci broda, zoom, slika kapetana broda...

• Xerox PARC Information Visualizer – 3D animirani prikaz interijera zgrade, konusni prikaz direktorijuma,

• ArcView, ESRI Inc. – GIS sa bogatom prezentacijom prostorno zavisnih informacija na više lejera iz baze podataka (saobraćajnice, populacija, padavine, politika...),

• EUROPE router CD,• Plan Plus.

•5


6

ArcViewArcView


6

Video igrice IVideo igrice I

• PONG – prva igrica, rotaciono dugme za reket, obuka 30s,• bolja grafika, stereo, kompleksnija pravila – Missile

Command, Donkey Kong, Pac Man, Tetris...• Nintendo, SEGA game player, Sony playstation, Game Boy,• MS Windows 3.00 komentarisan – isplati se kupiti jer se s

njim tako lepo može igrati pasijans.

•6


6

Video igrice IIVideo igrice II

• obezbediti stimulisanu zabavu, izazov, takmičarski duh,• superb 3D grafiku i audio, igre u mreži• komande su fizičke akcije – istovremni feedback na ekran,• jednostavna sintaksa za memorisanje, nema sintaksnih

grešaka (ako previše ulevo tada će sam korisnik udesno),• stalan prikaz rezultata (top ten) podstiče igranje, više nego

poruke You are the best, jer nije svakom isto 1000 poena.• edukativne igrice – predškolsko i osnovne ali i stariji –

studenti urbanizma vežbaju na SimCity igrici,

• kod nas se pojavljuju bukvari, bojanke i slično ... – osnovne veštine u radu sa računarom i semantičko znanje.


6

Video igrice IIIVideo igrice III

• estetsko/psihološka pitanja – DOOM.• razvoj igrica za zabavu i/ili edukaciju,• korisnici zabavnih igrica traže zabavu i fokusirani su na

izazov u dostizanju majstorstva,• korisnici edukativnih igrica – kroz zabavu do znanja/veštine,• nedeterministički i burna pojavljivanja kod prvih je

dobrodošlo jer podiže adrenalin,• drugima to neodgovara jer je cilj učenje kada se ipak želi

imati kontrola nad SW.

•7


6

CADCAD

• u autoindustriji, elektronici, arhitekturi ... AutoCad• korisnik manipuliše objektom interfejsa na semantički način

a kompjuter daje odgovore o izgledu ali i ostalim karakteristikama (naponi i grejanje IC, cena i vremene asembliranja uređaja...),

• Computer-Aided Manifacturing nadogradnja CAD sistema,• Honeywell sistem za upravljanje procesnim sistemima –

rafinerijama, industrijom papira i elektranama.• projektni izazovi u razvoju CAD SW:

– eliminisati potrebu kompleksnih komandi kojih bi se korisnik morao podsećati – pokaži i izaberi,

– puno šematskih pregleda koji su slike realnog sistema.


6

Honeywell dvooperatorski pult za automatizaciju transporta gasa i/ili ulja

Honeywell dvooperatorski pult za automatizaciju transporta gasa i/ili ulja

•8


6

Automatizacija kancelarije IAutomatizacija kancelarije I

• sistem koji automatizuje kancelarijske poslove,• XEROX Star kompjuter - 1981.,

– sofistikovano tekst formatiranje, grafika, fontovi i interfejsvisoke rezolucije zasnovan na kursoru, štampa premeštanjem ikone,

– nema tabela, $15000, zatvorena arhitektura,• Apple Lisa 1983. nasledila i načinila elegantnijim, $10000,• Apple Macintosh 1984. na osnovu Star i Lisa,

– nastavio sa brzim i kontinualnim grafičkim feedback, pull-down meni, rukovanje prozorima, editovanje grafike i teksta, drag&drop operacije,

– nema 3rd party softwera, $2500,• svi koncepti redizajnirani u MS Windows seriji OS, 1990tih.


6

Xerox StarXerox Star

•9


6

Apple – Lisa & MacintoshApple – Lisa & Macintosh


6

Automatizacija kancelarije IIAutomatizacija kancelarije II

• studija nad 30 novajlija, MS DOS vs. Macintosh u kreiranju, kopiranju, promeni naziva i brisanju fajla posle obuke

– 5.8 min vs. 4.8 min,– prosečno grešaka 2.0 vs. 0.8,– Mac je više stimulativan, lakši i moćniji.

• svi daju prednost GUI nad karakter zasnovanim UI,• danas problem sa metaforama/asocijacijama u GUI,

– popularizacija objekt-akcija stila sa minimalnim poznavanjem IT tehnologije kroz semantičku sliku,

– kancelarijski program za rukovanje informacijama.

•10


6

Kancelarijski ExplorerKancelarijski Explorer


6







•11


6

Objašnjenja direktne manipulacijeObjašnjenja direktne manipulacije• Ted Nelson 1980. godine – principle of virtuality

Prezentacija realnosti kojom se može manipulisati,• Rutkowski 1982. godine – principle of transparency

Korisnik je u stanju da primeni inteligenciju direktno na zadatak, izgleda da sam alat nestaje.

• Ed Hutchins et al. 1986. godine – model-world metaphor U sistemu izgrađenom po model-world metaphor, interfejs je svet gde korisnik može delati a koji menja stanje kao odgovor na korisnikovu akciju. Svet od interesa je eksplicitno prezentovan i nema posrednika između korisnika i sveta. Odgovarajuća upotreba model-world metaphor može stvoriti kod korisnika osećaj delanja na objektima domena zadatka. Ovaj aspekt direktnosti nazivamo – direct engagement.


6

Problemi u direktnoj manipulacijiProblemi u direktnoj manipulaciji

• prostorna vizuelizacija nije uvek bolja od teksta,– vizuelno zauzima više prostora ali bolje je za pregled,– tekst manje mesta ali više detalja,– 50 naziva dokumenata u tabelarnoj formi bolje nego 50

ikona koje se još moraju skrolovati.• familijarnost sa značenjem komponenti (metafore, analogije)

– asocijacije dizajner – korisnik, edu./cult. nasleđe,– donekle je bolje ako ima tekst ispod (hint), – bolje je omogućiti interface customization.

• vizuelne prezentacije mogu odvesti do greške, – slaba disjunkcija ulaza i izlaza zbog fast feedback,– stoga korisnik može brzo uhvati značenje feedback-a i

protumačiti ga kao rezultat njegove akcije.

•12


6








6

Vizuelno razmišljanje i ikoneVizuelno razmišljanje i ikone

• kompjuteri obezbeđuju izvanredno vizuelno okruženje koje otkriva strukturu pokazujući veze i obezbeđuje interaktivnostprivlačeći korisnike - WIMP,

• komandna linija se vidi kao nefleksibilna i tvrdoglava,• različiti ljudi imaju različite kognitivne stilove – čak i variraju

od korisnika do korisnika i od zadatka do zadatka,– koliko vrsta sladoleda ili modela automobila?,– kako doskočiti ovom šarenilu?

• ŠTA JE IKONA? – religijsko značenje,– slika, lik ili simbol koji reprezentuje neki koncept,– je mala (1" kvadrat ili manje za toolbar) prezentacija

objekta ili akcije.

•13


6

Ikona ili tekst ?Ikona ili tekst ?

• u SW za crtanje – ikona, a u tekst procesoru - tekst,• u vizuelnom okruženju ostani vizuelan a u tekstualnom

okruženju – tekstualan,• zavisi od korisnika,

• ali i od zadatka, • ali i od kvaliteta slike, odnosno teksta.


6

Percepcija vs. komparacijaPercepcija vs. komparacija

OPREZPAS UJEDA!

GO

Zeleno Crveno Žuto

•14


6

Smernice za kreiranje ikonaSmernice za kreiranje ikona• prezentovati objekat ili akciju na familijaran i prepoznatljiv

način (kanta za đubre, poštansko sanduče),• limitirati broj različitih boja,• obezbediti da ikona odudara od pozadine,• razmotriti 3D ikone – oko ih lako ulovi ali i odvraćaju pažnju,• obezbediti da jedna selektovana ikona bude jasno vidljiva

kada je okružena neselektovanim ikonama,• obezbediti da se svaka ikona jasno razlikuje od ostalih,• obezbediti harmoničnost ikona unutar familije srodnih ikona,• projektovati animaciju pomeranja (pomeriti celu ikonu, samo

okvir, senku, transparentnu verziju ili samo crnu kutiju),• dodati nove informacije (veličina fajla – debljina senke;

veličina foldera – otvorenost fascikle, starost dokumenta...), • kombinacija ikona za novi objekat ili akciju (papir i printer).


6

Primeri ikonaPrimeri ikona

•15


6








6

Programiranje direktnom manipulacijom IProgramiranje direktnom manipulacijom I• Direct-Manipulation Programming – umesto da reši zadatak

direktnom manipulacijom, korisnik programira rešenje jedne klase zadataka,

• End-user programming – u terminima aplikativnog domena,• od osnovnih operacija korisnik gradi nadoperacije,• Postoje tri pristupa

– PROGRAMIRANJE PRIMEROM – korisnik pokaže/obavi primer sekvencu a interfejs to zamemoriše, problem: različitosti u obavljanju istog posla rezultira kvazirazličitim sekvencama akcija,

– PROGRAMIRANJE DEMONSTRACIJOM – korisnik rešava problem a komponenta nadgleda i poredi sa poznatim sekvencama, ponudi da završi, memoriše varijacije ili zahteva pomoć radi generalizacije,

•16


6

Programiranje direktnom manipulacijom IIProgramiranje direktnom manipulacijom II

– MAKROI – poznavanje osnovnih veština programiranja(apstrakcija, logika, iteracije), često povezano sa programskim jezikom (Basic), mada postoje pokušaji (Adobe) programiranja makroa u terminima operacija interfejsa (end-user programming), najveće mogućnosti ali i najteže za korisnika (da bi vozila automobil moraš dobro poznavati motoriku), kombinovanje sa programiranjem primerom –recording macro – MS Office.


6







•17


6

Direktna manipulacija na daljinuDirektna manipulacija na daljinu

• EU promoviše teleoperation i remote control/work u: autom. kancelarije, CSCW, obrazovanju i informacionim servisima,

• telemedicina u žiži, primer telepatologije,• identifikovani sledeći izvori problema:

– vremensko kašnjenje – unose i SW i HW, kašnjenje prenosa, operaciono kašnjenje, feedback?,

– nekompletan feedback – kontinualni uređaji se mogu samo diskretno koristiti,

– feedback iz više izvora – glavni feedback je slika mikroskopa a šta je sa pozicijom mikroskopa, chat sa laborantom, pozicija kamere ... a sve sporo,

– neanticipirana interferencija – laborant ukloni uzorak iz mikroskopa a ekspert malo pre izdao naredbu.


6

TelepatologijaTelepatologija

LABORATORIJAEKSPERT

•18


6








6

REALNO-VIRTUELNI KONTINUUMREALNO-VIRTUELNI KONTINUUM

REALNO-VIRTUELNO KONTINUUM

PRIRODNI STIMULISINTETIČKI STIMULI

AUGMENT. REALNOST

AUGMENT. VIRTUELN.

MIXED REALITY

Milgram, 1994, prema prirodi percipiranih stimula

•19


6

PERCEPCIJAPERCEPCIJAVR i AR se oslanjaju na čovekovu percepciju okoline

• VID - 3D vision (zaklanjanje, perspektiva, senke, paralaks pokreta, fokus, stereoskopija).

• SLUH - 3D slušanje (ITD-Interaural Time Difference - 50ms, IID-Interaural Intensity Difference, filterisanje ušne školjke, OKOLINA - bliži je glasniji, eho, Dopler-ov efekat).

• DODIR - pritisak i vibracija (<5kHz), taktilan (opipati materijal) i haptičan (veća sila u jednoj tački - oblik).

• PROPRIOCEPCIJA - čulo položaja tela u prostoru, počešati uho, obezbeđeno od sezora u mišićima tela, gde je kvačilo?

• BALANS - “gde je gore”, vestibularni sistem u unutrašnjem uhu, smer i amplitida gravitacije, simulatorska bolest.


6

VR HRONOLOGIJAVR HRONOLOGIJA

1944. - drveni simulatori letenja, kurs, bacanje i rulanje. 1956. - Morton Heiling, Sensorama, NYC, vibriracije, vetar, dim i ukus.1957. - Heiling prvi koristi stereoskopske naočare (head mounted). 1962. - SAD patentirale analogni HMD (Head Mounted Display). 1963. - Dr teza Ivan Suteherland, SKETCHPAD, Harvard, stereo HMD,

wired tracking i grafika. 1966. - Tom Furness, prikaz za borbene pilote. 1977. - Sandin & Sayre, rukavica osetljiva na savijanje/grčenje. 1979. - Raab et al., Polhemus sistem za praćenje. 1981. - Furness, demonstrirao virtuelnu kabinu. 1987. - Zimmerman, interaktivna rukavica. 1989. - Jaron Lanier, komercijalni HMD.

•20


6

VR SISTEMIVR SISTEMI

KOMPJUTER

VIRTUELNI PROSTORoblik, boja, tekstura, svetlost, pogledi, ...

IZLAZNI UREĐAJI grafika, zvuk, dodir

ULAZNI UREĐAJI praćenje glave, oka, ruke

KORISNIK

MREŽA


6

HARDVER VR SISTEMAHARDVER VR SISTEMA

• IZLAZNI UREĐAJI video uređaji - immersive & non-immersive (PC, TV ili pano),audio uređaji - (pomeranje) izvora u 3D, surround sound,haptički uređaji, ostali uređaji - pomeranje celog tela u simulatorima letenja.

• ULAZNI UREĐAJI praćenje glave, očiju i ruku,praćenje tela,navigacioni uređaji.

• KOMPJUTER, za jednostavno PC, a za 5 projektora 100xPC, minimalni LAG (<0,01s), distribucija zadataka (Video,audio,taktil) po računarima pa i koordinacija, problemi, game industry.

• MREŽA, connecting the people, Internet.

•21


6

IMMERSIVE VIDEOIMMERSIVE VIDEO


6

STEREOVIZIJASTEREOVIZIJA

Head Mounted Display$1000 - $250000

LCD naočari

$1000

•22


6

HAPTIČKI UREĐAJIHAPTIČKI UREĐAJI

TAKTILNI UREĐAJI o geometriji objektao teksturi površineCyberGlove by CyberTouch stimuliše

vrhove prstiju vibracijama

FORCE FEEDBACK Force feedback joysticks (elektromotori)hirurški simulator (pneumatika, hidraulika ...)Exoskeleton


6

PRAĆENJE GLAVE, OČIJU I RUKUPRAĆENJE GLAVE, OČIJU I RUKUtracking, mere pokret, 6 stepeni slobode u 3D prostoru,

HMD

RUKAVICE (18-22 senzora)

EXOSKELETON (29 stepeni slobode)

PRAĆENJE OKA (ŽUTE MRLJE)optičko (refleksija sa površine oka),elektrookularni (fokusiranje preko elektroda na koži),elektromagnetsko (merenje indukcije u namotajima pričvrćenih na

očno sočivo).

•23


6

PRAĆENJE TELAPRAĆENJE TELA

ODELO• meri poziciju gležnjeva, bedara, ramena, ruku i

šaka,• wired i wireless, • inicijalno razvijeno od NASA za merenje

biomehanike tokom svemirskih letova.

PRAĆENJE• u svim pravcima magnetne talase,• risiveri na objektu primaju i konvertuju u položaj

ili ugao i šalju kompjuteru, • kod magnetnih mnogo smetnji pa ultrazvučni.


6

NAVIGACIONI UREĐAJINAVIGACIONI UREĐAJIimitiraju uređaje (interakciju) u realnom svetu (pilotiranje, vožnja auta),

non-immersive sistemi, obezbediti 6 stepeni slobode

Spacemouse Spaceball Cyberpuck Joystick

Drži se za pokretni deo i podiže, pritiska, vuče ili rotira već kakav se efekat želi pri interakciji, sem joystick.

•24


6

VR SOFTVERVR SOFTVER

• POLUPROFESIONALNI (AMATERSKI) simulacioni softver za prikaz korisnički definisanih VR objekata,biblioteka VR kontrola,uobičajeni hardver,World Tool Kit, SDK (Autodesk), dVise ...

• PROFESIONALNI definicija objekata u 3D CAD softveru koji se uključuju u VR pomoću specijalnog softvera i velikog iskustva (znanja), trikovi,zahteva se i skup hardver,prenosivost softverskih komponenti VR

iz jednog razvojnog softvera u drugi razvojni softver,iz razvojnog u eksploatacioni softver.


6

Virtual Reality Modelling LanguageVirtual Reality Modelling Language• VRML jezik za definisanje 3D scena sa multimedijalnim sadržajem,• VRML prenosi i prikazuje 3D VR svet pomoću HTTP na Internetu,• *.vrl datoteke (“dot world”), VRML 1.0, 2.0 (1995,1996), ISO VRML 97,• kompatibilan sa Java, plugins for browsers,

#VRML V2.0 utf8

Shape{

geometry Cone{}

}

#VRML V2.0 utf8

Shape{

geometry Cone{bottomRadius 0.5}

}

•25


6

PRIMERI VR SISTEMAPRIMERI VR SISTEMASIMULATORI LETENJA/PLOVIDBE (svemir, vojska, civilna avijacija)

najstariji immersive VR sistemi,jeftinija obuka civilnih i vojnih pilota i ostalog osoblja,simulacija letelice ali i spoljnih uticaja.

INŽENJERSTVO I PROJEKTOVANJEizbacuje solid modele pri razvoju prototipa,testiranje prototipa (auto industrija).

VIZUELIZACIJAnaučne svrhe - simulacije i ispitivanja -

CAVE at Univ. of Chicago,medicina - X, UZ, MR snimci i stanje organa.

OSTALOzabava (igrice, TV, film),nekretnine,Computer-Supported Co-operative Work .


6

AR SISTEM ZASNOVAN NA MONITORUAR SISTEM ZASNOVAN NA MONITORU

Grafičkisistem

Realni svet

VideoMerging

pozicija kamere

video realnog sveta

virtuelni objekti

augm. video

Augment. pogled (opciono u stereoskop.)

AR zasnovan na monitoru

•26


6

VideoMerging

AR SISTEM ZASNOVAN NA NEPROVIDNOM PRIKAZUAR SISTEM ZASNOVAN NA NEPROVIDNOM PRIKAZU

Grafičkisistem

Realni svet

pozicija glavevideo realnog

sveta

virtuelni objekti

augm. video

AR zasnovan na neprovidnom AR prikazu

monitori

HMD


6

AR SISTEM ZASNOVAN NA PROVIDNOM PRIKAZUAR SISTEM ZASNOVAN NA PROVIDNOM PRIKAZU

monitoriHMD

optical merging

Grafičkisistem

pozicija glavevirt. obj.

Realni svet

zasnovan na providnom AR prikazu

•27


6

EKSPERIMENTALNI AR SISTEMEKSPERIMENTALNI AR SISTEMUniversity of Rochester Augmented Reality System, 1996. godine

BLUEPRINT PIJANI SAT GLOBUS


6

PRIMERI AR SISTEMAPRIMERI AR SISTEMA

SVEMIR i VOJSKAfinansijska podrška (skupi transparentni viziri),navigacija tokom leta, raspored mina u svom minskom polju,dodatne informacije na zaslonima skafandera.

MEDICINAtokom obuke (kao i u ostalim skupim disciplinama),tokom primene znanja - lečenje.

OSTALOzabava (igrice, TV - prognoza vremena, film - specijalni efekti),Inženjering i projektovanje (verifikacija projekta),robotika i telerobotika (bomb squard, speleologija - rudarstvo).

•28


6

AR U NEUROHIRURGIJIAR U NEUROHIRURGIJIHarvard Medical School

1. 3D laser skeniranje oblika lobanje,2. analiza snimka mozda,3. 3D modelovanje snimke sa oblikom

lobanje,4. augmentativan prikaz mozga.

Augmentativan prikaz mozga tokom operacije


6

UBIQUITOUS (jū’bikwœtœs) COMPUTINGUBIQUITOUS (jū’bikwœtœs) COMPUTINGMark Weiser, Xerox PARC,

1990. g. – sveobuhvatno, sveprisutno

Ključne karakteristike1. Ogroman broj (embedded)

uređaja različitog stepena inteligencije i veličine.

2. Bežična mreža.3. Transparentni interfejs.4. Softver koji život čini

jednostavnijim.

Tri etape razvoja1. Mainframes2. PCs3. Ubiquitous

•29


6

PRIMERI UBIQUITOUS COMPUTINGPRIMERI UBIQUITOUS COMPUTING

Olivetti Active Badge System, 1992. godinaprostor zgrade,korisnici sa transporderima.

Xerox ParcTab System, 1995. godinanekoliko zgrada,ParcTab jedinice.

Classroom, Georgi Tech, 1998. godinaaktivno (on time) u sobi,aktivno (off time) bilo gde u svetu,CNNHeadlineNews,opšte karakteristike,cena.

•1

drdr DraganDragan IvetiIvetićć -- INTERAKCIJA INTERAKCIJA ČČOVEK RAOVEK RAČČUNARUNARMENI, FORME i DIJALOZIMENI, FORME i DIJALOZI

7

Meni, forme i dijaloziMeni, forme i dijalozi

• kada je nemoguća strategija direktne manipulacije,• prvo semiasinhroni meniji (numerički ili alfabetski),• danas pulldown iz horizontalnog menija,• akcije/opcije u dijalozima sa check box, buttons, list...• ulaz/izlaz pomoću prepoznatljivih formi,• stavke poznate terminologije i dobro organizovane,• njihova pojava mora da podseti korisnika gde je data

stavka, a ne da se korisnik priseća (recall) gde je ona,• i kada projektant dobro strukturira sistem menija, razvije

sve forme i dijaloge nije garancija da je interfejs korektan, on se mora proveriti u odnosu na smernice izložene u nastavku.


7


1. ZADATAK-ORIJENTISANA ORGANIZACIJA MENIJA

2. PREZENTACIONA SEKVENCA STAVKI3. BRZA NAVIGACIJA KROZ MENI

4. STRUKTURNI ELEMENTI MENIJA

5. FORME

6. DIJALOZI

•2


7

Zadatak-orijentisana organizacija menija IZadatak-orijentisana organizacija menija I

• primarni cilj menija, formi i dijaloga da kreiraju interfejs koji je razumljiv, lak za pamćenje i u organizacionom skladu sa korisnikovim zadatkom,

• hijerarhijska dekompozicija je najpogodnija čoveku ali postoje česti slučajevi kada bi neku stavku trebali staviti u više grupa – višestruki pointeri – formira se mreža,

• meni restorana organizovan – alfabetski, po ceni ili kategoriji jela (aperitivi, salate, supe i čorbe...),

• ako se kategorije menija idiosinkrazijski nazovu (Domaća šnicla, Perina sablja, Kućni tanjir...) - zbunjeni gosti i/ili umorni kelneri,

• kod SW je daleko gore jer je obično kompleksniji a nema kelnera u blizini,


7

Zadatak-orijentisana organizacija menija IIZadatak-orijentisana organizacija menija II

• kategorije/stavke kompjuterskih menija moraju biti razumljivi i različiti tako da korisnik ima jasnu ideju šta će se desiti kada je odabere,

• studije o organizovanju menija:– 48 novajlija, meni organizovan u 3 nivoa sa 16 stavki i

neorganizovan, pojava greške i vreme razmišljanja korisnika je prepolovljeno u organizovanom meniju,

– 109 novajlija u 10 blokova po 26 pokušaja pokazali superiornost organizacije menija po kategorijama u odnosu na alfabetsku (posebno kada ima stavki sa nesigurnošću),

•3


7

Zadatak-orijentisana organizacija menija IIIZadatak-orijentisana organizacija menija III

• postoje različite organizacije menija, za izbor jedne od dve moguće stavke do čitave mreže stavki:

jedanmeni

sekvencamenija

stablomenija

acikličnimeni

cikličnimeni


7

Jednostruki meni - binarniJednostruki meni - binarni

• postoje situacije kada je jedan meni (dve ili više stavki, disjunktivna ili konjuktivna selekcija) dovoljan za završetak zadatka,

• pop-up meni na radnoj površini ili stalno prisutan na okviru, u posebnom prozoru ili na data tablet,

• klase jednostrukih menija– BINARNI MENI, najjednostavnija klasa

Odaberite tip prikaza:1. Crno-beli,2. Kolor.

Vaš izbor je (1,2) -> ‗

Odaberite tip prikazaCrno-beli,Kolor.

DA NE

Orijentacija

•4


7

Jednostruki meni – n-arni disjunktivni i konjuktivni

Jednostruki meni – n-arni disjunktivni i konjuktivni

– N-ARNI MENI disjunktivni, izbor jedne od više stavkiTelefon je izmislioA. Tomas Edison,B. Aleksandar Bel,C. Nikola Tesla,D. Mihajlo Pupin.

Odaberite format listaA3, B4A4, B5.DA NE

Odaberite format listaUS letterUS letterA3A4B3B4

US letter

– N-ARNI MENI konjunktivni, multiple/selection ili check box, izbor nekoliko od više stavki

Effects

Underline Superscript

Shadow offset: %Emboss Subscript


7

Jednostruki meni – pull-down i pop-upJednostruki meni – pull-down i pop-up

– PULL-DOWN, konstantno raspoloživ na vrhu, selekcijom unutar menu bar, prvi ustanovio Xerox Lisa, gray option,

– POP-UP, kao odgovor na klik, šta je sve dozvoljeno nad selektovanim objektom radne površi,

Open

Save

Close

Load

•5


7

Jednostruki meni – skrolovani 2D i alfaklizačiJednostruki meni – skrolovani 2D i alfaklizači

– SKROLOVANI 2D, previše stavki (20-60) za jedan prikaz a nemoguće u stablo (države), zato po kolonama,

– ALFAKLIZAČI, još više stavki (10.000), različiti granulitet za stranice klizača, FilmFinder 1994. godine,

A C D E G H J K N O R S T V Z

Actor: Connery, Sean


7

Jednostruki meni –linkovi, ikone, alatke i palete

Jednostruki meni –linkovi, ikone, alatke i palete

– LINKOVI, implicitni meni – stavke su uključene u tekst ili grafiku (image map) i mogu se selektovati, praksa u hipertekstu, air-traffic-control, GIS...

– IKONE, ALATKE I PALETE, stavke menija u grafičkom SW, obavezna customization, toolbars, toolbox (toolpalettes), color palettes...

•6


7

Sekvenca (višestruki) meniSekvenca (višestruki) meni

• serija međuzavisnih menija se može koristiti da vodi korisnika kroz seriju izbora neophodnih za dati zadatak,

• često se ta serija može staviti unutar jednog objekta interfejsa - print dijalog zadatak štampanja vodi kroz seriju menija za selektovanje štampa-ča, stila štampe, broj kopija, redosled štampanja...


7

Stablo menijaStablo menija

• kada kolekcija stavki preraste dosadašnje organizacije menija tada se stavke grupišu u ekskluzivne grupe distinktivnih naziva,

• za nazive koristiti domen-orijentisane termine (Osnovni servisi Banke) umesto kompjuterski obojenih (Main Menu),

• grupisanje može korisnike da zbuni (konfuzija), zato intezivna evalvacija sa korisnicima tokom razvoja,

• ako svaki meni ima 30 stavki a stablo ima 4 nivoa – na raspolaganju je 810.000 destinacija,

• ako je grupisanje prirodno i razumljivo korisnicima, prolaz kroz toliko stablo do poznatog cilja za par sekundi,

• ako je grupisanje neprirodno a korisnik ima samo maglovitu predstavu o cilju, tada je izgubljen u stablu menija.

•7


7

Primer stabla menijaPrimer stabla menija


7

Dubina stabla vs. širina stablaDubina stabla vs. širina stabla

• manja dubina – širi osnovni meni, manja širina – veći podmeni,

• preporuka da broj stavki u menijima ne prelazi 4 - 8, a najefikasnije je 3 – 4 (MS Windows Start/Programs meni),

• nekoliko empirijskih studija daju prednost širini u odnosu na dubinu iako je stvar pregovaranja tokom projektovanja,

– Norman & Chin 1988. godine savetuju da širina bude veća u korenu i listovima uz što manju dubinu,

– veća širina obezbeđuje bolje performanse i manji stres,• pregovaranje/vaganje – semantička organizacija vs. brzina

prikaza vs. pretrpanost prikaza (puno podmenija) – manje nivoa brže donošenje odluke.

•8


7

Zadatak-orijentisano grupisanjeZadatak-orijentisano grupisanje

• grupisanje ima veliki uticaj na korektnost stabla menija,• problemi – preklapajuće kategorije, irelevantne stavke,

konfliktna kategorizacija, nepoznat žargon i opšti termini,• saveti za grupisanje:

• Kreiranje grupa logički sličnih stavki, nivo 1 – kontinenti, 2 – države, 3 – pokrajine, 4 – gradovi, a EU regije?,

• Formiranje grupa koje pokrivaju sve mogućnosti, starosne granice po semantičkom granulitetu,

• Uveriti se da se stavke ne preklapaju, na primer Zabava i Događaj – bolje Koncert i Sport,

• Koristiti familijarnu terminologiju ali da se stavke razlikuju jedna od druge, prepodne i poslepodne mogu zbuniti, ali pre 12h i posle 12h neće.


7

Mape stabla menijaMape stabla menija

• kako dubina stabla raste, tako postaje teže održati osećaj pozicije u meniju, raste dezorijentacija – izgubljenost,

• nekoliko studija pokazalo opravdanost mape menija –prostorna predstava organizacije stabla menija,

• popularisano u web sadržajima, ali i u dokumentaciji kompleksnog SW (često posebno odštampani listovi, na radni sto ili pak zid).

•9


7

Aciklični i ciklični meniAciklični i ciklični meni

• mrežna organizacija je ponekad najprikladnija jer omogućava prelazak na disparatnu sekciju stabla bez forsiranja da se ponovo krene od korena (npr. search),

• komercijalni on-line servisi (duguje – potražuje - stanje), rutiranje transporta, izvodi iz naučne literature...,

• sa stabla na aciklične pa na ciklične – raste strah od izgubljenosti jer kod stabla je još i lako napraviti (zamemorisati) organizaciju, a ovde ...

• kod stabla lako na prethodnika, ovde se mora memorisati sve što se prošlo,

• manji osećaj izgubljenosti i lakši povratak ako se memoriše udaljenost od osnovnog menija.


7





5. FORME

6. DIJALOZI

•10


7

Prezentaciona sekvenca stavkiPrezentaciona sekvenca stavki

• po izboru stavki menija ostaje da se formira njihova sekvenca kojom će se prezentovati korisniku,

• lako ako su prirodno već sekvencionisani, u suprotnom po:• vremenu, hronološki,• numeraciji, rastuće ili opadajuće,• alfabetu, rastuće ili opadajuće,• fizičkim osobinama, rastuće/opadajuće visine, dužine,

težine, temperature, volumena, prostora...• grupama povezanih stavki, preporučuje se delimitacija,• prvo najfrekvetnije stavke,• prvo najvažnije stavke, teško za ustanoviti a zavisi i od

korisnika, nije lako raditi sa samopromenljivim menijima (možda lakše sa najfrekvetnije prvo)...


7

Alfabetski, funkcionalno ili slučajnoAlfabetski, funkcionalno ili slučajno

• Card 1982. godine, singl 18-item vertical permanent menu text editor (insert, italic, center...), subjekti da lociraju određeni, meni uređivan alfabetski, funkcionalnim grupama ili slučajno, ostvareni rezultati u 3 x 86 pokušaja:

alfabetski – 0,81 s po pokušaju,funkcionalno – 1,28 s po pokušaju,slučajan – 3,23 s po pokušaju,

• kada se meni povećao na 64 stavke, vremena su povećana na preko 2s za alfabetsko do preko 6s za slučajan,

• kada element traženja umesto rečju definisao rečenicom, vremena su još porasla na 6 s za alfabetsko a 7 za slučajno,

• u proseku je najkorektnije po funkcionalnim grupama a unutar alfabetski ili najfrekvetnije.

•11


7





5. FORME

6. DIJALOZI


7

Vreme odgovora i brzina prikazaVreme odgovora i brzina prikaza

• vreme odgovora – kompjuter počne da prikazuje informacije kao reakciju na korisnikovu selekciju,

• brzina prikaza – kojom se prikaže kompletan meni (autonomno nije problem ali jeste u distribuiranim sistemima),

• posebna sekcija u nastavi,• slaba brzina prikaza – meniji moraju imati manje stavki,

povećava se dubina menija -> duža interakcija za završetak zadatka -> stresni korisnik,

• omogućiti brže kretanje kroz stablo menija nekom od narednih tehnika.

•12


7

Tehnike za ubrzanje kretanja kroz meniTehnike za ubrzanje kretanja kroz meni

• TYPEAHEAD, ne treba čekati na prikaz menija,• slično komandnom jeziku,• komandni string - identifikatori stavki menija uz

delimitere nivoa, “Edit/Find/typeahead”,• zahteva interpreter typeahead unosa,• vešti – u 988, šalteri i slično,

• INDEKSIRANJE STAVKI, bookmark,• mali broj destinacija pa svaka ima svoj naziv ili kraticu,• otežane do/undo/history operacije interfejsa,• osnova za shortcut,

• MAKROI, iskusni sami kreiraju svoje stavke,• stvaraju nadstavke menija,• jedna dimenzija end-user programming mehanizma.


7





5. FORME

6. DIJALOZI

•13


7

NasloviNaslovi

Čitavog menija ili samo stavke – single meni,• deskriptivni i laki za memorisanje (knjiga),• terminologija rada i da se nazivi stavki jasno razlikuju,• u sekvenci menija da budu gramatički korektni i da opisuju

stanja interakcije,• u stablu biti konzistentan pri ponavljanju (stavka

Knjigovodstvo otvara dijalog nazvan Duguje/potražuje),• izbegavati nazive sačinjene od više reči

IBIS, REDIBIS, NUNQVAM MORIERS IN BELLOIBIS, REDIBIS NUNQVAM, MORIERS IN BELLO

• truditi se da počinje ključnom rečju.


7

Grafički dizajnGrafički dizajn

Puno stavki na malo prostora koji se polako osvežava ?!?!?,• naslovi – centrirani ali kod sporih prikaza - ulevo,• stavke – ulevo, separatori srodnih, u 2D sort po kolonama,• instrukcije o upotrebi – na istom mestu i na isti način za

svaki meni – status bar,• poruke o greški – pojavljivanje, opisne, konzistentne,• problem dezorijentacije,

• veličinom, smicanjem udesno i/ili numeracijom naslova,• position marker, position strip (+----, -+---, --+--, ..., ----+),• kaskadno smeštanje menija,• transparentnost, meni transparentan do 50%

obezbeđuje dobru interakciju ali i veliku radnu površ.

•14


7





5. FORME

6. DIJALOZI


7

FormeForme

Form fillin• kada postoji puno unosa

podataka, nemoguće menijima nego samo putem tastature,

• intuitivan,• korisnik ima osećaj kontrole

nad unosom podataka, • uobičajen u informacionim

sistemima.

•15


7

Smernice za projektovanje formi ISmernice za projektovanje formi I

NASLOV pun značenja• identifikuje objekt rada,• izbegavati kompjutersku terminologiju (update, indexing...),RAZUMLJIVE INSTRUKCIJE• u terminima domena,• novajlijama obezbediti prozor pomoći,• opisne labele polja za unos, ne imperativne, samo imenica,• nikako Enter the address, nego Type the address,• upotreba navigacionih tastera pre nego Enter, Tab, …LOGIČKO GRUPISANJE I SEKVENCIONISANJE POLJA• grupisanje - poravnavanjem i separacijom,• sekvencionisanje – odraz zajedništva (grad, broj, država).


7

Smernice za projektovanje formi IISmernice za projektovanje formi II

VIZUELNO PRIVLAČNA FORMA• uniformna distribucija polja, poravnavanje,• ako sa papira – onda njemu i da sliči,FAMILIJARNE LABELE POLJA• bolje Kućna adresa od Domicilna adresa,,KONZISTENTNA TERMINOLOGIJA I SKRAĆENICE• napraviti listu termina i skraćenica, diskusija pa upotreba,DUŽINA POLJA TREBA DA JE VIZUELNO PREDSTAVLJENA• u tekstualnim sistemima – broj karaktera kao indeks labele,• GUI – fizička dužina polja,ZGODNO POMERANJE KURSORA• Tab i/ili kursorski tasteri.

•16


7

Smernice za projektovanje formi IIISmernice za projektovanje formi III

KOREKCIJA GREŠKE ZA KARAKTER(E) ILI ČITAVO POLJE• backspace ili overtyping,PREVENCIJA GREŠKE• za novac – guard dekadne cifre i zarez,• maske (datum, novac, telefon i sl.),PORUKE O GREŠKI ZA NEKOREKTAN UNOS• sa jasnim objašnjenjem šta je pogrešno,JASNO ISTAKNUTA OPCIONA PRIRODA POLJAHINT PORUKE O POLJUSIGNAL DA JE MOGUĆ ZAVRŠETAK UNOSAUPOTREBA LIST & COMBO BOXES• oslobađaju korisnika tereta unosa.


7





5. FORME

6. DIJALOZI

•17


7

DijalogDijalog

• kombinuje direktnu manipulaciju, selekcioni meni i forme zajedno sa pitanjima specifičnih zadatku,

• familijarni dijalozi – Open, Close, Save, Print, Replace...,

• kompleksni zadaci se sastoje od kompleksnih akcija sa puno podakcija što se lako rešava tabbed dialog boxes,

• na jednom mestu sve ali problem fragmentacije podakcija kojih se treba setiti tokom upotrebe.


7

Smernice za projektovanjeSmernice za projektovanjene odnose se samo na dijaloge

GRID• pronalaženje komponenti po horizontali i vertikali,• organizacija – kontrast, grupisanje sabijanjem, poravnanje,• konzistentnost – po lokaciji, formatu, ponavljanju elemenata

i organizaciji,• unutrašnja – elementi po pravilima, shodno zadatku,• spoljašnja – sledi pravila platforme.

Warning

mmmm mmmmmm

Okay

!Help

mmmm mmmmmm mmm

Okay

?

Tip of the day: Monday, Mar 12

mmmm mmmmmm

Dismiss

•18


7

Primer GRID 1Primer GRID 1

No Ok

Tekst poruke

Arial 14, left adjusted

Ikona

No Ok

Da li zaista želite obrisati datoteku“mojfajl.doc” izfoldera “proba”?

?

Ok

Nemoguće pomeriti datoteku “mojfajl.doc” ufolder “proba”pošto je disk pun.

!Apply

Cancel

Datoteka je uništena!


7

Primer GRID 2Primer GRID 2Dvonivovska hijerarhija• uvlačenje,• kontrast.

Poravnanje povezuje vizuelne elemente u sekvencu.

Grupisanje razmakom

Logika organizacionog toka

•19


7

Primer grupisanja 1Primer grupisanja 1

Mmmm:

Mmmm:

Mmmm:

Mmmm:

Mmmm:

prostornodobro

Mmmm:

Mmmm:

Mmmm:

Mmmm:

Mmmm:

nikako

Mmmm:

Mmmm:

Mmmm:

Mmmm:

Mmmm:

eksplicitnoali slabo


7


• veoma loše poravnanje – nema toka,• jadan kontrast – razlikovati bojene labele od unosa?!?,• slaba repeticija – dugmići ne liče na sebe.

•20


7


Nema traga redosledu i organizaciji.


7


Prostorna tenzija.

•21


7


Eksplicitno kao snažan podupirač.


7


Preterano 3D preopterećuje a štednja sprečava razlikovanje.

•22


7

Nagoveštaj navigacijeNagoveštaj navigacije

• obezbediti inicijalni fokus,• redosled mora da prati korisnikov model.


7

Ekonomisanje elementima interakcijeEkonomisanje elementima interakcije

• minimizovati broj elemenata,• uključiti samo neophodne – ostale eliminisati ili potisnuti u

druge okvire (tabbed),• minimizovati zbrku – nema skrivanja informacija.

NNNNMMMM

xxx: ____xxx: ____xxx: ____

xxx: ____

xxx: ____

xxx: ____

xxx: ____

xxx: ____

xxx: ____

xxx: ____

xxx: ____

xxx: ____

xxx: ____

xxx: ____

xxx: ____

MMMM

NNNN

•23


7

Čitkost i čitljivostČitkost i čitljivost

• karakteri, simboli i grafički elementi moraju biti lako prepoznatljivi ali da se međusobno jasno razlikuju,

• tipografija - 1-2 pisma, masno-kurziv-normal, 1-3 veličine slova,

• uvlačenje, razmak linija, uvlačenje, boje, veličina tačke ...


7

Kako izabrati widgets?Kako izabrati widgets?

• Koje se komponente moraju prikazati?– samo najneophodniji vizuelni napor,– po frekvetnosti/bitnosti akcije

• direktna manipulacija za osnovne aktivnosti,• buttons/forms/toolbar/special tools za frekventne

akcije,• menus/property window za manje frekventne akcije,• sekundarni prozori za retke akcije,

• Kako urediti komponente?– organizovati povezane stavke kao “chunks”

• Kako do familijarne i očekivane terminologije?– “look and feel” kroz aplikaciju.

•1

drdr DraganDragan IvetiIvetićć -- INTERAKCIJA INTERAKCIJA ČČOVEK RAOVEK RAČČUNARUNARMULTIPROZORSKE STRATEGIJE MULTIPROZORSKE STRATEGIJE

8

I kroz najmanji prozor ...I kroz najmanji prozor ...

• prvi računari prikazivali na ever-growing scroll of paper,• prelaskom na ekran – ostala potreba skroliranja,• pored skakanja napred/nazad po dokumentu od interesa,

potreba za rad sa više izvora (grupisanih po sličnosti ili ne) istovremeno – MULTIPLE-WINDOW DISPLAY,

• jako mali prikazi – nema dovoljno mesta za informacije,• veliki prikazi – problem sa pomeranjem očiju/glave,• srednji (640x480 do 2048x2048px) prikazi najbolji – lepo za

prikaz informacija a nije prevelik za window housekeeping (otvaranje, zatvaranje, osvežavanje sadržaja, pomeranje, smanjivanje/povećavanje, aranžiranje – obično uz animirani feedback),

• prirodna je strategija direktne manipulacije prozorima.


8


1. EVOLUCIJA PROZORA

2. ELEMENTI I OPERACIJE NAD PROZOROM3. MULTIPROZORSKA STRATEGIJA

•2


8

Prvi prozorPrvi prozor

• 1968. godine Doug Engelbart u NLS sistemu,• 1969. godine Alan Kay predložio preklapajuće i prvi put

implementirani 1974. godine u SmallTalk - Xerox PARC,• 1981. godine Xerox Star dozvoljavao do 6 nepreklapajućih

prozora fiksne veličine ali tabbed sadržajem,• 1983. godine Apple sa GUI i preklapajućim prozorima,• 1985. godine MS sa Windows 1.0 (tiled), 2.0 i 3.0 (preklap.),• UNIX X Windows sistemi,• 1986-87. HP-VUE i Sun razvijaju ROOMS pristup –

okupljanje unutar jedne površine prozora sličnog sadržaja.


8

Smalltalk prozorSmalltalk prozor

•3


8

Xerox Star prozorXerox Star prozor


8

Apple razvoj prozora – jul 1979.Apple razvoj prozora – jul 1979.

•4


8

Apple razvoj prozora – februar 1980.Apple razvoj prozora – februar 1980.


8

Apple razvoj prozora – mart 1980.Apple razvoj prozora – mart 1980.

•5


8

Apple razvoj prozora – avgust 1980.Apple razvoj prozora – avgust 1980.


8

Apple razvoj prozora – oktobar 1980.Apple razvoj prozora – oktobar 1980.

•6


8

Apple razvoj prozora – decembar 1980.Apple razvoj prozora – decembar 1980.


8

Lisa Office System 1.0 – maj 1983.Lisa Office System 1.0 – maj 1983.

•7


8

Lisa Office System 3.1 – 1984.Lisa Office System 3.1 – 1984.


8

Macintosh System 1.0 – januar 1984.Macintosh System 1.0 – januar 1984.

•8


8

Macintosh System 4.2 – 1987.Macintosh System 4.2 – 1987.


8

Macintosh System 7.5.3 – 1995.Macintosh System 7.5.3 – 1995.

•9


8

Mac OS X – leto 2000.Mac OS X – leto 2000.


8

MS Windows 1.0MS Windows 1.0

•10


8



8


•11


8

MS Windows NT 3.1MS Windows NT 3.1


8

LINUX prozorLINUX prozor

•12


8

HP prozoriHP prozori


8




•13


8

Elementi prozora IElementi prozora I

• MS Windows 3.0 User’s Guide (1990.) definiše prozor kaoa rectangular area that contains a software application, or a document file. Windows can be opened and closed, resized and moved. You can open several of them on the desktop at

the same time and you can shrink windows to icons or enlarge them to fill the entire desktop

• bilo kako ga definisali, sastoji se barem od:NASLOV - title• boja pozadine ukazuje na stanje prozora/sadržaja,

NAZIV NAZIV

NAZIV

NAZIVNAZIV

NAZIVNAZIVNAZIV

NAZIV


8

Elementi prozora IIElementi prozora II

OKVIR (ivica, porub) – frames (borders)• par piksela debela linija za razlikovanje od pozadine,• za promenu veličine,• 3D efekti i senka, boja i debljina ukazuju na stanje,KLIZAČI – scroll bars• skrolovanje po finim linijama, glatko ili diskretno zavisno

od sadržaja.

113

11 11

1

345

2 2

•14


8

Akcije prozora IAkcije prozora I• interfejs akcije prozora su:

OTVORI - open• unosom komande, selekcijom menija, glasom ili

dvostrukim klikom iz ikone (stavke menija),• feedback – grafički (growing box, zoom lines, 3D

flips/spins... – brže ili sporije) i audio,MESTO I VELIČINA OTVARANJA – open place and size• fiksna, poslednje koriščena i/ili definisana tokom

otvaranja,• što bliže trenutnoj poziciji (eye motion) – ispod/pored,ZATVARANJE - close• ikona gore levo ili desno,• feedback obrnut od otvaranja,


8

Akcije prozora IIAkcije prozora II

PROMENA VELIČINE - resize• na različite načine – Macintosh samo doledesnim uglom

a ostali svakim uglom i ivicom,• da li da menja sadržaj prozora (font, slike, ikone...) ili

samo da ga reorganizuje?• kontinualna promena ili po predefinisanim veličinama?POMERANJE – move• kao element menija, preko title bar,• feedback – original, transparentna kopija, senka, okvir...BRING FORWARD OR ACTIVATION• u preklapajućim je obavezno, stanje kodirano bojom,• različite tehnike (meni, dvostruki klik...),• ili da se brzo uradi ili kroz feedback (zoom).

•15


8





8

Istovremeni pristup više izvora informacija?Istovremeni pristup više izvora informacija?

Pomoću :• više monitora – prostorno zahtevno i eye/body motion,• brzo prebacivanje – automatsko ili na zahtev korisnika,

dezorijentacija korisnika, kognitivni model?• deljenje prikaza – vertikalno ili horizontalno, • slaganje (tiling) fiksnog (varijabilnog) broja i veličine – bolje

(lošije) iskorišten prostor za prikaz, ograničen veličinom ekrana i minimalnom dimenzijom okvira/crepa,

• zumiranje okvira – mini -> uvećaj -> uradi -> smanji -> mini,• kaskadno slaganje – slabi prethodno ograničenje ali se ne

vidi kompletan sadržaj prethodnih okvira,• proizvoljno preklapanje – 2,5D prikaz, sadržaj prethodnih

može postati nevidljiv ali korisnik može skloniti smetnju.

•16


8

Koordinacija tešnjom vezom prozora IKoordinacija tešnjom vezom prozora I

• sinhronizovano skroliranje – bazirano na liniji, proporcionalno desktopu prozora ili ključnim rečima sadržaja; ili prozor uz prozor sa deljenim klizačima,

• hijerarhijski pregled – jedan ima sadržaj a drugi detalje,• direktna selekcija – selekcijom objekta pops up drugi okvir,


8

Koordinacija tešnjom vezom prozora IIKoordinacija tešnjom vezom prozora II

• 2D brouzing – 2D rođak hijerarhijskog – mape, grafike...,• dependent-windows opening – otvaranjem jednog –

otvaraju se i drugi s prvim u vezi,• dependent-windows closing – zatvaranjem jednog –

moguće je zatvoriti drugi s prvim u vezi,• save or open windows state – save sadržaja jednog prozora

istovremeno čuva pojavljivanje i sadržaje svih prozora (Save screen as...).

•17


8

Pregled slika u tesnopovezanim prikazimaPregled slika u tesnopovezanim prikazima

• 2D brouzing – za zoom faktor 5 – 30, za veći - međupogledi,

• zoom-and-replace – lak za implementaciju, radna memorija,• fish eye – samo je oblast fokusa

detaljna, dezorijentacija .


8

Elastični prozoriElastični prozori

• oslonjeni na rooms pristup,• a osmišljeni na sledećim principima:

• hijerarhijska organizacija prozora – odgovara ljudskoj organizaciji posla,

• višestruke operacije nad prozorima – sažimanje operacija u nadoperacije - manje opterećenje radne memorije,

• Space-Filling Tiled Layout – bolja iskorištenost prikaza, • mail software 1995. godine na University of Maryland,

•18


8

Scenario rada sa elastičnim prozorima IScenario rada sa elastičnim prozorima I

nove poruke

stareporuke


8

Scenario rada sa elastičnim prozorima IIScenario rada sa elastičnim prozorima II

novi prozorda se vide nove poruke

•19


8

Scenario rada sa elastičnim prozorima IIIScenario rada sa elastičnim prozorima III

nove poruke od Bena


8

Scenario rada sa elastičnim prozorima IVScenario rada sa elastičnim prozorima IV

nova poruka od North-a, tema kao i kod Bena pa u isti kontejnerski prozor

•20


8

Scenario rada sa elastičnim prozorima VScenario rada sa elastičnim prozorima V

a i Flipjednompisao o

istojtemi


8

Scenario rada sa elastičnim prozorima VIScenario rada sa elastičnim prozorima VI

1. sve što je Flip pisao

2. po selekciji interesantne ona se otvorila

3. stavio među slične

•21


8

Scenario rada sa elastičnim prozorima VIIScenario rada sa elastičnim prozorima VII

zoom prema doleili gore da bi se pročitalo što se želi


8

Scenario rada sa elastičnim prozorima VIIIScenario rada sa elastičnim prozorima VIII

sve poruke smanjene na vertical barpa restaurisane

•22


8

Scenario rada sa elastičnim prozorima IXScenario rada sa elastičnim prozorima IX

PUMP operacija prozora sa HCI dopisivačima, pritisnut levi taster miša na zoom dugme i otvara skupljajući ostale.Unpump, srednji klik mišem na zoom dugme

•1

drdr DraganDragan IvetiIvetićć -- INTERAKCIJA INTERAKCIJA ČČOVEK RAOVEK RAČČUNARUNARINTERAKCIONI UREINTERAKCIONI UREĐAJIĐAJI I VREME ODGOVORA I PRIKAZAI VREME ODGOVORA I PRIKAZA

9

EvolucijaEvolucija

1965

1962


9


1. TASTATURE

2. POINTERSKI UREĐAJI3. PRIKAZI

4. ŠTAMPAČI5. VREME ODGOVORA I PRIKAZA

•2


9

TastatureTastature

• primarni mod je unos alfabeta (150 - 50 reči/minut),• istovremeni pritisak na više tastera (300 reči/minut),• dimenzije, broj tastera, odmorište za ruke podesivost,• ergonomija, razmakli 9,5cm zbog ramena, promenili uglove,• rasporedi tastera,

• QWERTY, 1870. godine,• Dvorak, 1920. godine,• ABCDE raspored,

• tasteri – ½”, ¼”, 40 - 125 gr, 3 - 5 mm, forceback• dodali SHIFT, DELETE, veći ENTER, kursorske,• pa i funkcijske tastere različito grupisane,• LED indikatori stanja,• integracija sa pointerskim uređajima.


9


1. TASTATURE



•3


9

Pointerski uređajiPointerski uređaji

• selektovanje, direktna manipulacija (lako se ovlada, nema sintaksnih grešaka, pažnja ostala na prikazu, satisfakcija),

• zahteva veštinu i motoriku,ZADACI POINTIRANJA

• selekcija – izbor jednog iz skupa,• pozicioniranje – izbor tačke na liniji, ravni, prostoru ...• orijentacija – izbor pravca (rotiranja, svetla, pokreta...),• putanja – serija brzih pozicioniranja i orijentacija,• kvantifikovanje – specifikovanje numerika,• tekst – identifikovanje mesta za unos, brisanje ili

promenu znaka,• svi zadaci su izvodljivi i tastaturom ali ...


9

Pointerski uređaji direktne kontrolePointerski uređaji direktne kontrole• primenjuju se direktno na ekranu monitora,SVETLOSNO PERO

• najstarije,• taster za zadržavanje pozicije,• obavlja svih 6 zadataka,• zamorno rame za gore desno,• ruka zaklanja pogled, nisu na

tastaturi i mora držati pero,EKRAN OSETLJIV NA DODIR

• nema držanja pera,• prvo beše land-on strategija bez prilike za popravak,• lift-off (otporna, kapacitivna ili akustična), 1024x1024,

• dodirne–pojavi se kursor–prevlači ga ili ne-podiže,• palm, tabletPC, GSM, unos teksta, prepoznaj rukopis...

•4


9

Pointerski uređaji indirektne kontrole IPointerski uređaji indirektne kontrole I

• ne primenjuju se direktno na ekran monitora,• nema smetanja ruke a manji je i zamor,• više kognitivne obrade i koordinacije oko-ruka,MIŠ

• mehanički, optički, akustički,• 1 (Apple), 2 (MS) ili 3 (Sun) tastera,

TRACKBALL• manje naporan od miša,• integrisan u tastaturu/laptop,

JOYSTICK• iz avio industrije,• za praćenje uz moguće selektovanje,


9

Pointerski uređaji indirektne kontrole IIPointerski uređaji indirektne kontrole II

TRACKPOINT• izometričan džojstik u tastaturi,• Tactile TrackPoint,

GRAPHICS TABLET• elektronska, akustična ili kontak tabla,• ograničen unos podataka,• Tablet PC,

TOUCHPAD• 5 x 8 cm, blizu tastature,• pritisak, udar i kretnja,• Toshiba cPad.

•5


9

Komparacija pointerskih uređajaKomparacija pointerskih uređaja• brzina kraćih i dužih pomeraja, preciznost pozicioniranja,

verovatnoća greške, vreme učenja i satisfakcija,• ali i cena, trajnost, gabariti, težina, levoruki/desnoruki...• pero i touchscreen bili najbrži ali prvo slabo u upotrebi zbog

lošeg feedback,• grafičke table za one koji malo koriste tastaturu (umetnici),• tastatura brže pomera kursor od pointerskih uređaja?

• za fiksni (2-10) broj objekata na koje treba ukazati,• za manja (finija) rastojanja,

• touchscreen i trackball za javnu upotrebu,• za pozicioniranje na piksel – miš, trackball, trackpoint,

grafičke table i touchpad,• džojstik za igrice i letenje,• indirektni zahtevaju više obuke od direktnih.


9

Fitts’ LawFitts’ Law

• Paul Fitts 1954. godine – vreme pointiranja je funkcija udaljenosti (D) i veličine (W) objekta na koji se pointira,

• indeks_težine = log2 (2*D/W),• vreme_pointiranja = C1 + C2 * indeks_težine

gde su C1 i C2 konstante uređaja,• za neki uređaj za D=8cm i W=1cm indeks_težine je 4,

• izvrši se serija merenja vremena za dato D i W pa se odrede C1 i C2,

• vreme_finog_pointiranja = C1 + C2 * indeks_težine + C3 * log2(C4 / W),

• praviti uređaje sa malim C1, C2 , C3 i C4.

•6


9


1. TASTATURE




9

MonitoriMonitori

• primarni izvor feedback od računara ka korisniku,• monohromatski (P39-zeleni) i kolor,• Raster-scan CRT,

• osvežavanje 30 – 70 Hz, više bolje eliminišu fliker,• 2” – 30”, uobičajeno 15” – 19”,

• LCD,• tanki po gabaritima, nema flikera, 768x1024,• ugao gledanja, osvetljenost i kontrast,

• Plazma,• žična mreža a u preseku ih izoluje kapsula sa gasom,• nema flikera ali ograničena rezolucija, tanak,

• LED• bolji ugao gledanja ali i pitanje rezolucije.

•7


9

E-copy prikaziE-copy prikazi

• digitalni fotoaparati, JPEG familija standarda,• skeneri,• digitalni video,

• video diskovi, DVD,• MPEG familija standarda,

• projektori,• LCD projektori – 3 LCD ravni, spor, manji kontrast, veći

gabariti ali visok intenzitet svetla (barem 3K lumena),• DLP projektori – MEMS čip i disk sa filterima, max 2K lu,

• HMD,• primenljiv u AR sistemima,• 702x200 LED diodica po oku.


9


1. TASTATURE



•8


9

Hard-copy prikaziHard-copy prikazi

• jedan od najstarijih prikaza,• impact line – karakter štampači,• dot matrix – 9, 12 i 24 pinski, tekst i grafika, dve boje,• thermal printers,• inkjet,• laserski,• plotters.


9


1. TASTATURE



•9


9

Brže je bolje?Brže je bolje?

• jako sporo nije dobro (nervira),• jako brzo (frustrira i greši),• autonomni i brzi računari,

• rad u mreži.

Korisnikinicijalizuje akciju

Kompjuterodgovora

Novainicijalizacija

Vreme odgovora Vreme razmišljanja korisnika

Korisnikinicijalizuje akciju

Kompj. završa-va odgovor

Noviunos

Vreme odgovora Vreme razmišljanja

korisnika

Korisnikzapočinje unos

Kompj. započi-nje odgovor

Vreme korisnikovog planiranja


9

Koliko da čeka na odgovor kompjutera?Koliko da čeka na odgovor kompjutera?

• 0,1 s ili 2 s ili 30 s?,• zavisi od korisnikovih očekivanja zasnovano na iskustvu u

rešavanju te klase zadataka,• response-time shoke,• promenljivo vreme,

• zavisi od individualne tolerancije na kašnjenje,• početnici voljni da čekaju,

• zavisi od zadatka koji se obavlja,• jednostavni i repetativni zadaci, 1 s,• ako je korisnik familijaran, 2 - 4 s,• kompleksniji zadaci – duži odgovor koji korisnik koristi

za planiranje narednih akcija, 3 – 15 s,• puno zadataka (mouse move, type, select), 50 – 150 ms.

•1

drdr DraganDragan IvetiIvetićć -- INTERAKCIJA INTERAKCIJA ČČOVEK RAOVEK RAČČUNARUNARŠŠTAMPANA UPUTSTVA, SISTEM POMOTAMPANA UPUTSTVA, SISTEM POMOĆĆI I TUTORII I TUTORI

10

Training materialsTraining materials• korisnici interaktivnih sistema trebaju materijal za obuku,• tradicionalni štampani materijal i/ili E-copy,• nisu uključeni: obuka u centru, personalna obuka i pomoć,

konsultacije telefonom, video i audio snimci,

• klasifikacija materijala prema korisnikovim ciljevima

online helponline document

user’s manualto use it

guided tourtutorial manualto learn it

demonstration program

sales brochure, fact sheet

to buy itE-copyPAPIRKorisnikov cilj


10


1. PAPIR ILI EKRAN

2. PRIPREMA ŠTAMPANOG MATERIJALA3. PRIPREMA ONLINE SREDSTAVA

•2


10

Papir vs. ekran IPapir vs. ekran I

• tehnika štampanja teksta na papir se razvija već 500 godina,• istraživano: boja, veličina i kvalitet papira; tip, veličine,

oštrina, oblik i boje karaktera; proredi, kontrast teksta i papira, veličina kolona, margine,

• prikaz teksta na ekranu - 40 godina,• potencijalne mane ekrana:

• fontovi – nekvalitetni zbog manje rezolucije, monospace fontovi su neprirodniji, loš izbor boje, oblika i proreda,

• slab kontrast,• veća emisija svetlosti,• manja prikazna površina,• razdaljina (akomodacija) čitanja,• formatiranje...


10

Papir vs. ekran IIPapir vs. ekran II

• istraživanja 1980tih pokazala,• 15% - 30% sporije (nekomforno) sa ekrana,• slabije uočavanje grešaka (daktilo, pravopisne,

ponavljanje/duplikovanje reči...) na ekranu,• 200 (150) reči/minut na štampanom materijalu (ekranu),

• istraživanja 1990tih pokazala da se poznate razlike smanjuju ako se pokuša:

• rezolucija ekrana (oko 100 px/in) približiti štampi (300),• kratko vreme odgovora,• velika brzina prikaza,• prikaz veličine papira,• crno na belom,• formatiranje...

•3


10


1. PAPIR ILI EKRAN



10

Priprema štampanog materijalaPriprema štampanog materijala

• tradicionalno – najmlađi članovi razvojnog tima na kraju procesa razvoja SW sa 5% napora,

• 1982. Foss, Rosson & Smith preradili tradicionalno uputstvo za tekst editor (spiralni pristup) i testirali

0.31.4Prosečno grešaka/zadatak

13.023.6Prosečno komandi/zadatak

2.65.5Prosečno zahteva za usmenu pomoć

16.026.6Prosečno minuta/zadatak

8.87.4Kompletiranih zadatakaModifik.Tradic.

•4


10

SmerniceSmernice• korisnički zadaci vode organizaciju (outside-in),• korisnikov proces učenja oblikuje sekvencionisanje,• introductory tutorial, conversion manual, quick reference,• prezentovati koncepte zadataka pre objekata i akcija

interfejsa softvera,• truditi se da stil pisanja bude jednostavan i jasan,• koristiti što je moguće više primera,• nuditi smislene i kompletne sesije,• crtati dijagrame prelaza ili stabla menija,• koristiti svu pomoć organizovanja i sažetaka,• obezbediti sadržaj, indeks i rečnik pojmova,• uključiti listu poruka o greškama,• give credit to authors and designers.


10

ProcesProces

• zahtevati profesionalne pisce,• pripremati uputstva što ranije (pre implementacije),• temeljno revidirati draftove uputstava,• testirati prva izdanja na terenu,• obezbediti feedback mehanizme ka piscima,• ispravljati/održavati uputstva.

•5


10


1. PAPIR ILI EKRAN



10

Priprema online sredstavaPriprema online sredstava

• tehnička uputstva raspoloživa na računaru su dobra jer• raspoloživa gde i računar – sve u jednom, laptop i dve

police knjiga,• nije potreban poseban prostor da se čitaju,• brz i jeftin update,• brzo lociranje potrebne informacije,• upotreba multimedije,

• mada postoje i mane elektronskih pomagala• ekrani nisu toliko čitljivi,• prekrivaju radnu površinu računara,• mogu biti konfuzni za novajlije,• studije kažu da se iz štampanog materijala lakše uči,

•6


10

Online uputstvaOnline uputstva

• online uputstva nisu digitalizovni štampani materijal,• mora da obezbedi pretraživanje teksta, višestruke indekse,

tabele sa sadržajem i slikama, electronic bookmarks, komentare, hipertekst linkove i automatic history keeping,

• primeri,• ako treba, redizajnirati štampana uputstva shodno

elektronskom mediju i iskoristiti prednost višestrukih prozora, isticanje teksta, boje, zvuk, animaciju a posebno pretraživanje teksta.


10

HTML format online uputstvaHTML format online uputstva

sadržajgrubidetaljni

indekstraži hipertekst link

slike

•7


10

MS HLP format online uputstvaMS HLP format online uputstva

sadržajindextražibookmarks

keywordstypeor selectin topics


10

Context-sensitive helpContext-sensitive help

•8


10

Online tutoriOnline tutori

• korisnici po prvi put trebaju interaktivno tutorsko okruženje,• Macromedia DreamWeaver UltraDev guided tour,• onlajn tutori mogu biti efektni jer korisnici

• nisu prisiljeni da premeštaju pažnju sa/na radne površine na/sa dokumentaciju,

• razvijaju veštine potrebne za korišćenje sistema,• samostalno rade i vežbaju bez tuđe pomoći,

• demonstracioni (demo) diskovi – 3D Studio MAX,• animirana pomoć u rešavanju kompletnih zadataka – MS

Office Assistant.


10

Guided tourGuided tour

•9


10

MS Office AssistantMS Office Assistant

•1

drdr DraganDragan IvetiIvetićć -- INTERAKCIJA INTERAKCIJA ČČOVEK RAOVEK RAČČUNARUNARPRETRAPRETRAŽŽIVANJE, VIZUELIZACIJA i WWWIVANJE, VIZUELIZACIJA i WWW

11

Informaciona revolucija?Informaciona revolucija?

• potreba za informacijama – odmah, puno i brzo,• vrtlog termina:

NEKAD• information retrieval (u biblio. i tekst dok. sistemima),• database management (relac. DB sa atributima i key),SADA• information gathering, seeking, filtering ili visualization,• data mining and warehousing (biznis orijentisani),• knowledge networks (expert-systems vizionari),

• bilo kako, cilj je isti – pronaći uzani skup stavki u ogromnoj kolekciji koji zadovoljava informacione potrebe,

• HCI specijalisti dali tome veliki doprinos.


11


1. PRETRAŽIVANJE TEKSTUALNIH DOKUMENATA

2. PRETRAŽIVANJE MULTIMEDIJALNIH DOKUMENATA3. VIZUELIZACIJA4. WORLD WIDE WEB

•2


11

Pretraživanje tekstualnih dokumenataPretraživanje tekstualnih dokumenata

• iskusni koriste SQL, query-by-example ili form-fillin queries,• kod kioska ili www svi hoće odmah da koriste – nisu

raspoloženi za učenje,• kod Google, Yahoo, Altavista, Lycos i ostalih, unešeno

direct manipulationznači

• traženje stringa “direct manipulation”,• logičko traženje direct and manipulation,• logičko traženje direct or manipulation,• pojavu poruke greške da nedostaje and/or veznik,

• da bi se ukinula neizvesnost za novajlije – 4fazni okvir.


11

Četvorofazni okvirČetvorofazni okvir

FORMULACIJA• traganje za izvorom informacija u bibliotekama/kolekcijama,• upotreba polja za limitiranje izvora,• fraze i varijacije,AKCIJA• implicitna ili eksplicitna,REZULTATI• kao poruke, tekst u kolonama ili manipulativne vizuelizacije,• podešavanje prikaza rezultata,REFINEMENT• koristiti kada korisnik nije siguran u ono što traži,• omogućiti kada su fraze i varijacije donele veliki broj

pogodaka.

•3


11





11

Pretraživanje multimedijalnih dokumenataPretraživanje multimedijalnih dokumenata• o sadržaju MM dokumenata više u GMMS kursu,• sada se insistira na MULTI u nazivu i njihovom traženju,FOTOGRAFIJE• query by image content (QBIC),• danas slabo po delu slike/objekta na slici, efikasniji po

boji/teksturi/jednostavnim oblicima,ZVUK• govor/ton,• CD-DA ili MIDI?,VIDEO • puno fotografija čije prikazivanje (pretraživanje) traje dugo,• mpeg u DVD ili DiVX,ANIMACIJA• jednostavnija od videa – ako je produkt generativne grafike.

•4


11





11

Vizuelizacija informacija IVizuelizacija informacija I

• slika = 1000 reči,• prikazati alfanumerički ili slikom? • zadatak: selektovati Kać, na mapi Vojvodine ili list boksom?• prvi je brži ali treba znati gde je, a drugi zahteva vreme,• visual-information-seeking mantra:

overview first, zoom and filter, then details on demand.

Oko,prozor ljudske duše,osnovno sredstvo kojim razum kompletno i obilno shvataneograničeni rad prirode...

Leonardo da Vinci, (1452 - 1519)

•5


11

Vizuelizacija informacija IIVizuelizacija informacija II

• kompaktna grafička predstava i korisnički interfejs za manipulisanje velikim brojem stavki (102-106) obično iz skladišta podataka,

• omogućava korisnicima da otkrivaju, formiraju odluke i objašnjenja o uzorcima (trend, grupe, jaz...),

• ogroman vizuelni opseg (bandwidth),• ljudska perceptivna moć (boje, veličina, oblik, blizina,

trend, grupisanje...), • čovekovo video skladište je ogromno a obrada brza (10

MFlopsa uz 20W).


11

Vizuelizacija po tipovima podataka IVizuelizacija po tipovima podataka I

• karakterišu informacije domena zadataka korisnika i organizovani tako da pomognu korisniku da reši problem,

• razlikuju se:

1D LINEARNI• sekvencionalne pojave entiteta gde korisnik treba da sazna

koliko ih ima, pronađe po vrednosti atributa,• rešenja: bifocal display ili value bars,

2D MAPE• pojave entiteta koji su semantički 2D, a ako su kompleksni i

u više lejera,• rešenja: GIS ali i nD u 2D translacija,

•6


11

Vizuelizacija po tipovima podataka IIVizuelizacija po tipovima podataka II

3D SVET• realnost volumena i odnosa (gore/dole, spolja/iznutra),• rešenja: medicina ili 3D desktop i soba,

TEMPORALNI• vremenske ose nad kojima: prvi, neki, poslednji, pre/posle

datog, preklapanja...• rešenja: zid u perspektivi i LifeLines,

MULTIDIMENZIONALNI• n-dimenzionalni prostor u relacionim i statističkim DB radi

pronalaženja uzorka, odnosa, trendova, ekstrema...• rešenja: paralelne koordinate i TableLens,


11

Vizuelizacija po tipovima podataka IIIVizuelizacija po tipovima podataka III

STABLA• hijerarhijska priroda – potomak ima jednog pretka ,• rešenja: 3D kupa, hiperbolično stablo, StarTree i TreeMap,

MREŽA• složena hijerarhijska priroda sa n-n vezama,• složeni zadaci – najkraći (najjeftiniji) put između neka dva čvora,

• rešenja: Web Browsing i komunikacione mreže.

•7


11

GISGIS


11

ThemeScapeThemeScape

•8


11

3D medicina3D medicina


11

3D desktop3D desktop

•9


11

3D soba – Clockwise3d3D soba – Clockwise3d


11

Perspective wallPerspective wall

•10


11

LifeLinesLifeLines


11

Paralelene koordinateParalelene koordinate

•11


11

TableLensTableLens


11

3D kupa3D kupa

•12


11

Hiperbolično stabloHiperbolično stablo


11

StarTreeStarTree

•13


11

TreeMapTreeMap


11

Web BrowsingWeb Browsing

•14


11

Komunikacione mrežeKomunikacione mreže


11

Zadaci u vizuelizaciji IZadaci u vizuelizaciji I

PREGLED• pregled čitave kolekcije, • može da uključi zooming (faktor 3 - 30) ili fisheye (5) za

nešto detalja,

ZOOM• jedne stavke u kolekciji,• kontrola korisniku nad fokusom i faktorom zumiranja,• smooth zoom čuva osećaj pozicije i konteksta,

FILTER• dinamični upiti su osnova vizuelizacije, • fokusom eliminiše ono što nije interesantno,

•15


11

PhotoMesaPhotoMesa


11

Zadaci u vizuelizaciji IIZadaci u vizuelizaciji II

DETAILS-ON-DEMAND• kada selektuje stavku ili grupu (do 10) stavki tada i detalji,

U RELACIJI SA• pogodno da fokusiranu prate i sporedne stavke,

PROŠLOST• radi undo, replay i progresivnog pročišćavanja,

EKSTRAHOVANJE• informacija iz stavke do koje je došao radi

• memorisanja/E-mail/print i sl. same informacije,• memorisanja putanje do te informacije.

•16


11





11

Stanje stvari u WWWStanje stvari u WWW

• bujica sajtova (hipertekst u GMMS kursu) izbacila• utopijske vizije o zauzdavanju poplave informacija,• neutopijski komentari o tragediji poplave informacija,

• kako razvijati www sajtove da se ovo spreči?• koristiti se saznanjima klasičnog interfejsa:

• početi sa korisnicima i njihovim zadacima,• razviti njihove strukturirane objekte i akcije ,• razviti njihove metafore i rukovaoce akcija interfejsa.

• uspostavlja se posebna disciplina – WEB design jer• posetilac lokacije nije lojalan a veoma je bitan,

•17


11

Elementi Web lokacijaElementi Web lokacija• web lokacije su informacioni resursi koji dele nekoliko

zajedničkih karakteristika: 1. osnovna, ulazna (home) web strana, 2. meni i obične podstranice, osnovne za podstablo

podstranica, mogu biti bookmarked, obavezno veze između i prema osnovnoj stranici lokacije,

3. site guides, podstranice sadržaja ili mape,4. “Šta je novo?” podstranice, revision date je obavezan,5. search funkcija, nije zamena za sadržaj, puno

podstranica ili malo ali sa puno informacija, refinement,6. FAQ stranice, podrška korisnicima,7. contact, povratna veza.


11

Osnovna, ulazna (home) stranica IOsnovna, ulazna (home) stranica I

• određena sa URL (intuitivan, deskriptivan), različite strategije dizajniranja : A. meni zasnovana, nasleđeno iz SE, grafički ili tekst

linkovi vode posetioca dublje u web dokument,B. novinski orijentisana, atraktivna sa late-breaking

novostima, kalendarima događaja i porukama,,C. zasnovan na putanjama, velike lokacije nude linkove

grupa srodnih informacija, klasifikacija korisnika,D. splash screen, uvodna stranica sa nesemantičkom i

preatraktivnom animacijom.

•18


11

Osnovna, ulazna (home) stranica IIOsnovna, ulazna (home) stranica II

• grafika ili tekst, baneri i grafički meniji koji oduzimaju vreme, samo dobar balans teksta i grafike/animacije,

• lejaut, za sve isti ili posebno za uvodnu a posebno za ostale stranice, zahteva se doslednost samo u navigaciji.


11

Meni zasnovana osnovna stranicaMeni zasnovana osnovna stranica

•19


11

Novinski orijentisana osnovna stranicaNovinski orijentisana osnovna stranica


11

Osnovna stranica zasnovana na putanjamaOsnovna stranica zasnovana na putanjama

•20


11

Splash screen osnovna stranicaSplash screen osnovna stranica


11

Izbalansirana osnovna stranicaIzbalansirana osnovna stranica

•21


11

Meni podstraniceMeni podstranice


11

Mapa web lokacijeMapa web lokacije

•22


11

Refinement search Refinement search


11

Dizajniranje straniceDizajniranje stranice

prostorna organizacija grafike i teksta web stranice, - vizuelno napada posetioca,- usmerava pažnju,- postavlja prioritete informacijama koje gledaju,- interakciju čini pogodnijom i efikasnijom.Dizajniranje web stranice vodi računa o• vizuelnoj hijerarhiji i konzistentnosti,• dimenzijima stranice,• organizovanje stranice (grid, heder/futer, CSS, tabele, okviri)• tipografija,• dizajn sadržaja.

•23


11

Vizuelna hijerarhija i konzistentnostVizuelna hijerarhija i konzistentnost

kreirati strogu, konzistentnu vizuelnu hijerarhiju u kojoj su važni elementi naglašeni a sadržaj je organizovan logički i predvidljivo,


11

Kontrast je važan ..Kontrast je važan ..

za oko atraktivan balans vizuelnog kontrasta koji odaje organizaciju,

•24


11

.. ali i konzistentnost.. ali i konzistentnostkonzistentnost nije dosadna, daje grafički identitet (tema), osećaj mesta, lako za pamćenje, predvidljivost, navigacija


11

Dimenzije straniceDimenzije stranice

- kompjuterski ekran je obično manji od otvorene knjige,

•25


11

Grafički siguran prostorGrafički siguran prostor

- određen sa dva faktora: minimalna veličina ekrana i širina papira za štampanje,


11

Dužina straniceDužina stranice

- zahteva balansiranje sledećih faktora:

1. povezanost stranice sa veličinom ekrana,2. sadržaja web dokumenta, mali skrol u jako dugačkom

tekstu preskače mnogo teksta, dve visine ekrana najduži dokument pa repeticija navigacije,

3. želja korisnika da odmah pregleda, odštampa ili sačuva pa kasnije pogleda, u manje dokumente dve visine ekrana odnosno jedan kompletan za štampu/download.

4. propusna moć auditorijuma.

•26


11

Organizovanje (grid) sadržaja straniceOrganizovanje (grid) sadržaja stranice

- uspostaviti kičmu osnovnih blokova za sve stranice lokacije, mesto za tekst, ilustracije, (pod)naslove, navigaciju...


11

Stratifikacija web straniceStratifikacija web stranice

- uspostaviti dve oblasti stranice različitih namena,

•27


11

Headers & footersHeaders & footers

- efikasnost web stranice kao broj opcija u prva 4 inča,

HEDER – IDENTITET, grafički potpis, deskriptivni naslov i funkcionalnost kroz opcije

FUTER – POREKLO i vreme uz eventualno ponovljenu (scroll) navigaciju, linkovi ka ostalim srodnim lokacijama (ne EPP)


11

Cascading Style Sheets – CSSCascading Style Sheets – CSS

- HTML daje strukturalnu informaciju dok je CSS mehanizam za pozicioniranje elementa na strani,

- CSS postavlja margine, relativno pozicionira tekst i slike jedno ka drugom, skriva i prikazuje elemente, omogućava stack elements,

- CSS nije podržan, ili različito podržan, pretraživačima, - biti jednostavan i spreman prebaciti na tabele,

•28


11

CSS u praksiCSS u praksi


11

Tabele - osnovaTabele - osnova- jedini pouzdani mehanizam za:

- postavljanje dužine linije, min. zamaranje živca, 10tak reči,- postavljanje margine,- prikaz teksta u više kolona sa razmakom (prazna kolona,

CELLPADDING ili CELLSPACING tagovi)

•29


11

Tabele – mešanje poravnavanjaTabele – mešanje poravnavanja


11

Tabele – nabrajanja i bojenje tekstaTabele – nabrajanja i bojenje teksta

•30


11

Tabele – slaganje slika i teksta..Tabele – slaganje slika i teksta..


11

Tabele – slaganje slika i teksta...Tabele – slaganje slika i teksta...

•31


11

Tabele – fiksne ili promenljiveTabele – fiksne ili promenljive

- definisano u apsolutnim veličinama,

- stabilan prikaz bez obzira na rezoluciju i veličinu,

- fiksni položaj unutrašnjih elemenata održavanje tipografije,

- puno belog oko tabele (background graphics),

- primeri.

- relativno definisanje,- invarijantno u odnosu na

veličinu prikaza,- nepovoljna reogranizacija

prikaza unutrašnjih elemenata,

- primeri.


11

Fiksne tabele..Fiksne tabele..

•32


11

Fiksne tabele...Fiksne tabele...


11

Promenljive tabele..Promenljive tabele..

•33


11

Promenljive tabele...Promenljive tabele...


11

Okviri - osnovaOkviri - osnova

- meta-document koji obezbeđuje pozivanje i prikazivanje više HTML dokumenata u jednom prozoru pretraživača gde se svaki nezavisno može skrolovati,

- lako se podeli prozor na navigaciju i sadržaj koji se donosi linkom, opšte-detalji, primer,

- lako se održava – promena samo jednog HTML dokumenta a ne svih pri promeni navigacije,

- slaba podržanost od strane pretraživača,- pretraživač je često zbunjen prilikom štampanja sadržaja,- nekorektno funkcionisanje Forward i Back dugmića,- nemoguće postaviti njegov okvir na nulu.

•34


11

Okviri – primerOkviri – primer


11

Tipografija..Tipografija..

- veština štampanja,- verbalna i vizuelna komunikacija - jednačina koja pomaže čitaocima da razumeju formu i apsorbuju sadržaj stranice,

- osnovna briga je ČITKOST do koje se dolazi:

PORAVNAVANJEM- umetanjem razmaka ili rastavljanjem na slogove,- centrirano ili udesno je teško za čitati,- ulevo je uobičajeno sa nazubljenom desnom stranom,- potpuno poravnato je najbolje ali loše podržano na web-u,- naslovi ili centrirani ili ulevo,

•35


11

Tipografija...Tipografija...

PROREDOM- preveliki otežava čitanje a premali ga onemogućava,- barem 2pt veće od visine slova,UVLAČENJEM PASUSA- tabovima – klasično ili praznim redom - tehnika,

ŠIRINOM LINIJE- normalna udaljenost 3” širine, 365 piksela za 12pt Times,


11

Tipografija...Tipografija...

NAGLAŠAVANJEM- kurzivom (italic) u bloku teskta, malo jer je težak za čitati,- pojačano (bold) povećava kontrast,- podvučeno (underline) nasleđeno od pisaćih mašina,- obojeno ograničeno jer se ruši pristupačnost,

dvosmislenost,- sve velikim slovima, monotono,- prazne linije, naslovi ili uvećava kontrast važnih pasusa,

•36


11

O fontovimaO fontovima

- TimesRoman za suptraktivne a Georgia i Verdana za aditivne medije, Arial za naslove,

- veličina da bude čitljivo, varijabilne veličine za slabovide,- velika ili mala slova?

- antialiasing za fontove veće od 10pt


11

Dizajn sadržaja..Dizajn sadržaja..osnovna pravila dobrog dizajna sadržaja stranice:BITI SAŽET- do 50% materijala koji bi se štampao,- 25% teže E čitanje, mali prostor i rezolucija,- telegrafski ali ne preterati, verzija za download/štampu,TEKST KOJI SE LAKO PREGLEDA- princip obrnute piramide, korisnici čitaju prvu rečenicu,- sadržaj strukturirati u dva ili tri nivoa,- naslovi – jasno šta će dobiti, jednostavnog jezika, prva reč

nosi informaciju, svaki naslov započeti drugom rečju,- monotoni tekst razbiti nabrajanjima,- važne reči naglašavati (oprezno bojama i podvlačenjem),

•37


11

Dizajn sadržaja...Dizajn sadržaja...KORISTITI HIPERTEKST- semantički deliti tekst a ne linearno,- linkove staviti u kontekst teksta,- najvažniji linkovi u prva 4“,ZAPOSLITI WEB UREDNIKA- lektorisanje,- sažimanje teksta u jednostavne rečenice,NASLOV STRANICE- deskriptivan (firma, kratak info sažetak) u 60 karaktera,- prvo se vidi,- bookmark,- search spiders,

hci_e_skripta.pdf

Documents