HCI 2014 Skripta PDF

Prof.
dr Dragan Ivetić
INTERAKCIJA ČOVEK
RAČUNAR
DVANAESTA GENERACIJA STUDENATA
KOMPJUTERSKA GRAFIKA
INTERAKCIJA i MULTIMEDIJA
Novi Sad, 2014. godine

INTERAKCIJA ČOVEK RAČUNAR, skripta, Dr Dragan Ivetić, r. prof.
INTERAKCIJA
INTERAKCIJA ČOVEK RAČUNAR, E243, 2 + 2 ČOVEK RAČUNAR
Human-Computer Interaction HCI Prof. dr Dragan Ivetić 2013/2014
Dr Dragan Ivetić, redovni profesor

Veljko Petrović, asistent
Zoran Milićević, saradnik
Stefan Negovanović, saradnik 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.”
Departman za računarstvo i automatiku
Odsek za primenjene računarske nauke i informatiku Michael Dertouzos
(Interviwed in Scientific American, July 1997)
Katedra za primenjene računarske nauke
Grupa za računarsku grafiku, interakciju i multimediju
INTERAKCIJA
O nastavniku ČOVEK RAČUNAR
Prof. dr Dragan Ivetić 2013/2014
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 121, TMD, Fruškogorska 11, Novi Sad
(021) 485-2419, 485-2424
http://gim.ftn.uns.ac.rs  Članovi ivetic@uns.ac.rs
2
INTERAKCIJA
Kako položiti predmet? ČOVEK RAČUNAR
Prof. dr Dragan Ivetić
1. Predispitne obaveze, do 70 (75) bodova:
2013/2014
vežbe (C#, WinForms ili WPF) – 50 bodova

Android , MS Prism
+ deskriptor.
predmetna studija (heuristike i GOMS-KLM testiranje) – 20 (>15) bodova,
aktivno prisustvo na predavanjima – 0 - 5 bodova.

Broj bodova Ocena
55 – 64 Šest
Potpis barem 25 bodova sa vežbi. 65 – 74 Sedam
2. Ispit (usmeno ili pismeno) – 30 bodova. 75 – 84 Osam

85 – 94 Devet
95 - 100 Deset
INTERAKCIJA
Interakcija – šta je to? ČOVEK RAČUNAR
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.
3
INTERAKCIJA
Šta je korisnički interfejs? ČOVEK RAČUNAR
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
Multidisciplinarna priroda HCI ČOVEK RAČUNAR
SOCOL.
KOGNIT.
I ORGAN.
PSIHOL.
PSIHOL.
RAČUN.
NAUKE ERGON
OMIJA
VEŠT. INŽENJ
INTELI. ERING
LINGVI DIZAJN
STIKA
FILOZO ANTRO
SOCIO POLOG.
FIJA LOGIJA
4
INTERAKCIJA
Šta treba izučavati u HCI kursu (kursevima)? ČOVEK RAČUNAR
Da obavi funkciju (poznato!) i Interakcioni uređaji, kako
look&feel, poveže obe STRANE! rade da bi se bolje uposlili!
po svim dizajnerskim RADNO MESTO, OKRUŽENJE
prostorima:
OS GUI
WEB
ČOVEK (društvo), ergonomija,
MOBILE čula, pažnja, memorija,
EMBEDDED rešavanje problema,
UBIQUITOUS učenje i sticanje veštine,
Cyber Friend, GROUPWARE
INTERAKCIJA
Literatura ČOVEK RAČUNAR
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.
5
INTERAKCIJA
ŠTA TREBA DA RADI DOBAR INTERFEJS? ČOVEK RAČUNAR
Sve ono što korisnik očekuje.
6
UVOD - INTERAKCIJA ČOVEK RAČUNAR, skripta, Dr Dragan Ivetić, r. prof.
INTERAKCIJA
Svet oko nas ... ČOVEK RAČUNAR
Interfon nove zgrade na Grbavici
novo bolje od starog?
Kako kvantitativno pokazati ko je za korisnika bolji?
... Svet oko nas ... INTERAKCIJA

ČOVEK RAČUNAR
KLM ... Prof. dr Dragan Ivetić
• 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).
7

ČOVEK RAČUNAR
... KLM Prof. dr Dragan Ivetić
• 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.
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?

ČOVEK RAČUNAR
GOMS ... Prof. dr Dragan Ivetić
• 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,
8

ČOVEK RAČUNAR
... GOMS ... Prof. dr Dragan Ivetić
• 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,

ČOVEK RAČUNAR
KLM-GOMS primer za brisanje nekog fajla,
GOAL: DELETE-FILE
#Selection rule for GOAL:
. GOAL: SELECT-FILE
. . [select#: GOAL: KEYBOARD-TAB-METHOD SELECT-FILE
. . GOAL: MOUSE-METHOD]
. . VERIFY-SELECTION If hands are on keyboard,
use KEYBOARD-TAB-METHOD,
. GOAL: ISSUE-DELETE-COMMAND else use MOUSE-METHOD
. . [select*: GOAL: KEYBOARD-DELETE-METHOD
. . . PRESS-DELETE *Selection rule for GOAL:
. . . GOAL: CONFIRM-DELETE ISSUE-DELETE-COMMAND
. . GOAL: DROP-DOWN-MENU-METHOD
. . . MOVE-MOUSE-OVER-FILE-ICON If hands are on keyboard,
. . . CLICK-RIGHT-MOUSE-BUTTON use KEYBOARD-DELETE-METHOD,
. . . LOCATE-DELETE-COMMAND else if Recycle bin is
. . . MOVE-MOUSE-TO-DELETE-COMMAND visible,
. . . CLICK-LEFT-MOUSE-BUTTON use DRAG-AND-DROP-METHOD,
. . . GOAL: CONFIRM-DELETE else use DROP-DOWN-MENU-
. . GOAL: DRAG-AND-DROP-METHOD METHOD.
. . . MOVE-MOUSE-OVER-FILE-ICON
9

ČOVEK RAČUNAR
. . 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

ČOVEK RAČUNAR
... GOMS Prof. dr Dragan Ivetić
• 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.
10
INTERAKCIJA
... Svet oko nas ... ČOVEK RAČUNAR
Ima li primedbi tokom upravljanja daljinskim?
Ima li primedbi kada se želi slušati radio stanica na HiFi?
INTERAKCIJA
1964. Interakcija kao
informacina petlja
Gde je omašio D3?
RECEPTORI
EFEKTORI
11
INTERAKCIJA
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
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..."
12
INTERAKCIJA
Pilot srušio putnički avion
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 ?
INTERAKCIJA
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 the
problem. 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 shielded
treatment fields were entered into the
computer program.
13
INTERAKCIJA
... Svet oko nas ČOVEK RAČUNAR
Don Norman – struje izvršenja i evaluacije, više okrenuo čoveku
FORMIRAJ
CILJ
Formiraj Evaluiraj
intenciju ishod
Gde su izvori grešaka u prethodnim
Specifikuj primerima sveta oko nas? Interpretiraj
akciju(e) stanje sistema
Izvrši Osmotri
akciju(e) stanje sistema
INTERAKCIJA
KAKO DO DOBROG HCI? ČOVEK RAČUNAR
Dobar HCI je sačinjen od (konkretizacija za one koje radimo):
• Teorija (eksplanatorna i prediktivna) – videli u HCI cvetu, ništa bolje od dobre
teorije, bezvremenska, learn and apply
• Modeli – GOMS-KLM, Normanove struje, Barberov model, create and use
• Metode – metode evaluacije, master and apply
• Principi – opšte prihvaćene generalne smernice za projektovanje i
implementaciju dobrog HCI, Shneiderman, Nielsen, understand and apply
• Guidelines – praktične smernice iz prakse sa upozorenjima na omašle, obično
povezane za konkretnu platformu, learn and use
• Tehnike – tehnike evaluacije, projektovanja, programiranja, master and use
14
INTERAKCIJA
Kako utvrditi da će interfejs (element) ČOVEK RAČUNAR
prouzorovati probleme? ... Prof. dr Dragan Ivetić
• 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.
... Kako utvrditi da će interfejs (element) INTERAKCIJA

ČOVEK RAČUNAR
prouzorovati probleme? ... Prof. dr Dragan Ivetić
• 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).
15
... Kako utvrditi da će interfejs (element) INTERAKCIJA

ČOVEK RAČUNAR
prouzorovati probleme? Prof. dr Dragan Ivetić
• 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?
Osnovni merljivi ljudski faktori za evaluaciju INTERAKCIJA

