esi hci 2015 skripta deo 1
DESCRIPTION
buTRANSCRIPT
1
Prof. dr Dragan Ivetić
INTERAKCIJA ČOVEK RAČUNAR
Primenjeno softversko inženjerstvo
ČETRNAESTA GENERACIJA STUDENATA
Novi Sad, 2015. godine
KOMPJUTERSKA GRAFIKA INTERAKCIJA i MULTIMEDIJA
Interakcija čovek računar - Uvod, skripta, Dr Dragan Ivetić, r. prof.
2
INTERAKCIJA ČOVEK RAČUNAR
2015/2016Prof. dr Dragan Ivetić
INTERAKCIJA ČOVEK RAČUNAR, E0243, 3 + 3Human-Computer Interaction - HCI
Dr Dragan Ivetić, redovni profesor
Jelica Kapetina, dipl. ing.
Departman za računarstvo i automatiku
Odsek za primenjene računarske nauke i informatiku
Katedra za primenjene računarske nauke
Grupa za računarsku grafiku, interakciju i multimediju
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)
INTERAKCIJA ČOVEK RAČUNAR
2015/2016Prof. dr Dragan Ivetić
O nastavniku
Dipl. ing. elek. - računarstvo i automatika, 1990, FTN,
Mr teh. nauka - formalizmi u SE, 1994, FTN,
Dr teh. nauka - integracija HCI i SE, 1999, FTN.
DAAD, RWTH Aachen – Primena multim. u industriji, 1997.
R. prof., FTN – elektrotehn. i računarstvo, 2010.
Grafički i multimedijalni sistemi, šk. 2001./2002.
Interakcija čovek računar, šk. 2002./2003.
Kompresija podataka, šk. 2005./2006.
Sistemi virtuelne realnosti, 2009./2010.
Razvoj računarskih igara, šk. 2013./2014.
Kabinet ?, TMD?, Fruškogorska 11, Novi Sad
(021) 485-2419?, 485-2424
http://gim.ftn.uns.ac.rs [email protected]
Interakcija čovek računar - Uvod, skripta, Dr Dragan Ivetić, r. prof.
3
INTERAKCIJA ČOVEK RAČUNAR
2015/2016Prof. dr Dragan Ivetić
Kako položiti predmet?
1. Predispitne obaveze, do 70 bodova:
vežbe (C# i WPF) – 50 bodova + deskriptor.
projekat (1:1, 1:2 ili 1:3), 3 checkpoints
predmetna studija (heuristike i GOMS-KLM testiranje) – 20 bodova,
2. Završni ispit (moguće 3 isključive varijante)
1. BEZ (vežbe>24 i studija >14) – 55..70
(krajem semestra potpisana saglasnost)
2. Multiple choice u ispitnom roku (8 .. 15)
(vežbe>24), mogući broj bodova – 55 .. 85
3. Usmeni 20 minuta (15.. 30), (krajem semestra saglasnost) – 55 .. 100
(vežbe>24), termini na GIMu tokom JAN FEB MART APR MAJ, 2 puta
Broj bodova Ocena
55 – 64 Šest
65 – 74 Sedam
75 – 84 Osam
85 – 94 Devet
95 - 100 Deset
Potpis se dobija bez uslova.
INTERAKCIJA ČOVEK RAČUNARProf. dr Dragan Ivetić
2015/2016
Interakcija – šta je to?
HCI je disciplina koja se odnosi na projektovanje, evalvaciju i implementaciju
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.
Interakcija čovek računar - Uvod, skripta, Dr Dragan Ivetić, r. prof.
4
INTERAKCIJA ČOVEK RAČUNARProf. dr Dragan Ivetić
2015/2016
Šta je korisnički interfejs?
a) Korisnički interfejs omogućava korisniku da “interact” sa programom.
b) Pomoću njega korisnik upošljava program kako bi završio svoj zadatak.
c) Korisnički interfejs omogućava korisniku da “interact” sa svojim zadatkom.
Korisnički interfejs ne sme da reflektuje
programske strukture (koda i podataka),
nego strukture domenskog zadatka i/ili
procesa rešavanja zadatka. Korisnici ne
bi trebali da “interact” sa kompjuterom,
nego sa svojim zadacima.
INTERAKCIJA ČOVEK RAČUNARProf. dr Dragan Ivetić
2015/2016
Multidisciplinarna priroda HCI
KOGNIT.
PSIHOL.
SOCOL.I ORGAN.
PSIHOL.ERGONOMIJA
INŽENJERING
DIZAJN
ANTROPOLOG.SOCIO
LOGIJA
FILOZOFIJA
LINGVISTIKA
VEŠT.INTELI.
RAČUN.NAUKE
Interakcija čovek računar - Uvod, skripta, Dr Dragan Ivetić, r. prof.
5
INTERAKCIJA ČOVEK RAČUNARProf. dr Dragan Ivetić
2015/2016
Šta treba izučavati u HCI kursu (kursevima)?
Da obavi funkciju (poznato!) i
look&feel, poveže obe STRANE!
po svim dizajnerskim
prostorima:
OS GUI
WEB
MOBILE
EMBEDDED
UBIQUITOUS
ČOVEK (društvo), ergonomija,
čula, pažnja, memorija,
rešavanje problema,
učenje i sticanje veštine,
Cyber Friend, GROUPWARE
Interakcioni uređaji, kako
rade da bi se bolje uposlili!
RADNO MESTO, OKRUŽENJE
INTERAKCIJA ČOVEK RAČUNARProf. dr Dragan Ivetić
2015/2016
Kako mi idemo?
1. O kursu
2. Uvodna razmatranja (korisnost v.s. upotrebljivost, KLM, informaciona
petlja, usability, heuristike, GOMS),
3. HCI događaji (odakle krenuo, gde smo sada i gde idemo),
4. Proces razvoja (UCD, kako spoznati zadatak, korisnika i kontekst
upotrebe, prototipovi),
5. Dizajniranje interfejsa različitih dizajnerskih prostora,
6. O čoveku (čula, memorija, proces učenja, sticanja veštine…),
7. Interkacioni uređaji (tastature, pointerski, monitori, Ecopy, Hcopy,
specijalne namene)
Interakcija čovek računar - Uvod, skripta, Dr Dragan Ivetić, r. prof.
6
INTERAKCIJA ČOVEK RAČUNARProf. dr Dragan Ivetić
2015/2016
Literatura
1. SKRIPTA (referentni materijal) ALI SA VAŠIM BELEŠKAMA/KOMENTARIMA
2. Alan Dix, Janet Finlay, Gregory Abowd, Russel Beale: Human-Computer Interaction, 3rd Ed., 2004.
3. Debbie Stone, Mark Woodroffe, Caroline Jarrett, Shailey Minocha: User Interface Design And Evaluation, 2005.
4. Ben Shneiderman: Designing the User Interface – Strategies for Effective Human-Computer Interaction, 3rd Ed., 1998.
2. Jenny Preece, Yvonne Rogers, Helen Sharp, David Benyon, Simon Holland, Tom Carey: Human-Computer Interaction, 1995.
3. Marry B. Rosson, John M. Carroll: Usability Engineering – Scenario-Based Development of HCI, 2002.
4. Dragan Ivetić: Formalna specifikacija korisničkog interfejsa interaktivnog grafičkog sistema, FTN, 1999.
INTERAKCIJA ČOVEK RAČUNARProf. dr Dragan Ivetić
2015/2016
ŠTA TREBA DA RADI DOBAR INTERFEJS?
Sve ono što korisnik očekuje.
Interakcija čovek računar - Uvod, skripta, Dr Dragan Ivetić, r. prof.
7
INTERAKCIJA ČOVEK RAČUNARProf. dr Dragan Ivetić
2015/2016
40te prošlog vekaUHF, VHF, jačina, sopran/bas, osvetljenje, kontrast, V i H sync, AFC…Gde se memorišu kanali?
INTERAKCIJA ČOVEK RAČUNARProf. dr Dragan Ivetić
2015/2016
MANJE JE BOLJE!!
Brže prebacivanje kanala - Userfriendly
Interakcija čovek računar - Uvod, skripta, Dr Dragan Ivetić, r. prof.
8
INTERAKCIJA ČOVEK RAČUNARProf. dr Dragan Ivetić
2015/2016
Pa smo se ulenjili – komfor fotelje!
INTERAKCIJA ČOVEK RAČUNARProf. dr Dragan Ivetić
2015/2016
Patologija?
Interakcija čovek računar - Uvod, skripta, Dr Dragan Ivetić, r. prof.
9
INTERAKCIJA ČOVEK RAČUNARProf. dr Dragan Ivetić
2015/2016
Došli pameti i pojednostavili!!!
INTERAKCIJA ČOVEK RAČUNARProf. dr Dragan Ivetić
2015/2016
Da nas vide naši stari kako mašemo TV aparatu…
Interakcija čovek računar - Uvod, skripta, Dr Dragan Ivetić, r. prof.
10
INTERAKCIJA ČOVEK RAČUNARProf. dr Dragan Ivetić
2015/2016
Svet oko nas ...
Interfon nove zgrade na Grbavici
novo bolje od starog?
Kako kvantitativno pokazati ko je za korisnika bolji?
INTERAKCIJA ČOVEK RAČUNARProf. dr Dragan Ivetić
2015/2016
... Svet oko nas ...KLM ...
• prediktivne teorije/modeli kao kvantitativni ukazatelj na bolje rešenje!
• na nivou motorike – Keystroke Level Modeling
Card, Moran, & Newell, "The keystroke-level model for user performance time with interactive systems” July 1980.
• pomoću narednih 5 operatora :
• Keying - 0,12s dobar (90 r/m); 0,28 srednji (40 r/m) ili 1,20 početnik,
• Button press - 0,10s (tj. 0,20s),
• Pointing – prosečno 1,10s, za tačno Fitts’s law,
• Homing - 0,36s,
• Mental preparation- 1,35s (odnosno 1,2s da bi za repeated pao na 0,95s),
• Respoding – vreme čekanja korisnika na reakciju sistema za neki unos,
• sračunava vreme potrebno za interakciju kao sumu elementarnih akcija koje
je potrebno načiniti,
• starosni multiplikatori ( 40–55 sa 1.4, 55–60 sa 1.7 i 65+ sa 2.2).
Interakcija čovek računar - Uvod, skripta, Dr Dragan Ivetić, r. prof.
11
INTERAKCIJA ČOVEK RAČUNARProf. dr Dragan Ivetić
2015/2016
... Svet oko nas ...... KLM
• operator R (> 0,1s zahteva feedback, 0,25s korisnik će ponoviti unos, >1s?),
• operator M izazovan za umetanje, pravila:
1. Postavi M pre svakog K i svakog P (samo za pointiranje na komandu, ali
ne i njene parametre),
2. Izbriši M ako je anticipirano u prethodnom operatoru (PMK → PK),
3. Izbriši M unutar kognitivne jedinice ( “Dragan⏎”→ MKKKKKK MK),
4. Izbriši M pre uzastopnih terminatora ( “Dr⏎ ⏎”→ MKK MK K),
5. Izbriši M koji je terminira komandu ( “del⏎”→ MKK K),
6. Izbriši preklapajuće M (R MK → R K),
Koji interfon obezbeđuje kraće čekanje pred zgradom?
Koliko vremena da naredim brisanje Rezultati.doc?
INTERAKCIJA ČOVEK RAČUNARProf. dr Dragan Ivetić
2015/2016
... Svet oko nas ...GOMS ...
• prediktivna teorija iz 1983. od Stuart Card, Thomas Moran i Allen Newell
(CMN-GOMS)
Goals – korisnikov cilj, šta namerava da obavi, ali i podcilj,
Operators – akcije koje se sprovode do (pod)cilja, mogu biti izražene na:
konceptualnom nivou – mentalni model i slike,
semantičkom nivou – nivo komandi (uneti PIN, ukucati PIN ili ...),
sintaksnom nivou – kada se prepoznaje struktura komande
(imenica-glagol, glagol-imenica, objekt-op...)
leksičkom nivou – nivo samog uređaja i korisnika, GOMS-KLM.
Methods – sekvenca operacija koje treba obaviti do cilja, moguće da postoji
više metoda koje vode istom cilju (kako zatvoriti prozor),
Selection_rules – (ako je potrebno) definišu koju metodu koristiti da se u
datom slučaju stigne do (pod)cilja,
Interakcija čovek računar - Uvod, skripta, Dr Dragan Ivetić, r. prof.
12
INTERAKCIJA ČOVEK RAČUNARProf. dr Dragan Ivetić
2015/2016
... Svet oko nas ...... GOMS ...
• ULAZ je detaljni opis (goal-directed) zadataka i UI, tako što
• odabere se glavni cilj (odštampati neki fajl),
• pisanje metode koja vodi ka cilju,
• ako ima podciljeva – piši metodu za svaki podcilj, rekurzija,
• stati kada se dostigne željeni apstraktni nivo operacije,
• evaluirati dati opis zadatka u željenom kontekstu (npr. perforansa, manji
mentalni napor i sl).
• IZLAZ različite kvalitativne i kvantitat. mere (zavisno od nivoa operatora) za
1.upoređivanje različitih UI rešenja,
2.profilisanje,
3.sensitivity & parametric analysis,
4.gradnju help sistema,
INTERAKCIJA ČOVEK RAČUNARProf. dr Dragan Ivetić
2015/2016
... Svet oko nas ...... GOMS ...
KLM-GOMS primer za brisanje nekog fajla,
GOAL: DELETE-FILE. GOAL: SELECT-FILE. . [select#: GOAL: KEYBOARD-TAB-METHOD. . GOAL: MOUSE-METHOD]. . VERIFY-SELECTION
. GOAL: ISSUE-DELETE-COMMAND
. . [select*: GOAL: KEYBOARD-DELETE-METHOD
. . . PRESS-DELETE
. . . GOAL: CONFIRM-DELETE
. . GOAL: DROP-DOWN-MENU-METHOD
. . . MOVE-MOUSE-OVER-FILE-ICON
. . . CLICK-RIGHT-MOUSE-BUTTON
. . . LOCATE-DELETE-COMMAND
. . . MOVE-MOUSE-TO-DELETE-COMMAND
. . . CLICK-LEFT-MOUSE-BUTTON
. . . GOAL: CONFIRM-DELETE
. . GOAL: DRAG-AND-DROP-METHOD
. . . MOVE-MOUSE-OVER-FILE-ICON
. . . PRESS-LEFT-MOUSE-BUTTON
. . . LOCATE-RECYCLING-BIN
. . . MOVE-MOUSE-TO-RECYCLING-BIN
. . . RELEASE-LEFT-MOUSE-BUTTON]#Selection rule for GOAL: SELECT-FILE
If hands are on keyboard, use KEYBOARD-TAB-METHOD,else use MOUSE-METHOD
*Selection rule for GOAL: ISSUE-DELETE-COMMANDIf hands are on keyboard, use KEYBOARD-DELETE-METHOD,
else if Recycle bin is visible, use DRAG-AND-DROP-METHOD,else use DROP-DOWN-MENU-METHOD
#Selection rule for GOAL: SELECT-FILE
If hands are on keyboard, use KEYBOARD-TAB-METHOD, else use MOUSE-METHOD
*Selection rule for GOAL: ISSUE-DELETE-COMMAND
If hands are on keyboard, use KEYBOARD-DELETE-METHOD,else if Recycle bin is visible, use DRAG-AND-DROP-METHOD,else use DROP-DOWN-MENU-METHOD.
Interakcija čovek računar - Uvod, skripta, Dr Dragan Ivetić, r. prof.
13
INTERAKCIJA ČOVEK RAČUNARProf. dr Dragan Ivetić
2015/2016
... Svet oko nas ...... GOMS ...
. . GOAL: DRAG-AND-DROP-METHOD
. . . MOVE-MOUSE-OVER-FILE-ICON
. . . PRESS-LEFT-MOUSE-BUTTON
. . . LOCATE-RECYCLING-BIN
. . . MOVE-MOUSE-TO-RECYCLING-BIN
. . . RELEASE-LEFT-MOUSE-BUTTON]
KLMDRAG-AND-DROP-METHOD = M+P + B + M+P + B = 1,35+1,1 + 0,1 + 1,35+1,1 + 0,1 = 5,1 s
KLMDROP-DOWN-MENU-METHOD = M+P + B+B + M+P + B+B + M+P+B+B = = 1,35+1,1 + 0,2 + 1,35+1,1 + 0,2 + 1,35+1,1 + 0,2 = = 7,95 s (6,6s)
KLMKEYBOARD-DELETE-METHOD = M+K + M+K = 1,35+0,2 + 1,35+0,2 = 3,1 s
INTERAKCIJA ČOVEK RAČUNARProf. dr Dragan Ivetić
2015/2016
... Svet oko nas ...... GOMS
• nije tako laka kao analiza prema heuristikama, smernicama i/ili koginitivnom
walkthrough,
• namenjen samo za goal-directed zadatke,
• pretpostavlja se da zadatke obavljaju vešti korisnici kojima je sve čitljivo,
ikone odlično osmišljene, veoma jasne komande ...
• ne uključuje socijalno-organizacioni uticaj,
• evidentan napor je potreban za inicijalni model, ali još uvek lakše od
testiranja sa korisnicima,
• GOMS poštuje reusability starijih modela.
Interakcija čovek računar - Uvod, skripta, Dr Dragan Ivetić, r. prof.
14
INTERAKCIJA ČOVEK RAČUNARProf. dr Dragan Ivetić
2015/2016
... Svet oko nas ...
1964. Interakcija kao informaciona petlja
RECEPTORI
EFEKTORI EFEKTORI EFEKTORI
RECEPTORI RECEPTORI
INTERAKCIJA ČOVEK RAČUNARProf. dr Dragan Ivetić
2015/2016
... Svet oko nas ...
RECEPTORI
EFEKTORI
?feedback
Interakcija čovek računar - Uvod, skripta, Dr Dragan Ivetić, r. prof.
15
INTERAKCIJA ČOVEK RAČUNARProf. dr Dragan Ivetić
2015/2016
... Svet oko nas ...
Topilo se jezgro reaktora
Some of the interface problems:• A light indicated that a valve had been closed when in fact it had not.• The light indicator was obscured by a caution tag attached to another valve controller.• The control room alarm system provided audible and visual indication for more than
1500 alarm conditions - to facilitate control of the entire plant during normal operating conditions.
• A single “acknowledge” button silenced all the alarms at the same time, but it was not used because the operators knew they would lose information ...
INTERAKCIJA ČOVEK RAČUNARProf. dr Dragan Ivetić
2015/2016
... Svet oko nas ...
Srušen putnički avion ... "We have determined that the Aegis radars and computers functioned correctly and that the misidentification of an Airbus airliner as an F-14 was due to human error induced by combat stress. ... The operator interpreted a display indicating the Airbus was at 12,000 feet and flying level as indicating it was at 7,500 feet and descending toward the ship ... However, we are looking at the user interface - what we show on the displays - there may be some room for improvement there, to make it even more user-friendly than it is now..."
Interakcija čovek računar - Uvod, skripta, Dr Dragan Ivetić, r. prof.
16
INTERAKCIJA ČOVEK RAČUNARProf. dr Dragan Ivetić
2015/2016
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 (ROZO) and Bogota (ROMEO) 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. 150 + 8 Greška pilota, ili ?
... Svet oko nas ...
Pilot srušio putnički avion
INTERAKCIJA ČOVEK RAČUNARProf. dr Dragan Ivetić
2015/2016
... Svet oko nas ...
Pogubna radioterapija Multidata Systems International Corp. softvera
8 pacijenata ubijeno a preko 20 teško povređeno u Nacionalnom Institutu
za Onkologiju Paname At the end of April 2001, a team of experts from M.D. Anderson Cancer Center, in Houston, Texas, United States of America, was invited to Panama by the ION’s director to investigate theproblem. Those experts determined that the algorithm used in the TPS software gave treatment times differing by a factor of about two, depending on how the data for the partially shieldedtreatment fields were entered into the computer program.
Interakcija čovek računar - Uvod, skripta, Dr Dragan Ivetić, r. prof.
17
INTERAKCIJA ČOVEK RAČUNARProf. dr Dragan Ivetić
2015/2016
... Svet oko nas
Don Norman – struje izvršenja i evaluacije, više okrenuo čoveku
FORMIRAJ
CILJ
Osmotri
stanje sistema
Interpretirajstanje sistema
Evaluiraj ishod
Izvrši
akciju(e)
Specifikujakciju(e)
Formirajintenciju
Gde su izvori grešaka u prethodnim
primerima sveta oko nas?
INTERAKCIJA ČOVEK RAČUNARProf. dr Dragan Ivetić
2015/2016
Kako utvrditi da će interfejs (element) prouzorovati probleme? ...
• Analizirati interfejs prema “zdravom razumu"• intuicija može otkriti očigledne propuste, zbunjujuću i
neefikasnu interakciju,• mnoge slabe tačke nisu “intuitivno prepoznatljive” bez
obzira na iskustvo.
• Razviti model "human cognitive processing“ koja bi predvidela probleme koje će korisnik imati kada koristi interfejs
• za sada samo parcijalni uspeh.
Interakcija čovek računar - Uvod, skripta, Dr Dragan Ivetić, r. prof.
18
INTERAKCIJA ČOVEK RAČUNARProf. dr Dragan Ivetić
2015/2016
... Kako utvrditi da će interfejs (element) prouzorovati probleme? ...
• Razviti teoriju neuronske korelacije HCI koncepata ('ease of use', 'usefulness'), pa pratiti neuronske aktivnosti test korisnika dok rade na datom interfejsu
• nova oblast istraživanja,• samo grubi rezultati (koji se odnose na ceo
interfejs, a nemoguća identifikuje loš widgets).
INTERAKCIJA ČOVEK RAČUNARProf. dr Dragan Ivetić
2015/2016
... Kako utvrditi da će interfejs (element) prouzorovati probleme?
• Testirati interfejs sa korisnicima (direktni, indirektni, eksperti) i identifikovati probleme bilo da su opservirani ili raportirani od strane korisnika
• grupe od 5-8 korisnika koji su već otkrivali probleme,• razviti smernice šta treba izbegavati,• Usability Engineering.
Kako projektanti interfejsa da odrede da interfejs (element) NEĆE PROUZROKOVATI PROBLEME?
Interakcija čovek računar - Uvod, skripta, Dr Dragan Ivetić, r. prof.
19
INTERAKCIJA ČOVEK RAČUNARProf. dr Dragan Ivetić
2015/2016
Nilsenova taksonomija prihvatljivosti sistema
Korisnost (usefulness)
Korisnost (utility)
http://www.nngroup.com/
Usability kao atribut prihvatljivosti sistema
PRIHVATLJIVOST
SISTEMA
System acceptability
SOCIOLOŠKA
PRIHVATLJIVOST
Social acceptability
PRAKTIČNA
PRIHVATLJIVOST
Practical acceptability
Cena (cost)
Performansa
Kompatibilnost
Pouzdanost
Upotrebljivost (usability)
Easy to learn
Effecient to use
Easy to remember
Few errors
Subject pleasing
INTERAKCIJA ČOVEK RAČUNARProf. dr Dragan Ivetić
2015/2016
Kada se ne misli o nazivu proizvoda
Chevrolet Nova, 1962
Za Špansko govorno područje kao Chevrolet Shevy
No va -> ne ide
Interakcija čovek računar - Uvod, skripta, Dr Dragan Ivetić, r. prof.
20
INTERAKCIJA ČOVEK RAČUNARProf. dr Dragan Ivetić
2015/2016
Usability obrazovanje
HCI akademski programi obrazuju mnoge različite profesionalce:
interaction designers,
user interface designers,
user interface developers,
usability engineers,
user experience designers,
Web designers,
Web developers,
human factors engineer,
technical communicators,
online information designers,
project managers,
…
INTERAKCIJA ČOVEK RAČUNARProf. dr Dragan Ivetić
2015/2016
Ekspertske revizije i testiranje usability ...
Metode ekspertske revizije:
EVALUACIJA PO HEURISTIKAMA (usability inspection)• odrediti slaganje sa listom projektantskih heuristika (npr. 8 zlatnih pravila), • 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.
INSPEKCIJA KONZISTENTNOSTI• konzistentnost između više interfejsa, materijala za obuku i sistema pomoći, • terminologija, boje, lejauti, ulazni i izlazni formati...
Interakcija čovek računar - Uvod, skripta, Dr Dragan Ivetić, r. prof.
21
INTERAKCIJA ČOVEK RAČUNARProf. dr Dragan Ivetić
2015/2016
... Ekspertske revizije i testiranje usability ...
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.
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.
INTERAKCIJA ČOVEK RAČUNARProf. dr Dragan Ivetić
2015/2016
... Ekspertske revizije i testiranje usability
IBM je lider i njegov kompleks usability labs na Floridi čine• 16 laboratorija kružno raspoređenih,• 3x3m prostor za subjekta i ogledalom odvojeni observeri,• simulacija uslova (buka, vreme, aero, temperatura, mirisi...),• sve moguće observacije (A, V, zdravstveni, motorika...).
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.
PREDNOSTI I MANE testiranja u usability labs?
Interakcija čovek računar - Uvod, skripta, Dr Dragan Ivetić, r. prof.
22
INTERAKCIJA ČOVEK RAČUNARProf. dr Dragan Ivetić
2015/2016
Smernice i heuristike
smernice platformi na različitim nivoima (opšte-dizajnerske do programerskih):
Microsoft User Interface Design Guidelineshttp://msdn.microsoft.com/en-us/library/jj651618(v=nav.71).aspx
Apple OS X Human Interface Guidelineshttps://developer.apple.com/library/mac/documentation/userexperience/conceptu
al/applehiguidelines/HIPrinciples/HIPrinciples.html
Adroid UI Overviewhttp://developer.android.com/guide/topics/ui/overview.html
cela kolekcija smernica za dizajniranjehttp://www.idemployee.id.tue.nl/g.w.m.rauterberg/lecturenotes/ui-guide-line-
collection.htm
a dalje detaljno o poznatim heuristikama...
INTERAKCIJA ČOVEK RAČUNARProf. dr Dragan Ivetić
2015/2016
Shneiderman-ovih osam zlatnih pravila ...
1. TEŽITI KONZISTENTOSTI – najčešće prekršeno, identična terminologija u svim elementima UI, konzistentne boje, lejeri, fontovi, kapitalizacija...
Interakcija čovek računar - Uvod, skripta, Dr Dragan Ivetić, r. prof.
23
INTERAKCIJA ČOVEK RAČUNARProf. dr Dragan Ivetić
2015/2016
... Shneiderman-ovih osam zlatnih pravila ...
2. OMOGUĆITI FREKVETNIJIM KORISNICIMA UPOTREBU PREČICA – veća brzina interakcije, skrivene komande i makroi.
INTERAKCIJA ČOVEK RAČUNARProf. dr Dragan Ivetić
2015/2016
... Shneiderman-ovih osam zlatnih pravila ...
3. DAVATI INFORMATIVNI FEEDBACK – za svaku akciju dati feedback, skromniji za frekventije akcije a značajniji za manje frekventne.
Interakcija čovek računar - Uvod, skripta, Dr Dragan Ivetić, r. prof.
24
INTERAKCIJA ČOVEK RAČUNARProf. dr Dragan Ivetić
2015/2016
... Shneiderman-ovih osam zlatnih pravila ...
4. PROJEKTOVATI DIJALOGE NAGLAŠENE ZATVORENOSTI – sekvence akcija grupisati da imaju početak i kraj, kao i sve korake do kraja (@kupovina).
INTERAKCIJA ČOVEK RAČUNARProf. dr Dragan Ivetić
2015/2016
... Shneiderman-ovih osam zlatnih pravila ...
5. PONUDITI PREVENCIJU I RUKOVANJE GREŠKOM – input line guard, ako pogreši tada jednostavna korekcija (samo što je loše a ne sve).
Interakcija čovek računar - Uvod, skripta, Dr Dragan Ivetić, r. prof.
25
INTERAKCIJA ČOVEK RAČUNARProf. dr Dragan Ivetić
2015/2016
... Shneiderman-ovih osam zlatnih pravila ...
6. DOZVOLITI PONIŠTAVANJE EFEKATA AKCIJE (UNDO) – veliko olakšanje kod početnika – sami istražuju.
INTERAKCIJA ČOVEK RAČUNARProf. dr Dragan Ivetić
2015/2016
... Shneiderman-ovih osam zlatnih pravila ...
7. INTERNO PODRŽAVATI KONTROLU – frekventni korisnici vole da imaju osećaj pune kontrole sistema, bez iznenađujućih akcija sistema, kreirati UI tako da se korisnici osećaju kao inicijatori aktivnosti a ne da ih slede...
Interakcija čovek računar - Uvod, skripta, Dr Dragan Ivetić, r. prof.
26
INTERAKCIJA ČOVEK RAČUNARProf. dr Dragan Ivetić
2015/2016
... Shneiderman-ovih osam zlatnih pravila ...
8. REDUKOVATI OPTEREĆENJE RADNE MEMORIJE – 7 � 2, jednostavan prikaz, konsolidovati višeprozorske prikaze, uvoditi skraćenice.
INTERAKCIJA ČOVEK RAČUNARProf. dr Dragan Ivetić
2015/2016
Nilsenovi principi ... http://www.nngroup.com
1. NALIKOVATI STVARNOSTI – koristiti uobičajenu terminologiju, koncepte i fraze za korisnika, informacije u prirodnom i logičkom redosledu.
2. KONZISTENTNOST I STANDARDI – Least Surprise princip – slične stvari izgledaju i delaju isto na interfejsu, imenica-glagol / glagol-imenica sintaksa interakcije, slediti standard platforme.
3. HELP i DOKUMENTACIJA – on / off line, zadatak-orijentisani help.
4. KORISNIKOVA KONTROLA I SLOBODA – obezbediti undo, dugačke operacije moraju biti prekidive (sa/bez nastavka), dijalog i cancel dugme.
5. VIDLJIV STATUS SISTEMA – korisnik uvek svestan stanja sistema (promena kursora, selekcija objekta, status bar...), BEZ PRETERIVANJA, vreme odgovora (<0.1s,
.1s – 1s, 1s – 10s sa , a za > 10s progress bar).
Interakcija čovek računar - Uvod, skripta, Dr Dragan Ivetić, r. prof.
27
INTERAKCIJA ČOVEK RAČUNARProf. dr Dragan Ivetić
2015/2016
... Nilsenovi principi ...
6. FLEKSIBILNOST i EFIKASNOST – kratice i ostala ubrzanja interakcije.
7. PREVENCIJA GREŠAKA, bez preterivanja.
8. PREPOZNAJ, NE DA SE PAMTI –štednja radne memorije korisnika.
9. PRIJAVA GREŠKE, DIJAGNOSTIKA, OPORAVAK – biti precizan, konstruktivan, ljubazan, bez blamiranja i tehničkih detalja.
We’re sorry, but we were unable to complete your call as dialed. Please hang up, check your number, or consult the operator for assistance.
ILLEGAL TELEPHONE NUMBER! CALL ABORTED! ERROR number 583-2R6.9.Consult your user manual for more information.
INTERAKCIJA ČOVEK RAČUNARProf. dr Dragan Ivetić
2015/2016
... Nilsenovi principi
10. ESTETIČAN i MINIMALISTIČKI DIZAJN – manje je više.
Interakcija čovek računar - Uvod, skripta, Dr Dragan Ivetić, r. prof.
28
INTERAKCIJA ČOVEK RAČUNARProf. dr Dragan Ivetić
2015/2016
Weinschenk-Barker klasifikacija
1. User Control: heuristics that check whether the user has enough control of the interface.2. Human Limitations: the design takes into account human limitations, cognitive and sensorial, to avoid overloading them.3. Modal Integrity: the interface uses the most suitable modality for each task: auditory, visual, or motor/kinesthetic.4. Accommodation: the design is adequate to fulfill the needs and behaviour of each targeted user group.5. Linguistic Clarity: the language used to communicate is efficient and adequate to the audience.6. Aesthetic Integrity: the design is visually attractive and tailored to appeal to the target population.7. Simplicity: the design will not use unnecessary complexity.8. Predictability: users will be able to form a mental model of how the system will behave in response to actions.9. Interpretation: there are codified rules that try to guess the user intentions and anticipate the actions needed.10. Accuracy: There are no errors, i.e. the result of user actions correspond to their goals.11. Technical Clarity: the concepts represented in the interface have the highest possible correspondence to the domain they are modeling.12. Flexibility: the design can be adjusted to the needs and behaviour of each particular user.13. Fulfillment: the user experience is adequate.14. Cultural Propriety: user's cultural and social expectations are met.15. Suitable Tempo: the pace at which users works with the system is adequate.16. Consistency: different parts of the system have the same style, so that there are no different ways to represent the same information or behavior.17. User Support: the design will support learning and provide the required assistance to usage.18. Precision: the steps and results of a task will be what the user wants.19. Forgiveness: the user will be able to recover to an adequate state after an error.20.Responsiveness: the interface provides enough feedback information about the system status and the task completion.
INTERAKCIJA ČOVEK RAČUNARProf. dr Dragan Ivetić
2015/2016
Sadržaj predmetne studije ...• Samostalna studija stanja HCI u komercijalnom sw/hw...
POSTUPAK • Definisati svoj profil, barem jedan kontakt!• Prijaviti jedinstvenu temu studije (proveriti iskoršitene teme na GIMu)
Evaluacija upotrebljivosti <softvera/sistema koji je predmetstudije> za <zadatak koji je klm-goms modelovan>
sa opisom do zakazanog datuma. Opis studije mora sadržati:• naziv softverskog/hardverskog proizvoda (koji se evaluira),• platformu (hw/sw) i verziju (pogotovo kod sw),• heuristika koja je upotrebljena pri evaluaciji,• zadatak KLM-GOMS koji se evaluira (eventualno link do web stranice).
• Sačekati da se tema prihvati pa pisanje studije, pokaži tok prihvatanja.• Upload pdf studije na gim sajt, do zakazanog datume!• Sačekati mišljenje (bodove) recezenta (eventualno dodati zahtevano).
Interakcija čovek računar - Uvod, skripta, Dr Dragan Ivetić, r. prof.
29
INTERAKCIJA ČOVEK RAČUNARProf. dr Dragan Ivetić
2015/2016
... Sadržaj predmetne studije ...
• Konstruktivna kritika...• ILUSTRACIJE (ekranske rezolucije) posmatranog interfejsa su dobrodošle!• Jednostavne i kratke rečenice, objašnjenje činjenice!!
Vaša studija mora imati naredna poglavlja:
1.PREDMET STUDIJE – kratak opis aplikacije/uređaja koja se analizira (do 2 strane A4 formata, Calibri, 11, single), za egzotične primere mora se obezbediti link/primerak sw/hw.
INTERAKCIJA ČOVEK RAČUNARProf. dr Dragan Ivetić
2015/2016
... Sadržaj predmetne studije ...
2. EVALUACIJA PO HEURISTIKAMA – odabrati jedan tip heuristike (ne objašnjavati je ako je poznata) i analizirati aplikaciju po svakoj stavci, npr.2.1 Težiti kozistentnosti
... opis rečima i slikom gde nije ispunjena ova heuristika...... ILI/I naglasiti gde je korektno ispunjena...
2.2, 2.3, ... barem da je detektovano mimoilaženje po 25% stavki.
3. PROCENA EFIKASNOSTI – ovde se sprovodi KLM-GOMS modelovanjeodabranog zadatka3.1 Opis zadatka za koji se modeluje
... zadatak mora imati barem 2 alternativna toka završetka tako da ukupan broj operacija KLM nivoa bude minimalno 25...
3.2 KLM-GOMS model zadatka... model zadatka iz 3.1 u formi naredne tabele...
Interakcija čovek računar - Uvod, skripta, Dr Dragan Ivetić, r. prof.
30
INTERAKCIJA ČOVEK RAČUNARProf. dr Dragan Ivetić
2015/2016
... Sadržaj predmetne studije
ZAKLJUČAK.
Rbr GOMS opis KLM
op
Vreme
op
Vreme
1
Vreme
2
Vreme
3
0 GOAL: DELETE-FILE
1 GOAL: SELECT-FILE
1.1 GOAL: KEYBOARD-TAB-METHOD 3,5 3,5
1.2 GOAL: MOUSE-METHOD 4,8 4,8
1 VERIFY-SELECTION M 1,35
Ukupno 1 4,85 6,15
2 GOAL: ISSUE-DELETE-COMMAND
2.1 GOAL: KEYBOARD-DELETE-METHOD
PRESS-DELETE
GOAL: CONFIRM-DELETE
M+K
M+K
1,55
1,55
3,1
2.2 GOAL: DROP-DOWN-MENU-METHOD
MOVE-MOUSE-OVER-FILE-ICON
CLICK-RIGHT-MOUSE-BUTTON
LOCATE-DELETE-COMMAND
MOVE-MOUSE-TO-DELETE-COMMAND
CLICK-LEFT-MOUSE-BUTTON
GOAL: CONFIRM-DELETE
M+P
B
M
P
B+B
MP2B
2,45
0,1
1,35
1,1
0,2
2,65
7,95
2.3 GOAL: DRAG-AND-DROP-METHOD
MOVE-MOUSE-OVER-FILE-ICON
PRESS-LEFT-MOUSE-BUTTON
LOCATE-RECYCLING-BIN
MOVE-MOUSE-TO-RECYCLING-BIN
RELEASE-LEFT-MOUSE-BUTTON
M+P
B
M
P
B
2,45
0,1
1,35
1,1
0,1
5,1
Ukupno sa 1.1 7,95 12,8 9,95
Ukupno sa 1.2 9,25 14,1 11,25
Interakcija čovek računar - HCI događaji, skripta, Dr Dragan Ivetić, r. prof.
31
INTERAKCIJA ČOVEK RAČUNAR
2013/2014Prof. dr Dragan Ivetić
HCI kroz događaje
INTERAKCIJA ČOVEK RAČUNAR
2013/2014Prof. dr Dragan Ivetić
Eniac (1943, 1946)
Interakcija čovek računar - HCI događaji, skripta, Dr Dragan Ivetić, r. prof.
32
INTERAKCIJA ČOVEK RAČUNAR
2013/2014Prof. dr Dragan Ivetić
Harvard Mark I – 1944. godine
INTERAKCIJA ČOVEK RAČUNAR
2013/2014Prof. dr Dragan Ivetić
IBM 305 RAMAC (1956)
IBM 305 – Processing unit
IBM 350 – Disk Storage unit
IBM 370 – Printer
IBM 323 – Card Punch
IBM 380 – Console (Card Reader and
IBM Electric typewriter)
BM 340 – Power Supply
Interakcija čovek računar - HCI događaji, skripta, Dr Dragan Ivetić, r. prof.
33
INTERAKCIJA ČOVEK RAČUNAR
2013/2014Prof. dr Dragan Ivetić
DEC PDP 1 kompjuter 1960.
INTERAKCIJA ČOVEK RAČUNAR
2013/2014Prof. dr Dragan Ivetić
Programiranje text interfejsa
Read-evaluation loop, odličan za učenje programskog jezika
repeat
read-event(input)
case input.type
type_1:
do type_1 processing
type_2:
do type_2 processing
...
type_n:
do type_n processing
end case
end repeat
• kada je naglasak aplikacije
na funkciji, ali ne i HCI,
• uglavnom mono-
korisničko/programsko,
Interakcija čovek računar - HCI događaji, skripta, Dr Dragan Ivetić, r. prof.
34
INTERAKCIJA ČOVEK RAČUNAR
2013/2014Prof. dr Dragan Ivetić
Ivan Sutherland’s SketchPad, 1962. PhD
• osmislio ideje/koncepte današnjih interfejsa:
• ikone: male sličice koje označavaju neki entitet,
• ulazne tehnike: efikasna upotreba svetlosnog pera,
• world coordinates: separacija ekranskih koordinata od koordinata
slike,
• objektna orijentacija,
• ali i napretke u hardveru:
– “low-cost” grafičke terminale,
– ulazni uređaj - data tablets (1964),
– display procesor sposoban za
real-time manipulaciju slikom (1968).
INTERAKCIJA ČOVEK RAČUNAR
2013/2014Prof. dr Dragan Ivetić
oNLine System, D. Engelbart, 1968.
• Document Processing,– savremeni word processing,– hypermedia.
• Input / Output,– miš i stenografska tastatura,– prikazi visoke rezolucije,– višestruki prozori,– “kompjuterski” nameštaj.
• Shared work,– deljeni fajlovi i personal annotations,– razmena elektronske pošte,– deljeni prikazi sa više pointera,– AV konferencije,– ideja Interneta.
• User testing & training.
Interakcija čovek računar - HCI događaji, skripta, Dr Dragan Ivetić, r. prof.
35
INTERAKCIJA ČOVEK RAČUNAR
2013/2014Prof. dr Dragan Ivetić
Ideja personalnog kompjutera Alan Kay (1969), tvorac “simbioze čoveka i računara”,
– Dynabook vizija notebook kompjutera:
“Imagine having your own self-contained knowledge
manipulator in a portable package the size and shape of an
ordinary notebook. Suppose it had enough power to out-
race your senses of sight and hearing, enough capacity to
store for later retrieval thousands of page-equivalents of
reference materials, poems, letters, recipes, records,
drawings, animations, musical scores...”
Xerox PARC, sredina 1970.
– Alto computer – personalna radna stanica,
• lokalni CPU, bit-mapped display, miš,
• moderan GUI,
• windows, menus, scroll bars, mouse selection, etc
• LAN (Ethernet) i E-mail.
INTERAKCIJA ČOVEK RAČUNAR
2013/2014Prof. dr Dragan Ivetić
Schneiderman : “Direct Manipulation!” (1983)
objasnio je osnovne ideje korisnikove kontrole:
1. vidljivost objekata i akcija,
2. brze, reverzibilne i inkrementalne akcije,
3. zamena kompleksne command-line sintakse direktnom,
vizuelnom manipulacijom objektima od interesa.
Interakcija čovek računar - HCI događaji, skripta, Dr Dragan Ivetić, r. prof.
36
INTERAKCIJA ČOVEK RAČUNAR
2013/2014Prof. dr Dragan Ivetić
Komercijala, Xerox Star, 1981.• prvi komercijalni PC razvijen za “business professionals”,
• savremeni GUI zasnovan na idejama Xerox PARC:
– čoveku familijaran koncept radne površine (desktop),
– koristi “pokaži i pritisni” a ne “pamti i ukucaj”,
– property prostor za definisanje izgleda i ponašanja,
– what you see is what you get (WYSIWYG).
• prvi sistem razvijen pomoću usability engineering– intenzivan low-fidlity prototyping & usage analysis,– usability testing sa potencijalnim korisnicima,– iterative refinement interfejsa.
• komercijalna propast– cena ($15,000), IBM najavio jeftiniju mašinu,– ograničena funkcionalnost, nema spreadsheet,– zatvorena arhitektura, nema 3rd party vendors,– prikazan kao spor, mada je bio poprilično brz,– tvrdoglavo pridržavanje direktnoj manipulaciji.
INTERAKCIJA ČOVEK RAČUNAR
2013/2014Prof. dr Dragan Ivetić
Komercijala, Apple Lisa, 1983.• zasnovana na Star idejama,
– predhodnik Macintosh-a, 1984. godine
– nešto jeftinija (10,000 $),
– komercijalno propala.
• IBM PC XT sa tekstualnim
MS DOS, 1983.,
• nastavak je poznat ...
Interakcija čovek računar - HCI događaji, skripta, Dr Dragan Ivetić, r. prof.
37
INTERAKCIJA ČOVEK RAČUNAR
2013/2014Prof. dr Dragan Ivetić
WIMP programiranje...icons
window
dialogue
desktop
taskbar
pointer
pop-up menu
pull-down menu
toolbar
toolbox
menubar
INTERAKCIJA ČOVEK RAČUNAR
2013/2014Prof. dr Dragan Ivetić
... WIMP programiranje...
• razvijamo adresar aplikaciju sa modalnim dijalogom (+error prevention, -
user control, - visibility, -short term memory),
• pa dugme Izmeni treba da se prikaže
forma za ažuriranje podataka o
selektovanom kontaktu,
• gde u proizvoljnom redosledu menja sadržaje i da klikne gdegod,
• Koliko je moguće rešiti po pragmi programiranja txt interfejsa?
Interakcija čovek računar - HCI događaji, skripta, Dr Dragan Ivetić, r. prof.
38
INTERAKCIJA ČOVEK RAČUNAR
2013/2014Prof. dr Dragan Ivetić
... WIMP programiranje...
• obrada događa na više regiona jednog prozora (html) po view hijerarhiji,
IzmenaKont: window
Kontakt : Panel Dugmici:
Toolbar
Da: Button
Ne: Button
ImePrezL: Label
EmailAdL: Label
EmailAdE: TextBox
ImePrezE: TextBox
svaki view u hijerarhiji dobija
svog listiner,
UI je strukturiran kao hijerarhija izlaznih
views sa prikačenim listiners ulaza,
INTERAKCIJA ČOVEK RAČUNAR
2013/2014Prof. dr Dragan Ivetić
... WIMP programiranje...
event loop
programska logika
• nestala linearnost u interakciji sa korisnikom: main() -> f-ja -> main() -> ...,
• složenost zadataka zahteva punu slobodu interakcije i brzinu reakcije,
• stoga bolja organizacija softvera – podela posla...
Interakcija čovek računar - HCI događaji, skripta, Dr Dragan Ivetić, r. prof.
39
INTERAKCIJA ČOVEK RAČUNAR
2013/2014Prof. dr Dragan Ivetić
... WIMP programiranje...
Seeheim velike komponente, ali u OOP je bolje sa manjim komponentama,
Smalltalk uveo manju UIMS arhitekturnu komponentu MVC:
model – interno (logičko) stanje komponente,
view – kako se prikazuje na ekranu,
controller – obrada ulaza od korisnika.
MVC se uglavnom ponaša kao pipeline
ulaz → controller → model → view → izlaz.
Kada se ne ponaša baš kao pipeline?
notifikacija
POGLED MODEL
KONTR
OLER
pristup podacima
gestovi i događaji
promena podataka
Slika 1.9 Model-View-Controller trijada
Kod GUI, ulaz ima smisla samo u korelaciji sa izlazom!
npr. kod klika – mora se znati šta je kliknuto, kontroler mora odlučiti šta da radi sa
klikom ali pogled zna gde je šta prikazano!
kontrola “priča” sa pogledom – SEPARACIJA NIJE BAŠ KOMPLETNA
INTERAKCIJA ČOVEK RAČUNAR
2013/2014Prof. dr Dragan Ivetić
... WIMP programiranje...
GUI ruši ulogu kontrolera u MVC, jer su izlaz i ulaz tesno povezani na OS !
IBM je uvrnuo MVC spajajući V i C u V, a uvodi Presenter u MVP:
model – podaci koji su od interesa za UI (prikazuju se ili kontrolišu),
view – obrada/ažuriranje ulaza i izlaza, rutira događaje ka prezenteru i
to potpuno pasivno (svaki event ka prezenteru) ili pak malo
šire zavisno ko je zadužen za tu interakciju, događaj ili
komandu,
presenter – middle-man, podatke iz modela formatira i šalje view.
.NET podržava MVP tako da jedna
Model-Presenter klasa može
podržati više interfejsa (ASP.NET
Web, Windows Forms ili SilverLight
aplikaciju)!
notifikacija
POGLED PREZEN-
TER
MODEL
pristup podacima
gestovi
pristup podacima
Slika 1.10 Model-View -Presenter trijada
prikaz
Interakcija čovek računar - HCI događaji, skripta, Dr Dragan Ivetić, r. prof.
40
INTERAKCIJA ČOVEK RAČUNAR
2013/2014Prof. dr Dragan Ivetić
... WIMP programiranje
MS da bi svoj UIDE (HTML5, WPF,
SilverLight) približio svim
korisnicima, na osnovu MVC
uvodi
Model View ViewModel
gde je ViewModel konvertor
podataka iz Model-a u View oblik
lak za upotrebu bez kodiranja
(čak i za Interaction Designers
pomoću XAML) .
“View of the Model” obezbeđuje
da View bude samo data
bindings.
XAML
C#
INTERAKCIJA ČOVEK RAČUNAR
2013/2014Prof. dr Dragan Ivetić
Jacob: “nonWIMP - RealityBased Interaction” (1997)
WIMP (GUI)
1. serijska interakcija,
2. diskretna interakcija,
3. token-based.
nonWIMP
1. paralelna interakcija,
2. kontinualna interakcija,
3. multi-mode,
Kako programirati?.
Interakcija čovek računar - HCI događaji, skripta, Dr Dragan Ivetić, r. prof.
41
INTERAKCIJA ČOVEK RAČUNAR
2013/2014Prof. dr Dragan Ivetić
Mark Weiser "ubiquitous computing“ Xerox PARC
pervasive computing, ambient intelligence, a odnedavno everyware
INTERAKCIJA ČOVEK RAČUNAR
2013/2014Prof. dr Dragan Ivetić
Computers in the Human Interaction Loop
Interakcija čovek računar - HCI događaji, skripta, Dr Dragan Ivetić, r. prof.
42
INTERAKCIJA ČOVEK RAČUNAR
2013/2014Prof. dr Dragan Ivetić
Fraunhofer: Cooperating Objects
Interakcija čovek računar – Proces razvoja, skripta, Dr Dragan Ivetić, r. prof.
43
INTERAKCIJA ČOVEK RAČUNAR
2013/2014Prof. dr Dragan Ivetić
Proces razvoja interaktivnog sitema ...
Moore’s law, 1965. godine
1950 1990 2030
mogućnostiračunara
(transistors,CPU,
speed, cost...)
INTERAKCIJA ČOVEK RAČUNAR
2013/2014Prof. dr Dragan Ivetić
... Proces razvoja interaktivnog sitema ...
Buxton’s law, 2000. godine
1950 1990 2030
ponuđena/raspoloživa
funkcionalnostod tehnologije
Interakcija čovek računar – Proces razvoja, skripta, Dr Dragan Ivetić, r. prof.
44
INTERAKCIJA ČOVEK RAČUNAR
2013/2014Prof. dr Dragan Ivetić
... Proces razvoja interaktivnog sitema ...
God’s law
1950 1990 2030
ljudskikapacitet
system centered design
user centered design
INTERAKCIJA ČOVEK RAČUNAR
2013/2014Prof. dr Dragan Ivetić
... Proces razvoja interaktivnog sitema ...
System centered design:
• Šta se može izgraditi na
ovoj platformi?
• Šta se može kreirati
pomoću poznatih alata?
• Šta ja kao programer
smatram interesantnim?
Interakcija čovek računar – Proces razvoja, skripta, Dr Dragan Ivetić, r. prof.
45
INTERAKCIJA ČOVEK RAČUNAR
2013/2014Prof. dr Dragan Ivetić
... Proces razvoja interaktivnog sitema
User centered design se fokusira na:
• stakeholders,
• posao/zadatke, i
• kontekst upotrebe.
Oslanja se na:
• model korisnika i zadatka,
• kontekst,
• inkluzivni razvoj,
• prototip,
• design for all.
INTERAKCIJA ČOVEK RAČUNARProf. dr Dragan Ivetić
Formiranje zahteva ...
traže se odgovori na naredna pitanja:ŠTA: što bolje razumeti korisnike, zadatke i kontekst upotrebe kako bi se
proizveo stabilni skup zahteva.KAKO: što više načina bolje ukazuju!ZAŠTO: Requirements Engineering je faza razvoja u kojoj su
najčešće greške koje su i najskuplje.
0
20
40
60
80
100
120
140
160
180
200
requirements design coding testing maintenance
Interakcija čovek računar – Proces razvoja, skripta, Dr Dragan Ivetić, r. prof.
46
INTERAKCIJA ČOVEK RAČUNARProf. dr Dragan Ivetić
... Formiranje zahteva
SAKUPLJANJE PODATAKAdata gatheringkorisnik, zadatak, kontekst
ANALIZA PODATAKAdata analysiskorisnik, zadatak, kontekst
ODREĐIVANJE ZAHTEVARequirements determinationkorisnik, zadatak, kontekst
INTERAKCIJA ČOVEK RAČUNARProf. dr Dragan Ivetić
Tehnike za sakupljanje podataka ...
Sakupiti dovoljno relevantnih podataka kako bi se uspostavili zahtevi (ali i za evaluaciju).
Ključno:•postaviti ciljeve (lakša odluka kako analizirati sakupljene podatke),•odnos sa korisnicima (jasno i profesionalno, uvek prvo informisani),•triangulacija (koristiti više pristupa/tehnika),•pilot studije.
Kako zabeležiti podatke?•pisanjem (sporo, jeftino),•audio (jeftino, kako one koji ne ostavljaju audio trag),•video (tačno, potrebna oprema, korisnici postaju glumci),•kompjuterski loging (automatski, nenametljivo?, kako analizirati velike količine podataka - uspostaviti korelacije).
Interakcija čovek računar – Proces razvoja, skripta, Dr Dragan Ivetić, r. prof.
47
INTERAKCIJA ČOVEK RAČUNARProf. dr Dragan Ivetić
... Tehnike za sakupljanje podataka ...
1. ANKETE
•serije pitanja kojima se želi izmamiti specifična informacija (kvantitativna ili kvalitativna),•odgovori: zatvoreni (yes/no, markiranje ponuđenog/ih odgovora),
otvoreni odgovor,koji su bolji?
•često je u konjunkciji sa drugim tehnikama,•odlična sa davanje odgovora na specifično pitanje od strane ogromne grupe ljudi,•obično nije potrebna osoba da rastumači pitanje ili pomogne u odgovaranju,•papirno i elektronsko (Email, web) anketiranje,
• koje je bolje? Zašto?
INTERAKCIJA ČOVEK RAČUNARProf. dr Dragan Ivetić
... Tehnike za sakupljanje podataka ...
Kako dizajnirati upitnik? •prvonavedeno pitanje ima veći uticaj od narednih pitanja,•različite verzije upitnika za određene populacije (skraćeni za “sa nogu”, duže sa penzionere),•jasne instrukcije o popunjavanju,•kratko i jasno, bez pitanja u pitanju i sl...•odlučiti koje fraze da budu pozitivne, koje negativne...Tipovi pitanja:•Yes/no za jedno(stavno) mišljenje,•checkboxes za više mišljenja/stavova,•semantički diferentni,•Likertova skala (3, 5, 7 ili 9 stepena),•sa otvorenim odgovorom.
Interakcija čovek računar – Proces razvoja, skripta, Dr Dragan Ivetić, r. prof.
48
INTERAKCIJA ČOVEK RAČUNARProf. dr Dragan Ivetić
... Tehnike za sakupljanje podataka ...
2. INTERVJUrazgovor sa ljudima: licem u lice, telefonom, tele...,•uključuje postavljanje skupa pitanja:
• nestrukturirana – nema scenarija, bogato ali nisu opšteprimenljiva,• strukturirana – čvrst scenarijo (često kao lista pitanja),
opšteprimenljiva ali nije tako bogata,• semistrukturirana – rukovođen scenarijem, ali interesantna pitanja
ispitivati u dubinu, dobar balans opšteprimenljivosti i bogatstva, •dobar za istraživanje po nekom pitanju (stavki),•vremenski zahtevno i neizvodljivo da se čitava populacija poseti,•rekviziti (prototip, scenarijo) za pokretanje sagovornika.•koraci:
• introduction, warm-up,• main body,• cool-off period, closure.
INTERAKCIJA ČOVEK RAČUNARProf. dr Dragan Ivetić
... Tehnike za sakupljanje podataka ...
3. INTERVJU GRUPE
•sakupiti grupu stakeholders-a za diskusiju,•često ovu grupu nazivaju: focus group i workshop,•dobar za dostizanje konsenzusnog stava i/ili isticanja oblasti konflikta i neslaganja,•tipično 3 – 10 učesnika,•obezbediti (podsticati) širok spektar mišljenja,•mora biti obezbeđeno:
• da svako da svoj doprinos,• diskusijom ne sme dominirati jedna osoba,• mora se proći kompletan dnevni red tema.
Interakcija čovek računar – Proces razvoja, skripta, Dr Dragan Ivetić, r. prof.
49
INTERAKCIJA ČOVEK RAČUNARProf. dr Dragan Ivetić
... Tehnike za sakupljanje podataka ...
• provesti vreme sa stakeholders-ima na svakodnevnim zadacima, opservirajući posao kako se on odvija u svom prirodnom okruženju,
• odličan za razumevanje prirode i konteksta zadatka i korisnika,• zahteva od razvojnog tima dosta vremena i posvećenosti,• može rezultovati ogromne količine podataka,• može biti pasivna (slušanje i gledanje) ili aktivna (postavljaju se pitanja),• može uključiti AV snimanje, kompjuterski log i proučavanje dokumenata.
4. DIREKTNA ILI INDIREKTNA OPSERVACIJA
jer korisnici teško objašnjavaju šta rade ili tačno opisuju
kako su obavili zadatak,
INTERAKCIJA ČOVEK RAČUNARProf. dr Dragan Ivetić
... Tehnike za sakupljanje podataka
5. PROUČAVANJE DOKUMENTACIJE• uključuje uputstva, regulative, poslovnike, i slično,• dobro za shvatanje zakona (standarda) i sticanje
osnovnih informacija o radu,• odličan izvor podataka o koracima svake aktivnosti, i
propisa koji regulišu zadatak,• ne koristi se u izolaciji (npr. korisnici možda ne prate
dokumenta tačno),• velika prednost u odnosu na druge tehnike jer ne
zahteva vreme stakeholders-a.
6. PROUČAVANJE SLIČNIH PROIZVODA• od velike pomoći za generisanje dizajnerskih alternativa i
prompt requirements.
Interakcija čovek računar – Proces razvoja, skripta, Dr Dragan Ivetić, r. prof.
50
INTERAKCIJA ČOVEK RAČUNARProf. dr Dragan Ivetić
Interpretacija i analiza podataka
• interpretacija: struktura i zapis opisa zahteva iz sakupljenih podataka,• analiza: dobijanja zahteva iz interpretiranih podataka,
• inicijalna interpretacija pre dublje analize,
• dobro je pokrenuti interpretaciju odmah posle sakupljanja podataka, jer je iskustvo sveže,
• više interpretacije i analize → dublje razumevanje zahteva → opis zahteva biće proširen i razjašnjen.
INTERAKCIJA ČOVEK RAČUNARProf. dr Dragan Ivetić
Dokument zahtevaobično
vol. 1 – ARHITEKTONSKI ZAHTEVIopisuje potrebnu arhitekturu sistema
vol. 2 – FUNKCIONALNI ZAHTEVIfunkcionalnost koja se mora izvršavati
vol. 3 – NEFUNKCIONALNI ZAHTEVIk-ke sistema na koje korisnik ne može uticati
vol. 4 – ZAHTEVI OGRANIČENJAuspostavlja marginu rada sistema po svakoj putanji
Interakcija čovek računar – Proces razvoja, skripta, Dr Dragan Ivetić, r. prof.
51
INTERAKCIJA ČOVEK RAČUNARProf. dr Dragan Ivetić
Spoznavanje korisnika ...
saznati ko su korisnici, ali i stakeholders:
• opisati korisnike kroz njihove karakteristike relevantne za UI
(starost, pol, kulturno nasleđe, fizičke sposobnosti, obrazovanje,
IT/kompjuter iskustvo, motivacija, stav...),
• projektovati UI za “impaired”, 15-35% populacije,
• profilisanje korisnika – opisati korisnike i njihove karakteristike,
- što je manja grupa korisnika, laške je projektovati UI, zašto?
- šta kada ima puno potencijalnih korisnika:
prototipiziranje korisnika - personas,
dan u koži korisnika.
INTERAKCIJA ČOVEK RAČUNARProf. dr Dragan Ivetić
... Spoznavanje korisnika ...
Emotional Design: Why we love (or hate) everyday things by Dr. Donald
Norman (2003):
So, in Emotional Design, I don’t give rules. The rules and practical advice are
in Chapter 8. Unfortinately, rigth now, the book only has seven chapters.
Uveo je ideju da dizajn proizvoda mora biti posvećen trojki nivoa kognitivnog
i emotivnog procesiranja:
1.Visceralna (visceral).
2.Bihejvioralna (behavioral).
3.Refleksiona (reflective).
Interakcija čovek računar – Proces razvoja, skripta, Dr Dragan Ivetić, r. prof.
52
INTERAKCIJA ČOVEK RAČUNARProf. dr Dragan Ivetić
... Spoznavanje korisnika ...1.Visceralna obrada – pre-wired nivo,
• najneposrednija odmah po prijemu nadražaja, na pojavu proizvoda,
• brza (pre interakcije) odluka šta je dobro, loše, bezbedno ili opasno,
• nema razmišljanja, “ja hoću to” pre “koliko košta?”, tj. “šta to radi?”.
2.Bihejvioralna obrada –nivo koji upravlja svakodnevnim ponašanjem,
• tradicionalno HCI je pre svega usmeren ovde,
• tiče se zadovoljstva i efektivnosti upotrebe proizvoda,
• na iskustvo (funkcija, performansa, upotrebljivost) sa proizvodom.
3.Refleksiono (reflective) – kontemplativni nivo,
• podrazumeva svesno razmatranje i razmišljanje o iskustvu,
• ona može poboljšati ili usporiti prethodni nivo obrade,
• ali nema pristupa visceralnoj obradi,
• bez direktne interakcije, samo preko memorije.
INTERAKCIJA ČOVEK RAČUNARProf. dr Dragan Ivetić
... Spoznavanje korisnika ...
Nekoliko saveta
• “To the practitioner of human centered design, serving customers means
• relieving them of frustration, of confusion, of a sense of helplessness,
• make them feel in control and empowered.” D. Norman
• “If you want a successful product, test and revise. If you want a great
product, one that can change the world, let it be driven by someone with a
clear vision. The latter presents more financial risk, but it is the only path to
greatness.” D. Norman
• “The customer rarely buys what the company is selling him.” Peter Drucker
• “It’s really hard to design products by focus groups. A lot of times, people
don’t know what they want until you show it to them” Steve Jobs
Interakcija čovek računar – Proces razvoja, skripta, Dr Dragan Ivetić, r. prof.
53
INTERAKCIJA ČOVEK RAČUNARProf. dr Dragan Ivetić
... Spoznavanje korisnika ...
Modelling Users using Personas
• promovisan od Alan Cooper kao deo Goal – Centered (Directed) design,
www.interactionbydesign.com/presentations/olsen_persona_toolkit.pdf
• personas su arhetipovi konstruisani prema bihejvioralnim podacima koji su
sakupljeni tokom intervjua i/ili opservacija...
• personas imaju realna imena, likovi i personalizacija kako bi izazvali
simpatije članova razvojnog tima,
• mogu biti upotrebljeni i za docniju evaluaciju interaktivnog proizvoda,
• kritična osobina personas je hvatanje samo tipičnog korisnikovog ponašanja
i uloga.
INTERAKCIJA ČOVEK RAČUNARProf. dr Dragan Ivetić
... Spoznavanje korisnika ...Sony Trans Com – Goal Directed Design ...
Interakcija čovek računar – Proces razvoja, skripta, Dr Dragan Ivetić, r. prof.
54
INTERAKCIJA ČOVEK RAČUNARProf. dr Dragan Ivetić
... Spoznavanje korisnika ...... Sony Trans Com – Goal Directed Design ...
Sa početnih 30, sveli na 10, pa na sledeće 4 personas:
1. Chuck Burgermeister , business traveler . A 100,000-mile-club member who flew somewhere practically every week. Chuck's vast experience with flying meant that he had little tolerance for complex, time-consuming interfaces, or interfaces that condescend to novices.
2. Ethan Scott , 9-year-old boy. He was travelling unescorted for the first time. Ethan wanted to play games, games, and more games.
3. Marie Dubois, bilingual business traveler. English was her second language. She liked to browse the shopping, as well as the entertainment selections.
4. Clevis McCloud, crotchety septuagenarian. An aging but still spry Texan, slightly embarrassed about the touch of arthritis in his hands. He was the only one of the four passenger personas who didn't own a computer or know how to use one.
INTERAKCIJA ČOVEK RAČUNARProf. dr Dragan Ivetić
... Spoznavanje korisnika ...... Sony Trans Com – Goal Directed Design
Interakcija čovek računar – Proces razvoja, skripta, Dr Dragan Ivetić, r. prof.
55
INTERAKCIJA ČOVEK RAČUNARProf. dr Dragan Ivetić
... Spoznavanje korisnika ...Jeff Hawkins - the Palm Pilot ...
Palm-To-Palm Combat, TIME, Mar. 16, 1998
... Palm grabbed an early lead because the power junkies in Silicon Valley
couldn't believe users would want a computer with less, not more. President
and co-founder Donna Dubinsky spent 18 fruitless months trying to convince
venture capitalists and potential manufacturers that the key to selling
handheld computers was simplifying them, not adding features. "Time after
time, I'd go into meetings, and they'd say, 'You can't do a device like this
without a PC card slot or a spreadsheet or whatever,'" she recalls. "But
where was the evidence? It's very, very hard to go against the crowd.“
INTERAKCIJA ČOVEK RAČUNARProf. dr Dragan Ivetić
... Jeff Hawkins - the Palm Pilot ...
... Fortunately, she had Jeff Hawkins to back her up. Hawkins, 40, Palm's chief
technologist and Pilot's creator, designed one of the first handheld
computers, the GRiDPad, a decade ago. It was an engineering marvel but a
market failure because, he says, it was still too big. Determined not to make
the same mistake twice, he had a ready answer when his colleagues asked
him how small their new device should be: "Let's try the shirt pocket.“...
Interakcija čovek računar – Proces razvoja, skripta, Dr Dragan Ivetić, r. prof.
56
INTERAKCIJA ČOVEK RAČUNARProf. dr Dragan Ivetić
... Jeff Hawkins - the Palm Pilot
.... Retreating to his garage, he cut a block of wood to fit his shirt pocket.
Then he carried it around for months, pretending it was a computer. Was he
free for lunch on Wednesday? Hawkins would haul out the block and tap on
it as if he were checking his schedule. If he needed a phone number, he
would pretend to look it up on the wood. Occasionally he would try out
different design faces with various button configurations, using paper
printouts glued to the block. ...
INTERAKCIJA ČOVEK RAČUNARProf. dr Dragan Ivetić
Spoznavanje zadataka i posla ...
Opisati korisnikov posao kroz
1. CILJ (goal) – krajnji rezultat koji se želi dostići, više sekvenci zadataka,
2. ZADATAK (task) – strukturirani skup odgovarajućih aktivnosti koje se sprovode u nekoj (od više mogućih) sekvenci,
karakteristike zadatka:
različitost, frekvencija zadataka
zahtevano znanje i veština
faktori okruženja
vremenska kritičnost
samostalan ili grupni rad
korisnik normalno se prebacuje sa zadatka na zadatak
3. AKCIJA (action) – individualna operacija ili korak koji se mora obaviti kao deo zadatka.
Interakcija čovek računar – Proces razvoja, skripta, Dr Dragan Ivetić, r. prof.
57
INTERAKCIJA ČOVEK RAČUNARProf. dr Dragan Ivetić
... Spoznavanje zadataka i posla ...
Tehnike za analizu zadataka,
– samo opis koraka kojima se rešava zadatak - “How to Do It”
• scenariji – narativni opis zadatka (priča, navodi, pseudo kod),
• use cases – nepersonalni, apstraktniji opis, često u obliku tabele,
– essetial use cases – najviši nivo apstrakcije,
– opis i znanja koje korisnik ima (ili treba da ima) da bi rešio zadatak -kognitivna analiza zadataka, sa scenarija i use cases u kognitivnu analizu
• eXtended User Action Notation, prati obe strane na najnižem nivou,
• dijagrami toka interfejsa,
• ConcurTaskTrees,
INTERAKCIJA ČOVEK RAČUNAR
2013/2014Prof. dr Dragan Ivetić
ATM Task Scenario
Interakcija čovek računar – Proces razvoja, skripta, Dr Dragan Ivetić, r. prof.
58
INTERAKCIJA ČOVEK RAČUNAR
2013/2014Prof. dr Dragan Ivetić
ATM Concrete Use Case
INTERAKCIJA ČOVEK RAČUNAR
2013/2014Prof. dr Dragan Ivetić
ATM Essential Use Case
Interakcija čovek računar – Proces razvoja, skripta, Dr Dragan Ivetić, r. prof.
59
INTERAKCIJA ČOVEK RAČUNAR
2013/2014Prof. dr Dragan Ivetić
XUAN primer startovanja ikone
Unutrašnjaakcija
Vidljivaakcija
Stanje interfejsa
Vidljivaakcija
Unutrašnjaakcija
Lociraj ikonu
Pom. miša na ikonu
Prati kursor miša
Pritisni tast. miša
Selektovana ikona
Daj fokus ikoni
Otpusti tast. miša
Pritisni tast. miša
Otpusti tast. miša
Pokrenuta ikona
Ukini fokus ikoni
Pokreni dodelj. apl.
INTERAKCIJA ČOVEK RAČUNAR
2013/2014Prof. dr Dragan Ivetić
Dijagrami toka interfejsa za ATM
:Jezici
Meni
:Kartica
DajUput
:Kartica
Greška
:PIN
UnosUput
:PIN
Greška
:Iznos
Meni
:Iznos
Greška
:Novac
UzmiUput
:Kartica
UzmiUput
selektuje jezik
Ubaci karticu
Unos PIN
Selektuje iznos
Uzmi banknote
Uzmi karticu
Kraj
Kraj
:Kartica
UzmiUput
Uzmi karticu
Interakcija čovek računar – Proces razvoja, skripta, Dr Dragan Ivetić, r. prof.
60
INTERAKCIJA ČOVEK RAČUNAR
2013/2014Prof. dr Dragan Ivetić
ConcurTaskTrees
FABIO PATERNO, Task Models in Interactive Software Systems
Konkurenc. Z1 ||| Z2 sa razmenom inform. Z1 |[]| Z2
Dozvola Z1 >> Z2 sa dostavom inform. Z1 []>> Z2
Izbor Z1 [] Z2 Deaktivacija Z1 [> Z2
Redosledna nezavisnost Z1 |=| Z2
Suspenzija-nastavak Z1 |> Z2
INTERAKCIJA ČOVEK RAČUNAR
2013/2014Prof. dr Dragan Ivetić
Kada se korisnik i zadatak ne izuče dobro ...
U nepoznatom (delu) gradu, hitno poslati neki
dokument!
Interakcija čovek računar – Proces razvoja, skripta, Dr Dragan Ivetić, r. prof.
61
INTERAKCIJA ČOVEK RAČUNAR
2013/2014Prof. dr Dragan Ivetić
... Kada se korisnik i zadatak ne izuče dobro
Za koga je dizajnirano?Upotrebljivost?
Svaki novi primer koji pošaljete biće cenjen!
INTERAKCIJA ČOVEK RAČUNAR
2013/2014Prof. dr Dragan Ivetić
Balansiranje automatizacije i korisnikove kontrole
č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) ...
Balansiranje