Slides dalle lezioni del corso di Interazione Uomo Macchina per il corso di laurea in Informatica - Università di Milano Bicocca (a.a.2014-15) - Prof.R.Polillo - Lezione del 28 aprile 2015

1. Corso di Interazione Uomo Macchina
AA 2014-2015
Roberto Polillo
Corso di laurea in Informatica
Università di Milano Bicocca
Dipartimento di Informatica, Sistemistica e Comunicazione
Evoluzione dei paradigmi di interazione (I)
Edizione 2014-15

2. Queste slides…
… si basano sul libro “Facile da usare”, dell’autore, dove si trovano
tutte le necessarie spiegazioni. Vedi www.rpolillo.it
Queste slide sono disponibili con licenza Creative Commons
(attribuzione, non commerciale, condividi allo stesso modo) a
chiunque desiderasse utilizzarle, senza necessità di preventiva
autorizzazione:
http://creativecommons.org/licenses/by-nc-sa/3.0/it/deed.it
La licenza non si estende alle immagini fotografiche e alle screen
shots, i cui diritti restano in capo ai rispettivi proprietari, che sono
stati indicati, ove possibile, nelle didascalie del libro. L’autore si
scusa per eventuali omissioni, e resta a disposizione per
correggerle.
R.Polillo - Aprile 2015
2

3. Di che cosa parleremo
 In questo corso non ci interessa studiare le tecnologie, ma gli
stili di interazione
 Vedremo quindil’evoluzione storica dei principali stili che si
sono consolidati negli anni
R.Polillo - Aprile 2015
3

4. TECNOLOGIE DI
INTERAZIONE
PARADIGMI DI
INTERAZIONE
permettono
nuovi
suggeriscono
nuove
Evoluzione degli stili di interazione
R.Polillo - Aprile 2015
4

5. Le tecnologie possibili sono tante…
sistema utente
OUTPUT DEVICES
INPUT DEVICES
• Vista
• Udito
• Tatto
• Mani
• Voce
• Sguardo
• Postura
- display video
- stampanti
- sound devices
- haptic devices
- tastiere
- manipolazione indiretta
- manipolazione diretta
- riconoscimento vocale
- eye tracking
- body sensor
INPUT DEVICES mondo
- scanner
- foto & video camera
- sound recorder
- GPS
- sensori di prossimità
R.Polillo - Aprile 2015
5

6. Le tecnologie possibili sono tante…
 … ma quelle dominanti in un certo periodo hanno
determinato i principali “paradigmi” di interazione,
che sono relativamente pochi
R.Polillo - Aprile 2015
6

7. Le macro-fasi
1960 1970 1980 1990 2000
Teletype
Personal computer
Web
Terminali video
Mobiles
R.Polillo - Aprile 2015
7

8. Le macro-fasi
1960 1970 1980 1990 2000
Teletype
Personal computer
Web
Terminali video
Mobiles
R.Polillo - Aprile 2015
8

9. Tecnologia dominante: teletype
R.Polillo - Aprile 2015
9

10. "Scrivi e leggi"10
R.Polillo - Aprile 2015

11. “Scrivi e leggi”: modalità
 L’utente ha il controllo
 command languages
 query languages
 line editors
 adventure games
 ...
 Il computer ha il controllo
 Q&A
 advisory systems
 ...
 Entrambi hanno il controllo (“conversazione”)
 ?
R.Polillo - Aprile 2015
11

12. L’utente ha il controllo: command languages
$pwd
/usr/roberto
$ls
filea fileb filec
$rm filea
$
(Unix)
R.Polillo - Aprile 2015
12

13. L’utente ha il controllo: query languages
GIVE THE NAMES OF ALL EMPLOYEES WHO HAVE JOBS
WORKING AS A SECRETARY IN THE CITY OF CHICAGO.
PRINT THE NAME OF ANY EMPLOYEE WITH CITY=CHICAGO
AND JOB=SECRETARY
THE NUMBER OF RECORDS TO RETRIEVE IS 30
SMITH
JONES
BROWN
... (Intellect)
R.Polillo - Aprile 2015
13

14. L’utente ha il controllo: adventure games
You are standing at the end of a road before a
small brick building. Around you is a forest. A
small stream flows down a gully.
ENTER BUILDING
You are inside a building, a well house for a
large spring. There are some keys on the ground
here. There is a shiny brass lamp nearby. There is
a bottle of water here.
GET WATER
Okay
GET KEYS
Okay (Adventure, 1975)
R.Polillo - Aprile 2015
14

