Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Mater of Arts in Communication Design

WEB DESIGN
Interaction
Interaction

WEB DESIGN NABA 2014 Roberto DADDA

2
1960

Jan

Dec
1966

Nov
1973

Oct
1980

Sep
1987

Aug
1994

Jul
2001

Jun
2008

2015
Today

Teletype
Video terminal

PC
T...
Interaction

WEB DESIGN NABA 2014 Roberto DADDA

4
Interaction

WEB DESIGN NABA 2014 Roberto DADDA

5
Interaction

WEB DESIGN NABA 2014 Roberto DADDA

6
Interaction

WEB DESIGN NABA 2014 Roberto DADDA

7
Like in volley!

Interaction

WEB DESIGN NABA 2014 Roberto DADDA

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

• Computer has contr...
Command languages
$pwd
/usr/roberto
$ls
filea fileb filec
$rm filea
$
(Unix)

Interaction

WEB DESIGN NABA 2014 Roberto DA...
Query languages
GIVE THE NAMES OF ALL EMPLOYEES WHO HAVE
JOBS WORKING AS A SECRETARY IN THE CITY OF
CHICAGO.
PRINT THE NAM...
Adventure games
You are standing at the end of a road before a
small brick building. Around you is a forest.
A small strea...
Expert systems
(1) Patient’s name: (first-last)
**FRED SMITH
(2) Sex:
**MALE
(3) Age:
**55
(4) Have you been able to obtai...
Eliza (anni ’70)

Interaction

WEB DESIGN NABA 2014 Roberto DADDA

14
Interaction, a definition
Mutual and simultaneous
activity on the part of both
participants usually
working towards some g...
Interaction

WEB DESIGN NABA 2014 Roberto DADDA

16
Lippman on Interactivity, corollaries
• Interruptibility
• Graceful degradation
• Limited look ahead
• No default
• Impres...
Interruptibility
• Lippman contrasts the ability of any
participant to interrupt the others with
alternating (turn taking)...
Graceful degradation
• Something the system cannot
handle crops up. An example:
a system responds to a
question without an...
Limited look ahead
• Everything is not precomputed. Related concept "on the fly."

Interaction

WEB DESIGN NABA 2014 Rober...
No default
• Lippman suggests avoiding default paths. He considers them boring.

Interaction

WEB DESIGN NABA 2014 Roberto...
Impression of infinite database
• The distinction between "interactive and selective" gets looped back
into that of "granu...
Eliza
GOOD MORNING MY NAME IS GAINES AND I WISH TO
TALK TO YOU
I AM NOT INTERESTED IN NAMES
SORRY PERHAPS YOU COULD LET ME...
1960

Jan

Dec
1966

Nov
1973

Oct
1980

Sep
1987

Aug
1994

Jul
2001

Jun
2008

2015
Today

Teletype
Video terminal

PC
T...
Interaction

WEB DESIGN NABA 2014 Roberto DADDA

25
IBM 3270

Interaction

WEB DESIGN NABA 2014 Roberto DADDA

26
Keyboard

Interaction

WEB DESIGN NABA 2014 Roberto DADDA

27
IBM CUA Common User Access

Interaction

WEB DESIGN NABA 2014 Roberto DADDA

28
1960

Jan

Dec
1966

Nov
1973

Oct
1980

Sep
1987

Aug
1994

Jul
2001

Jun
2008

2015
Today

Teletype
Video terminal

PC
T...
Interaction

WEB DESIGN NABA 2014 Roberto DADDA

30
Olivetti Programma 101
1965!

Interaction

WEB DESIGN NABA 2014 Roberto DADDA

31
1960

Jan

Dec
1966

Nov
1973

Oct
1980

Sep
1987

Aug
1994

Jul
2001

Jun
2008

2015
Today

Teletype
Video terminal

PC
T...
Interaction

WEB DESIGN NABA 2014 Roberto DADDA

33
Interaction