ČOVEK RAČUNAR
interfejsa Prof. dr Dragan Ivetić
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 pogreške i korekciju).
GREŠKE – koliko i kakve greške čini član grupe tokom rešavanja datog zadatka
(za error handling), ponavljanje grešaka.
VREME PODSEĆANJA – kako tipičan član grupe održava znanje tokom
vremena... (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 otvorenim odgovora, izveštaji...)
Nemoguće sve podjednako zadovoljiti, treba trade-offs,...
16
INTERAKCIJA
Usability - mera dobrog interfejsa ČOVEK RAČUNAR
USABILITY (Part 11 of the ISO 9241, 1998) “the extent to which a product can be used by specified
users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use.”
“u kojoj meri se proizvod može koristiti od strane određenog korisnika da postigne
specifične ciljeve u datom kontekstu upotrebe sa maksimalnom efektivnošću,
efikasnošću i zadovoljstvom.”
EFFECTIVNESS “is the accuracy and completeness with which specified users can achieve specified goals
in particular environments.”
“je tačnost i potpunost sa kojima korisnici mogu da ostvare specifične ciljeve u
određenom okruženju.”
EFFICIENCY “the resources expended in relation to the accuracy and completeness of the goals achieved.”
“resursi za dostizanje ciljeva sa datom tačnošću i potpunošću.”
SATISFACTION “the comfort and acceptability of the work system to its users and other people affected
by its use.”
“komfor i prihvatljivost sistema u pogonu koje imaju njegovi korisnici i ostali na koje
utiče rad tog sistema.”
INTERAKCIJA
Ekspertske revizije i testiranje usability ... ČOVEK RAČUNAR
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...
17
INTERAKCIJA
... Ekspertske revizije i testiranje usability ... ČOVEK RAČUNAR
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
... Ekspertske revizije i testiranje usability ČOVEK RAČUNAR
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?
18
INTERAKCIJA
Smernice i heuristike ČOVEK RAČUNAR
smernice platformi na različitim nivoima (opšte-dizajnerske do programerskih):

Microsoft User Interface Design Guidelines
http://msdn.microsoft.com/en-us/library/jj651618(v=nav.71).aspx
Apple OS X Human Interface Guidelines
https://developer.apple.com/library/mac/documentation/userexperience/conceptu
al/applehiguidelines/HIPrinciples/HIPrinciples.html
Adroid UI Overview
http://developer.android.com/guide/topics/ui/overview.html
cela kolekcija smernica za dizajniranje

http://www.idemployee.id.tue.nl/g.w.m.rauterberg/lecturenotes/ui-guide-line-
collection.htm
a dalje detaljno o poznatim heuristikama...
INTERAKCIJA
Shneiderman-ovih osam zlatnih pravila ... ČOVEK RAČUNAR
1. TEŽITI KONZISTENTOSTI – najčešće prekršeno, identična terminologija u svim

elementima UI, konzistentne boje, lejeri, fontovi, kapitalizacija...
19
INTERAKCIJA
... Shneiderman-ovih osam zlatnih pravila ... ČOVEK RAČUNAR
2. OMOGUĆITI FREKVETNIJIM KORISNICIMA UPOTREBU PREČICA – veća brzina

interakcije, skrivene komande i makroi.
INTERAKCIJA
3. DAVATI INFORMATIVNI FEEDBACK – za svaku akciju dati feedback, skromniji za

frekventije akcije a značajniji za manje frekventne.
20
INTERAKCIJA
4. PROJEKTOVATI DIJALOGE NAGLAŠENE ZATVORENOSTI – sekvence akcija grupisati

da imaju početak i kraj, kao i sve korake do kraja (@kupovina).
INTERAKCIJA
5. PONUDITI PREVENCIJU I RUKOVANJE GREŠKOM – input line guard, ako pogreši

tada jednostavna korekcija (samo što je loše a ne sve).
21
INTERAKCIJA
6. DOZVOLITI PONIŠTAVANJE EFEKATA AKCIJE (UNDO) – veliko olakšanje kod

početnika – sami istražuju.
INTERAKCIJA
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...
22
INTERAKCIJA
8. REDUKOVATI OPTEREĆENJE RADNE MEMORIJE – 7 ± 2, jednostavan prikaz,

konsolidovati višeprozorske prikaze, uvoditi skraćenice.
INTERAKCIJA
Nilsenovi principi ... http://www.nngroup.com ČOVEK RAČUNAR
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).
23
INTERAKCIJA
... Nilsenovi principi ... ČOVEK RAČUNAR
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 ILLEGAL TELEPHONE NUMBER!
complete your call as dialed. Please hang CALL ABORTED! ERROR number
up, check your number, or consult the 583-2R6.9.
operator for assistance. Consult your user manual for
more information.
INTERAKCIJA
... Nilsenovi principi ČOVEK RAČUNAR
10. ESTETIČAN i MINIMALISTIČKI DIZAJN – manje je više.
24
INTERAKCIJA
Weinschenk-Barker klasifikacija ČOVEK RAČUNAR
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
Sadržaj predmetne studije ... ČOVEK RAČUNAR
• Samostalna studija stanja HCI u komercijalnom sw/hw...

• Konstruktivna kritika...
• Samo elektronske verzije, pdf upload na gim sajt. Pre toga obavezno
potvrđeno prijavljeni korisnik!
• ILUSTRACIJE (ekranske rezolucije) posmatranog interfejsa su dobrodošle!
• Jednostavne i kratke rečenice, objašnjenje činjenice!!
Vaša studija mora imati naredna poglavlja:

Evaluacija #$%&# softvera za podešavanje prikaza
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 apps.
25
INTERAKCIJA
... Sadržaj predmetne studije ... ČOVEK RAČUNAR
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 modelovanje
3.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
... Sadržaj predmetne studije ČOVEK RAČUNAR
Rbr GOMS opis KLM Vreme Vreme Vreme Vreme
op op 1 2 3 Prof. dr Dragan Ivetić 2013/2014
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 3,1
PRESS-DELETE M+K 1,55
GOAL: CONFIRM-DELETE M+K 1,55
2.2 GOAL: DROP-DOWN-MENU-METHOD 7,95
MOVE-MOUSE-OVER-FILE-ICON M+P 2,45
CLICK-RIGHT-MOUSE-BUTTON B 0,1
LOCATE-DELETE-COMMAND M 1,35
MOVE-MOUSE-TO-DELETE-COMMAND P 1,1
CLICK-LEFT-MOUSE-BUTTON B+B 0,2
GOAL: CONFIRM-DELETE MP2B 2,65
2.3 GOAL: DRAG-AND-DROP-METHOD 5,1
MOVE-MOUSE-OVER-FILE-ICON M+P 2,45
PRESS-LEFT-MOUSE-BUTTON B 0,1
LOCATE-RECYCLING-BIN M 1,35
MOVE-MOUSE-TO-RECYCLING-BIN P 1,1
RELEASE-LEFT-MOUSE-BUTTON
Ukupno sa 1.1
B 0,1
7,95 12,8 9,95
ZAKLJUČAK.
Ukupno sa 1.2 9,25 14,1 11,25
26
HCI DOGAĐAJI - INTERAKCIJA ČOVEK RAČUNAR, skripta, Dr Dragan Ivetić, r. prof.
INTERAKCIJA
HCI kroz događaje ČOVEK RAČUNAR
INTERAKCIJA
Eniac (1943, 1946) ČOVEK RAČUNAR
27
INTERAKCIJA
Harvard Mark I – 1944. godine ČOVEK RAČUNAR
INTERAKCIJA
IBM 305 RAMAC (1956) ČOVEK RAČUNAR
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
28
INTERAKCIJA
DEC PDP 1 kompjuter 1960. ČOVEK RAČUNAR
INTERAKCIJA
Programiranje text interfejsa ČOVEK RAČUNAR
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
• kada je naglasak aplikacije
end repeat na funkciji, ali ne i HCI,
• uglavnom mono-
korisničko/programsko,
29
INTERAKCIJA
Ivan Sutherland’s SketchPad, 1962. PhD ČOVEK RAČUNAR
• 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
oNLine System, D. Engelbart, 1968. ČOVEK RAČUNAR
• Document Processing, 2013/2014
– 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.
30
INTERAKCIJA
Ideja personalnog kompjutera ČOVEK RAČUNAR
Alan Kay (1969), tvorac “simbioze čoveka i računara”, Prof. dr Dragan Ivetić 2013/2014
– 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
Schneiderman : “Direct Manipulation!” (1983) ČOVEK RAČUNAR
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.
31
INTERAKCIJA
Komercijala, Xerox Star, 1981. ČOVEK RAČUNAR
• prvi komercijalni PC razvijen za “business professionals”,Prof. dr Dragan Ivetić 2013/2014
• 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
Komercijala, Apple Lisa, 1983. ČOVEK RAČUNAR
• zasnovana na Star idejama, Prof. dr Dragan Ivetić 2013/2014
– predhodnik Macintosh-a, 1984. godine