15. Il computer ha il controllo : sistemi esperti
(1) Patient’s name: (first-last)
**FRED SMITH
(2) Sex:
**MALE
(3) Age:
**55
(4) Have you been able to obtain positive cultures
from a site at which Fred Smith has an
infection?
**YES
(5) What is the infection?
**PRIMARY-BACTEREMIA
(6) Please give the date and approximate time when
signs of symptoms first appeared
(Mycin)
R.Polillo - Aprile 2015
15
Questo stile di interazione
oggi è inaccettabile:
l’utente deve sempre
avere il controllo dell’interazione!

16. Oggi si farebbe così…
R.Polillo - Aprile 2015
16
Ma questo stile di dialogo non era possibile con delle teletype

17. La conversazione umana
Nella conversazione umana, il controllo passa
da un interlocutore all’altro, a seconda del
contesto, con meccanismi molto complessi
R.Polillo - Aprile 2015
17

18. Il test di Turing
Un test proposto nel 1950 da Alan Turing
• Un umano A interroga gli interlocutori B e C
• Si sa che un interlocutore è umano (non conosce A),
e che l’altro è un computer
• A deve decidere chi è l’uomo e chi è il computer
B
C
A
Interlocutori
Stanza
chiusa
Interrogante
R.Polillo - Aprile 2015
18

19. ”Fra circa cinquant’anni sarà possibile
programmare i computer … in modo tale da farli
rispondere così bene che un interrogante medio
non avrà più del 70% di possibilità di fare una
identificazione corretta dopo 5 minuti di domande”
(Turing, 1950)
R.Polillo - Aprile 201519

20. Eliza
HUMAN: GOOD MORNING MY NAME IS GAINES AND I WISH TO
TALK TO YOU
ELIZA: I AM NOT INTERESTED IN NAMES
HUMAN: SORRY PERHAPS YOU COULD LET ME KNOW YOUR
INTERESTS
ELIZA: PLEASE DON’T APOLOGIZE
HUMAN: THANK YOU WHAT INTEREST YOU MOST?
ELIZA: WHY DO YOU ASK?
HUMAN: BECAUSE I HAVE TO DEMONSTRATE YOUR INEFFABLE
CAPABILITIES
ELIZA: IS THAT THE REAL REASON?
HUMAN: YES YOUR CAPABILITIES INTEREST ME
ELIZA: YOU SEEM QUITE POSITIVE
...
(Weizenbaum, 1966)
R.Polillo - Aprile 2015
20

21. The Loebner Prize
http://www.loebner.net/Prizef/loebner-prize.html
 Una gara annuale di programmi che si sottopongono
al test di Turing (dal 1990)
 Il programma che supera il test riceve $100.000
 Finora nessuno ha superato il test
 Il migliore del 2006: Jabberwacky
(in http://www.jabberwacky.com si può chattare con
Jabberbacky)
 Il migliore del 2013: Mitsuku)
