interaction

WEB DESIGNMater of Arts in Communication Design

Interaction

WEB DESIGN NABA 2014 Roberto DADDA 2 Interaction

WEB DESIGN NABA 2014 Roberto DADDAInteraction 3

1960 Jan Dec1966

Nov1973

Oct1980

Sep1987

Aug1994

Jul2001

Jun2008 2015

Teletype

Video terminal

Tablet & Smartphone

Browser e cloud

Augmented reality

Read & write

Like in volley!

WEB DESIGN NABA 2014 Roberto DADDA

• User’s has control• Command languages• Query languages• Line editors• Adventure game

• Computer has control• Q&A• Advisory system

• Conversations• Eliza

Interaction 9

Paradigms

WEB DESIGN NABA 2014 Roberto DADDA 10

Command languages

Interaction

$pwd/usr/roberto$lsfilea fileb filec$rm filea$

(Unix)

Query languages

Interaction

GIVE THE NAMES OF ALL EMPLOYEES WHO HAVE JOBS WORKING AS A SECRETARY IN THE CITY OF CHICAGO.

PRINT THE NAME OF ANY EMPLOYEE WITH CITY=CHICAGO AND JOB=SECRETARY THE NUMBER OF RECORDS TO RETRIEVE IS 30

SMITHJONESBROWN...

Adventure games

Interaction

You are standing at the end of a road before a small brick building. Around you is a forest. A small stream flows down a gully.

ENTER BUILDING

You are inside a building, a well house for a large spring. There are some keys on the ground here. There is a shiny brass lamp nearby. There is a bottle of water here.

GET WATER

GET KEYS

Okay(Adventure, 1975)

Expert systems

Interaction

(1) Patient’s name: (first-last)

**FRED SMITH

(2) Sex:

**MALE

(3) Age:

(4) Have you been able to obtain positive cultures from a site at which Fred Smith has an infection?

(5) What is the infection?

**PRIMARY-BACTEREMIA

(6) Please give the date and approximate time when signs of symptoms first appeared

(Mycin)

Eliza (anni ’70)

Interaction

Interaction, a definition

Interaction

Mutual and simultaneous activity on the part of both participants usually working towards some goal but not necessarily. Stewart Brand, The Media Lab: Inventing the Future at M.I.T. (Penguin, 1988), p. 46

Andy Lippman, MIT

Lippman on Interactivity, corollaries• Interruptibility• Graceful degradation• Limited look ahead• No default• Impression of infinite database

Interaction 17

Interruptibility

• Lippman contrasts the ability of any participant to interrupt the others with alternating (turn taking). He proposes a model of interaction closer to a conversation than a lecture. He refers to the granularity of the interactive system to raise the question of the human interval where participants understand they are not being ignored (e.g. word, sentence, paragraph). See phatic function in Jakobson's model of communication.

Interaction

Graceful degradation

• Something the system cannot handle crops up. An example: a system responds to a question without an immediate answer with a promise to come back to the point later. The interaction continues; it does not collapse. Lippman asks "in what manner does it degrade, productively or not?"

Interaction

Limited look ahead

• Everything is not precomputed. Related concept "on the fly."

Interaction

No default

• Lippman suggests avoiding default paths. He considers them boring.

Interaction

Impression of infinite database

• The distinction between "interactive and selective" gets looped back into that of "granularity".

Interaction

GOOD MORNING MY NAME IS GAINES AND I WISH TO TALK TO YOUI AM NOT INTERESTED IN NAMESSORRY PERHAPS YOU COULD LET ME KNOW YOUR INTERESTSPLEASE DON’T APOLOGIZETHANK YOU WHAT INTEREST YOU MOST?WHY DO YOU ASK?BECAUSE I HAVE TO DEMONSTRATE YOUR INEFFABLE CAPABILITIESIS THAT THE REAL REASON?YES YOUR CAPABILITIES INTEREST MEYOU SEEM QUITE POSITIVE...

http://www-ai.ijs.si/eliza/eliza.html

(W iz en b a u m , 1 9 6 6 )

1960 Jan Dec1966

Nov1973

Oct1980

Sep1987

Aug1994

Jul2001

Jun2008 2015

Teletype

Video terminal

Tablet & Smartphone

Browser e cloud

