ESI HCI 2015 Skripta Deo 1

1

Prof. dr Dragan Ivetić

INTERAKCIJA ČOVEK RAČUNAR

Primenjeno softversko inženjerstvo

ČETRNAESTA GENERACIJA STUDENATA

Novi Sad, 2015. godine

KOMPJUTERSKA GRAFIKA INTERAKCIJA i MULTIMEDIJA

Interakcija čovek računar - Uvod, skripta, Dr Dragan Ivetić, r. prof.

2


2015/2016Prof. dr Dragan Ivetić

INTERAKCIJA ČOVEK RAČUNAR, E0243, 3 + 3Human-Computer Interaction - HCI

Dr Dragan Ivetić, redovni profesor

Jelica Kapetina, dipl. ing.

Departman za računarstvo i automatiku

Odsek za primenjene računarske nauke i informatiku

Katedra za primenjene računarske nauke

Grupa za računarsku grafiku, interakciju i multimediju

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

So there for the enlightenment, guys. It's time to put the two back together.”

Michael Dertouzos(Interviwed in Scientific American, July 1997)



O nastavniku

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

Mr teh. nauka - formalizmi u SE, 1994, FTN,

Dr teh. nauka - integracija HCI i SE, 1999, FTN.

DAAD, RWTH Aachen – Primena multim. u industriji, 1997.

R. prof., FTN – elektrotehn. i računarstvo, 2010.

Grafički i multimedijalni sistemi, šk. 2001./2002.

Interakcija čovek računar, šk. 2002./2003.

Kompresija podataka, šk. 2005./2006.

Sistemi virtuelne realnosti, 2009./2010.

Razvoj računarskih igara, šk. 2013./2014.

Kabinet ?, TMD?, Fruškogorska 11, Novi Sad

(021) 485-2419?, 485-2424

http://gim.ftn.uns.ac.rs [email protected]


3



Kako položiti predmet?

1. Predispitne obaveze, do 70 bodova:

vežbe (C# i WPF) – 50 bodova + deskriptor.

projekat (1:1, 1:2 ili 1:3), 3 checkpoints

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

2. Završni ispit (moguće 3 isključive varijante)

1. BEZ (vežbe>24 i studija >14) – 55..70

(krajem semestra potpisana saglasnost)

2. Multiple choice u ispitnom roku (8 .. 15)

(vežbe>24), mogući broj bodova – 55 .. 85

3. Usmeni 20 minuta (15.. 30), (krajem semestra saglasnost) – 55 .. 100

(vežbe>24), termini na GIMu tokom JAN FEB MART APR MAJ, 2 puta

Broj bodova Ocena

55 – 64 Šest

65 – 74 Sedam

75 – 84 Osam

85 – 94 Devet

95 - 100 Deset

Potpis se dobija bez uslova.

INTERAKCIJA ČOVEK RAČUNARProf. dr Dragan Ivetić

2015/2016

Interakcija – šta je to?

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

interaktivnih kompjuterskih sistema koje koriste ljudi pri čemu se proučavaju

i glavni fenomeni koji ih okružuju.

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

kompjuteri, strukturu komunikacije čovek-kompjuter, sociološku i

organizacionu interakciju tokom projektovanja sistema, čovekove mogućnosti

da koristi kompjuter (uključujući mogućnost da uči), algoritme i

programiranje samog interfejsa, inženjerske probleme koji se pojavljuju

tokom projektovanja i izgradnje interfejsa i procese specifikovanja,

projektovanja i implementacije interfejsa.


4


2015/2016

Šta je korisnički interfejs?

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

b) Pomoću njega korisnik upošljava program kako bi završio svoj zadatak.

c) Korisnički interfejs omogućava korisniku da “interact” sa svojim zadatkom.

Korisnički interfejs ne sme da reflektuje

programske strukture (koda i podataka),

nego strukture domenskog zadatka i/ili

procesa rešavanja zadatka. Korisnici ne

bi trebali da “interact” sa kompjuterom,

nego sa svojim zadacima.


2015/2016

Multidisciplinarna priroda HCI

KOGNIT.

PSIHOL.

SOCOL.I ORGAN.

PSIHOL.ERGONOMIJA

INŽENJERING

DIZAJN

ANTROPOLOG.SOCIO

LOGIJA

FILOZOFIJA

LINGVISTIKA

VEŠT.INTELI.

RAČUN.NAUKE


5


2015/2016

Šta treba izučavati u HCI kursu (kursevima)?

Da obavi funkciju (poznato!) i

look&feel, poveže obe STRANE!

po svim dizajnerskim

prostorima:

OS GUI

WEB

MOBILE

EMBEDDED

UBIQUITOUS

ČOVEK (društvo), ergonomija,

čula, pažnja, memorija,

rešavanje problema,

učenje i sticanje veštine,

Cyber Friend, GROUPWARE

Interakcioni uređaji, kako

rade da bi se bolje uposlili!

RADNO MESTO, OKRUŽENJE


2015/2016

Kako mi idemo?

1. O kursu

2. Uvodna razmatranja (korisnost v.s. upotrebljivost, KLM, informaciona

petlja, usability, heuristike, GOMS),

3. HCI događaji (odakle krenuo, gde smo sada i gde idemo),

4. Proces razvoja (UCD, kako spoznati zadatak, korisnika i kontekst

upotrebe, prototipovi),

5. Dizajniranje interfejsa različitih dizajnerskih prostora,

6. O čoveku (čula, memorija, proces učenja, sticanja veštine…),

7. Interkacioni uređaji (tastature, pointerski, monitori, Ecopy, Hcopy,

specijalne namene)


6


2015/2016

Literatura

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

2. Alan Dix, Janet Finlay, Gregory Abowd, Russel Beale: Human-Computer Interaction, 3rd Ed., 2004.

3. Debbie Stone, Mark Woodroffe, Caroline Jarrett, Shailey Minocha: User Interface Design And Evaluation, 2005.

4. Ben Shneiderman: Designing the User Interface – Strategies for Effective Human-Computer Interaction, 3rd Ed., 1998.

2. Jenny Preece, Yvonne Rogers, Helen Sharp, David Benyon, Simon Holland, Tom Carey: Human-Computer Interaction, 1995.

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

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


2015/2016

ŠTA TREBA DA RADI DOBAR INTERFEJS?