WEB DESIGN NABA 2014 Roberto DADDA

34
Interaction

WEB DESIGN NABA 2014 Roberto DADDA

35
Interaction

WEB DESIGN NABA 2014 Roberto DADDA

36
IBM PC (1981)

•
•
•
•
•
Interaction

Low cost standard components
Low cost
MS DOS
Huge commercial success
Command line in...
Interaction

WEB DESIGN NABA 2014 Roberto DADDA

38
Interaction

WEB DESIGN NABA 2014 Roberto DADDA

39
Xerox
Star (1981)
Double page WYSIWYGET
Direct manipulation
Desktop metaphor

mouse

Interaction

WEB DESIGN NABA 2014 Rob...
WYSIWYG
Same image on
screen and
printed pages
For the first time!
• Square pixels
• Good video resolution (72 dpi)
• Even...
Interaction

WEB DESIGN NABA 2014 Roberto DADDA

43
Interaction

WEB DESIGN NABA 2014 Roberto DADDA

44
Interaction

WEB DESIGN NABA 2014 Roberto DADDA

45
Xerox star: the philosophy.
Familiar user’s conceptual model
Seeing and pointing versus remembering and typing
What you se...
• Pointing
• Selecting
• Dragging

Interaction

WEB DESIGN NABA 2014 Roberto DADDA

47
Mouse and Fitts law

d
t 1,03 0,96 * log 2(
s

0,5)

t Time in second to position mouse
D Distance from object in pixels
S...
D. Enghelbart (1964)

(D.Engelbart)
Interaction

WEB DESIGN NABA 2014 Roberto DADDA

49
Interaction

WEB DESIGN NABA 2014 Roberto DADDA

50
Direct Manipulation
• Visibility of Object and Actions
• Rapid, reversible, incremental
actions
• Replacement of complex c...
Interaction

WEB DESIGN NABA 2014 Roberto DADDA

52
Desktop metaphor

Interaction

WEB DESIGN NABA 2014 Roberto DADDA

53
Interaction

WEB DESIGN NABA 2014 Roberto DADDA

54
Apple Macintosh (1984)

“The computer for the rest of us”
Interaction

WEB DESIGN NABA 2014 Roberto DADDA

55
Interaction

WEB DESIGN NABA 2014 Roberto DADDA

56
Interaction

WEB DESIGN NABA 2014 Roberto DADDA

57
Interaction

WEB DESIGN NABA 2014 Roberto DADDA

58
Windows (1985)

Interaction

WEB DESIGN NABA 2014 Roberto DADDA

59
1.0

Interaction

WEB DESIGN NABA 2014 Roberto DADDA

60
2.0

Interaction

WEB DESIGN NABA 2014 Roberto DADDA

61
3.1

Interaction

WEB DESIGN NABA 2014 Roberto DADDA

62
95

Interaction

WEB DESIGN NABA 2014 Roberto DADDA

63
7

Interaction

WEB DESIGN NABA 2014 Roberto DADDA

64
8

Interaction

WEB DESIGN NABA 2014 Roberto DADDA

65
1960

Jan

Dec
1966

Nov
1973

Oct
1980

Sep
1987

Aug
1994

Jul
2001

Jun
2008

2015
Today

Teletype
Video terminal

PC
T...
Interaction

WEB DESIGN NABA 2014 Roberto DADDA

67
August 6, 1991

Interaction

WEB DESIGN NABA 2014 Roberto DADDA

68
Interaction

WEB DESIGN NABA 2014 Roberto DADDA

69
Interaction

WEB DESIGN NABA 2014 Roberto DADDA

70
WEB: point and click
• Hypertext
• Active text, bottons, links
• Forms
• Multimedia

Interaction

WEB DESIGN NABA 2014 Rob...
Vannevar Bush (July 1945)

Interaction

WEB DESIGN NABA 2014 Roberto DADDA

72
Hypertext: link

Interaction

