17. Evoluzione dei paradigmi di interazione uomo macchina (I)

Corso di Interazione Uomo MacchinaAA 2014-2015

Roberto Polillo

Corso di laurea in InformaticaUniversità di Milano BicoccaDipartimento di Informatica, Sistemistica e Comunicazione

Evoluzione dei paradigmi di interazione (II)

Edizione 2014-15

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

http://www.rpolillo.it/

http://creativecommons.org/licenses/by-nc-sa/3.0/it/deed.it

Il personal computer: tappe

IBM PC

1981

XEROX STAR

1982APPLE

MACINTOSH

1984+

MICROSOFTWINDOWS

1990+

R.Polillo - Aprile 2015

3

IBM PC, 1981

• Assemblato da componenti standard

• Basso costo

• Sistema operativo MS-DOS (Microsoft, non IBM), con interfaccia a comandi

• Enorme successo commerciale


4

MS-Dos


5

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

Xerox Star, 1982

Schermo grafico a doppia pagina

mouse


7

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


9

WIMP

Con questa sigla si indica spesso la classe di interfacce che seguono la filosofia impostata da Star (Mac, Windows, …):

Windows Icons Menus Pointing


10

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

https://www.youtube.com/watch?v=vpMeFh37mCE

https://www.youtube.com/watch?v=y58u79RrK60

Desktop ispirato da Xerox Star, ma semplificato


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

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)


15

WINDOWS 95


16

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…


17

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


18

Esempio 1: Information Visualizer

XEROX PARC (S.Card et al.), 1987 Desktop multiplo 3D + aimazione (prototipo) Information visualizations: cone trees, cam trees,

perspective wall, …


19

cone tree


perspective wall


Esempio 3: ZUI +command language

>Print


23

ZUI (Zoomable User Interfaces): esempi

https://www.youtube.com/watch?v=4EhWbqZVtGE

Prezi:https://www.youtube.com/watch?v=7bHyW6un-Kc&list=PL92546C8F504816AF


24

https://www.youtube.com/watch?v=4EhWbqZVtGE

https://www.youtube.com/watch?v=7bHyW6un-Kc&list=PL92546C8F504816AF

Le macro-fasi

1960 1970 1980 1990 2000

Teletype

Personal computer

Web

Terminali video

Mobiles


25

"Point & clic"26


Tecnologia dominante: il Web


27

LINK

NODO

Ipertesto


Visualizzazione dei nodi

Un nodo per ogni schermata Più nodi per ogni schermata(overlapped / tiled)


29

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


30

stack

card

area sensibile(bottone invisibile)

script

clic

Ipertesti off-line: Hypercard (1987)

R.Polillo - Marzo 201531Realizzato da Bill Atkinson perApple Macintosh

Apple Macintosh, 1984+

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

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


https://www.youtube.com/watch?v=BeMRoYDc2z8

https://www.youtube.com/watch?v=YyOTq1EpV5o

http://bit.ly/XFN1hT

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

The Manholeby Robin e Rand Miller (Hypercard)


42



43



44



45

Myst, 1993 (di Rand e Robin Miller)


(Le immagini che seguono sono contigue)


https://www.youtube.com/watch?v=yEDokgNoziM&index=2&list=PLahKLy8pQdCOJCIdtF_OYUQAceilcbbFo

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

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


62



63



64

Ipertesti (fase 2: il Web)

INTERNET

Pagina (file) Link


Il Web

Un sistema di tecnologie correlate, evolutesi con continuità a partire dai primi anni ’90:


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

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!”


Interfaccia nel Web׃ non solo Point & click

testo attivo immagini attive bottoni Tabs forms esecuzione di programmi client side


68

Sito

YouTube

Flickr

Incorporazione ("embedding")

iFrame


69

HTML: iframe


<iframe width="560" height="315" src="http://www.youtube.com/embed/qrO4YZeyl0I" frameborder="0" allowfullscreen></iframe>

Embedding


<html><body>

embed code

</body></html>

oggetto attivo

disponibile sulla rete

"Widgets": esempi


Creazione di un widget: esempio


Twitter:


74

In sintesi…


link

BROWSER

File HTML

Virtualizzazone / globalizzazione della rete76

Da dove provengono i servizi?


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) …


77

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


78

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)


79

WebBook

link esterni al WebBook(chiude il libro e ne apre un altro)

link interni al WebBook(sfoglia il libro)


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


81

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


84

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 recenteR.Polillo - Marzo 201585

Il bookcase per i WebBook


17. Evoluzione dei paradigmi di interazione uomo macchina (I)

Education

Transcript of 17. Evoluzione dei paradigmi di interazione uomo macchina (I)