– nešto jeftinija (10,000 $),
– komercijalno propala.
• IBM PC XT sa tekstualnim
MS DOS, 1983.,
• nastavak je poznat ...
32
INTERAKCIJA
WIMP programiranje... ČOVEK RAČUNAR
icons
pointer
desktop
pop-up menu
menubar pull-down menu
window
toolbar
toolbox
dialogue
taskbar
INTERAKCIJA
... WIMP programiranje... ČOVEK RAČUNAR
• 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?
33
INTERAKCIJA
• obrada događa na više regiona jednog prozora (html) po view hijerarhiji,

IzmenaKont
: window
Kontakt :
Panel Dugmici:
ImePrezL: Toolbar
Label EmailAdE:
TextBox
svaki view u hijerarhiji dobija EmailAdL:
svog listiner, Label ImePrezE: Ne:
TextBox Button
Da:
UI je strukturiran kao hijerarhija izlaznih
Button
views sa prikačenim listiners ulaza,
INTERAKCIJA
programska
logika
event
loop
• 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...
34
INTERAKCIJA
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.
notifikacija
MODEL POGLED
pristup podacima
MVC se uglavnom ponaša kao pipeline gestovi i
događaji
ulaz → controller → model → view → izlaz. promena
podataka
KONTR
Kada se ne ponaša baš kao pipeline?

OLER
Kod GUI, ulaz ima smisla samo u korelaciji sa izlazom!

Slika 1.9 Model-View-Controller trijada
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
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 P RE Z E N-
p rik a z
P O G L ED
TER
Model-Presenter klasa može gestovi
podržati više interfejsa (ASP.NET

n ot if ik a c ija
p ris t up p ris tu p
p o d a c im a p o d a c im a
Web, Windows Forms ili SilverLight M O D EL
aplikaciju)!
S li k a 1 . 1 0 M o d e l -V ie w - Pre s e n t e r t ri ja d a
35
INTERAKCIJA
... WIMP programiranje ČOVEK RAČUNAR
MS da bi svoj UIDE (HTML5, WPF,

SilverLight) približio svim
korisnicima, na osnovu MVC
uvodi
XAML
Model View ViewModel
gde je ViewModel konvertor
podataka iz Model-a u View oblik
lak za upotrebu bez kodiranja
(čak i za Interactive Designers C#
pomoću XAML) .
“View of the Model” obezbeđuje

da View bude samo data
bindings.
Jacob: “nonWIMP - RealityBased Interaction” INTERAKCIJA

ČOVEK RAČUNAR
(1997) Prof. dr Dragan Ivetić 2013/2014
WIMP (GUI) nonWIMP

1. serijska interakcija, 1. paralelna interakcija,
2. diskretna interakcija, 2. kontinualna interakcija,
3. token-based. 3. multi-mode,
Kako programirati?.
36
Mark Weiser "ubiquitous computing“ Xerox INTERAKCIJA

ČOVEK RAČUNAR
PARC Prof. dr Dragan Ivetić 2013/2014
pervasive computing, ambient intelligence, a odnedavno everyware
INTERAKCIJA
Computers in the Human Interaction Loop ČOVEK RAČUNAR
37
INTERAKCIJA
Fraunhofer: Cooperating Objects ČOVEK RAČUNAR
38
ČOVEK - INTERAKCIJA ČOVEK RAČUNAR, skripta, Dr Dragan Ivetić, r. prof.
INTERAKCIJA
Čovek ČOVEK RAČUNAR
Telo
Čula
Memorija
Razmišljanje
INTERAKCIJA
Čula ČOVEK RAČUNAR
a kako sve to radi skupa?

kada je sam
sa drugom osobom /voli, ne voli, mrzi, plaši...
u društvu
sa mašinom (sve navedeno, pa zna šta radi ili baš i ne....)
39
A KAKVI SU NAM KORISNICI? ... INTERAKCIJA

ČOVEK RAČUNAR
A True Story from a Novell NetWire SysOp Prof. dr Dragan Ivetić 2013/2014
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."
... A KAKVI SU NAM KORISNICI? ... INTERAKCIJA

ČOVEK RAČUNAR
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...
Podrška: Šta je sada na vašem monitoru gospođice?

Korisnik: Meda koga mi je moj dečko kupio u supermarketu.
40
... A KAKVI SU NAM KORISNICI? ... INTERAKCIJA

ČOVEK RAČUNAR
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: OK
Podrš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!
... A KAKVI SU NAM KORISNICI? INTERAKCIJA

ČOVEK RAČUNAR
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?
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 u čemu je Vaš problem?
Korisnik: Radio sam u Word-u i kliknuo na help dugme pre više od četiri sata.
Možete li mi reći kada ćete konačno moći da mi pomognete?
41
INTERAKCIJA
Proces obrade informacija ČOVEK RAČUNAR
Barber 1988. godine dao osnovni model, pa ga proširio.
N U
A O T O
D K I K
R O C O
Kodiranje Komparaci Izbor Izvršenje
A L ja reakcije reakcije A L
čulnih info
Ž I J I
A N N
J E N U
I A
INTERAKCIJA
Komparacija ČOVEK RAČUNAR
42
INTERAKCIJA
Pažnja ČOVEK RAČUNAR
• 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,
• usmeravanje pažnje u korisničkom interfejsu:
• prostorno ili vremensko strukturiranje (desktop i pulldown),
bojama, alarmi (flashing, reverse, audio).
INTERAKCIJA
Memorija ČOVEK RAČUNAR
PAŽNJA zaboravljeno
ponavljanje
STORE RETREAVAL
zaboravljeno
Deklarativna Proceduralna
(fakta) (veština)
semantička (znanje i značenje)
epizodna (događaji, vremena i mesta)
43
INTERAKCIJA
Sticanje iskustva/veštine/znanja-skill ČOVEK RAČUNAR
Tri 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. Pravila podešava 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.
Da li dizajner/programer SW treba da obučava buduće korisnike?
INTERAKCIJA
Greške ČOVEK RAČUNAR
Pri interpretiranju/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...
44
INTERAKCIJA
Mentalni model ... ČOVEK RAČUNAR
• skup verovanja čoveka kako neki sistem funkcioniše, intenzivno se koristi u
potpuno novom okruženju,
• gradi se u hodu, na osnovu znanja i iskustva, percepcije i strategije
rešavanja problema,
– model čoveka kod lekara i el. inženjera,
– model televizora kod lekara i el. inženjera,
• kakav mentalni model ima čovek koji prvi put vidi PC?
• mentalna slika je rezultat mentalne simulacije mentalnog modela,

– ona je statička za razliku od modela,
– strukturna vs. funkcionalna.
INTERAKCIJA
... Mentalni model ... ČOVEK RAČUNAR
45
INTERAKCIJA
... Mentalni model ČOVEK RAČUNAR
Razlikuje se:
1. Model sistema (implementacioni model ili programski model) je stvarna
slika funkcionisanja sistema, el. i mašinska šema TV aparata.
2. Korisnikov model je mentalni model koji ima korisnik sistema dok ga
koristi, vaš mentalni model TV aparata.
• Izvor mogućih grešaka, prekidač pored vrata lifta...
3. Projektantski (manifestujući) model je način na koji su projektanti
predstavili sistem korisniku – interfejs TV aparata nekad i sad.
Dobar interfejs
1. Model sistema = Korisnikov model = Projektantski model ?
2. neka druga kombinacija?
INTERAKCIJA
Mentalni modeli aparata oko nas ... ČOVEK RAČUNAR
46
INTERAKCIJA
... Mentalni modeli aparata oko nas ... ČOVEK RAČUNAR
INTERAKCIJA
... Mentalni modeli aparata oko nas ČOVEK RAČUNAR
47
PROTOTIPOVI - INTERAKCIJA ČOVEK RAČUNAR, skripta, Dr Dragan Ivetić, r. prof.
INTERAKCIJA
Primer iz prakse ČOVEK RAČUNAR
Želja da se angažuje Normanova kategorija

transfera znanja, ali
– gde se vidi da je razvio programer bez
tipičnog korisnika,
– gde je narušena heuristika – visibility of
system state,
– gde je narušena heuristika –
recognition, not recall,
– vizuelno forsira direkt. manipulaciju,
Nielsen-ov test potvrdio sa 13 od 24
ispitanika,
– u Edit ima Copy i Paste – izgubljena
external consisteny
INTERAKCIJA
Aktivnosti i prototipovi START
ČOVEK RAČUNAR
Brainstorm različitih reprezentacija Low fidelity papirni prototipovi

