Post on 16-Jan-2015
description
Corso di Interazione Uomo MacchinaAA 2013-2014
Roberto Polillo
Corso di laurea in InformaticaUniversità di Milano BicoccaDipartimento 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
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 201422Realizzato da Bill Atkinson perApple Macintosh
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 Millerhttps://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 Manholeby Robin e Rand Miller (Hypercard)
The Manholeby Robin e Rand Miller (Hypercard)
The Manholeby Robin e Rand Miller (Hypercard)
The Manholeby 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)
+ WWW
=
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/qrO4YZeyl0I" 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
Twitter:
In sintesi…
R.Polillo - Marzo 201466
link
BROWSER
File HTML
Virtualizzazone / globalizzazione della rete67
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 direttacon 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