44
Interac Interac ţ ţ iune om iune om - - calculator calculator Dr. Dr. Sabin Sabin - - Corneliu Corneliu Buraga Buraga www.infoiasi.ro/~busaco www.infoiasi.ro/~busaco / / 1 1 Interac Interac ţ ţ iune om iune om - - calculator calculator Introducere Introducere Dr. Sabin-Corneliu Buraga Facultatea de Informatică Universitatea “A.I.Cuza” Iaşi, România http http :// :// www.infoiasi.ro www.infoiasi.ro /~ /~ busaco busaco / /

Interactiune om-calculator (Introducere)

Embed Size (px)

Citation preview

Page 1: Interactiune om-calculator (Introducere)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

11

InteracInteracţţiune omiune om--calculatorcalculator IntroducereIntroducere

Dr. Sabin-Corneliu Buraga Facultatea de Informatică

Universitatea “A.I.Cuza”

Iaşi, România httphttp://://www.infoiasi.rowww.infoiasi.ro/~/~busacobusaco//

Page 2: Interactiune om-calculator (Introducere)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

22

“Being digital should be

of more interest than being electronic.”

Alan Turing

Page 3: Interactiune om-calculator (Introducere)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

33

CuprinsCuprins

Întrebări•

Termeni de bază

Scurt istoric al informaticii (din prisma interacţiunii cu utilizatorul)–Personalităţi–Sisteme

Page 4: Interactiune om-calculator (Introducere)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

44

ÎÎntrebărintrebări

Ce reprezintă interacCe reprezintă interacţţiuneaiunea ((interaction designinteraction design))??

Ce reprezintă o interfaCe reprezintă o interfaţţăă--utilizator?utilizator?

Ce Ce îînseamnă nseamnă useruser experienceexperience (UX)?(UX)?

Page 5: Interactiune om-calculator (Introducere)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

55

TermeniTermeni

Page 6: Interactiune om-calculator (Introducere)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

66

TermeniTermeni•

Interaction

Design –

facilitarea

interacţiunilor dintre oameni via produse & servicii– Are o natură contextuală: rezolvarea unor

probleme specifice în cadrul unui set de particular de circumstanţe (e.g., timpul)

– Numeroase mijloace & metodologii

– Are un caracter aplicativ

– Nu trebuie să implice direct calculatoarele

Page 7: Interactiune om-calculator (Introducere)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

77

TermeniTermeni•

Interaction

Design

facilitarea

interacţiunilor dintre oameni via produse & servicii– Focalizare spre utilizatori– Găsirea de alternative– Inovare & prototipizare– Caracter colaborativ

& de mediere

(e.g., rezolvarea constrângerilor)– Crearea de soluţii focalizate (deseori, unice)– Incorporarea emoţiilor

Page 8: Interactiune om-calculator (Introducere)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

88

TermeniTermeni•

Interaction

Design

– “Designing interactive products to support the way people communicate and interact in their everyday and working lives.”

(Sharp, Rogers & Preece, 2007)

– “The design of spaces for human communication and interaction.” (Winograd, 1997)

– Scopuri: •

Proiectarea/dezvoltarea

de produse

utilizabile

(usable)•

Implicarea

utilizatorilor

în

procesul

de design

Page 9: Interactiune om-calculator (Introducere)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

99

TermeniTermeni

Interaction

Design– Exemplu: cum diferă un apel telefonic efectuat

via un telefon fix, un dispozitiv mobil

sau o cabină telefonică publică?

– De considerat: •

Utilizatorii

implicaţi

Activităţile desfăşurate•

Contextul utilizării unui dispozitiv specific

Page 10: Interactiune om-calculator (Introducere)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

1010

TermeniTermeni•

Human-Computer

Interaction

(HCI)

studierea &

ameliorarea factorilor care influenţează utilizarea efectivă şi eficientă a calculatoarelor:– human (persoană care încearcă

să îndeplinească un scop)– computer (rulează programe de aplicaţii,

deseori la distantă)– interaction (dialog între om şi calculator,

de forma întrebare-răspuns)