Izbor reprezentacije
Rough out stil interfejsa
Task centered walkthrough i redesign
Medium fidelity prototipovi
Fino podešavanje interfejsa, dizajniranje
prikaza
Heuristična evalvacija i redesign
Testiranje utilitarnosti i redesign
High fidelity prototipovi
Testiranje ograničene funkcionalnosti
Alpha/Beta testovi
Sistem koji radi
CILJ
48
INTERAKCIJA
Low fidelity prototipovi ... ČOVEK RAČUNAR
ZAŠTO JE HCI NAMETNUO PROTOTIP U SE PRAKSU?
PAPIRNI PROTOTIPOVI
– mock-up izgleda, osećaja i funkcionalnosti interfejsa,
– brz i jeftin za pripremu i modifikaciju,
Koristi se za
– brainstorm razmatranje reprezentacija,
– izazivanje reakcija korisnika,
SKICE
– crtanje krokija pojavljivanja sistema,
– grubost nagoni ljude da se koncentrišu na
visokonivovske koncepte,
– teško za predviđanje progresije dijaloga,
INTERAKCIJA
... Low fidelity papirni prototipovi ... ČOVEK RAČUNAR
49
INTERAKCIJA
... Low fidelity papirni prototipovi ... ČOVEK RAČUNAR
INTERAKCIJA
... Low fidelity papirni prototipovi ČOVEK RAČUNAR
50
INTERAKCIJA
Low fidelity prototipovi – storyboarding ... ČOVEK RAČUNAR
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 Help Screen

You can enter either the
Last Name: person's name or their
First Name: Help-> number. Then hit the
Phone: place button to call them
Place Call Help Return
Call by Call
name completed...
Computer Telephone Computer Telephone Computer Telephone
Last Name: Greenberg Establishing Dialling....
Last Name: Greenberg Call Connected
Last Name: Greenberg
First Name: connection-> First Name: connected... First Name:
Phone: Cancel
Phone: Hang
Phone: up
Place Call Help Place Call Help Place Call Help
INTERAKCIJA
... Low fidelity prototipovi – storyboarding ČOVEK RAČUNAR
51
INTERAKCIJA
Low fieldelity prototipovi – Pictive ... ČOVEK RAČUNAR
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 hodu,
Snimanje sesija za kasniju analizu
– obično se završava hrpom papira i plastike.
tabs
buttons combo box
alert box
entries menu
INTERAKCIJA
... Low fieldelity prototipovi - Pictive ČOVEK RAČUNAR
52
INTERAKCIJA
Medium fiedelity prototipovi ČOVEK RAČUNAR
Razvoj prototipa pomoću kompjutera,

– simulacija samo nekih mogućnosti interfejsa,
• atraktivno/šarmantno za korisnike.
Koristi se
– kako bi obezbedio sofistikovan ali i ograničen scenario da korisnik
proba,
– obezbeđuje testiranje suptilinijih projektantskih odluka.
Moguće opasnosti
– korisnik često reaguje “u malom”,
– korisnik stidljivo izaziva projektanta,
– korisnik stidljivo dodiruje dizajn,
– menadžment može pomisliti da je gotovo.
INTERAKCIJA
Softverski paketi za crtanje ČOVEK RAČUNAR
Kreiranje svake storyboard scene na kompjuteru

– veoma tanak vertikalni prototip,
– nema "osećaja" interakcije.
Control panel for pump 2 Control panel for pump 2
DANGER!
coolant flow 45 % sledeći coolant flow 0 %
crtež
retardant 20% retardant 20%
speed 100% (za shut speed 100%
down
Shut Down klik) Shut Down
53
INTERAKCIJA
Skript simulacije ČOVEK RAČUNAR
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
DANGER!
coolant flow 045%%
retardant 20%
speed 100%
Shut
Shut Down
Down
INTERAKCIJA
Wizard of Oz ČOVEK RAČUNAR
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.
54
PROCES RAZVOJA - INTERAKCIJA ČOVEK RAČUNAR, skripta, Dr Dragan Ivetić, r. prof.
INTERAKCIJA
Proces razvoja interaktivnog sitema ... ČOVEK RAČUNAR
Moore’s law, 1965. godine
mogućnosti
računara
(transistors,
CPU,
speed,
cost...)
1950 1990 2030
INTERAKCIJA
... Proces razvoja interaktivnog sitema ... ČOVEK RAČUNAR
Buxton’s law, 2000. godine
ponuđena/
raspoloživa
funkcionalnost
od tehnologije
1950 1990 2030
55
INTERAKCIJA
God’s law
user centered design
ljudski
kapacitet
system centered design
1950 1990 2030
INTERAKCIJA
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?
56
INTERAKCIJA
... Proces razvoja interaktivnog sitema ČOVEK RAČUNAR
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
Formiranje zahteva ... ČOVEK RAČUNAR
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.
200
180
160
140
120
100
80
60
40
20
0
requirements design coding testing maintenance
57
INTERAKCIJA
... Formiranje zahteva ČOVEK RAČUNAR
SAKUPLJANJE
ODREĐIVANJE ZAHTEVA PODATAKA
Requirements data gathering
determination korisnik, zadatak,
korisnik, zadatak, kontekst
kontekst
ANALIZA PODATAKA
data analysis
korisnik, zadatak, kontekst
INTERAKCIJA
Tehnike za sakupljanje podataka ... ČOVEK RAČUNAR
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).
58
INTERAKCIJA
... Tehnike za sakupljanje podataka ... ČOVEK RAČUNAR
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
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.
59
INTERAKCIJA
2. INTERVJU
razgovor 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
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.
60
INTERAKCIJA
4. DIREKTNA ILI INDIREKTNA OPSERVACIJA
jer korisnici teško objašnjavaju šta rade ili

tačno opisuju kako su obavili zadatak,
• 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.
INTERAKCIJA
... Tehnike za sakupljanje podataka ČOVEK RAČUNAR
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.
61
INTERAKCIJA
Interpretacija i analiza podataka ČOVEK RAČUNAR
• 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
Dokument zahteva ČOVEK RAČUNAR
obično Prof. dr Dragan Ivetić
vol. 1 – ARHITEKTONSKI ZAHTEVI

opisuje potrebnu arhitekturu sistema
vol. 2 – FUNKCIONALNI ZAHTEVI
funkcionalnost koja se mora izvršavati
vol. 3 – NEFUNKCIONALNI ZAHTEVI
k-ke sistema na koje korisnik ne može uticati
vol. 4 – ZAHTEVI OGRANIČENJA
uspostavlja marginu rada sistema po svakoj putanji
62
INTERAKCIJA
Spoznavanje korisnika ... ČOVEK RAČUNAR
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
... Spoznavanje korisnika ... ČOVEK RAČUNAR
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).
63
INTERAKCIJA
1.Visceralna obrada – pre-wired nivo, Prof. dr Dragan Ivetić
• 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
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
64
INTERAKCIJA
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.
... Spoznavanje korisnika ... INTERAKCIJA

ČOVEK RAČUNAR
Sony Trans Com – Goal Directed Design ... Prof. dr Dragan Ivetić
65

ČOVEK RAČUNAR
... Sony Trans Com – Goal Directed Design ... Prof. dr Dragan Ivetić
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.

ČOVEK RAČUNAR
... Sony Trans Com – Goal Directed Design Prof. dr Dragan Ivetić
66

ČOVEK RAČUNAR
Jeff Hawkins - the Palm Pilot ... Prof. dr Dragan Ivetić
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
... Jeff Hawkins - the Palm Pilot ... ČOVEK RAČUNAR
... 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.“...
67
INTERAKCIJA
... Jeff Hawkins - the Palm Pilot ČOVEK RAČUNAR
.... 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
Spoznavanje zadataka i posla ... ČOVEK RAČUNAR
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.
68
INTERAKCIJA
... Spoznavanje zadataka i posla ... ČOVEK RAČUNAR
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
ATM Task Scenario ČOVEK RAČUNAR
69
INTERAKCIJA
ATM Concrete Use Case ČOVEK RAČUNAR
INTERAKCIJA
ATM Essential Use Case ČOVEK RAČUNAR
70
INTERAKCIJA
XUAN primer startovanja ikone ČOVEK RAČUNAR
Unutrašnja Vidljiva Stanje Vidljiva Unutrašnja

