19. Evoluzione dei paradigmi di interazione (II)
Upcoming SlideShare
Loading in...5
×
 

19. Evoluzione dei paradigmi di interazione (II)

on

  • 444 views

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

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

Statistics

Views

Total Views
444
Views on SlideShare
440
Embed Views
4

Actions

Likes
0
Downloads
25
Comments
0

2 Embeds 4

https://twitter.com 3
http://www.slideee.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • NB <br /> Nel gennaio 2001, la quota di mercato di Netscape Navigator e di Microsoft Explorer era rispettivamente del 10% e dell’84% <br />
  • 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. <br />
  • 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&apos;utente guida col mouse il gattino nelle sue avventure, in The Manhole è l&apos;utente stesso ad essere protagonista, in prima persona. &quot;The Manhole - dice la copertina -is where Alice would go if the white rabbit had Hypercard&quot;. Si tratta di una sorta di &quot;viaggio visivo&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 (&quot;the manhole&quot;, appunto) in un mondo fantastico, popolato di draghi, tartarughe, conigli, pesci parlanti, trichechi. <br /> The Manhole è stato poi ripubblicato, in forma ampliata e a colori, su CD-ROM <br />
  • Questa sequenza mostra le immagini dell’inizio di Myst, contigue. <br /> Myst, di Rand e Robin Miller <br /> Broderbund - Cyan, 1994 <br /> 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. <br />

19. Evoluzione dei paradigmi di interazione (II) 19. Evoluzione dei paradigmi di interazione (II) Presentation Transcript

  • 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
  • WIMP Con questa sigla si indica spesso la classe di interfacce che seguono la filosofia impostata da Star (Mac, Windows, …):  Windows  Icons  Menus  Pointing
  • WINDOWS 95
  • 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…
  • 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
  • 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)  Information visualizations: cone trees, cam trees, perspective wall, …
  • 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/watch?v=7bHyW6un-Kc&list=PL92546C8F504816AF R.Polillo - Marzo 2014 15
  • 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 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
  • 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+
  • Una delle prime applicazioni di Hypercard, 1987
  • 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
  • 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 Concetto di ipertesto (es.Hypercard, 1987) Protocolli internet: -TCP/IP (primi ‘70) -DNS (primi ‘80) • HTTP • HTML • URI • BROWSE R (da1990- 91) + WW W =
  • 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
  • Interfaccia nel Web‫׃‬ non solo Point & click  testo attivo  immagini attive  bottoni  Tabs  forms  esecuzione di programmi client side
  • 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" frameborder="0" allowfullscreen></iframe>
  • 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)  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)
  • 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
  • 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)
  • 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 informazione accessibile a medio costo Grande quantità di informazione accessibile ad alto costo massima interazione
  • 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
  • Il bookcase per i WebBook