Sve ono što korisnik očekuje.


7


2015/2016

40te prošlog vekaUHF, VHF, jačina, sopran/bas, osvetljenje, kontrast, V i H sync, AFC…Gde se memorišu kanali?


2015/2016

MANJE JE BOLJE!!

Brže prebacivanje kanala - Userfriendly


8


2015/2016

Pa smo se ulenjili – komfor fotelje!


2015/2016

Patologija?


9


2015/2016

Došli pameti i pojednostavili!!!


2015/2016

Da nas vide naši stari kako mašemo TV aparatu…


10


2015/2016

Svet oko nas ...

Interfon nove zgrade na Grbavici

novo bolje od starog?

Kako kvantitativno pokazati ko je za korisnika bolji?


2015/2016

... Svet oko nas ...KLM ...

• prediktivne teorije/modeli kao kvantitativni ukazatelj na bolje rešenje!

• na nivou motorike – Keystroke Level Modeling

Card, Moran, & Newell, "The keystroke-level model for user performance time with interactive systems” July 1980.

• pomoću narednih 5 operatora :

• Keying - 0,12s dobar (90 r/m); 0,28 srednji (40 r/m) ili 1,20 početnik,

• Button press - 0,10s (tj. 0,20s),

• Pointing – prosečno 1,10s, za tačno Fitts’s law,

• Homing - 0,36s,

• Mental preparation- 1,35s (odnosno 1,2s da bi za repeated pao na 0,95s),

• Respoding – vreme čekanja korisnika na reakciju sistema za neki unos,

• sračunava vreme potrebno za interakciju kao sumu elementarnih akcija koje

je potrebno načiniti,

• starosni multiplikatori ( 40–55 sa 1.4, 55–60 sa 1.7 i 65+ sa 2.2).


11


2015/2016

... Svet oko nas ...... KLM

• operator R (> 0,1s zahteva feedback, 0,25s korisnik će ponoviti unos, >1s?),

• operator M izazovan za umetanje, pravila:

1. Postavi M pre svakog K i svakog P (samo za pointiranje na komandu, ali

ne i njene parametre),

2. Izbriši M ako je anticipirano u prethodnom operatoru (PMK → PK),

3. Izbriši M unutar kognitivne jedinice ( “Dragan⏎”→ MKKKKKK MK),

4. Izbriši M pre uzastopnih terminatora ( “Dr⏎ ⏎”→ MKK MK K),

5. Izbriši M koji je terminira komandu ( “del⏎”→ MKK K),

6. Izbriši preklapajuće M (R MK → R K),

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

Koliko vremena da naredim brisanje Rezultati.doc?


2015/2016

... Svet oko nas ...GOMS ...

• prediktivna teorija iz 1983. od Stuart Card, Thomas Moran i Allen Newell

(CMN-GOMS)

Goals – korisnikov cilj, šta namerava da obavi, ali i podcilj,

Operators – akcije koje se sprovode do (pod)cilja, mogu biti izražene na:

konceptualnom nivou – mentalni model i slike,

semantičkom nivou – nivo komandi (uneti PIN, ukucati PIN ili ...),

sintaksnom nivou – kada se prepoznaje struktura komande

(imenica-glagol, glagol-imenica, objekt-op...)

leksičkom nivou – nivo samog uređaja i korisnika, GOMS-KLM.

Methods – sekvenca operacija koje treba obaviti do cilja, moguće da postoji

više metoda koje vode istom cilju (kako zatvoriti prozor),

Selection_rules – (ako je potrebno) definišu koju metodu koristiti da se u

datom slučaju stigne do (pod)cilja,


12


2015/2016

... Svet oko nas ...... GOMS ...

• ULAZ je detaljni opis (goal-directed) zadataka i UI, tako što

• odabere se glavni cilj (odštampati neki fajl),

• pisanje metode koja vodi ka cilju,

• ako ima podciljeva – piši metodu za svaki podcilj, rekurzija,

• stati kada se dostigne željeni apstraktni nivo operacije,

• evaluirati dati opis zadatka u željenom kontekstu (npr. perforansa, manji

mentalni napor i sl).

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

1.upoređivanje različitih UI rešenja,

2.profilisanje,

3.sensitivity & parametric analysis,

4.gradnju help sistema,


2015/2016


KLM-GOMS primer za brisanje nekog fajla,

