Interaction

659 views
568 views

Published on

Consideration on the evolution of man-machine interactions

Published in: Design, Business, Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
659
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
14
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

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

×