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 29 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 (II)
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 - Marzo 2015
2

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

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

5. MS-Dos
R.Polillo - Marzo 2015
5

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

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

8. R.Polillo - Marzo 20158

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

10. 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 - Marzo 2015
10

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

12. Desktop ispirato da Xerox Star, ma semplificato
R.Polillo - Aprile 201512

13. R.Polillo - Marzo 201513

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

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

16. WINDOWS 95
R.Polillo - Marzo 2015
16

17. Il desktop 30 anni dopo
 La metafora della scrivania ha avuto un eccezionale
successo e diffusione
 E’ infatti un ottimo ambiente per gestire documenti
archiviati localmente da parte di utenti che utilizzano una
stazione di lavoro “da seduti”
- desktop = spazio per documenti attivi
- file system gerarchico per ordinare documenti e
applicazioni
 … ma oggi il contesto d’uso è completamente cambiato
rispetto a 30 anni fa: la mail, il web, i mobile, il cloud…
R.Polillo - Marzo 2015
17

18. Alcuni problemi apparsi presto (pre-Web)
 Supporto a user multitasking confuso (troppe finestre
aperte)
 Integrazione fra le applicazioni carente
Alcune linee di ricerca:
 desktop multipli e 3D, integrando l’interfaccia web
(es.prototipi Xerox Parc)
 zoomable user interface” (ZUI) + command language
R.Polillo - Marzo 2015
18

19. Esempio 1: Information Visualizer
 XEROX PARC (S.Card et al.), 1987
 Desktop multiplo 3D + aimazione (prototipo)
 Information visualizations: cone trees, cam trees,
perspective wall, …
R.Polillo - Marzo 2015
19

20. R.Polillo - Marzo 201520

21. cone tree
R.Polillo - Marzo 201521

22. perspective wall
R.Polillo - Marzo 201522

23. Esempio 3: ZUI +command language
>Print
R.Polillo - Marzo 2015
23

24. ZUI (Zoomable User Interfaces): esempi
 https://www.youtube.com/watch?v=4EhWbqZVtGE
 Prezi:
https://www.youtube.com/watch?v=7bHyW6un-Kc&list=PL92546C8F504816AF
R.Polillo - Marzo 2015
24

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

26. "Point & clic"26
R.Polillo - Marzo 2015

27. Tecnologia dominante: il Web
R.Polillo - Marzo 2015
27

28. LINK
NODO
Ipertesto
R.Polillo - Marzo 201528

29. Visualizzazione dei nodi
Un nodo per ogni schermata Più nodi per ogni schermata
(overlapped / tiled)
R.Polillo - Marzo 2015
29

30. Ipertesti (fase 1: offline)
1945 Vannevar Bush, propone il Memex (“Memory
extender”, basato su microfilm e mai implementato)
1965 Ted Nelson (“Xanadu”) conia il termine “ipertesto”
1986 Guide (OWL)
1987 Hypercard (Apple)
1987 Hypertext ‘87 (primo convegno su ipertesti)
1990+ Ampia diffusione di ipertesti su CD rom
R.Polillo - Marzo 2015
30

31. stack
card
area sensibile
(bottone invisibile)
script
clic
Ipertesti off-line: Hypercard (1987)
R.Polillo - Marzo 201531
Realizzato da Bill Atkinson
per
Apple
Macintosh,
1984+

32. Una delle prime applicazioni di Hypercard, 1987R.Polillo - Marzo 201532

33. R.Polillo - Marzo 201533

34. R.Polillo - Marzo 201534

35. Hypercard: esempi (video)
 Computer chronicles: Hypercard Mania!