GOAL: DELETE-FILE. GOAL: SELECT-FILE. . [select#: GOAL: KEYBOARD-TAB-METHOD. . GOAL: MOUSE-METHOD]. . VERIFY-SELECTION

. GOAL: ISSUE-DELETE-COMMAND

. . [select*: GOAL: KEYBOARD-DELETE-METHOD

. . . PRESS-DELETE

. . . GOAL: CONFIRM-DELETE

. . GOAL: DROP-DOWN-MENU-METHOD

. . . MOVE-MOUSE-OVER-FILE-ICON

. . . CLICK-RIGHT-MOUSE-BUTTON

. . . LOCATE-DELETE-COMMAND

. . . MOVE-MOUSE-TO-DELETE-COMMAND

. . . CLICK-LEFT-MOUSE-BUTTON

. . . GOAL: CONFIRM-DELETE

. . GOAL: DRAG-AND-DROP-METHOD


. . . PRESS-LEFT-MOUSE-BUTTON

. . . LOCATE-RECYCLING-BIN

. . . MOVE-MOUSE-TO-RECYCLING-BIN

. . . RELEASE-LEFT-MOUSE-BUTTON]#Selection rule for GOAL: SELECT-FILE

If hands are on keyboard, use KEYBOARD-TAB-METHOD,else use MOUSE-METHOD

*Selection rule for GOAL: ISSUE-DELETE-COMMANDIf hands are on keyboard, use KEYBOARD-DELETE-METHOD,

else if Recycle bin is visible, use DRAG-AND-DROP-METHOD,else use DROP-DOWN-MENU-METHOD

#Selection rule for GOAL: SELECT-FILE

If hands are on keyboard, use KEYBOARD-TAB-METHOD, else use MOUSE-METHOD

*Selection rule for GOAL: ISSUE-DELETE-COMMAND

If hands are on keyboard, use KEYBOARD-DELETE-METHOD,else if Recycle bin is visible, use DRAG-AND-DROP-METHOD,else use DROP-DOWN-MENU-METHOD.


13


2015/2016


. . GOAL: DRAG-AND-DROP-METHOD


. . . 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


2015/2016

... Svet oko nas ...... GOMS

• nije tako laka kao analiza prema heuristikama, smernicama i/ili koginitivnom

walkthrough,

• namenjen samo za goal-directed zadatke,

• pretpostavlja se da zadatke obavljaju vešti korisnici kojima je sve čitljivo,

ikone odlično osmišljene, veoma jasne komande ...

• ne uključuje socijalno-organizacioni uticaj,

• evidentan napor je potreban za inicijalni model, ali još uvek lakše od

testiranja sa korisnicima,

• GOMS poštuje reusability starijih modela.


14


2015/2016

... Svet oko nas ...

1964. Interakcija kao informaciona petlja

RECEPTORI

EFEKTORI EFEKTORI EFEKTORI

RECEPTORI RECEPTORI


2015/2016


RECEPTORI

EFEKTORI

?feedback


15


2015/2016


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 ...


2015/2016


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..."


16


2015/2016

from New York Times 24 Aug 96 p7.The crash of a Cali-bound American Airlines jet last December in Colombia, S.A., occurred because the plane's captain entered an incomplete command into the onboard computer - and the default action taken by the software pointed the plane in the wrong direction. The beacons at the Cali (ROZO) and Bogota (ROMEO) airports both begin with the letter R, which is the only character the pilot typed; instead of proceeding toward Cali, the plane turned in the opposite direction (toward Bogota) and crashed into a mountain. 150 + 8 Greška pilota, ili ?


Pilot srušio putnički avion


2015/2016


Pogubna radioterapija Multidata Systems International Corp. softvera

8 pacijenata ubijeno a preko 20 teško povređeno u Nacionalnom Institutu

za Onkologiju Paname At the end of April 2001, a team of experts from M.D. Anderson Cancer Center, in Houston, Texas, United States of America, was invited to Panama by the ION’s director to investigate theproblem. Those experts determined that the algorithm used in the TPS software gave treatment times differing by a factor of about two, depending on how the data for the partially shieldedtreatment fields were entered into the computer program.


17


2015/2016

... Svet oko nas

Don Norman – struje izvršenja i evaluacije, više okrenuo čoveku

FORMIRAJ

CILJ

Osmotri

stanje sistema

Interpretirajstanje sistema

Evaluiraj ishod

Izvrši

akciju(e)

Specifikujakciju(e)

Formirajintenciju

Gde su izvori grešaka u prethodnim

primerima sveta oko nas?


2015/2016

Kako utvrditi da će interfejs (element) prouzorovati probleme? ...

• Analizirati interfejs prema “zdravom razumu"• intuicija može otkriti očigledne propuste, zbunjujuću i

neefikasnu interakciju,• mnoge slabe tačke nisu “intuitivno prepoznatljive” bez

obzira na iskustvo.

• Razviti model "human cognitive processing“ koja bi predvidela probleme koje će korisnik imati kada koristi interfejs

• za sada samo parcijalni uspeh.


18


2015/2016

... Kako utvrditi da će interfejs (element) prouzorovati probleme? ...

• Razviti teoriju neuronske korelacije HCI koncepata ('ease of use', 'usefulness'), pa pratiti neuronske aktivnosti test korisnika dok rade na datom interfejsu

• nova oblast istraživanja,• samo grubi rezultati (koji se odnose na ceo

interfejs, a nemoguća identifikuje loš widgets).


2015/2016

... Kako utvrditi da će interfejs (element) prouzorovati probleme?

• Testirati interfejs sa korisnicima (direktni, indirektni, eksperti) i identifikovati probleme bilo da su opservirani ili raportirani od strane korisnika

• grupe od 5-8 korisnika koji su već otkrivali probleme,• razviti smernice šta treba izbegavati,• Usability Engineering.

Kako projektanti interfejsa da odrede da interfejs (element) NEĆE PROUZROKOVATI PROBLEME?


19


2015/2016

Nilsenova taksonomija prihvatljivosti sistema

Korisnost (usefulness)

Korisnost (utility)

http://www.nngroup.com/

Usability kao atribut prihvatljivosti sistema

PRIHVATLJIVOST

SISTEMA

System acceptability

SOCIOLOŠKA

PRIHVATLJIVOST

Social acceptability

PRAKTIČNA

PRIHVATLJIVOST

Practical acceptability

Cena (cost)

Performansa

Kompatibilnost

Pouzdanost

Upotrebljivost (usability)

Easy to learn

Effecient to use

Easy to remember

Few errors

Subject pleasing


2015/2016

Kada se ne misli o nazivu proizvoda

Chevrolet Nova, 1962

Za Špansko govorno područje kao Chevrolet Shevy

No va -> ne ide


20


2015/2016

Usability obrazovanje

HCI akademski programi obrazuju mnoge različite profesionalce:

interaction designers,

user interface designers,

user interface developers,

usability engineers,

user experience designers,

Web designers,

Web developers,

human factors engineer,

technical communicators,

online information designers,

project managers,

…


2015/2016

Ekspertske revizije i testiranje usability ...

Metode ekspertske revizije:

EVALUACIJA PO HEURISTIKAMA (usability inspection)• odrediti slaganje sa listom projektantskih heuristika (npr. 8 zlatnih pravila), • tim od 3-5 članova, jedan član otkrije do 35% a 5 članova i do 75%,• za jednostavan interfejs oko 1h.

REVIZIJA PO SMERNICAMA• odrediti slaganje sa dokumentom smernica organizacione ili neke druge prirode, • kako dokument može imati hiljade stavki, vremenski je zahtevna revizija, do par

nedelja za velike sisteme.

INSPEKCIJA KONZISTENTNOSTI• konzistentnost između više interfejsa, materijala za obuku i sistema pomoći, • terminologija, boje, lejauti, ulazni i izlazni formati...


21


2015/2016

... Ekspertske revizije i testiranje usability ...

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

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

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

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

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


2015/2016

... Ekspertske revizije i testiranje usability

IBM je lider i njegov kompleks usability labs na Floridi čine• 16 laboratorija kružno raspoređenih,• 3x3m prostor za subjekta i ogledalom odvojeni observeri,• simulacija uslova (buka, vreme, aero, temperatura, mirisi...),• sve moguće observacije (A, V, zdravstveni, motorika...).

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

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

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

PREDNOSTI I MANE testiranja u usability labs?


22


2015/2016

Smernice i heuristike

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

Microsoft User Interface Design Guidelineshttp://msdn.microsoft.com/en-us/library/jj651618(v=nav.71).aspx

Apple OS X Human Interface Guidelineshttps://developer.apple.com/library/mac/documentation/userexperience/conceptu

al/applehiguidelines/HIPrinciples/HIPrinciples.html

Adroid UI Overviewhttp://developer.android.com/guide/topics/ui/overview.html

cela kolekcija smernica za dizajniranjehttp://www.idemployee.id.tue.nl/g.w.m.rauterberg/lecturenotes/ui-guide-line-

collection.htm

a dalje detaljno o poznatim heuristikama...


2015/2016

Shneiderman-ovih osam zlatnih pravila ...

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


23


2015/2016

... Shneiderman-ovih osam zlatnih pravila ...

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


2015/2016


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


24


2015/2016


4. PROJEKTOVATI DIJALOGE NAGLAŠENE ZATVORENOSTI – sekvence akcija grupisati da imaju početak i kraj, kao i sve korake do kraja (@kupovina).


2015/2016


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


25


2015/2016


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


2015/2016


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...


26


2015/2016


8. REDUKOVATI OPTEREĆENJE RADNE MEMORIJE – 7 � 2, jednostavan prikaz, konsolidovati višeprozorske prikaze, uvoditi skraćenice.


2015/2016

Nilsenovi principi ... http://www.nngroup.com

1. NALIKOVATI STVARNOSTI – koristiti uobičajenu terminologiju, koncepte i fraze za korisnika, informacije u prirodnom i logičkom redosledu.

2. KONZISTENTNOST I STANDARDI – Least Surprise princip – slične stvari izgledaju i delaju isto na interfejsu, imenica-glagol / glagol-imenica sintaksa interakcije, slediti standard platforme.

3. HELP i DOKUMENTACIJA – on / off line, zadatak-orijentisani help.

4. KORISNIKOVA KONTROLA I SLOBODA – obezbediti undo, dugačke operacije moraju biti prekidive (sa/bez nastavka), dijalog i cancel dugme.

5. VIDLJIV STATUS SISTEMA – korisnik uvek svestan stanja sistema (promena kursora, selekcija objekta, status bar...), BEZ PRETERIVANJA, vreme odgovora (<0.1s,

.1s – 1s, 1s – 10s sa , a za > 10s progress bar).


27


2015/2016

... Nilsenovi principi ...

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

7. PREVENCIJA GREŠAKA, bez preterivanja.

8. PREPOZNAJ, NE DA SE PAMTI –štednja radne memorije korisnika.

9. PRIJAVA GREŠKE, DIJAGNOSTIKA, OPORAVAK – biti precizan, konstruktivan, ljubazan, bez blamiranja i tehničkih detalja.

We’re sorry, but we were unable to complete your call as dialed. Please hang up, check your number, or consult the operator for assistance.

ILLEGAL TELEPHONE NUMBER! CALL ABORTED! ERROR number 583-2R6.9.Consult your user manual for more information.


2015/2016

... Nilsenovi principi

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


28


2015/2016

Weinschenk-Barker klasifikacija

1. User Control: heuristics that check whether the user has enough control of the interface.2. Human Limitations: the design takes into account human limitations, cognitive and sensorial, to avoid overloading them.3. Modal Integrity: the interface uses the most suitable modality for each task: auditory, visual, or motor/kinesthetic.4. Accommodation: the design is adequate to fulfill the needs and behaviour of each targeted user group.5. Linguistic Clarity: the language used to communicate is efficient and adequate to the audience.6. Aesthetic Integrity: the design is visually attractive and tailored to appeal to the target population.7. Simplicity: the design will not use unnecessary complexity.8. Predictability: users will be able to form a mental model of how the system will behave in response to actions.9. Interpretation: there are codified rules that try to guess the user intentions and anticipate the actions needed.10. Accuracy: There are no errors, i.e. the result of user actions correspond to their goals.11. Technical Clarity: the concepts represented in the interface have the highest possible correspondence to the domain they are modeling.12. Flexibility: the design can be adjusted to the needs and behaviour of each particular user.13. Fulfillment: the user experience is adequate.14. Cultural Propriety: user's cultural and social expectations are met.15. Suitable Tempo: the pace at which users works with the system is adequate.16. Consistency: different parts of the system have the same style, so that there are no different ways to represent the same information or behavior.17. User Support: the design will support learning and provide the required assistance to usage.18. Precision: the steps and results of a task will be what the user wants.19. Forgiveness: the user will be able to recover to an adequate state after an error.20.Responsiveness: the interface provides enough feedback information about the system status and the task completion.


2015/2016

Sadržaj predmetne studije ...• Samostalna studija stanja HCI u komercijalnom sw/hw...

POSTUPAK • Definisati svoj profil, barem jedan kontakt!• Prijaviti jedinstvenu temu studije (proveriti iskoršitene teme na GIMu)

Evaluacija upotrebljivosti <softvera/sistema koji je predmetstudije> za <zadatak koji je klm-goms modelovan>

sa opisom do zakazanog datuma. Opis studije mora sadržati:• naziv softverskog/hardverskog proizvoda (koji se evaluira),• platformu (hw/sw) i verziju (pogotovo kod sw),• heuristika koja je upotrebljena pri evaluaciji,• zadatak KLM-GOMS koji se evaluira (eventualno link do web stranice).

• Sačekati da se tema prihvati pa pisanje studije, pokaži tok prihvatanja.• Upload pdf studije na gim sajt, do zakazanog datume!• Sačekati mišljenje (bodove) recezenta (eventualno dodati zahtevano).


29


2015/2016

... Sadržaj predmetne studije ...

• Konstruktivna kritika...• ILUSTRACIJE (ekranske rezolucije) posmatranog interfejsa su dobrodošle!• Jednostavne i kratke rečenice, objašnjenje činjenice!!

Vaša studija mora imati naredna poglavlja:

1.PREDMET STUDIJE – kratak opis aplikacije/uređaja koja se analizira (do 2 strane A4 formata, Calibri, 11, single), za egzotične primere mora se obezbediti link/primerak sw/hw.


2015/2016

... Sadržaj predmetne studije ...

2. EVALUACIJA PO HEURISTIKAMA – odabrati jedan tip heuristike (ne objašnjavati je ako je poznata) i analizirati aplikaciju po svakoj stavci, npr.2.1 Težiti kozistentnosti

... opis rečima i slikom gde nije ispunjena ova heuristika...... ILI/I naglasiti gde je korektno ispunjena...

2.2, 2.3, ... barem da je detektovano mimoilaženje po 25% stavki.

3. PROCENA EFIKASNOSTI – ovde se sprovodi KLM-GOMS modelovanjeodabranog zadatka3.1 Opis zadatka za koji se modeluje

... zadatak mora imati barem 2 alternativna toka završetka tako da ukupan broj operacija KLM nivoa bude minimalno 25...

3.2 KLM-GOMS model zadatka... model zadatka iz 3.1 u formi naredne tabele...


30


2015/2016

... Sadržaj predmetne studije

ZAKLJUČAK.

Rbr GOMS opis KLM

op

Vreme

op

Vreme

1

Vreme

2

Vreme

3

0 GOAL: DELETE-FILE

1 GOAL: SELECT-FILE

1.1 GOAL: KEYBOARD-TAB-METHOD 3,5 3,5

1.2 GOAL: MOUSE-METHOD 4,8 4,8

1 VERIFY-SELECTION M 1,35

Ukupno 1 4,85 6,15

2 GOAL: ISSUE-DELETE-COMMAND

2.1 GOAL: KEYBOARD-DELETE-METHOD

PRESS-DELETE

GOAL: CONFIRM-DELETE

M+K

M+K

1,55

1,55

3,1

2.2 GOAL: DROP-DOWN-MENU-METHOD

MOVE-MOUSE-OVER-FILE-ICON

CLICK-RIGHT-MOUSE-BUTTON

LOCATE-DELETE-COMMAND

MOVE-MOUSE-TO-DELETE-COMMAND

CLICK-LEFT-MOUSE-BUTTON

GOAL: CONFIRM-DELETE

M+P

B

M

P

B+B

MP2B

2,45

0,1

1,35

1,1

0,2

2,65

7,95

2.3 GOAL: DRAG-AND-DROP-METHOD

MOVE-MOUSE-OVER-FILE-ICON

PRESS-LEFT-MOUSE-BUTTON

LOCATE-RECYCLING-BIN

MOVE-MOUSE-TO-RECYCLING-BIN

RELEASE-LEFT-MOUSE-BUTTON

M+P

B

M

P

B

2,45

0,1

1,35

1,1

0,1

5,1

Ukupno sa 1.1 7,95 12,8 9,95

Ukupno sa 1.2 9,25 14,1 11,25

Interakcija čovek računar - HCI događaji, skripta, Dr Dragan Ivetić, r. prof.

31



HCI kroz događaje



Eniac (1943, 1946)


32



Harvard Mark I – 1944. godine



IBM 305 RAMAC (1956)

IBM 305 – Processing unit

IBM 350 – Disk Storage unit

IBM 370 – Printer

IBM 323 – Card Punch

IBM 380 – Console (Card Reader and

IBM Electric typewriter)

BM 340 – Power Supply


33



DEC PDP 1 kompjuter 1960.



Programiranje text interfejsa

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

repeat

read-event(input)

case input.type

type_1:

do type_1 processing

type_2:

do type_2 processing

...

type_n:

do type_n processing

end case

end repeat

• kada je naglasak aplikacije

na funkciji, ali ne i HCI,

• uglavnom mono-

korisničko/programsko,


34



Ivan Sutherland’s SketchPad, 1962. PhD

• osmislio ideje/koncepte današnjih interfejsa:

• ikone: male sličice koje označavaju neki entitet,

• ulazne tehnike: efikasna upotreba svetlosnog pera,

• world coordinates: separacija ekranskih koordinata od koordinata

slike,

• objektna orijentacija,

• ali i napretke u hardveru:

– “low-cost” grafičke terminale,

– ulazni uređaj - data tablets (1964),

– display procesor sposoban za

real-time manipulaciju slikom (1968).



oNLine System, D. Engelbart, 1968.

• Document Processing,– savremeni word processing,– hypermedia.

• Input / Output,– miš i stenografska tastatura,– prikazi visoke rezolucije,– višestruki prozori,– “kompjuterski” nameštaj.

• Shared work,– deljeni fajlovi i personal annotations,– razmena elektronske pošte,– deljeni prikazi sa više pointera,– AV konferencije,– ideja Interneta.

• User testing & training.


35



Ideja personalnog kompjutera Alan Kay (1969), tvorac “simbioze čoveka i računara”,

– Dynabook vizija notebook kompjutera:

“Imagine having your own self-contained knowledge

manipulator in a portable package the size and shape of an

ordinary notebook. Suppose it had enough power to out-

race your senses of sight and hearing, enough capacity to

store for later retrieval thousands of page-equivalents of

reference materials, poems, letters, recipes, records,

drawings, animations, musical scores...”

Xerox PARC, sredina 1970.

– Alto computer – personalna radna stanica,

• lokalni CPU, bit-mapped display, miš,

• moderan GUI,

• windows, menus, scroll bars, mouse selection, etc

• LAN (Ethernet) i E-mail.



Schneiderman : “Direct Manipulation!” (1983)

objasnio je osnovne ideje korisnikove kontrole:

1. vidljivost objekata i akcija,

2. brze, reverzibilne i inkrementalne akcije,

3. zamena kompleksne command-line sintakse direktnom,

vizuelnom manipulacijom objektima od interesa.


36



Komercijala, Xerox Star, 1981.• prvi komercijalni PC razvijen za “business professionals”,

• savremeni GUI zasnovan na idejama Xerox PARC:

– čoveku familijaran koncept radne površine (desktop),

– koristi “pokaži i pritisni” a ne “pamti i ukucaj”,

– property prostor za definisanje izgleda i ponašanja,

– what you see is what you get (WYSIWYG).

• prvi sistem razvijen pomoću usability engineering– intenzivan low-fidlity prototyping & usage analysis,– usability testing sa potencijalnim korisnicima,– iterative refinement interfejsa.

• komercijalna propast– cena ($15,000), IBM najavio jeftiniju mašinu,– ograničena funkcionalnost, nema spreadsheet,– zatvorena arhitektura, nema 3rd party vendors,– prikazan kao spor, mada je bio poprilično brz,– tvrdoglavo pridržavanje direktnoj manipulaciji.



Komercijala, Apple Lisa, 1983.• zasnovana na Star idejama,

– predhodnik Macintosh-a, 1984. godine

– nešto jeftinija (10,000 $),

– komercijalno propala.

• IBM PC XT sa tekstualnim

MS DOS, 1983.,

• nastavak je poznat ...


37



WIMP programiranje...icons

window

dialogue

desktop

taskbar

pointer

pop-up menu

pull-down menu

toolbar

toolbox

menubar



... WIMP programiranje...

• razvijamo adresar aplikaciju sa modalnim dijalogom (+error prevention, -

user control, - visibility, -short term memory),

• pa dugme Izmeni treba da se prikaže

forma za ažuriranje podataka o

selektovanom kontaktu,

• gde u proizvoljnom redosledu menja sadržaje i da klikne gdegod,

• Koliko je moguće rešiti po pragmi programiranja txt interfejsa?


38




• obrada događa na više regiona jednog prozora (html) po view hijerarhiji,

IzmenaKont: window

Kontakt : Panel Dugmici:

Toolbar

Da: Button

Ne: Button

ImePrezL: Label

EmailAdL: Label

EmailAdE: TextBox

ImePrezE: TextBox

svaki view u hijerarhiji dobija

svog listiner,

UI je strukturiran kao hijerarhija izlaznih

views sa prikačenim listiners ulaza,




event loop

programska logika

• nestala linearnost u interakciji sa korisnikom: main() -> f-ja -> main() -> ...,

• složenost zadataka zahteva punu slobodu interakcije i brzinu reakcije,

• stoga bolja organizacija softvera – podela posla...


39




Seeheim velike komponente, ali u OOP je bolje sa manjim komponentama,

Smalltalk uveo manju UIMS arhitekturnu komponentu MVC:

model – interno (logičko) stanje komponente,

view – kako se prikazuje na ekranu,

controller – obrada ulaza od korisnika.

MVC se uglavnom ponaša kao pipeline

ulaz → controller → model → view → izlaz.

Kada se ne ponaša baš kao pipeline?

notifikacija

POGLED MODEL

KONTR

OLER

pristup podacima

gestovi i događaji

promena podataka

Slika 1.9 Model-View-Controller trijada

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

npr. kod klika – mora se znati šta je kliknuto, kontroler mora odlučiti šta da radi sa

klikom ali pogled zna gde je šta prikazano!

kontrola “priča” sa pogledom – SEPARACIJA NIJE BAŠ KOMPLETNA




GUI ruši ulogu kontrolera u MVC, jer su izlaz i ulaz tesno povezani na OS !

IBM je uvrnuo MVC spajajući V i C u V, a uvodi Presenter u MVP:

model – podaci koji su od interesa za UI (prikazuju se ili kontrolišu),

view – obrada/ažuriranje ulaza i izlaza, rutira događaje ka prezenteru i

to potpuno pasivno (svaki event ka prezenteru) ili pak malo

šire zavisno ko je zadužen za tu interakciju, događaj ili

komandu,

presenter – middle-man, podatke iz modela formatira i šalje view.

.NET podržava MVP tako da jedna

Model-Presenter klasa može

podržati više interfejsa (ASP.NET

Web, Windows Forms ili SilverLight

aplikaciju)!

notifikacija

POGLED PREZEN-

TER

MODEL

pristup podacima

gestovi

pristup podacima

Slika 1.10 Model-View -Presenter trijada

prikaz


40



... WIMP programiranje

MS da bi svoj UIDE (HTML5, WPF,

SilverLight) približio svim

korisnicima, na osnovu MVC

uvodi

Model View ViewModel

gde je ViewModel konvertor

podataka iz Model-a u View oblik

lak za upotrebu bez kodiranja

(čak i za Interaction Designers

pomoću XAML) .

“View of the Model” obezbeđuje

da View bude samo data

bindings.

XAML

C#



Jacob: “nonWIMP - RealityBased Interaction” (1997)

WIMP (GUI)

1. serijska interakcija,

2. diskretna interakcija,

3. token-based.

nonWIMP

1. paralelna interakcija,

2. kontinualna interakcija,

3. multi-mode,

Kako programirati?.


41



Mark Weiser "ubiquitous computing“ Xerox PARC

pervasive computing, ambient intelligence, a odnedavno everyware



Computers in the Human Interaction Loop


42



Fraunhofer: Cooperating Objects

Interakcija čovek računar – Proces razvoja, skripta, Dr Dragan Ivetić, r. prof.

43



Proces razvoja interaktivnog sitema ...

Moore’s law, 1965. godine

1950 1990 2030

mogućnostiračunara

(transistors,CPU,

speed, cost...)



... Proces razvoja interaktivnog sitema ...

Buxton’s law, 2000. godine

1950 1990 2030

ponuđena/raspoloživa

funkcionalnostod tehnologije


44




God’s law

1950 1990 2030

ljudskikapacitet

system centered design

user centered design




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?


45



... Proces razvoja interaktivnog sitema

User centered design se fokusira na:

• stakeholders,

• posao/zadatke, i

• kontekst upotrebe.

Oslanja se na:

• model korisnika i zadatka,

• kontekst,

• inkluzivni razvoj,

• prototip,

• design for all.


Formiranje zahteva ...

traže se odgovori na naredna pitanja:ŠTA: što bolje razumeti korisnike, zadatke i kontekst upotrebe kako bi se

proizveo stabilni skup zahteva.KAKO: što više načina bolje ukazuju!ZAŠTO: Requirements Engineering je faza razvoja u kojoj su

najčešće greške koje su i najskuplje.

0

20

40

60

80

100

120

140

160

180

200

requirements design coding testing maintenance


46


... Formiranje zahteva

SAKUPLJANJE PODATAKAdata gatheringkorisnik, zadatak, kontekst

ANALIZA PODATAKAdata analysiskorisnik, zadatak, kontekst

ODREĐIVANJE ZAHTEVARequirements determinationkorisnik, zadatak, kontekst


Tehnike za sakupljanje podataka ...

Sakupiti dovoljno relevantnih podataka kako bi se uspostavili zahtevi (ali i za evaluaciju).

Ključno:•postaviti ciljeve (lakša odluka kako analizirati sakupljene podatke),•odnos sa korisnicima (jasno i profesionalno, uvek prvo informisani),•triangulacija (koristiti više pristupa/tehnika),•pilot studije.

Kako zabeležiti podatke?•pisanjem (sporo, jeftino),•audio (jeftino, kako one koji ne ostavljaju audio trag),•video (tačno, potrebna oprema, korisnici postaju glumci),•kompjuterski loging (automatski, nenametljivo?, kako analizirati velike količine podataka - uspostaviti korelacije).


47


... Tehnike za sakupljanje podataka ...

1. ANKETE

•serije pitanja kojima se želi izmamiti specifična informacija (kvantitativna ili kvalitativna),•odgovori: zatvoreni (yes/no, markiranje ponuđenog/ih odgovora),

otvoreni odgovor,koji su bolji?

•često je u konjunkciji sa drugim tehnikama,•odlična sa davanje odgovora na specifično pitanje od strane ogromne grupe ljudi,•obično nije potrebna osoba da rastumači pitanje ili pomogne u odgovaranju,•papirno i elektronsko (Email, web) anketiranje,

• koje je bolje? Zašto?



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.


48



2. INTERVJUrazgovor sa ljudima: licem u lice, telefonom, tele...,•uključuje postavljanje skupa pitanja:

• nestrukturirana – nema scenarija, bogato ali nisu opšteprimenljiva,• strukturirana – čvrst scenarijo (često kao lista pitanja),

opšteprimenljiva ali nije tako bogata,• semistrukturirana – rukovođen scenarijem, ali interesantna pitanja

ispitivati u dubinu, dobar balans opšteprimenljivosti i bogatstva, •dobar za istraživanje po nekom pitanju (stavki),•vremenski zahtevno i neizvodljivo da se čitava populacija poseti,•rekviziti (prototip, scenarijo) za pokretanje sagovornika.•koraci:

• introduction, warm-up,• main body,• cool-off period, closure.



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.


49



• provesti vreme sa stakeholders-ima na svakodnevnim zadacima, opservirajući posao kako se on odvija u svom prirodnom okruženju,

• odličan za razumevanje prirode i konteksta zadatka i korisnika,• zahteva od razvojnog tima dosta vremena i posvećenosti,• može rezultovati ogromne količine podataka,• može biti pasivna (slušanje i gledanje) ili aktivna (postavljaju se pitanja),• može uključiti AV snimanje, kompjuterski log i proučavanje dokumenata.

4. DIREKTNA ILI INDIREKTNA OPSERVACIJA

jer korisnici teško objašnjavaju šta rade ili tačno opisuju

kako su obavili zadatak,


... Tehnike za sakupljanje podataka

5. PROUČAVANJE DOKUMENTACIJE• uključuje uputstva, regulative, poslovnike, i slično,• dobro za shvatanje zakona (standarda) i sticanje

osnovnih informacija o radu,• odličan izvor podataka o koracima svake aktivnosti, i

propisa koji regulišu zadatak,• ne koristi se u izolaciji (npr. korisnici možda ne prate

dokumenta tačno),• velika prednost u odnosu na druge tehnike jer ne

zahteva vreme stakeholders-a.

6. PROUČAVANJE SLIČNIH PROIZVODA• od velike pomoći za generisanje dizajnerskih alternativa i

prompt requirements.


50


Interpretacija i analiza podataka

• interpretacija: struktura i zapis opisa zahteva iz sakupljenih podataka,• analiza: dobijanja zahteva iz interpretiranih podataka,

• inicijalna interpretacija pre dublje analize,

• dobro je pokrenuti interpretaciju odmah posle sakupljanja podataka, jer je iskustvo sveže,

• više interpretacije i analize → dublje razumevanje zahteva → opis zahteva biće proširen i razjašnjen.


Dokument zahtevaobično

vol. 1 – ARHITEKTONSKI ZAHTEVIopisuje potrebnu arhitekturu sistema

vol. 2 – FUNKCIONALNI ZAHTEVIfunkcionalnost koja se mora izvršavati

vol. 3 – NEFUNKCIONALNI ZAHTEVIk-ke sistema na koje korisnik ne može uticati

vol. 4 – ZAHTEVI OGRANIČENJAuspostavlja marginu rada sistema po svakoj putanji


51


Spoznavanje korisnika ...

saznati ko su korisnici, ali i stakeholders:

• opisati korisnike kroz njihove karakteristike relevantne za UI

(starost, pol, kulturno nasleđe, fizičke sposobnosti, obrazovanje,

IT/kompjuter iskustvo, motivacija, stav...),

• projektovati UI za “impaired”, 15-35% populacije,

• profilisanje korisnika – opisati korisnike i njihove karakteristike,

- što je manja grupa korisnika, laške je projektovati UI, zašto?

- šta kada ima puno potencijalnih korisnika:

prototipiziranje korisnika - personas,

dan u koži korisnika.


... Spoznavanje korisnika ...

Emotional Design: Why we love (or hate) everyday things by Dr. Donald

Norman (2003):

So, in Emotional Design, I don’t give rules. The rules and practical advice are

in Chapter 8. Unfortinately, rigth now, the book only has seven chapters.

Uveo je ideju da dizajn proizvoda mora biti posvećen trojki nivoa kognitivnog

i emotivnog procesiranja:

1.Visceralna (visceral).

2.Bihejvioralna (behavioral).

3.Refleksiona (reflective).


52


... Spoznavanje korisnika ...1.Visceralna obrada – pre-wired nivo,

• najneposrednija odmah po prijemu nadražaja, na pojavu proizvoda,

• brza (pre interakcije) odluka šta je dobro, loše, bezbedno ili opasno,

• nema razmišljanja, “ja hoću to” pre “koliko košta?”, tj. “šta to radi?”.

2.Bihejvioralna obrada –nivo koji upravlja svakodnevnim ponašanjem,

• tradicionalno HCI je pre svega usmeren ovde,

• tiče se zadovoljstva i efektivnosti upotrebe proizvoda,

• na iskustvo (funkcija, performansa, upotrebljivost) sa proizvodom.

3.Refleksiono (reflective) – kontemplativni nivo,

• podrazumeva svesno razmatranje i razmišljanje o iskustvu,

• ona može poboljšati ili usporiti prethodni nivo obrade,

• ali nema pristupa visceralnoj obradi,

• bez direktne interakcije, samo preko memorije.



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


53



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 ...Sony Trans Com – Goal Directed Design ...


54


... Spoznavanje korisnika ...... Sony Trans Com – Goal Directed Design ...

Sa početnih 30, sveli na 10, pa na sledeće 4 personas:

1. Chuck Burgermeister , business traveler . A 100,000-mile-club member who flew somewhere practically every week. Chuck's vast experience with flying meant that he had little tolerance for complex, time-consuming interfaces, or interfaces that condescend to novices.

2. Ethan Scott , 9-year-old boy. He was travelling unescorted for the first time. Ethan wanted to play games, games, and more games.

3. Marie Dubois, bilingual business traveler. English was her second language. She liked to browse the shopping, as well as the entertainment selections.

4. Clevis McCloud, crotchety septuagenarian. An aging but still spry Texan, slightly embarrassed about the touch of arthritis in his hands. He was the only one of the four passenger personas who didn't own a computer or know how to use one.


... Spoznavanje korisnika ...... Sony Trans Com – Goal Directed Design


55


... Spoznavanje korisnika ...Jeff Hawkins - the Palm Pilot ...

Palm-To-Palm Combat, TIME, Mar. 16, 1998

... Palm grabbed an early lead because the power junkies in Silicon Valley

couldn't believe users would want a computer with less, not more. President

and co-founder Donna Dubinsky spent 18 fruitless months trying to convince

venture capitalists and potential manufacturers that the key to selling

handheld computers was simplifying them, not adding features. "Time after

time, I'd go into meetings, and they'd say, 'You can't do a device like this

without a PC card slot or a spreadsheet or whatever,'" she recalls. "But

where was the evidence? It's very, very hard to go against the crowd.“


... Jeff Hawkins - the Palm Pilot ...

... Fortunately, she had Jeff Hawkins to back her up. Hawkins, 40, Palm's chief

technologist and Pilot's creator, designed one of the first handheld

computers, the GRiDPad, a decade ago. It was an engineering marvel but a

market failure because, he says, it was still too big. Determined not to make

the same mistake twice, he had a ready answer when his colleagues asked

him how small their new device should be: "Let's try the shirt pocket.“...


56


... Jeff Hawkins - the Palm Pilot

.... Retreating to his garage, he cut a block of wood to fit his shirt pocket.

Then he carried it around for months, pretending it was a computer. Was he

free for lunch on Wednesday? Hawkins would haul out the block and tap on

it as if he were checking his schedule. If he needed a phone number, he

would pretend to look it up on the wood. Occasionally he would try out

different design faces with various button configurations, using paper

printouts glued to the block. ...


Spoznavanje zadataka i posla ...

Opisati korisnikov posao kroz

1. CILJ (goal) – krajnji rezultat koji se želi dostići, više sekvenci zadataka,

2. ZADATAK (task) – strukturirani skup odgovarajućih aktivnosti koje se sprovode u nekoj (od više mogućih) sekvenci,

karakteristike zadatka:

različitost, frekvencija zadataka

zahtevano znanje i veština

faktori okruženja

vremenska kritičnost

samostalan ili grupni rad

korisnik normalno se prebacuje sa zadatka na zadatak

3. AKCIJA (action) – individualna operacija ili korak koji se mora obaviti kao deo zadatka.


57


... Spoznavanje zadataka i posla ...

Tehnike za analizu zadataka,

– samo opis koraka kojima se rešava zadatak - “How to Do It”

• scenariji – narativni opis zadatka (priča, navodi, pseudo kod),

• use cases – nepersonalni, apstraktniji opis, često u obliku tabele,

– essetial use cases – najviši nivo apstrakcije,

– opis i znanja koje korisnik ima (ili treba da ima) da bi rešio zadatak -kognitivna analiza zadataka, sa scenarija i use cases u kognitivnu analizu

• eXtended User Action Notation, prati obe strane na najnižem nivou,

• dijagrami toka interfejsa,

• ConcurTaskTrees,



ATM Task Scenario


58



ATM Concrete Use Case



ATM Essential Use Case


59



XUAN primer startovanja ikone

Unutrašnjaakcija

Vidljivaakcija

Stanje interfejsa

Vidljivaakcija

Unutrašnjaakcija

Lociraj ikonu

Pom. miša na ikonu

Prati kursor miša

Pritisni tast. miša

Selektovana ikona

Daj fokus ikoni

Otpusti tast. miša

Pritisni tast. miša

Otpusti tast. miša

Pokrenuta ikona

Ukini fokus ikoni

Pokreni dodelj. apl.



Dijagrami toka interfejsa za ATM

:Jezici

Meni

:Kartica

DajUput

:Kartica

Greška

:PIN

UnosUput

:PIN

Greška

:Iznos

Meni

:Iznos

Greška

:Novac

UzmiUput

:Kartica

UzmiUput

selektuje jezik

Ubaci karticu

Unos PIN

Selektuje iznos

Uzmi banknote

Uzmi karticu

Kraj

Kraj

:Kartica

UzmiUput

Uzmi karticu


60



ConcurTaskTrees

FABIO PATERNO, Task Models in Interactive Software Systems

Konkurenc. Z1 ||| Z2 sa razmenom inform. Z1 |[]| Z2

Dozvola Z1 >> Z2 sa dostavom inform. Z1 []>> Z2

Izbor Z1 [] Z2 Deaktivacija Z1 [> Z2

Redosledna nezavisnost Z1 |=| Z2

Suspenzija-nastavak Z1 |> Z2



Kada se korisnik i zadatak ne izuče dobro ...

U nepoznatom (delu) gradu, hitno poslati neki

dokument!


61



... Kada se korisnik i zadatak ne izuče dobro

Za koga je dizajnirano?Upotrebljivost?

Svaki novi primer koji pošaljete biće cenjen!



Balansiranje automatizacije i korisnikove kontrole

čovek

mašina

industrijskarevolucija

judgement forunpredictableevents

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

Balansiranje

Documents

ESI HCI 2015 Skripta Deo 1