akcija akcija interfejsa akcija akcija
Lociraj Pom. miša Prati kursor
ikonu na ikonu miša
Pritisni tast. Selektovana Daj fokus
miša ikona ikoni
Otpusti
tast. miša
Pritisni tast.
miša
Otpusti Pokrenuta Ukini fokus Pokreni
tast. miša ikona ikoni dodelj. apl.
INTERAKCIJA
Dijagrami toka interfejsa za ATM ČOVEK RAČUNAR
: J e zic i Prof. dr Dragan Ivetić 2013/2014
Meni
s e le k tu je je z ik
: K a rt ic a
D aj U pu t
Ub a c i k a rtic u
: K ar ti c a : P IN
G r e š ka U no s U p u t
U n o s P IN
K ra j :I z no s : P IN
Meni G r e šk a
Kra j S el ek tu je
iz n o s
: K a rti c a :I zn o s
U z m iU p u t G r eš k a
U z m i k a rtic u
: K ar ti ca :N o va c
U z m iU p u t U zm iU p u t
U zm i k a rtic u U z m i ba n k n o te
71
INTERAKCIJA
ConcurTaskTrees ČOVEK RAČUNAR
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
Kada se korisnik i zadatak ne izuče dobro ... ČOVEK RAČUNAR
U nepoznatom (delu)
gradu, hitno poslati neki
dokument!
72
INTERAKCIJA
... Kada se korisnik i zadatak ne izuče dobro ČOVEK RAČUNAR
Za koga je dizajnirano?
Upotrebljivost?
Svaki novi primer koji

pošaljete biće cenjen!
INTERAKCIJA
Balansiranje ČOVEK RAČUNAR
Balansiranje automatizacije i korisnikove kontrole
judgement for mašina

unpredictable
events
industrijska
revolucija
čovek
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) ...
73
DIZAJNIRANJE INTERFEJSA - INTERAKCIJA ČOVEK RAČUNAR, skripta, Dr Dragan Ivetić, r. prof.
Nosioci interakcije INTERAKCIJA

ČOVEK RAČUNAR
TEKST ... Prof. dr Dragan Ivetić 2013/2014
TEKST
• kako biti siguran da je tekst čitljiv,
– typeface, size, spacing, line spacing, line length,
justification, line endings,
• kako biti siguran da tekst ima smisla,
– izrazi i skraćenice.

ČOVEK RAČUNAR
... TEKST ... Prof. dr Dragan Ivetić 2013/2014
TEKST
- 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:
sda dasd dsa
PORAVNAVANJEM dasd sadsads sad
- umetanjem razmaka ili rastavljanjem na slogove, dasdasd
- ulevo je uobičajeno sa nazubljenom desnom stranom, sadasasd sasd s.
- potpuno poravnato je najbolje ali loše podržano na web-u,
- naslovi ili centrirani ili ulevo,
ŠIRINOM LINIJE
- normalna udaljenost, 3” širine, 365 piksela za 12pt Times,
74

ČOVEK RAČUNAR
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,
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,

ČOVEK RAČUNAR
TEKST
• kako biti siguran da je tekst čitljiv,
– typeface 2
• Serif ili Sans Serif font?
75

ČOVEK RAČUNAR
... TEKST Prof. dr Dragan Ivetić 2013/2014

ČOVEK RAČUNAR
BOJE ... Prof. dr Dragan Ivetić 2013/2014
točak boja monohromno analogne boje
komplementarne podeljene kompl. trijada
76

ČOVEK RAČUNAR
... BOJE ... Prof. dr Dragan Ivetić 2013/2014
BOJE –
primer
šema boja

ČOVEK RAČUNAR
... BOJE
BOJE 2013/2014
• limitirati broj boja

– SOFTVER privlači pažnju, ali blizu smeta,
– u čitavoj sekvenci prikaza do 4 (7) boja,
– prvo dizajnirati monohromatski,
• iskoristiti kao kodnu tehniku,
– ali u skladu sa zadatkom,
– ubrzava prepoznavanje više nego kodiranje tekstom,
– dužnici u crvenom,
– avioni na većoj visini plavi a na nižoj beli,
• iskoristiti za grupisanje
– različite grupe, komplementarnim bojama,
• biti konzistentan u upotrebi boja,
• oko 8% populacije EU i Sev. Amerike ima problema,
• bojama ukazati na promenu stanja softvera/sistema.
77

ČOVEK RAČUNAR
SLIKA Prof. dr Dragan Ivetić 2013/2014
• efikasna percepcija višestrukih veza različitih izvora (trend), više od 1000 reči,

ČOVEK RAČUNAR
http://www.visual-literacy.org/periodic_table/periodic_table.html gim
78

ČOVEK RAČUNAR
ANIMACIJA Prof. dr Dragan Ivetić 2013/2014
ANIMACIJA
• ilustruje pokret, dinamička povratna veza, atraktivno, demonstrira da je sistem
aktivan,

ČOVEK RAČUNAR
VIDEO
• prenose ponašanje i emocije, simulacije, informacije.
79

ČOVEK RAČUNAR
ZVUK Prof. dr Dragan Ivetić 2013/2014
• različite vrste zvukova

– ambijent, zvučni efekti, muzika, govor...
• korektno upotrebiti zvučne efekte
– naglašavanje, završetak operacije, izuzetak, privlači pažnju,
• efikasna upotreba muzike
– potpis, podseća na situaciju, atmosfera,
• efikasna upotreba govora
– ton, ritam, akcenat,
– problemi sa konkatenacijom slogova, reči...
INTERAKCIJA
Stilovi interakcije ČOVEK RAČUNAR
• interakciona tehnika – kako se koristi neki UI uređaj da se obavi neki UI

zadatak, više detalja kada se obrade UI uređaji,
• interakcioni stilovi (način na koji je korisnik u interakciji):
– Komandna linja,
– Meni,
– Forme (Form-Fill),
– Direktna manipulacija,
– Antropomorfni,
• kada je komandna linija bolja od direktne manipulacije ili govora, a kada
je govor najpodesniji,
• kombinovanje interakcionih stilova,
• pravilan izbor interakcionog stila i IBM ledeni breg.
80
INTERAKCIJA
Komandna linija ČOVEK RAČUNAR
• moćan i intuitivan pristup sistemu,

• unos kvantiteta i jednostavna selekcija unutar malog domena,
• ograničenja:
– komande se moraju pamtiti, “glagol-imenica” vs. “imenica-glagol”,
– komande su često nejasne i kriptične,
• posledice:
– velika verovatnoća greške,
– samo za eksperte.
• homing problem,
• integracija sa point,
• prekidaju tok rada
korisnika, patolog
kuca nalaz?!?
INTERAKCIJA
Meni ... ČOVEK RAČUNAR
• skup stavki unutar kog korisnik pravi izbor,

• mora ponuditi “cues” koji bi korisnik prepoznao,
• kompleksno dekomponovati u male korake – ZADATAK ORIJENTISAN,
– hijerarhijska dekompozicija je najpogodnija, ali postoje slučajevi kada
neka stavka u više grupa – 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,
• kategorije/stavke kompjuterskih menija moraju biti razumljivi i različiti
tako da korisnik ima jasnu ideju šta će se desiti kada je odabere,
81
INTERAKCIJA
Click&Print Sertificates
shareware program za štampanje diploma - izbor predefinisane forme

Može li bolje?
INTERAKCIJA
... Meni ... ČOVEK RAČUNAR
• postoje različite organizacije menija, za izbor jedne od dve moguće stavke

do čitave mreže stavki:
jedan aciklični
meni stablo meni
menija ciklični
meni
sekvenca
menija
82
INTERAKCIJA
JEDNOSTRUKI 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 u data tabeli,
• klase jednostrukih menija
– BINARNI MENI, najjednostavnija klasa
Odaberite tip prikaza:
Odaberite tip prikaza
1. Crno-beli, Orijentacija
 Crno-beli,
2. Kolor.
 Kolor.

Vaš izbor je (1,2) -> ‗ DA NE 
INTERAKCIJA
– N-ARNI MENI disjunktivni, izbor jedne od više stavki

Telefon je izmislio
Odaberite format lista Odaberite format lista
A. Tomas Edison,
 A3,  B4
US letter 
B. Aleksandar Bel, US
USletter
letter
A3
C. Nikola Tesla,  A4,  B5. A4
D. Mihajlo Pupin. DA NE B3
B4
– N-ARNI MENI konjunktivni, multiple/selection ili check box, izbor

nekoliko od više stavki
Effects
 Underline  Superscript

 Shadow 
offset: %
 Emboss  Subscript