https://www.youtube.com/watch?v=BeMRoYDc2z8
Intervista a Bill Atkinson, con esempi importanti
(22', da vedere)
 The Manhole (1988, 8') di Rand e Robin Miller
https://www.youtube.com/watch?v=YyOTq1EpV5o
 A children hypercard adventure (3'):
http://bit.ly/XFN1hT
R.Polillo - Marzo 201535

36. Inigo Gets Out, di Amanda Goodenough (Hypercard, 1987)
R.Polillo - Marzo 201536

37. R.Polillo - Marzo 201537

38. R.Polillo - Marzo 201538

39. R.Polillo - Marzo 201539

40. R.Polillo - Marzo 201540

41. R.Polillo - Marzo 201541

42. The Manhole
by Robin e Rand Miller (Hypercard)
R.Polillo - Marzo 2015
42

43. The Manhole
by Robin e Rand Miller (Hypercard)
R.Polillo - Marzo 2015
43

44. The Manhole
by Robin e Rand Miller (Hypercard)
R.Polillo - Marzo 2015
44

45. The Manhole
by Robin e Rand Miller (Hypercard)
R.Polillo - Marzo 2015
45

46. Myst, 1993 (di Rand e Robin Miller)
R.Polillo - Marzo 201546

47. (Le immagini che seguono sono contigue)
R.Polillo - Marzo 201547
https://www.youtube.com/watch?v=yEDokgNoziM&index=2&list=PLahKLy8pQdCOJCIdtF_OYUQAceilcbbFo

48. R.Polillo - Marzo 201548

49. R.Polillo - Marzo 201549

50. R.Polillo - Marzo 201550

51. R.Polillo - Marzo 201551

52. R.Polillo - Marzo 201552

53. R.Polillo - Marzo 201553

54. R.Polillo - Marzo 201554

55. R.Polillo - Marzo 201555

56. Un CD della Microsoft, 1994 R.Polillo - Marzo 201556

57. R.Polillo - Marzo 201557

58. R.Polillo - Marzo 201558

59. R.Polillo - Marzo 201559

60. R.Polillo - Marzo 201560

61. R.Polillo - Marzo 201561

62. Nascita della iperfiction:
Afternoon, a story (Michel Joyce, 1987)
R.Polillo - Marzo 2015
62

63. Nascita della iperfiction:
Afternoon, a story (Michel Joyce, 1987)
R.Polillo - Marzo 2015
63

64. Nascita della iperfiction:
Afternoon, a story (Michel Joyce, 1987)
R.Polillo - Marzo 2015
64

65. Ipertesti (fase 2: il Web)
INTERNET
Pagina (file)
Link
R.Polillo - Marzo 201565

66. Il Web
Un sistema di tecnologie correlate, evolutesi con
continuità a partire dai primi anni ’90:
R.Polillo - Marzo 201566
Concetto di
ipertesto
(es.Hypercard,
1987)
Protocolli internet:
-TCP/IP (primi ‘70)
-DNS (primi ‘80)
• HTTP
• HTML
• URI
• BROWSE
R
(da1990-
91)
+ WW
W
=

67. Il World Wide Web
67
Tim Berners-Lee
(1995)
"I just had to take
the hypertext idea
and connect it to the
TCP Protocol and
Domain Name
System ideas and –
Ta-da! – the World
Wide Web!”
R.Polillo - Marzo 2015

68. Interfaccia nel Web‫׃‬ non solo Point & click
 testo attivo
 immagini attive
 bottoni
 Tabs
 forms
 esecuzione di programmi client side
R.Polillo - Marzo 2015
68

69. Sito
YouTube
Flickr
Incorporazione ("embedding")
iFrame
R.Polillo - Marzo 2015
69

70. HTML: iframe
R.Polillo - Marzo 201570
<iframe width="560" height="315"
src="http://www.youtube.com/embed/qrO4
YZeyl0I" frameborder="0"
allowfullscreen></iframe>

71. Embedding
R.Polillo - Marzo 201571
<html>
<body>
embed code
</body>
</html>
oggetto
attivo
disponibile sulla
rete

72. "Widgets": esempi
R.Polillo - Marzo 201572

73. Creazione di un widget: esempio
R.Polillo - Marzo 201573
Twitte
r:

74. R.Polillo - Marzo 2015
74

75. In sintesi…
R.Polillo - Marzo 201575
link
BROWSER
File HTML

76. Virtualizzazone / globalizzazione della rete
76
Da dove provengono i servizi?
R.Polillo - Marzo 2015

77. Desktop vs Web
 E’ dubbio che il modello desktop sia il più adatto al nuovo
contesto (documenti locali vs pagine Web)
 Varie proposte per risolvere il problema dell’affollamento
dello schermo, es.:
 - immergere le pagine in uno spazio 3D, in cui vedo in lontananza le
pagine precedentemente aperte
 - usare per i siti web la metafora del libro (vedi WebBook e
WebForager)
 …
R.Polillo - Marzo 2015
77

78. Esempio: WebBook & Web Forager
 XEROX PARC, 1996
 Interfaccia (prototipo) per web
 Obiettivo: ridurre i costi di accesso
all’informazione utilizzata più di frequente
 Metafora del libro
S.K.Card, G.G.Robertson, W.York, The WebBook and the Web
Forager: An Information Workspace for the World Wide Web, 1996
R.Polillo - Marzo 2015
78

79. Come cambia l’interfaccia con il web
1. dalla singola pagina web come unità di interazione,
a un aggregato più ampio (metafora del libro:
“WebBook”):
- tutte le pagine del sito (raggiungibili dalla home
page con URL relativi), pre-loaded per velocità
di accesso
2. da un ambiente di lavoro contenente un singolo
elemento a un ambiente contenente una pluralità
di elementi (WebForager)
R.Polillo - Marzo 2015
79

80. WebBook
link esterni al WebBook
(chiude il libro e
ne apre un altro)
link interni al WebBook
(sfoglia il libro)
R.Polillo - Marzo 201580

81. WebBook: controlli
 cliccando sulla pagina dx [sx] si va alla pagina seguente / precedente
 cliccando sullo “spessore del libro” si va “più avanti”
 con i bottoni “scan” (sotto il WebBook) si scorre il libro avanti /
indietro. Si può fermare lo scan cliccando su una pagina
 si può lasciare un bookmark su una pagina (quando il libro viene
chiuso, un bookmark resta automaticamente sull’ultima pagina letta)
 ci sono bottoni di Back e History come in un normale browser
 su ogni pagina ci sono tre scrollbars. La terza permette di modificare
la dimensione delle fonti
 la dimensione del libro può essere modificata
R.Polillo - Marzo 2015
81

82. Sfogliare le pagine di un WebBook
R.Polillo - Marzo 201582

83. Vedere un WebBook attraverso la “Document Lens”
R.Polillo - Marzo 201583

84. Struttura dello spazio informativo
Piccola quantità di informazione
accessibile a basso costo
Media quantità di informazione
accessibile a medio costo
Grande quantità di informazione
accessibile ad alto costo
massima
interazione
R.Polillo - Marzo 2015
84

85. Web Forager
Livello 1:
Focus Place
per interazione diretta
con il contenuto
Livello 2:
Immediate Memory Place
per il materiale in uso
(spostamento in 3D)Livello 3:
Tertiary Storage
per WebBooks usati
di recente
R.Polillo - Marzo 201585

86. Il bookcase per i WebBook
R.Polillo - Marzo 201586