Augmented reality

Show and fill

IBM 3270

Interaction 26

Keyboard

Interaction

IBM CUA Common User Access

Interaction

1960 Jan Dec1966

Nov1973

Oct1980

Sep1987

Aug1994

Jul2001

Jun2008 2015

Teletype

Video terminal

Tablet & Smartphone

Browser e cloud

Augmented reality

All in one

Olivetti Programma 101

Interaction 31

1960 Jan Dec1966

Nov1973

Oct1980

Sep1987

Aug1994

Jul2001

Jun2008 2015

Teletype

Video terminal

Tablet & Smartphone

Browser e cloud

Augmented reality

IBM PC (1981)

Interaction 37

• Low cost standard components• Low cost• MS DOS• Huge commercial success• Command line interface

Xerox Star (1981)

Interaction 41

Double page WYSIWYGETDirect manipulationDesktop metaphor

WYSIWYG

Interaction

Same image on screen and printed pagesFor the first time!

• Square pixels• Good video resolution (72 dpi)• Even better printers (300, 600,

1200 dpi)

Xerox star: the philosophy.

Interaction 46

Fam iliar user’s conceptual m odel

Seeing and pointing versus rem em bering and typ ing

W hat you see is w hat you get

U niversal com m ands

C onsistency

S im plic ity

M odeless in teraction

U ser Tailorability

(Sm ith et a l., D esigning the S tar U ser In treface, 1982)

•Pointing•Selecting•Dragging

Mouse and Fitts law

Interaction 48

)5,0(lo g*9 6,00 3,1 2 s

t Time in second to position mouseD Distance from object in pixelsS Object dimension in pixels

Constants (1.03 and 0.96) are almost the same of manual movements.The mouse is a optimal pointing device

D. Enghelbart (1964)

Interaction

(D .Engelbart)

Direct Manipulation

Interaction 51

• Visibility of Object and Actions• Rapid, reversible, incremental

actions• Replacement of complex command-

language syntax with direct, visual manipulation of the object of interest.

Schneiderman (1983)

Desktop metaphor

Interaction 53

Apple Macintosh (1984)

Interaction 55

“The com puter for the rest of us”

Windows (1985)

Interaction 59

Interaction

1960 Jan Dec1966

Nov1973

Oct1980

Sep1987

Aug1994

Jul2001

Jun2008 2015

Teletype

Video terminal

Tablet & Smartphone

Browser e cloud

Augmented reality

Always connected

August 6, 1991

Interaction 68

WEB: point and click

• Hypertext• Active text, bottons, links• Forms• Multimedia

Interaction 71

Vannevar Bush (July 1945)

Interaction

Hypertext: link

Interaction

Talmud

Interaction 75

1960 Jan Dec1966

Nov1973

Oct1980

Sep1987

Aug1994

Jul2001

Jun2008 2015

Teletype

Video terminal

Tablet & Smartphone

Browser e cloud

Augmented reality

Computer & realitytogheter

Roberto Dadda

www.dadda.itroberto@dadda.it+39 338 775 22 03Twitter, facebook, linkedin: robertodadda

interaction

unixinteractionweb design

roberto dadda28

roberto dadda17

roberto dadda24

roberto dadda29

roberto dadda13

roberto dadda9

roberto dadda27

Design

protein interaction networks: protein domain interaction...

input devices, interaction techniques, and interaction...

interaction data server - avaya · what is the interaction...

mixed interaction spaces – expanding the interaction space...

interaction. 2 contents understanding & conceptualizing...

mobile interaction : human computer interaction design

graphisme par ordinateur sif-1032. contenu du cours 11...

species interactions competition: (-,-) interaction...

interaction design principles and usability. what’s...

1 chapter 3 the interaction. 2 the interaction interaction...

pipzcorreiaz.github.io · before interaction after...

how important is interaction (types of interaction)

บทที่ 7 interaction devices human computer...

7.public interaction 7. public interaction

interaction web tools - genesys · interaction sip proxy...

human computer interaction - gpcet.ac.inunit-i introduction...

center forhuman-computer interaction - irasme · center...

interaction gateway administrator's guide€¦ ·...

herb-drug interaction herb review. basic concept and...

compsci 345 interaction 1 the interaction interaction models...