WEB DESIGN NABA 2014 Roberto DADDA

73
Interaction

WEB DESIGN NABA 2014 Roberto DADDA

74
Talmud

Interaction

WEB DESIGN NABA 2014 Roberto DADDA

75
Interaction

WEB DESIGN NABA 2014 Roberto DADDA

76
Interaction

WEB DESIGN NABA 2014 Roberto DADDA

77
Interaction

WEB DESIGN NABA 2014 Roberto DADDA

78
Interaction

WEB DESIGN NABA 2014 Roberto DADDA

79
Interaction

WEB DESIGN NABA 2014 Roberto DADDA

80
Interaction

WEB DESIGN NABA 2014 Roberto DADDA

81
Interaction

WEB DESIGN NABA 2014 Roberto DADDA

82
Interaction

WEB DESIGN NABA 2014 Roberto DADDA

83
Interaction

WEB DESIGN NABA 2014 Roberto DADDA

84
1960

Jan

Dec
1966

Nov
1973

Oct
1980

Sep
1987

Aug
1994

Jul
2001

Jun
2008

2015
Today

Teletype
Video terminal

PC
T...
Interaction

WEB DESIGN NABA 2014 Roberto DADDA

86
Interaction

WEB DESIGN NABA 2014 Roberto DADDA

87
Interaction

WEB DESIGN NABA 2014 Roberto DADDA

88
Interaction

WEB DESIGN NABA 2014 Roberto DADDA

89
Interaction

WEB DESIGN NABA 2014 Roberto DADDA

90
Interaction

WEB DESIGN NABA 2014 Roberto DADDA

91
Interaction

WEB DESIGN NABA 2014 Roberto DADDA

92
Roberto Dadda
www.dadda.it
roberto@dadda.it
+39 338 775 22 03
Twitter, facebook, linkedin: robertodadda

Interaction

WEB ...
Upcoming SlideShare
Loading in …5
×

Interaction

808 views

Published on

Consideration on the evolution of man-machine interactions

Published in: Design, Business, Technology
  • Be the first to comment