Page 11: Interactiune om-calculator (Introducere)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

1111

TermeniTermeni•

Human-Computer

Interaction

(HCI)

Page 12: Interactiune om-calculator (Introducere)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

1212

TermeniTermeni•

Discipline conexe

(Dan

Saffer, 2006)

Page 13: Interactiune om-calculator (Introducere)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

1313

DomeniiDomenii•

Computer science

Psihologie•

Sociologie

Inginerie•

Lingvistică

Se au în vedere:–ergonomia–factorii umani

(“entire person”)

Page 14: Interactiune om-calculator (Introducere)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

1414

DomeniiDomenii

((YvonneYvonne

RogersRogers, 2007), 2007)

Page 15: Interactiune om-calculator (Introducere)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

1515

CeCe esteeste??

Interfaţa cu utilizatorul– parte a aplicaţiei software care permite utilizatorilor

să-şi exprime intenţiile de operare asupra calculatorului şi să interpreteze rezultatele acţiunilor efectuate de maşină

– locul de întâlnire al utilizatorului & computerului

– utilizatorul poate decide dacă interfaţa folosită îi este cu adevărat utilă, iar componentele hardware

şi

software

pentru el sunt doar unelte cu ajutorul cărora interfaţa e construită

Page 16: Interactiune om-calculator (Introducere)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

1616

CeCe esteeste??

Interfaţa cu utilizatorul–Percepută nu doar ca parte vizuală

a software-ului–Din punctul de vedere al utilizatorului,

reprezintă întregul sistem–Utilă (useful)–Utilizabilă (usable)–Utilizată (used)

Page 17: Interactiune om-calculator (Introducere)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

1717

CeCe esteeste??

Proiectarea interfeţelor –înţelegerea nevoilor utilizatorilor

cunoaşterea utilizatorilor

–proiectarea (designul)–prototipizarea–evaluarea

& testarea

–implementarea “finală”

a interfeţelor–menţinerea

Page 18: Interactiune om-calculator (Introducere)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

1818

Cine construieCine construieşşte interfete interfeţţe?e?

Graficieni•

Proiectanţi de interfeţe/interacţiune om-maşină

(designers)

Technical writers•

Marketers

Testeri/evaluatori•

Programatori

Utilizatori

Page 19: Interactiune om-calculator (Introducere)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

1919

Cum se construieCum se construieşşte interfate interfaţţa?a?•

Identificarea & înţelegerea nevoilor utilizatorilor finali

Analiza task-urilor &

contextului interacţiunilor om-maşină

Prototipizarea interfeţei

Evaluarea interfeţei

Programarea interfeţei

Iterarea

etapelor anterioare

Page 20: Interactiune om-calculator (Introducere)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

2020

Cum se construieCum se construieşşte interfate interfaţţa?a?•

De la prototip pe hârtie până la implementare

Page 21: Interactiune om-calculator (Introducere)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

2121

Cum se construieCum se construieşşte interfate interfaţţa?a?•

Proiectare precară versus proiectare bună– Uşurinţa manipulării

– Aranjament logic & cromatic al butoanelor

– Uşurinţa localizării butoanelor

(grupate conform funcţionalităţii)

Page 22: Interactiune om-calculator (Introducere)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

2222

Cum se construieCum se construieşşte interfate interfaţţa?a?•

Procesul de interaction design are un caracter multi-disciplinar

(Rogers, 2007)

Persoane având cunoştinţe din domenii diferite

Perspective diverse (uneori, ireconciliabile)

Beneficii: idei şi mentalităţi eterogene

(“proaspete”)

Dezavantaje: dificultatea comunicării şi managementul activităţilor preconizate

Page 23: Interactiune om-calculator (Introducere)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

2323

User Experience (UX)User Experience (UX)•

Maniera de “comportare”