83
INTERAKCIJA
– 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,
Slika 2.2.1.4.F Cocoa kružni meni
INTERAKCIJA
– 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,
84
INTERAKCIJA
– 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...
INTERAKCIJA
SEKVENCA (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...
85
INTERAKCIJA
STABLO MENIJA
• kada kolekcija stavki preraste

dosadašnje organizacije menija tada se
stavke grupišu u ekskluzivne grupe
distinktivnih naziva,
• 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.
INTERAKCIJA
PREZENTAVIJA STAVKI menija

• po izboru stavki menija - formiranje sekvence kojom će se prezentovati,
• stavke – ulevo, separatori srodnih, u 2D sort po kolonama,
• problem dezorijentacije,
• veličinom, smicanjem udesno (kaskada) i/ili numeracijom naslova,
• position marker, position strip (+----, -+---, --+--, ..., ----+),
• transparentnost do 50% - dobra interakcija ali i velika radna površ.
• 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...
• prvo najfrekvetnije (najvažnije) stavke...
86
INTERAKCIJA
TEHNIKE 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.
INTERAKCIJA
... Meni ČOVEK RAČUNAR
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.
87
INTERAKCIJA
Forme ... ČOVEK RAČUNAR
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.
SMERNICE ZA PROJEKTOVANJE FORMI:
NASLOV pun značenja

• identifikuje objekt rada,
• izbegavati kompjutersku terminologiju (update, indexing...),
INTERAKCIJA
... Forme ... ČOVEK RAČUNAR
RAZUMLJIVE INSTRUKCIJE
• u terminima domena, novajlijama obezbediti prozor pomoći,
• opisne labele polja za unos, ne imperativne, samo imenica.
LOGIČKO GRUPISANJE I SEKVENCIONISANJE POLJA
• grupisanje - poravnavanjem i separacijom,
• sekvencionisanje – odraz zajedništva (grad, broj, država).
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,
88
INTERAKCIJA
... Forme ČOVEK RAČUNAR
DUŽINA POLJA TREBA DA JE VIZUELNO PREDSTAVLJENA

• u tekstualnim sistemima ?, GUI ?,
ZGODNO POMERANJE KURSORA - Tab i/ili kursorski tasteri.
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 POLJA
HINT PORUKE O POLJU
SIGNAL DA JE MOGUĆ ZAVRŠETAK UNOSA
UPOTREBA LIST & COMBO BOXES oslobađaju korisnika tereta unosa.
INTERAKCIJA
Direktna manipulacija... ČOVEK RAČUNAR
• 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.
• Ben Shneiderman o direktnoj manipulaciji 1988. godine, 
89
INTERAKCIJA
... Direktna manipulacija... ČOVEK RAČUNAR
Prednosti:
– vizuelna predstava zadataka,
– laki za upotrebu,
– lakše je izbeći (sprečiti) greške,
– ohrabruje korisnika da istražuje,
– povećava subjektivnu satisfakciju,
– neguje prepoznavanje a ne memorisanje.
Mane:
– teže za programiranje,
– nije baš pogodno za male grafičke prikaze,
– prostorna/vizuelna predstava nije uvek
najbolja,
– misleading priroda metafore,
– kompaktna notacija je bolja za eksperte.
INTERAKCIJA
Metafore u razvoju odgovarajućeg mentalnog modela
– benefiti,
– problemi,
– izbor metafore ili skupa metafora, posebno u vizuelizaciji

– ko je osnovni nosilac u današnjim UI?
90
INTERAKCIJA
Š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.
INTERAKCIJA
91
INTERAKCIJA
... Direktna manipulacija ČOVEK RAČUNAR
DIJALOG
• 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.
INTERAKCIJA
Gestikulacija ... ČOVEK RAČUNAR
• najintiutivnija direktna manipulacija objektima na prikaznom uređaju sa ili

bez posrednika pomoću pointiranja i prevlačenja u složenim pokretima,
• omogućena zahvaljujući efikasnom HW/SW i programskom pragmom.
92
INTERAKCIJA
...Gestikulacija ... ČOVEK RAČUNAR
• multi-touch tehnika sa jednom (obe) rukom u

jednoj ili više tačaka,
• simbolika dodirnih tačaka i pokreta,
INTERAKCIJA
...Gestikulacija ČOVEK RAČUNAR
• pa njihova kombinacija u akciju interfejsa.
93
INTERAKCIJA
Antropomorfni stil ČOVEK RAČUNAR
• oblik i karakteristike čoveka,

• kao agenti interfejsa,
• ili kao feedback (govor),
• ubrzanje interakcije govornim naredbama, CAD sistemi,
• interesantna pojava, ali upotrebljivost?
INTERAKCIJA
Dizajnerski prostori interakcije ČOVEK RAČUNAR
pre konkretnog dizajna interfejsa, mora se odabrati prostor u kome će

korisnik biti u interakciji sa sistemom:
• GUI – grafički korisnički interfejs,

• WEB stranice,
• mobilni uređaji,
• ugradni sistemi (embedded systems),
• sveprisutno računarstvo.
• svaki prostor ima odgovarajuće HW i SW komponente interakcije.
94
INTERAKCIJA
Dizajniranje GUI ... ČOVEK RAČUNAR
widget
• a placeholder for a manufactured
device
• a reusable element of a GUI that
displays an information
arrangement and provides
standardized data manipulation.
• a device placed in (beer) cans and
bottles of beer to aid in the
generation of froth
• UK based personal electronics
distributor
• the logo of Delta Air Lines
• Also known as a blivet, an optical
illusion and impossible object
INTERAKCIJA
... Dizajniranje GUI ... ČOVEK RAČUNAR
Kategorije dobrog grafičkog dizajna

1. Simplicizam
“Perfekcija nije dostignuta onda kada se nema šta dodati, nego kada
nema ničega što bi se trebalo ukloniti.”, Antoan de Sent-Egziperi
“Keep it simple, stupid!”, “Keep it simple, silly!”
“Less is more.” , “When in doubt, leave it out.”
2. Kontrast
perceptivne razlike po vizuelnoj dimenziji (vizuel. promenljive – npr.
boja), neregularnost dizajna koja nosi informaciju i ističe dati element,
3. Bela margina
vizuelna hijerarhija,
grupisanje,
4. Balans
5. Poravnanje
95
INTERAKCIJA
Kako do simpicizma?
1. Redukcija
ukloniti neesencijalne elemente,
2. Pravilnost (regularity)
koristiti pravilne šablone (font, kolor, line...),
ograničiti neesencijalne varijacije elemenata,
3. Double-duty
vizuelna hijerarhija,
grupisanje,
INTERAKCIJA
Kontrast i vizuelne promenljive

Jacques Bertin, Graphics and Graphics Information Processing, 1989
promenljive žute mrlje – tamo se porede – perceptivno,

a ne kognitivno (poređenje brojeva).
definisao sledećih sedam promenljivih:
96
INTERAKCIJA
• Selektivna percepcija: može li pažnja biti fokusirana na jednu vrednost

varijable, isključujući ostale varijable i vrednosti?
• Selektivne promenljive: position, size, orientation, hue, value, texture.
• Neselektivne promenljive: shape.
Naći sva slova

• s leve strane,
• crvena slova,
• K,
Šta je najteže?
INTERAKCIJA
• Asocijativna percepcija: da li promenljiva može biti ignorisana dok

gledamo ostale promenljive?
• Asocijativne promenljive: position, hue, texture, shape, orientation.
• Neasocijativne promenljive: size, value.
Naći sva slova

• crvena slova,
• K,
Šta je smetalo u
ovom zadatku?
97
INTERAKCIJA
Gestalt psiholozi 1920. objasnili čovekovu percepciju po sledećim principima:
INTERAKCIJA
98
INTERAKCIJA
Kontrast u praksi
INTERAKCIJA
Kontrast u praksi
99
INTERAKCIJA
Kontrast u praksi
Prokomentarišite: position, size, hue, value, orientation.
INTERAKCIJA
Bela margina
• za grupisanje umesto linija,
• da vodi oko po dizajnu,
• bez nagomilavanja – prostorna tenzija, opterećuje skeniranje.
100
INTERAKCIJA
Balans
• izabrati osu, obično vertikalnu,
• rasporediti elemente simetrično u odnosu na osu, izjednačujući ih po masi
i veličini,
INTERAKCIJA
Poravnanje
• poravnati labele ulevo
ILI udesno,
• poravnavati kontrole
ulevo I udesno,
– proširiti ako
treba,
• poravnati osnovnu
liniju teksta.
101
INTERAKCIJA
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 Tip of the day: Monday, Mar 12
Help
mmmm mmm
mmmm mmm
?
mmmm mmm
mmm mmm ! mmm
mmm
Dismiss
Okay Okay
 
INTERAKCIJA
?
Tekst poruke Da li zaista želite
Ikona obrisati datoteku
Arial 14, left “mojfajl.doc” iz
adjusted foldera “proba”?
No Ok No Ok

!
Nemoguće pomeriti
datoteku
“mojfajl.doc” u
Apply folder “proba” pošto
Datoteka je je disk pun.

uništena! Cancel
Ok 
102
INTERAKCIJA
Dvonivovska hijerarhija
• uvlačenje, Logika organizacionog toka
• kontrast.
Poravnanje povezuje Grupisanje

vizuelne elemente u razmakom
sekvencu.
INTERAKCIJA
Preterano 3D preopterećuje a štednja

sprečava razlikovanje.
Nagoveštaj navigacije/čitljivost
103
INTERAKCIJA
... Dizajniranje GUI ČOVEK RAČUNAR
Kako izabrati widgets?

• Koje se komponente moraju prikazati?
– samo najneophodniji vizuelni napor,
– po frekventnosti/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”,
– selekcija, zavisno od kardinalnosti,
– editovanje, povezano za aplikacionim objektom,
– upravljanje, trigerovanje akcije – point&click, drag&drop, voice,
gesture...
INTERAKCIJA
Prazni dijalozi ... ČOVEK RAČUNAR
Šta će se desiti kada

Hmm, hvala na upozorenju, kliknem na cancel dugme
ali šta treba da uradim? tokom cacel operacije?
Imam li neki izbor? Uhhh… odoh ja ...
104
INTERAKCIJA
... Prazni dijalozi ... ČOVEK RAČUNAR
INTERAKCIJA
... Prazni dijalozi ... ČOVEK RAČUNAR
105
INTERAKCIJA
... Prazni dijalozi ČOVEK RAČUNAR
INTERAKCIJA
WEB dizajn ... ČOVEK RAČUNAR
• bujica sajtova (hipertekst – multipath reading) izbacila

• utopijske vizije o zauzdavanju poplave podataka/informacija,
• neutopijski komentari o tragediji poplave podataka/informacija,
• kako razvijati www sajtove da se ovo spreči?
• koristiti se saznanjima klasičnog interfejsa:
• planiranje,
EVALUACIJA
• struktura sajta i sadržaj, po heuristikama
• navigacija/interfejs sajta, early mok-ups
prototipovi
• dizajn stranice,
• održavanje.
• uspostavlja se posebna disciplina – WEB design jer
• posetilac lokacije nije lojalan a veoma je bitan,
106
INTERAKCIJA
... WEB dizajn ... ČOVEK RAČUNAR
sprovodi Web tim:

• Project stakeholder,
• Web project manager & account executive, quality assurance tester,
• Usability lead,
• Information architect,
• Art director & web graphic designer, interactive designer (Flash, JavaScript,
Ajax), Media specialist (photography, illustration, audiovisual, Flash),
• Web technology lead & Web application programmer (.Net, Java, php/Perl,
Ruby), Web page engineer (xhtml, css, JavaScript, Ajax), Database
administrator, Web systems expert or webmaster,
• Site production lead & html page coder,
• Site editor & site copywriter, content domain expert (content coordination,
research).
INTERAKCIJA
Planiranje Prof. dr Dragan Ivetić 2013/2014
Da definiše poslovne ciljeve (zahtevi naručioca):

Osnovna svrha sajta? oglašavanje, prodaja, demonstriranje proizvoda/usluga,
Ko je poželjni posetilac? koje su to kategorije korisnika i njihovi motivi ,
Koja organizacija sajta je poželjna? hijerarhijska, baza podataka, download files,
Osnovna svrha sajta? oglašavanje, prodaja, demonstriranje proizvoda/usluga
Budžet i pravna pitanja...
Da definiše željene kontekste upotrebe (zahevi korisnika):
Ko su važni posetioci, njihovo iskustvo i ekspertiza?
S kojim ciljem bi oni posetili sajt? Kolika je frekvencija njihovih poseta?
Koje informacije traže i u kojoj formi (e- ili h-copy, download)?
Koja su nacionalnosti (jezik)? Koji hw i sw koriste? 
Da definišu osnovne scenarije upotrebe sajta (ko, kada, zašto...).
Mesto na tržištu, društvu, udruženjima, podrška već prepoznatljivih sajtova.
107
Google Chrome INTERAKCIJA

Poznavanje hw i sw ... Internet Explorer ČOVEK RAČUNAR
Firefox Prof. dr Dragan Ivetić 2013/2014
učešće brauzera u svetu. Safari

Opera
INTERAKCIJA
... Poznavanje hw i sw ... ČOVEK RAČUNAR
108
INTERAKCIJA
Najfrekvetnija rezolucija ekrana.
INTERAKCIJA
Zašto je važna rezolucija ekrana za Web?

800 x 600
640 x 480
1024 x 768
109
INTERAKCIJA
- određen sa dva faktora: brauzerom i rezolucijom ekrana,

800x600 1024x768 1280x960 1600x1200
XP i IE 774 x 447 998 x 615 1254 x 807 1574 x 1047
XP i Firefox 774 x 454 998 x 622 1254 x 814 1574 x 1054
prosek svi 625 x 339 849 x 507 1105 x 699 1425 x 939
INTERAKCIJA
110
INTERAKCIJA
... Poznavanje hw i sw ČOVEK RAČUNAR
Svaki novi primer koji

pošaljete biće cenjen!
INTERAKCIJA
FTN stranica ČOVEK RAČUNAR
111
INTERAKCIJA
Struktura sajta i sadržaj ... Prof. dr Dragan Ivetić 2013/2014
• strukturirati informacije da imaju smisla za posetioca (doći intervjuima...)

• može se razlikovati od strukture koju je dao naručioc,
• različiti posetioci – različite strukture,
• koji informacioni sadržaj na kom nivou detalja,
• terminologija posetioca!
• stil pisanja sadržaja

• posetioci retko čitaju svaku reč,
• istaći ključne reči, kratki smisleni naslovi,
• nabrajanja umesto rečenica,
• oprezno sa belinama – vizuelna hijearhija,
• obrnuta piramida – prvo zaključak pa detalji,
• ako baš mora čitati tekst, obezbediti print/download.
INTERAKCIJA
... Struktura sajta i sadržaj ... Prof. dr Dragan Ivetić 2013/2014
• kako strukturirati stranice sajta?
• koji je bolji (plići ili dublji?)?

• zašto?
112
INTERAKCIJA
... Struktura sajta i sadržaj Prof. dr Dragan Ivetić 2013/2014
struktura sajta prema posetiocima i složenosti sadržaja
INTERAKCIJA
Navigacija/interfejs sajta ...Prof. dr Dragan Ivetić 2013/2014
Pomozite posetiocima da pronađu svoj put:

• oslonite se na poznate stvari (naslovna stranica novina),
• obezbedite da posetilac zna gde je i kuda ide,
• kako tu mogu pomoći URL, page title i site map?
• konzistentan lejaut stranice uliva sigurnost u browsing-u!
• što više self-explanatory text links,
• do informacije sa što manje klikova,
• sa svake stranice link na početak i listu lokalnih sadržaja,
• navigaciona dugmad na vrhu i dnu stranice, zašto?
• pre download – veličina fajla i procena vremena.
113
INTERAKCIJA
... Navigacija/interfejs sajta Prof. dr Dragan Ivetić 2013/2014
Kako navigirati u velikim sajtovima?

webstyleguide.com
INTERAKCIJA
Dizajn stranice ... Prof. dr Dragan Ivetić 2013/2014
struktura stranice
Page headers
home link
global navigation
breadcrumb nav
search
Scan columns
section navigation
contact info,
search filter,
advertising
Content area
Page footer
114
INTERAKCIJA
... Dizajn stranice ... Prof. dr Dragan Ivetić 2013/2014
kreiranje templejta stranice
INTERAKCIJA
home stranica ima 4 primarna elementa:

1. identitet,
2. navigaciju,
3. fokus na sadržaj, i
4. alati (search, directory).
115
INTERAKCIJA
obezbediti adaptivnost stranice
INTERAKCIJA
obezbediti selektivnost prikaza (npr. za e- i h-copy)
116
INTERAKCIJA
bezbezbediti tekstualnu alternativu
INTERAKCIJA
imati na umu medij stranice
117
INTERAKCIJA
Osnovi vizuelnog dizajna

1. Kreiranje jasne vizuelne hijearhije kontrasta, da bi se “iz prve” uočilo šta
treba.
INTERAKCIJA
2. Definisanje funkcionalnih regiona stranice
118
INTERAKCIJA
... WEB dizajn ČOVEK RAČUNAR
... Dizajn stranice Prof. dr Dragan Ivetić 2013/2014
3. Konzistentnost
i ostalo rečeno u GUI dizajnu

(simplicizam, belina, poravnanje...)
INTERAKCIJA
Dizajn interfejsa mobilnih uređaja ... ČOVEK RAČUNAR
specijalizacija GUI prema specifičnostima mobilnih uređaja

- gabariti,
- specifični ulazni uređaji (fizički i programski, navigacioni točkić),
- Kakvi su izlazni uređaji? Manje ili više od PC? Zašto?
119
INTERAKCIJA
... Dizajn interfejsa mobilnih uređaja ... ČOVEK RAČUNAR
- resursna moć,
- slabija procesna i memorijska moć, zašto?
- prikazne mogućnosti (čovek na 1 feet osetljiv sa 286..326ppi)
Telenor
2005.
HTC HD2 480x800 na 4.3” SE Xperia X10 480x854

iPhone IV 640x960 na 3.5” što je 326ppi
INTERAKCIJA
- kontekst upotrebe,
18 zadataka, grupisanih
čitanje
čitanje/pisanje
pisanje
Osmatrani subjekti su
koristili levo)
jednu/obe ruke
desno) kako bi preferirali
120
INTERAKCIJA
- manje je više, uključiti zahteve osnovne funkcionalnosti u UI,
INTERAKCIJA
... Dizajn interfejsa mobilnih uređaja ČOVEK RAČUNAR
- smernice za razvoj interfejsa prema platformama

