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//
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
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
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)?
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
55
TermeniTermeni
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
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
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
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
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)
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
1111
TermeniTermeni•
Human-Computer
Interaction
(HCI)
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
1212
TermeniTermeni•
Discipline conexe
(Dan
Saffer, 2006)
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”)
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
1414
DomeniiDomenii
((YvonneYvonne
RogersRogers, 2007), 2007)
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ă
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)
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
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
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
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
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)
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
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.”
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
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
2525
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)
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
2727
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
2828
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
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)
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
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
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)
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
3434
ScurtScurt istoricistoric
•
Interfaţa Spectrum (1983)
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)
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)
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)
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
3838
ScurtScurt istoricistoric
•
Interfaţa
BeOS (2000)
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)
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)
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
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
4242
ScurtScurt istoricistoric
| | sprespre viitorviitor
•
Pervasive games
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)
InteracInteracţţiune omiune om--calculatorcalculator
Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//
4444
ÎÎntrebărintrebări??