a unui produs

şi de utilizare concretă a sa de către public– Modul de percepţie a produsului

(serviciului)

de către persoanele care-l folosesc

şi plăcerea/satisfacţia înregistrată

– “Every product that is used by someone has a user experience: newspapers, ketchup bottles, reclining armchairs, cardigan sweaters.”

(Garrett, 2003)

“Cannot design a user experience, only design for

a user experience.”

Page 24: Interactiune om-calculator (Introducere)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

2424

ScurtScurt istoricistoric

Al-Kashi

(Persia, XIV-XV) –

disp.

pt.

calc.

conjunc.

planetelor•

Thomas Hobbes

“By Ratiocination, I mean computation. Now to compute, is either to collect the sum of many things that are added together, or to know what remains when one thing is taken out of another...” (1656)

“Why may we not say that all Automata (Engines that move themselves by springs and wheels as doth a watch) have an artificial life?...” (1651)

G. W. von Leibniz “This [binary] calculus could be implemented by a machine

(without wheels)... provided with holes in such a way that they can be opened and closed.” (1679)

W.

Schickard

(Germania, XVI-XVII) disp.

pt.

calc.

simple•

Blaise

Pascal (Franţa, XVII) –

pascalina

Page 25: Interactiune om-calculator (Introducere)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

2525

Page 26: Interactiune om-calculator (Introducere)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

2626

ScurtScurt istoricistoric

H.

Hollerith

(SUA, sec. XIX-XX) –

dispozitiv pentru realizarea de statistici privind imigranţii

Computer-Tabulating-Recording

Company

(1911)•

T.

Watson

IBM (International

Business Machines)

1924 –

“interacţiunea”

prin intermediul cartelelor•

Alan

Turing

(Marea Britanie, sec. XX)

John von Neumann “I am thinking about something much more important

than bombs. I am thinking about computers.”

(1946)•

J.

Mauchly, J.

Eckert

ENIAC

(Electronic Numerical

Integrator And

Computer)

1946-1955•

UNIVAC (Universal Automatic Computer)

Page 27: Interactiune om-calculator (Introducere)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

2727

Page 28: Interactiune om-calculator (Introducere)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

2828

Page 29: Interactiune om-calculator (Introducere)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

2929

ScurtScurt istoricistoric

Douglas

Engelbart

(Stanford, 1968) –

proiectul Augment: interfaţa grafică &

ferestre pe ecran, hipertext,

procesor de texte, e-mail, teleconferinţe, script-uri, mouse•

Ken

Thompson, Dennis

Ritchie

(1969)

UNIX (AT&T Bell Labs.) –

interfaţa text•

Xerox Alto

(1973) –

primul calculator cu interfaţă grafică:

ferestre suprapuse, elemente de interfaţă, utilizarea mouse-ului

8008 Intel (1975) –

calculator “personal”: Commodore, Amiga, Spectrum

IBM PC (1981) cu sistemul de operare linie de comandă: DOS (Microsoft) inspirat din CP/M, apoi

din UNIX

Xerox STAR

(1981) –

interfaţă intuitivă, pictograme, waste-basket, ferestre

de dialog, rezoluţie 1024×768

Page 30: Interactiune om-calculator (Introducere)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

3030

ScurtScurt istoricistoric

1983-1984 Lisa (Apple)

– interfaţa inspirată de

Xerox STAR, meniuri; memoria ROM conţine grafica si device-uri

XWindow

(1984, 1991, 2001) –

server de interfaţă & manageri de ferestre (clienţi): Motif, GNOME, KDE etc.

Microsoft Windows: 1.0 (1985) –

ferestre nesuprapuse, 2.03 (1987) –

ferestre suprapuse, 3.0 (1990), 3.1 (1991) +

Visual Basic, 9x (1995-1998) –

butonul Start, XP (2001), Vista

(2006, 2007)

OS/2

– IBM – Warp 5•

microGUI

Photon

