Slides dalle lezioni del corso di Interazione Uomo Macchina per il corso di laurea in Informatica - Università di Milano Bicocca (prof. R.Polillo) - lezione del 21 maggio 2014

1. Corso di Interazione Uomo Macchina
AA 2013-2014
Roberto Polillo
Corso di laurea in Informatica
Università di Milano Bicocca
Dipartimento di Informatica, Sistemistica e Comunicazione
Evoluzione dei paradigmi di interazione (II)1
R.Polillo - Marzo 2014
Edizione 2013-14

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

5. WINDOWS 95

6. 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…

7. Alcuni problemi del desktop (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

8. Evoluzione del desktop: alcune linee di sviluppo
1.Schermi multitouch, tablet, smartphone

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

11. cone tree

12. perspective wall

13. Esempio 3: ZUI +command language
>Print

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

15. Le macro-fasi
1960 1970 1980 1990 2000
Teletype
Personal computer
Web
Terminali video
Mobiles

16. "Point & clic"17
R.Polillo - Marzo 2014

17. Tecnologia dominante: il Web

18. LINK
NODO
Ipertesto
R.Polillo - Marzo 201419

19. Visualizzazione dei nodi
Un nodo per ogni schermata Più nodi per ogni schermata
(overlapped / tiled)

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

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

22. Una delle prime applicazioni di Hypercard, 1987

25. 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 201426

26. Inigo Gets Out, di Amanda Goodenough (Hypercard, 1987)

32. The Manhole
by Robin e Rand Miller (Hypercard)

33. The Manhole
by Robin e Rand Miller (Hypercard)

34. The Manhole
by Robin e Rand Miller (Hypercard)

35. The Manhole
by Robin e Rand Miller (Hypercard)

36. Myst, 1993 (di Rand e Robin Miller)
R.Polillo - Marzo 201437

37. (Le immagini che seguono sono contigue)
R.Polillo - Marzo 201438

38. R.Polillo - Marzo 201439

39. R.Polillo - Marzo 201440

40. R.Polillo - Marzo 201441

41. R.Polillo - Marzo 201442

42. R.Polillo - Marzo 201443

43. R.Polillo - Marzo 201444

44. R.Polillo - Marzo 201445

45. R.Polillo - Marzo 201446

46. Un CD della Microsoft, 1994

52. Nascita della iperfiction:
Afternoon, a story (Michel Joyce, 1987)

53. Nascita della iperfiction:
Afternoon, a story (Michel Joyce, 1987)

54. Nascita della iperfiction:
Afternoon, a story (Michel Joyce, 1987)

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

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

57. Il World Wide Web
58
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 2014

58. Interfaccia nel Web‫׃‬ non solo Point & click
 testo attivo
 immagini attive
 bottoni
 Tabs
 forms
 esecuzione di programmi client side

59. Sito
YouTube
Flickr
Incorporazione ("embedding")
iFrame

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

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

62. "Widgets": esempi
R.Polillo - Marzo 201463

63. Creazione di un widget: esempio
R.Polillo - Marzo 201464
Twitte
r:

65. In sintesi…
R.Polillo - Marzo 201466
link
BROWSER
File HTML

66. Virtualizzazone / globalizzazione della rete
67
Da dove provengono i servizi?
R.Polillo - Marzo 2014

67. Nuove interfacce di navigazione web
 Il modello desktop non è più adatto al nuovo contesto
(documenti vs pagine web)
 Ulteriore affollamento dello schermo
 Alcuni hanno proposto di immergere le pagine in uno spazio
3D, in cui vedo in lontananza le pagine precedentemente
aperte
 Altri hanno proposto di usare per i siti web la metafora del
libro (vedi WebBook e WebForager)

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

69. 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)

70. WebBook
link esterni al WebBook
(chiude il libro e
ne apre un altro)
link interni al WebBook
(sfoglia il libro)

71. Sfogliare le pagine di un WebBook

72. Vedere un WebBook attraverso la “Document Lens”

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

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

75. Il bookcase per i WebBook