Page 1
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
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
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
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
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
55
TermeniTermeni
Page 6
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
2525
Page 26
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
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
2727
Page 28
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
2828
Page 29
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
4444
ÎÎntrebărintrebări??