Corso di Interazione Uomo Macchina
AA 2013-2014
Roberto Polillo
Corso di laurea in Informatica
Università di Milano Bicocc...
WIMP
Con questa sigla si indica spesso la classe di
interfacce che seguono la filosofia impostata da Star
(Mac, Windows, …...
WINDOWS 95
Il desktop 30 anni dopo
 La metafora della scrivania ha avuto un eccezionale
successo e diffusione
 E’ infatti un ottimo...
Alcuni problemi del desktop (pre-Web)
 Supporto a user multitasking confuso (troppe finestre
aperte)
 Integrazione fra l...
Evoluzione del desktop: alcune linee di sviluppo
1.Schermi multitouch, tablet, smartphone
Esempio 1: Information Visualizer
 XEROX PARC (S.Card et al.), 1987
 Desktop multiplo 3D + aimazione (prototipo)
 Infor...
cone tree
perspective wall
Esempio 3: ZUI +command language
>Print
ZUI (Zoomable User Interfaces): esempi
 https://www.youtube.com/watch?v=4EhWbqZVtGE
 Prezi:
https://www.youtube.com/watc...
Le macro-fasi
1960 1970 1980 1990 2000
Teletype
Personal computer
Web
Terminali video
Mobiles
"Point & clic"17
R.Polillo - Marzo 2014
Tecnologia dominante: il Web
LINK
NODO
Ipertesto
R.Polillo - Marzo 201419
Visualizzazione dei nodi
Un nodo per ogni schermata Più nodi per ogni schermata
(overlapped / tiled)
Ipertesti (fase 1: offline)
1945 Vannevar Bush, propone il Memex (“Memory
extender”, basato su microfilm e mai implementat...
stack
card
area sensibile
(bottone invisibile)
script
clic
Ipertesti off-line: Hypercard (1987)
R.Polillo - Marzo 201422
R...
Una delle prime applicazioni di Hypercard, 1987
Hypercard: esempi (video)
 Computer chronicles: Hypercard Mania!
https://www.youtube.com/watch?v=BeMRoYDc2z8
Intervista a...
Inigo Gets Out, di Amanda Goodenough (Hypercard, 1987)
The Manhole
by Robin e Rand Miller (Hypercard)
The Manhole
by Robin e Rand Miller (Hypercard)
The Manhole
by Robin e Rand Miller (Hypercard)
The Manhole
by Robin e Rand Miller (Hypercard)
Myst, 1993 (di Rand e Robin Miller)
R.Polillo - Marzo 201437
(Le immagini che seguono sono contigue)
R.Polillo - Marzo 201438
R.Polillo - Marzo 201439
R.Polillo - Marzo 201440
R.Polillo - Marzo 201441
R.Polillo - Marzo 201442
R.Polillo - Marzo 201443
R.Polillo - Marzo 201444
R.Polillo - Marzo 201445
R.Polillo - Marzo 201446
Un CD della Microsoft, 1994
Nascita della iperfiction:
Afternoon, a story (Michel Joyce, 1987)
Nascita della iperfiction:
Afternoon, a story (Michel Joyce, 1987)
Nascita della iperfiction:
Afternoon, a story (Michel Joyce, 1987)
Ipertesti (fase 2: il Web)
INTERNET
Pagina (file)
Link
R.Polillo - Marzo 201456
Il Web
Un sistema di tecnologie correlate, evolutesi con
continuità a partire dai primi anni ’90:
R.Polillo - Marzo 201457...
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
...
Interfaccia nel Web‫׃‬ non solo Point & click
 testo attivo
 immagini attive
 bottoni
 Tabs
 forms
 esecuzione di pr...
Sito
YouTube
Flickr
Incorporazione ("embedding")
iFrame
HTML: iframe
R.Polillo - Marzo 201461
<iframe width="560" height="315"
src="http://www.youtube.com/embed/qrO4
YZeyl0I" fra...
Embedding
R.Polillo - Marzo 201462
<html>
<body>
embed code
</body>
</html>
oggetto
attivo
disponibile sulla
rete
"Widgets": esempi
R.Polillo - Marzo 201463
Creazione di un widget: esempio
R.Polillo - Marzo 201464
Twitte
r:
In sintesi…
R.Polillo - Marzo 201466
link
BROWSER
File HTML
Virtualizzazone / globalizzazione della rete
67
Da dove provengono i servizi?
R.Polillo - Marzo 2014
Nuove interfacce di navigazione web
 Il modello desktop non è più adatto al nuovo contesto
(documenti vs pagine web)
 Ul...
Esempio: WebBook & Web Forager
 XEROX PARC, 1996
 Interfaccia (prototipo) per web
 Obiettivo: ridurre i costi di access...
Come cambia l’interfaccia con il web
1. dalla singola pagina web come unità di interazione,
a un aggregato più ampio (meta...
WebBook
link esterni al WebBook
(chiude il libro e
ne apre un altro)
link interni al WebBook
(sfoglia il libro)
Sfogliare le pagine di un WebBook
Vedere un WebBook attraverso la “Document Lens”
Struttura dello spazio informativo
Piccola quantità di informazione
accessibile a basso costo
Media quantità di informazio...
Web Forager
Livello 1:
Focus Place
per interazione diretta
con il contenuto
Livello 2:
Immediate Memory Place
per il mater...
Il bookcase per i WebBook
19. Evoluzione dei paradigmi di interazione (II)
19. Evoluzione dei paradigmi di interazione (II)
19. Evoluzione dei paradigmi di interazione (II)
19. Evoluzione dei paradigmi di interazione (II)
19. Evoluzione dei paradigmi di interazione (II)
19. Evoluzione dei paradigmi di interazione (II)
19. Evoluzione dei paradigmi di interazione (II)
19. Evoluzione dei paradigmi di interazione (II)
19. Evoluzione dei paradigmi di interazione (II)
19. Evoluzione dei paradigmi di interazione (II)
19. Evoluzione dei paradigmi di interazione (II)
19. Evoluzione dei paradigmi di interazione (II)
19. Evoluzione dei paradigmi di interazione (II)
19. Evoluzione dei paradigmi di interazione (II)
19. Evoluzione dei paradigmi di interazione (II)
19. Evoluzione dei paradigmi di interazione (II)
Upcoming SlideShare
Loading in...5
×

19. Evoluzione dei paradigmi di interazione (II)

686

Published on

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

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
686
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
31
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • NB
    Nel gennaio 2001, la quota di mercato di Netscape Navigator e di Microsoft Explorer era rispettivamente del 10% e dell’84%
  • Un esempio, forse il primo, iniziatore di un genere innovativo, quello delle “iperstorie”, è Inigo Gets Out, realizzato da Amanda Goodenough e pubblicato, con altre iperstorie, nella raccolta Amanda Stories (1987). Si tratta di un cartoon interattivo molto semplice dal punto di vista grafico: il gattino Inigo si avventura fuori di casa e, dopo qualche peripezia, ritorna sano e salvo fra le braccia del padrone. Per far muovere Inigo, gli si indica la direzione col mouse, premendo bottoni invisibili sovrapposti alla figura.
  • Un esempio molto più complesso e affascinante di iperstoria è The Manhole (“la botola”), realizzato con Hypercard da Robin e Rand Miller per la Activision, (1988). Mentre in Inigo Gets Out l&amp;apos;utente guida col mouse il gattino nelle sue avventure, in The Manhole è l&amp;apos;utente stesso ad essere protagonista, in prima persona. &amp;quot;The Manhole - dice la copertina -is where Alice would go if the white rabbit had Hypercard&amp;quot;. Si tratta di una sorta di &amp;quot;viaggio visivo&amp;quot; per bambini, realizzato muovendosi in un mondo composto da oltre 500 schede grafiche. Facendo click col mouse qua e là sulle schede si attivano bottoni invisibili, che richiamano altre schede. Ci si muove così, dopo essere entrati in una misteriosa botola del pavimento (&amp;quot;the manhole&amp;quot;, appunto) in un mondo fantastico, popolato di draghi, tartarughe, conigli, pesci parlanti, trichechi.
    The Manhole è stato poi ripubblicato, in forma ampliata e a colori, su CD-ROM
  • Questa sequenza mostra le immagini dell’inizio di Myst, contigue.
    Myst, di Rand e Robin Miller
    Broderbund - Cyan, 1994
    Myst, realizzato dagli stessi autori di The Manholer, ha avuto un enorme successo di mercato. Gli autori hanno poi realizzato il seguito di Myst, The Riven.
  • 19. Evoluzione dei paradigmi di interazione (II)

    1. 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. 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
    3. 3. WINDOWS 95
    4. 4. 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…
    5. 5. 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
    6. 6. Evoluzione del desktop: alcune linee di sviluppo 1.Schermi multitouch, tablet, smartphone
    7. 7. Esempio 1: Information Visualizer  XEROX PARC (S.Card et al.), 1987  Desktop multiplo 3D + aimazione (prototipo)  Information visualizations: cone trees, cam trees, perspective wall, …
    8. 8. cone tree
    9. 9. perspective wall
    10. 10. Esempio 3: ZUI +command language >Print
    11. 11. 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
    12. 12. Le macro-fasi 1960 1970 1980 1990 2000 Teletype Personal computer Web Terminali video Mobiles
    13. 13. "Point & clic"17 R.Polillo - Marzo 2014
    14. 14. Tecnologia dominante: il Web
    15. 15. LINK NODO Ipertesto R.Polillo - Marzo 201419
    16. 16. Visualizzazione dei nodi Un nodo per ogni schermata Più nodi per ogni schermata (overlapped / tiled)
    17. 17. 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
    18. 18. 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+
    19. 19. Una delle prime applicazioni di Hypercard, 1987
    20. 20. 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
    21. 21. Inigo Gets Out, di Amanda Goodenough (Hypercard, 1987)
    22. 22. The Manhole by Robin e Rand Miller (Hypercard)
    23. 23. The Manhole by Robin e Rand Miller (Hypercard)
    24. 24. The Manhole by Robin e Rand Miller (Hypercard)
    25. 25. The Manhole by Robin e Rand Miller (Hypercard)
    26. 26. Myst, 1993 (di Rand e Robin Miller) R.Polillo - Marzo 201437
    27. 27. (Le immagini che seguono sono contigue) R.Polillo - Marzo 201438
    28. 28. R.Polillo - Marzo 201439
    29. 29. R.Polillo - Marzo 201440
    30. 30. R.Polillo - Marzo 201441
    31. 31. R.Polillo - Marzo 201442
    32. 32. R.Polillo - Marzo 201443
    33. 33. R.Polillo - Marzo 201444
    34. 34. R.Polillo - Marzo 201445
    35. 35. R.Polillo - Marzo 201446
    36. 36. Un CD della Microsoft, 1994
    37. 37. Nascita della iperfiction: Afternoon, a story (Michel Joyce, 1987)
    38. 38. Nascita della iperfiction: Afternoon, a story (Michel Joyce, 1987)
    39. 39. Nascita della iperfiction: Afternoon, a story (Michel Joyce, 1987)
    40. 40. Ipertesti (fase 2: il Web) INTERNET Pagina (file) Link R.Polillo - Marzo 201456
    41. 41. 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 =
    42. 42. 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
    43. 43. Interfaccia nel Web‫׃‬ non solo Point & click  testo attivo  immagini attive  bottoni  Tabs  forms  esecuzione di programmi client side
    44. 44. Sito YouTube Flickr Incorporazione ("embedding") iFrame
    45. 45. HTML: iframe R.Polillo - Marzo 201461 <iframe width="560" height="315" src="http://www.youtube.com/embed/qrO4 YZeyl0I" frameborder="0" allowfullscreen></iframe>
    46. 46. Embedding R.Polillo - Marzo 201462 <html> <body> embed code </body> </html> oggetto attivo disponibile sulla rete
    47. 47. "Widgets": esempi R.Polillo - Marzo 201463
    48. 48. Creazione di un widget: esempio R.Polillo - Marzo 201464 Twitte r:
    49. 49. In sintesi… R.Polillo - Marzo 201466 link BROWSER File HTML
    50. 50. Virtualizzazone / globalizzazione della rete 67 Da dove provengono i servizi? R.Polillo - Marzo 2014
    51. 51. 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)
    52. 52. 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
    53. 53. 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)
    54. 54. WebBook link esterni al WebBook (chiude il libro e ne apre un altro) link interni al WebBook (sfoglia il libro)
    55. 55. Sfogliare le pagine di un WebBook
    56. 56. Vedere un WebBook attraverso la “Document Lens”
    57. 57. 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
    58. 58. 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
    59. 59. Il bookcase per i WebBook
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×