(QNX, 1994) –

microprocesor înglobând

funcţiile vitale ale unei interfeţe cu utilizatorul•

BeOS

(1995) –

sistem de operare multimedia

Mac

OS X

– UNIX cu interfaţă Macintosh (2000)

Page 31: Interactiune om-calculator (Introducere)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

3131

ScurtScurt istoricistoric

Personalităţi–

V. Bush

MEMEX

(“As We May Think”, 1945)

J.C.R. Licklider

human engineering (“Man-computer symbiosis” – 1960, “Libraries of the future” – 1965, “The computer as communication device”

1968)

I. Sutherland

pionier în grafica computaţională & CAD (Computer Aided Design)

D. Engelbart

NLS (oNLine

System), 1968: video-conferinţă, mouse, hipertext, procesare de texte, e-mail, ferestre, modelul WIMP

T. Nelson

– hipertext (1960), Xanadu

(‘81) –

A. Kay

primul limbaj obiectual: Smalltalk,

primul laptop: Dynabook

(1968), Xerox Alto & Xerox Star, metafora desktop-ului

Page 32: Interactiune om-calculator (Introducere)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

3232

ScurtScurt istoricistoric

Sisteme– Memex

1945 (concept)

– Sketchpad

– 1963 – NLS (oNLine

System) –

1963-68 (mouse

’64)

– Dynabook

1968-1983 – Xerox Alto

– ’72, Star

– ’81

– Grid

Compass

– 1983 – Apple

Lisa

– ’83, Mac

– ’84, NeXT

– ’88,

Mac OS X

– 2000– Powerbook

1991

– WWW:

HTML, HTTP,…

1989-1990

Page 33: Interactiune om-calculator (Introducere)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

3333

ScurtScurt istoricistoric

Interfaţa Graficon (Douglas Engelbart,

1963)

Page 34: Interactiune om-calculator (Introducere)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

3434

ScurtScurt istoricistoric

Interfaţa Spectrum (1983)

Page 35: Interactiune om-calculator (Introducere)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

3535

ScurtScurt istoricistoric

Interfaţa Apple II

(1986)

Page 36: Interactiune om-calculator (Introducere)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

3636

ScurtScurt istoricistoric

Interfaţa Win 2.03 (1987)

Page 37: Interactiune om-calculator (Introducere)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

3737

ScurtScurt istoricistoric

Interfaţa OS/2

(1997)

Page 38: Interactiune om-calculator (Introducere)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

3838

ScurtScurt istoricistoric

Interfaţa

BeOS (2000)

Page 39: Interactiune om-calculator (Introducere)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

3939

ScurtScurt istoricistoric

Interfaţa XWindow

prin

XGL (2005)

Page 40: Interactiune om-calculator (Introducere)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

4040

ScurtScurt istoricistoric

Interfaţa Windows Vista

(2006)

Page 41: Interactiune om-calculator (Introducere)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

4141

ScurtScurt istoricistoric

| | sprespre viitorviitor

interfaţa grafică unitară pentru novici/experţi•

noi moduri de interacţiune: gesturi, voce, emoţie, medii distribuite (mobilitate) etc.

interacţiune Web: de la hipertext

la Web-ul

social (“Web 2.0”)

interfeţe tangibile

(+dispozitive

haptice)•

interfeţe ale realităţii virtuale & ale realităţii îmbogăţite (augment reality)

interacţiuni mixte, ubicue

(pervasive)•

interfeţe-utilizator multiple

Page 42: Interactiune om-calculator (Introducere)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

4242

ScurtScurt istoricistoric

| | sprespre viitorviitor

Pervasive games

Page 43: Interactiune om-calculator (Introducere)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

4343

RezumatRezumat

Întrebări

Termeni de bază

Scurt istoric al informaticii (din prisma interacţiunii cu utilizatorul)

Page 44: Interactiune om-calculator (Introducere)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

4444

ÎÎntrebărintrebări??