- Android
http://developer.android.com/guide/practices/ui_guidelines/index.html
- Apple
https://developer.apple.com/library/ios/documentation/UserExperience
/Conceptual/MobileHIG/index.html
- Windows mobile
http://msdn.microsoft.com/en-us/library/bb158602.aspx
- BlackBerry
http://docs.blackberry.com/en/developers/deliverables/17964/BlackBer
ry_Smartphones-UI_Guidelines-T893501-980426-0721013746-001-6.0-
US.pdf
121
INTERAKCIJA
Dizajn interfejsa ugradnih uređaja ... ČOVEK RAČUNAR
Ugradni (embedded) sistemi
0 14000 900
9 1 000
2 15000 100
8
200
7 16000 300
3
6 4 17000 400
5 500
18000 600
INTERAKCIJA
... Dizajn interfejsa ugradnih uređaja ČOVEK RAČUNAR
Non-GUI interfejsi
– razmeštanje dugmića, tastera, prekidača i mernih instrumenata,
– robusnost – normalna i nenormalna,
– konzistentnost,
– perceptivna dostupnost – kompatibilnost sa mentalnom slikom,
transfer znanja,
– usmeravajuće ili slobodno za pokrenuti, modovi rada.
GUI interfejs već viđen – jednostavnost, pažljivo odabrani stilovi, zadaci i
tehnike.
Poseban naglasak na
• prevencija greške,
• alarmiranje stanja izuzetka,
• vreme odgovora – RealTime,
• pratiti važeće standarde i preporuke.
122
INTERAKCIJA
Sveprisutno računarstvo ... ČOVEK RAČUNAR
TRANSPARENTNOST
(in/out door) Tracking sistemi iz VR/AR
Kamere (normalne, IC,termalne),
Sound/magnetic tracking devices,
fizički senzori (gravitacije, ubrzanja),
Nitendo Wii kontroler
INTERAKCIJA
... Sveprisutno računarstvo ... ČOVEK RAČUNAR
Atila Barčik i Sabolč Nađ – AR Chess, ispitni rad iz VRS 09/10
123
INTERAKCIJA
... Sveprisutno računarstvo ... ČOVEK RAČUNAR
Xbox 360 Kinect
INTERAKCIJA
... Sveprisutno računarstvo ČOVEK RAČUNAR
Robert Kiš – Rehabilitacija, MSc rad iz VRS 2012.
124