Interaction

  1. 1. Mater of Arts in Communication Design WEB DESIGN Interaction
  2. 2. Interaction WEB DESIGN NABA 2014 Roberto DADDA 2
  3. 3. 1960 Jan Dec 1966 Nov 1973 Oct 1980 Sep 1987 Aug 1994 Jul 2001 Jun 2008 2015 Today Teletype Video terminal PC Tablet & Smartphone Browser e cloud Augmented reality Interaction WEB DESIGN NABA 2014 Roberto DADDA 3
  4. 4. Interaction WEB DESIGN NABA 2014 Roberto DADDA 4
  5. 5. Interaction WEB DESIGN NABA 2014 Roberto DADDA 5
  6. 6. Interaction WEB DESIGN NABA 2014 Roberto DADDA 6
  7. 7. Interaction WEB DESIGN NABA 2014 Roberto DADDA 7
  8. 8. Like in volley! Interaction WEB DESIGN NABA 2014 Roberto DADDA 8
  9. 9. Paradigms • User’s has control • Command languages • Query languages • Line editors • Adventure game • Computer has control • Q&A • Advisory system • Conversations • Eliza Interaction WEB DESIGN NABA 2014 Roberto DADDA 9
  10. 10. Command languages $pwd /usr/roberto $ls filea fileb filec $rm filea $ (Unix) Interaction WEB DESIGN NABA 2014 Roberto DADDA 10
  11. 11. Query languages 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 SMITH JONES BROWN ... Interaction WEB DESIGN NABA 2014 Roberto DADDA 11
  12. 12. Adventure games 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 Okay GET KEYS Okay (Adventure, 1975) Interaction WEB DESIGN NABA 2014 Roberto DADDA 12
  13. 13. Expert systems (1) Patient’s name: (first-last) **FRED SMITH (2) Sex: **MALE (3) Age: **55 (4) Have you been able to obtain positive cultures from a site at which Fred Smith has an infection? **YES (5) What is the infection? **PRIMARY-BACTEREMIA (6) Please give the date and approximate time when signs of symptoms first appeared (Mycin) Interaction WEB DESIGN NABA 2014 Roberto DADDA 13
  14. 14. Eliza (anni ’70) Interaction WEB DESIGN NABA 2014 Roberto DADDA 14
  15. 15. Interaction, a definition Mutual and simultaneous activity on the part of both participants usually working towards some goal but not necessarily. Andy Lippman, MIT Stewart Brand, The Media Lab: Inventing the Future at M.I.T. (Penguin, 1988), p. 46 Interaction WEB DESIGN NABA 2014 Roberto DADDA 15
  16. 16. Interaction WEB DESIGN NABA 2014 Roberto DADDA 16
  17. 17. Lippman on Interactivity, corollaries • Interruptibility • Graceful degradation • Limited look ahead • No default • Impression of infinite database Interaction WEB DESIGN NABA 2014 Roberto DADDA 17
  18. 18. 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 WEB DESIGN NABA 2014 Roberto DADDA 18
  19. 19. 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 WEB DESIGN NABA 2014 Roberto DADDA 19
  20. 20. Limited look ahead • Everything is not precomputed. Related concept "on the fly." Interaction WEB DESIGN NABA 2014 Roberto DADDA 20
  21. 21. No default • Lippman suggests avoiding default paths. He considers them boring. Interaction WEB DESIGN NABA 2014 Roberto DADDA 21
  22. 22. Impression of infinite database • The distinction between "interactive and selective" gets looped back into that of "granularity". Interaction WEB DESIGN NABA 2014 Roberto DADDA 22
  23. 23. Eliza GOOD MORNING MY NAME IS GAINES AND I WISH TO TALK TO YOU I AM NOT INTERESTED IN NAMES SORRY PERHAPS YOU COULD LET ME KNOW YOUR INTERESTS PLEASE DON’T APOLOGIZE THANK YOU WHAT INTEREST YOU MOST? WHY DO YOU ASK? BECAUSE I HAVE TO DEMONSTRATE YOUR INEFFABLE CAPABILITIES IS THAT THE REAL REASON? YES YOUR CAPABILITIES INTEREST ME YOU SEEM QUITE POSITIVE ... (Wizenbaum, 1966) http://www-ai.ijs.si/eliza/eliza.html Interaction WEB DESIGN NABA 2014 Roberto DADDA 23
  24. 24. 1960 Jan Dec 1966 Nov 1973 Oct 1980 Sep 1987 Aug 1994 Jul 2001 Jun 2008 2015 Today Teletype Video terminal PC Tablet & Smartphone Browser e cloud Augmented reality Interaction WEB DESIGN NABA 2014 Roberto DADDA 24
  25. 25. Interaction WEB DESIGN NABA 2014 Roberto DADDA 25
  26. 26. IBM 3270 Interaction WEB DESIGN NABA 2014 Roberto DADDA 26
  27. 27. Keyboard Interaction WEB DESIGN NABA 2014 Roberto DADDA 27
  28. 28. IBM CUA Common User Access Interaction WEB DESIGN NABA 2014 Roberto DADDA 28
  29. 29. 1960 Jan Dec 1966 Nov 1973 Oct 1980 Sep 1987 Aug 1994 Jul 2001 Jun 2008 2015 Today Teletype Video terminal PC Tablet & Smartphone Browser e cloud Augmented reality Interaction WEB DESIGN NABA 2014 Roberto DADDA 29
  30. 30. Interaction WEB DESIGN NABA 2014 Roberto DADDA 30
  31. 31. Olivetti Programma 101 1965! Interaction WEB DESIGN NABA 2014 Roberto DADDA 31
  32. 32. 1960 Jan Dec 1966 Nov 1973 Oct 1980 Sep 1987 Aug 1994 Jul 2001 Jun 2008 2015 Today Teletype Video terminal PC Tablet & Smartphone Browser e cloud Augmented reality Interaction WEB DESIGN NABA 2014 Roberto DADDA 32
  33. 33. Interaction WEB DESIGN NABA 2014 Roberto DADDA 33
  34. 34. Interaction WEB DESIGN NABA 2014 Roberto DADDA 34
  35. 35. Interaction WEB DESIGN NABA 2014 Roberto DADDA 35
  36. 36. Interaction WEB DESIGN NABA 2014 Roberto DADDA 36
  37. 37. IBM PC (1981) • • • • • Interaction Low cost standard components Low cost MS DOS Huge commercial success Command line interface WEB DESIGN NABA 2014 Roberto DADDA 37
  38. 38. Interaction WEB DESIGN NABA 2014 Roberto DADDA 38
  39. 39. Interaction WEB DESIGN NABA 2014 Roberto DADDA 39
  40. 40. Xerox Star (1981) Double page WYSIWYGET Direct manipulation Desktop metaphor mouse Interaction WEB DESIGN NABA 2014 Roberto DADDA 41
  41. 41. WYSIWYG Same image on screen and printed pages For the first time! • Square pixels • Good video resolution (72 dpi) • Even better printers (300, 600, 1200 dpi) Interaction WEB DESIGN NABA 2014 Roberto DADDA 42
  42. 42. Interaction WEB DESIGN NABA 2014 Roberto DADDA 43
  43. 43. Interaction WEB DESIGN NABA 2014 Roberto DADDA 44
  44. 44. Interaction WEB DESIGN NABA 2014 Roberto DADDA 45
  45. 45. Xerox star: the philosophy. Familiar user’s conceptual model Seeing and pointing versus remembering and typing What you see is what you get Universal commands Consistency Simplicity Modeless interaction User Tailorability (Smith et al., Designing the Star User Intreface, 1982) Interaction WEB DESIGN NABA 2014 Roberto DADDA 46
  46. 46. • Pointing • Selecting • Dragging Interaction WEB DESIGN NABA 2014 Roberto DADDA 47
  47. 47. Mouse and Fitts law d t 1,03 0,96 * log 2( s 0,5) t Time in second to position mouse D Distance from object in pixels S Object dimension in pixels Constants (1.03 and 0.96) are almost the same of manual movements. The mouse is a optimal pointing device Interaction WEB DESIGN NABA 2014 Roberto DADDA 48
  48. 48. D. Enghelbart (1964) (D.Engelbart) Interaction WEB DESIGN NABA 2014 Roberto DADDA 49
  49. 49. Interaction WEB DESIGN NABA 2014 Roberto DADDA 50
  50. 50. Direct Manipulation • Visibility of Object and Actions • Rapid, reversible, incremental actions • Replacement of complex commandlanguage syntax with direct, visual manipulation of the object of interest. Schneiderman (1983) Interaction WEB DESIGN NABA 2014 Roberto DADDA 51
  51. 51. Interaction WEB DESIGN NABA 2014 Roberto DADDA 52
  52. 52. Desktop metaphor Interaction WEB DESIGN NABA 2014 Roberto DADDA 53
  53. 53. Interaction WEB DESIGN NABA 2014 Roberto DADDA 54
  54. 54. Apple Macintosh (1984) “The computer for the rest of us” Interaction WEB DESIGN NABA 2014 Roberto DADDA 55
  55. 55. Interaction WEB DESIGN NABA 2014 Roberto DADDA 56
  56. 56. Interaction WEB DESIGN NABA 2014 Roberto DADDA 57
  57. 57. Interaction WEB DESIGN NABA 2014 Roberto DADDA 58
  58. 58. Windows (1985) Interaction WEB DESIGN NABA 2014 Roberto DADDA 59
  59. 59. 1.0 Interaction WEB DESIGN NABA 2014 Roberto DADDA 60
  60. 60. 2.0 Interaction WEB DESIGN NABA 2014 Roberto DADDA 61
  61. 61. 3.1 Interaction WEB DESIGN NABA 2014 Roberto DADDA 62
  62. 62. 95 Interaction WEB DESIGN NABA 2014 Roberto DADDA 63
  63. 63. 7 Interaction WEB DESIGN NABA 2014 Roberto DADDA 64
  64. 64. 8 Interaction WEB DESIGN NABA 2014 Roberto DADDA 65
  65. 65. 1960 Jan Dec 1966 Nov 1973 Oct 1980 Sep 1987 Aug 1994 Jul 2001 Jun 2008 2015 Today Teletype Video terminal PC Tablet & Smartphone Browser e cloud Augmented reality Interaction WEB DESIGN NABA 2014 Roberto DADDA 66
  66. 66. Interaction WEB DESIGN NABA 2014 Roberto DADDA 67
  67. 67. August 6, 1991 Interaction WEB DESIGN NABA 2014 Roberto DADDA 68
  68. 68. Interaction WEB DESIGN NABA 2014 Roberto DADDA 69
  69. 69. Interaction WEB DESIGN NABA 2014 Roberto DADDA 70
  70. 70. WEB: point and click • Hypertext • Active text, bottons, links • Forms • Multimedia Interaction WEB DESIGN NABA 2014 Roberto DADDA 71
  71. 71. Vannevar Bush (July 1945) Interaction WEB DESIGN NABA 2014 Roberto DADDA 72
  72. 72. Hypertext: link Interaction WEB DESIGN NABA 2014 Roberto DADDA 73
  73. 73. Interaction WEB DESIGN NABA 2014 Roberto DADDA 74
  74. 74. Talmud Interaction WEB DESIGN NABA 2014 Roberto DADDA 75
  75. 75. Interaction WEB DESIGN NABA 2014 Roberto DADDA 76
  76. 76. Interaction WEB DESIGN NABA 2014 Roberto DADDA 77
  77. 77. Interaction WEB DESIGN NABA 2014 Roberto DADDA 78
  78. 78. Interaction WEB DESIGN NABA 2014 Roberto DADDA 79
  79. 79. Interaction WEB DESIGN NABA 2014 Roberto DADDA 80
  80. 80. Interaction WEB DESIGN NABA 2014 Roberto DADDA 81
  81. 81. Interaction WEB DESIGN NABA 2014 Roberto DADDA 82
  82. 82. Interaction WEB DESIGN NABA 2014 Roberto DADDA 83
  83. 83. Interaction WEB DESIGN NABA 2014 Roberto DADDA 84
  84. 84. 1960 Jan Dec 1966 Nov 1973 Oct 1980 Sep 1987 Aug 1994 Jul 2001 Jun 2008 2015 Today Teletype Video terminal PC Tablet & Smartphone Browser e cloud Augmented reality Interaction WEB DESIGN NABA 2014 Roberto DADDA 85
  85. 85. Interaction WEB DESIGN NABA 2014 Roberto DADDA 86
  86. 86. Interaction WEB DESIGN NABA 2014 Roberto DADDA 87
  87. 87. Interaction WEB DESIGN NABA 2014 Roberto DADDA 88
  88. 88. Interaction WEB DESIGN NABA 2014 Roberto DADDA 89
  89. 89. Interaction WEB DESIGN NABA 2014 Roberto DADDA 90
  90. 90. Interaction WEB DESIGN NABA 2014 Roberto DADDA 91
  91. 91. Interaction WEB DESIGN NABA 2014 Roberto DADDA 92
  92. 92. Roberto Dadda www.dadda.it roberto@dadda.it +39 338 775 22 03 Twitter, facebook, linkedin: robertodadda Interaction WEB DESIGN NABA 2014 Roberto DADDA 93

×