(si può chattare in http://www.mitsuku.com )
R.Polillo - Aprile 2015
21

22. Loebner prize: SAM,
il migliore del 2005
SAM: Hello, my name is Sam and I am the human.
JUDGE: Hi Sam, tell me which is larger, a TV screen or Belgium.
SAM: Belgium is a little bit larger.
JUDGE: Wljso lwjejdo wleje elwjeo wjeol, isn't it?
SAM: Is that Polish?
JUDGE: Who.
SAM: What you wrote above.
JUDGE: This is ljelwl, aren't you.
SAM: I'm a little worried about your writing skills.
JUDGE: Which is further away from this apartment, Queens or the Queen of England?
SAM: If the Queen is visiting Manhattan, she is closer.
JUDGE: If the Queen is visiting Manhattan, won't she want to abdicate?
SAM: I would.
JUDGE: You would rather not be Queen, then, right?
SAM: I'd like to be Queen, but England's damp. How about you?
JUDGE: Which is damper, England or under your sink?
SAM: I'd like to be Queen, but England's damp. How about you?
JUDGE: You didn't answer the question.
SAM: You didn't answer my question. But please look at my response again.
JUDGE: Change of subject: if you are human, you should know: what is lewleoxoe?
SAM: Perhaps I should, but my Polish is rusty.
JUDGE: How can a language be rusty, there is no metal in it?
SAM: You write like a computer.
JUDGE: Thanks a real compliment. You write like a human!
SAM: Is that a compliment?
JUDGE: Good thing I am the judge, not you. You would say I was a machine!
SAM: There may be worse things to be.
JUDGE: Which, a machine or a judge?
SAM: Ha ha. I'll leave that you to. You're the judge!
R.Polillo - Aprile 201522

23. Oggi: scrivi e leggi parla e ascolta
Esempio:
Apple Siri: in iPhone 4S ott 2011, in iPad in set 2012
Demo: https://www.youtube.com/watch?v=MtwVQhEXCcc
In italiano:
https://www.youtube.com/watch?v=MP7Ocf7Dsik
Siri vs Cortana vs Google Now:
https://www.youtube.com/watch?v=d7H-CoPvEAI
R.Polillo - Aprile 2015
23

24. Le macro-fasi
1960 1970 1980 1990 2000
Teletype
Personal computer
Web
Terminali video
Mobile
R.Polillo - Aprile 2015
24

25. Tecnologia dominante: terminale video
Esempio: Il terminale IBM 3270 (1972)
tipicamente: 80 colonne
tipicamente:24righe
cursore
tasti
posizionamento
cursore R.Polillo - Aprile 2015
25

26. "Indica e compila"26
R.Polillo - Aprile 2015

27. “Indica e compila”: applicazioni tipiche
 Display editors (cursore)
 Sistemi informativi (menu + forms)
R.Polillo - Aprile 2015
27

28. Display editor
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. In eros. Praesent quam tellus, vulputate pulvinar,
cursus non, malesuada quis, nisi. Morbi placerat
euismod orci. Cum sociis natoque penatibus et magnis
dis parturient montes, nascetur ridiculus mus. Morbi sit
amet mi at libero dictum cursus. Aenean pellentesque.
Aliquam condimentum. Aenean est.
cursore
Comandi: Insert, Append, Delete, ….
Esempio tipico: Vi (Unix) R.Polillo - Aprile 2015
28

29. Sistemi informativi: esempio di form
R.Polillo - Aprile 2015
29

30. Sistemi informativi: esempio di menu
da IBM CUA (Common User Access): un insieme di linee guida per l’interfaccia utente,
pubblicato da IBM nel 1987 R.Polillo - Aprile 2015
30

31. Le macro-fasi
1960 1970 1980 1990 2000
Teletype
Personal computer
Web
Terminali video
Mobiles
R.Polillo - Aprile 2015
31

32. Tecnologia dominante: personal computer
R.Polillo - Aprile 2015
32

33. Il personal computer: tappe
IBM PC
1981
XEROX
STAR
1982
APPLE
MACINTOSH
1984+
MICROSOFT
WINDOWS
1990+
R.Polillo - Aprile 2015
33

34. "Non dirlo, fallo!"34
R.Polillo - Aprile 2015

35. Il personal computer: tappe
IBM PC
1981
XEROX
STAR
1982
APPLE
MACINTOSH
1984
MICROSOFT
WINDOWS
1990
XEROX
STAR
R.Polillo - Aprile 2015
35

36. Xerox Star, 1982
Schermo grafico
a doppia pagina
mouse
R.Polillo - Aprile 2015
36

37. Xerox Star: la filosofia di base
 Familiar user’s conceptual model (“desktop”)
 Seeing and pointing versus remembering and typing
 What you see is what you get ("WYSIWYG")
R.Polillo - Aprile 2015
37

38. What you see is what you get (“WYSIWYG”)
Il video presenta una immagine
“identica” alla pagina stmpata
Con lo Star, per la prima volta, le tecnologie di
video e stampante sono “abbastanza” compatibili:
- video con buona risoluzione
- pixel quadrati
- stampante laser di buona qualità (ma con
risoluzione molto maggiore del video)
R.Polillo - Aprile 2015
38

39. Seeing & pointing vs remembering & typing
Paradigma della manipolazione diretta:
 Azioni fisiche su oggetti rappresentati sul video, non
linguaggio di comandi
 Rappresentazione continua dell’oggetto di interesse
 Operazioni rapide, incrementali, reversibili
 Feedback sull’oggetto di interesse visibile
immediatamente
(Shneiderman)
R.Polillo - Aprile 2015
39

40. Manipolazione diretta: il mouse
Funzioni principali:
• pointing
• selecting
• dragging
R.Polillo - Aprile 2015
40

41. Il primo mouse, 1964
(D.Engelbart)R.Polillo - Aprile 2015
41

42. Tipi di mouse
Macintosh Star Sun
R.Polillo - Aprile 2015
42

43. Mouse e legge di Fitts
I movimenti del mouse seguono la legge di Fitts:
T = 1.03 + 0.96 log2 (D/S + 0.5)
T = tempo per posizionare il mouse (in secondi)
D = distanza dall’oggetto (in pixels)
S = larghezza dell’oggetto
Le costanti (1.03 e 0.96) sono circa le stesse dei
movimenti manuali. Pertanto il mouse è quasi ottimale
come pointing device
R.Polillo - Aprile 2015
43

44. (Un gioco di scacchi per il Macintosh, circa 1987)R.Polillo - Aprile 201544

45. feedback
R.Polillo - Aprile 201545

46. Familiar user conceptual model:
la metafora della scrivania
 il video “è” il desktop dell’utente
 documenti, cartelle
 disordine
R.Polillo - Aprile 2015
46

47. R.Polillo - Aprile 201547

48. Video
 Star user interface (lungo):
https://www.youtube.com/watch?v=Cn4vC80Pv6Q (Parte I)
https://www.youtube.com/watch?v=ODZBL80JPqw (Parte II)
(più breve:)
 https://www.youtube.com/watch?v=wOAm7EiFNu8
R.Polillo - Aprile 2015
48

49. Xerox Star: la filosofia di base (segue)
 Universal commands
 Consistency
 Simplicity
 Modeless interaction
 User tailorability
(Smith et al., Designing the Star User Intreface, 1982)
• Familiar user’s conceptual model (“desktop”)
• Seeing and pointing versus remembering and typing
• What you see is what you get
R.Polillo - Aprile 2015
49

50. Il personal computer: tappe
IBM PC
1981
XEROX
STAR
1982
APPLE
MACINTOSH
1984
MICROSOFT
WINDOWS
1990
IBM PC
R.Polillo - Aprile 2015
50

51. IBM PC, 1981
• Assemblato da componenti standard
• Basso costo
• Sistema operativo MS-DOS (Microsoft, non IBM),
con interfaccia a comandi
• Enorme successo commerciale
R.Polillo - Aprile 2015
51

52. Software Arts, 1979 (Apple II), 1981 (IBM PC)
R.Polillo - Aprile 201552

53. Il personal computer: tappe
IBM PC
1981
XEROX
STAR
1982
APPLE
MACINTOSH
1984
MICROSOFT
WINDOWS
1990
APPLE
MACINTOSH
R.Polillo - Aprile 2015
53

54. Apple Macintosh, 1984
“The computer for the rest of us”
Ispirato allo Star della Xerox:
https://www.youtube.com/watch?v=vpMeFh37mCE
https://www.youtube.com/watch?v=y58u79RrK60
R.Polillo - Aprile 2015
54

55. Desktop ispirato da Xerox Star, ma semplificato
R.Polillo - Aprile 201555

56. R.Polillo - Aprile 201556

57. Apple Leopard OS desktop, 2008
R.Polillo - Aprile 2015
57

58. Il personal computer: tappe
IBM PC
1981
XEROX
STAR
1982
APPLE
MACINTOSH
1984
MICROSOFT
WINDOWS
1990
R.Polillo - Aprile 2015
58

59. Microsoft Windows
 Windows 1 (1985)
 Windows 2 (1987)
 Windows 3 (1990)
 Windows 95 (1995)
 Windows 98 (1998)
 Windows 2000 (2000)
 Windows XP (2001)
 Windows VISTA (2007)
 Windows 7 (2009)
 Windows 8 (2012)
 Windows 10 (2014)
R.Polillo - Aprile 2015
59

60. Windows vs Mac (1983 – 2011)
 https://www.youtube.com/watch?v=_onj4isp9fY
R.Polillo - Aprile 2015
60

61. WINDOWS 1.0
R.Polillo - Aprile 2015
61

62. WINDOWS 2.0
R.Polillo - Aprile 2015
62

63. WINDOWS 3.1
R.Polillo - Aprile 2015
63

64. WINDOWS 95
R.Polillo - Aprile 2015
64

65. WIMP
Con questa sigla si indica spesso la classe di
interfacce che seguono la filosofia impostata da Star
(Mac, Windows, …):
 Windows
 Icons
 Menus
 Pointing
R.Polillo - Aprile 2015
65