HCI 2014 Skripta PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HCI 2014 Skripta PDF

Uploaded by

Copyright:

Available Formats

Prof.

DVANAESTA GENERACIJA STUDENATA

Novi Sad, 2014. godine

Dr Dragan Ivetić, redovni profesor

Grupa za računarsku grafiku, interakciju i multimediju

Dipl. ing. elek. - računarstvo i automatika, 1990, FTN,

vežbe (C#, WinForms ili WPF) – 50 bodova

predmetna studija (heuristike i GOMS-KLM testiranje) – 20 (>15) bodova,

aktivno prisustvo na predavanjima – 0 - 5 bodova.

2. Ispit (usmeno ili pismeno) – 30 bodova. 75 – 84 Osam

HCI je disciplina koja se odnosi na projektovanje, evalvaciju i implementaciju

HCI takođe proučava: performanse zadataka koje zajednički obavljaju ljudi i

a) Korisnički interfejs omogućava korisniku da “interact” sa programom.

Korisnički interfejs ne sme da reflektuje

1. SKRIPTA (referentni materijal) ALI SA VAŠIM BELEŠKAMA/KOMENTARIMA

Sve ono što korisnik očekuje.

novo bolje od starog?

Kako kvantitativno pokazati ko je za korisnika bolji?

... Svet oko nas ... INTERAKCIJA

• pomoću narednih 5 operatora :

... Svet oko nas ... INTERAKCIJA

Koji interfon obezbeđuje kraće čekanje pred zgradom?

Koliko vremena da naredim brisanje Rezultati.doc?

... Svet oko nas ... INTERAKCIJA

... Svet oko nas ... INTERAKCIJA

• IZLAZ različite kvalitativne i kvantitat. mere (zavisno od nivoa operatora) za

... Svet oko nas ... INTERAKCIJA

... Svet oko nas ... INTERAKCIJA

KLMDRAG-AND-DROP-METHOD = M+P + B + M+P + B = 1,35+1,1 + 0,1 + 1,35+1,1 + 0,1

... Svet oko nas ... INTERAKCIJA

Ima li primedbi tokom upravljanja daljinskim?

Ima li primedbi kada se želi slušati radio stanica na HiFi?

Gde je omašio D3?

• Analizirati interfejs prema “zdravom razumu"

• Razviti model "human cognitive processing“ koja bi

... Kako utvrditi da će interfejs (element) INTERAKCIJA

... Kako utvrditi da će interfejs (element) INTERAKCIJA

• Testirati interfejs sa korisnicima (direktni, indirektni,

Kako projektanti interfejsa da odrede da interfejs (element)

Osnovni merljivi ljudski faktori za evaluaciju INTERAKCIJA

Za svaku grupu i zadatak evaluirati projektantske odluke kroz naredne

FORMALNA INSPEKCIJA UTILITARNOSTI

smernice platformi na različitim nivoima (opšte-dizajnerske do programerskih):

cela kolekcija smernica za dizajniranje

a dalje detaljno o poznatim heuristikama...

1. TEŽITI KONZISTENTOSTI – najčešće prekršeno, identična terminologija u svim

2. OMOGUĆITI FREKVETNIJIM KORISNICIMA UPOTREBU PREČICA – veća brzina

3. DAVATI INFORMATIVNI FEEDBACK – za svaku akciju dati feedback, skromniji za

4. PROJEKTOVATI DIJALOGE NAGLAŠENE ZATVORENOSTI – sekvence akcija grupisati

5. PONUDITI PREVENCIJU I RUKOVANJE GREŠKOM – input line guard, ako pogreši

6. DOZVOLITI PONIŠTAVANJE EFEKATA AKCIJE (UNDO) – veliko olakšanje kod

8. REDUKOVATI OPTEREĆENJE RADNE MEMORIJE – 7 ± 2, jednostavan prikaz,

1. NALIKOVATI STVARNOSTI – koristiti uobičajenu terminologiju, koncepte i fraze za

2. KONZISTENTNOST I STANDARDI – Least Surprise princip – slične stvari izgledaju i

6. FLEKSIBILNOST i EFIKASNOST – kratice i ostala ubrzanja interakcije.

9. PRIJAVA GREŠKE, DIJAGNOSTIKA, OPORAVAK – biti precizan, konstruktivan,

10. ESTETIČAN i MINIMALISTIČKI DIZAJN – manje je više.

• Samostalna studija stanja HCI u komercijalnom sw/hw...

Vaša studija mora imati naredna poglavlja:

2. EVALUACIJA PO HEURISTIKAMA – odabrati jedan tip heuristike (ne

IBM 305 – Processing unit

Read-evaluation loop, odličan za učenje programskog jezika

• osmislio ideje/koncepte današnjih interfejsa: