Functional Interaction Design

5,027 views

Published on

These are slides from my presentation on Functional Interaction Design, presented at DrupalCon Paris 2009. (I presented an earlier version at DrupalCamp Colorado 2009.)

Credits for the wonderful kitten photos are at the end, 2nd to last slide.

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

No Downloads
Views
Total views
5,027
On SlideShare
0
From Embeds
0
Number of Embeds
264
Actions
Shares
0
Downloads
0
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide

Functional Interaction Design

  1. 1. Functional Interaction Design
  2. 2. Laura Scott • President & Creative Director of pingVision • Designing websites since 1995 • Designing DVDs since 2001 • Drupal since 2004 • BA and MFA FWIW
  3. 3. Computer/Programming experience • Watching 2001 and Star Trek • Punch cards in 7th grade • PASCAL in college • IBM mainframe in college • MacIntosh for grad school applications • DOS in grad school • Windows 3.1, 95, NT (hating MacOS) • Mac since 2002
  4. 4. $session != • Theming, CSS, (x)html, PHP • Beauty for beauty's sake • The be-all, end-all of design
  5. 5. Thoughts. Observations. Things I've learned. (Rambling stuff.)
  6. 6. I want your feedback @lauras #drupalcon or #drupalconparis and #fid "laura s" http://drupal.org/user/18973/contact
  7. 7. WTF is "Functional" Interaction Design?
  8. 8. Design that serves a function.
  9. 9. Design that is usable.
  10. 10. Design that works.
  11. 11. Functional design serves the user
  12. 12. Functional design is easy to understand...
  13. 13. ...or at least easy to figure out without stress.
  14. 14. Sometimes design seems to be a bit unusual
  15. 15. Herman Miller Aeron chair
  16. 16. • Shaped to fit the human body • Holes keep you cool • Lightweight: easy to move • Handle: easy to move • Stackable • Appealing color = beautiful
  17. 17. Who is your audience?
  18. 18. Who is your audience? Hint: This actually looks good to some people.
  19. 19. Intuitive
  20. 20. Is functional design any less important in software or on the web than it is for your chair or coffee maker or favorite pen?
  21. 21. How much time do you spend on the web?
  22. 22. Functional design used to be exclusively in the realm of product design.
  23. 23. http://tomgpalmer.com/2005/09/
  24. 24. source: Wikimedia Commons
  25. 25. source: Wikimedia Commons
  26. 26. source: Wikimedia Commons
  27. 27. http://www.global-b2b-network.com
  28. 28. http://blogs.sun.com
  29. 29. source: Wikimedia Commons
  30. 30. source: Wikimedia Commons
  31. 31. The "expert" interface (that requires expertise just to do basic things)
  32. 32. The "expert" interface (that requires expertise just to do basic things)
  33. 33. The "expert" interface (that requires expertise just to do basic things)
  34. 34. The "expert" interface (that requires expertise just to do basic things)
  35. 35. 1981: GRID Compass designed by Bill Moggridge
  36. 36. Designing Interactions by Bill Moggridge
  37. 37. The "Desktop" Analogues of what we already knew Xerox's Tim Mott's doodled schematic for UI from Moggridge: "Designing Interactions"
  38. 38. Xerox PARC Tim Mott and Larry Tessler (and many others)
  39. 39. "guided fantasies" to learn about user needs
  40. 40. source: Wikimedia Commons
  41. 41. The lesson of the analogue….
  42. 42. Applications that are easy to use are designed to be familiar. –Jennifer Tidwell
  43. 43. How do I create a group?
  44. 44. How do I create a page?
  45. 45. How do I find unread replies?
  46. 46. How do I find unread replies? meh!
  47. 47. Some basics
  48. 48. Clear mental model.
  49. 49. Reassuring feedback.
  50. 50. Navigability.
  51. 51. Consistency.
  52. 52. Intuitive interaction.
  53. 53. "When we design a computer-based system or device, we're designing not just for what it looks like but how it behaves. We're designing the quality of how we and it interact." Bill Moggridge
  54. 54. Functional Design Concepts
  55. 55. Affordance How the design itself invites you to use it.
  56. 56. What is this about?
  57. 57. ? http://www.iqcontent.com/blog/2007/01/the-usability-of-garda-doors/
  58. 58. http://www.ihatehardware.com/?tag=push-pull
  59. 59. http://www.ihatehardware.com/?tag=push-pull
  60. 60. Legibility Gray on Gray is not beautiful
  61. 61. Legibility Gray on Gray is not beautiful
  62. 62. 10 words: pear pearl prude sandwich orange purple crisper lunchbox seed pith
  63. 63. Perceptual limits Maximum number of objects in a glimpse: 3 Maximum number of objects with attention: 7 Most people can remember only 5 words for 30 seconds
  64. 64. Remember those words?
  65. 65. 10 words: pear pearl prude sandwich orange purple crisper lunchbox seed pith
  66. 66. Five "Hat Racks" alphabet chronology location category continuum
  67. 67. Category
  68. 68. Chronology
  69. 69. Location
  70. 70. Alice Beauregard Captain Dizz Eloise Fifi Frankie Glenda Gorgeous Hieronymus Horatio Ignatius Jojo Kiki Larry Alphabetical Moe Mystique Nattie Opal Pris Sydney Zeke
  71. 71. Continuum
  72. 72. Continuum
  73. 73. Continuum
  74. 74. iStockPhoto.com
  75. 75. Error Handling
  76. 76. Error Handling Action Attention Perception Decision Knowledge
  77. 77. Action Slips Attention Perception Mistakes Decision Knowledge
  78. 78. • Perception problem. • Decision problem. • Knowledge problem.
  79. 79. X Help fix this! http://drupal.org/node/475596
  80. 80. Drupal Usability Sprint this weekend!
  81. 81. Errors happen.
  82. 82. Error Handling Confirmation
  83. 83. Error Handling Undo
  84. 84. Forgiveness
  85. 85. Constraint Limit actions and options.
  86. 86. Consistency Have similar parts expressed in similar ways.
  87. 87. Feedback
  88. 88. Feedback print $message needs CSS love Module: Message Effects
  89. 89. Closure We tend to perceive elements as a single recognizable pattern, rather than multiple individual elements.
  90. 90. What are the Goals of successful interactive design?
  91. 91. Safe exploration
  92. 92. Instant Gratification
  93. 93. Satisficing
  94. 94. Changes in Midstream
  95. 95. Deferred Choices
  96. 96. Incremental Construction
  97. 97. Habituation
  98. 98. Spatial Memory
  99. 99. Recommended books
  100. 100. Designing Interfaces by Jennifer Tidwell
  101. 101. Designing Interfaces Universal Principles of Design by Jennifer Tidwell by William Lidwell, Kritina Holden and Jill Butler
  102. 102. Designing Interactions by Bill Moggridge
  103. 103. Many others.
  104. 104. Kitten Merlijn Hoek Credits http://www.flickr.com/photos/merlijnhoek/2841785343/ Federico Coppola Tina Keller http://www.flickr.com/photos/silentman-it/445803333/ http://www.flickr.com/photos/earthandeden/395466458/ artolog http://www.flickr.com/photos/artolog/2473548737/ AWholeLotOfSpinky duygu http://www.flickr.com/photos/30703055@N04/2955720447/ http://www.flickr.com/photos/duygu/115528187/ Clevergrrl http://www.flickr.com/photos/clevergrrl/218312595/ eleda 1 http://www.flickr.com/photos/eleda/528165182/ Four Doxn http://www.flickr.com/photos/fourdoxn/1339194561/ Tele Chhe kris krug http://www.flickr.com/photos/telachhe/3136430416/ http://www.flickr.com/photos/kk/3637572251/ benoutram http://www.flickr.com/photos/benoutram/598735432/ Shamey Jo http://www.flickr.com/photos/ajoruss/2701593436/ pontman shutupyourface http://www.flickr.com/photos/paulesson/2353322369/ http://www.flickr.com/photos/shutupyourface/1966377180/ e3000 Editor B http://www.flickr.com/photos/e3000/3235000046/ http://www.flickr.com/photos/editor/510833913/ cwalker71 http://www.flickr.com/photos/cwalker71/2045466141/ gsx-r750 http://www.flickr.com/photos/gsx-r750/1475603952/ alasam http://www.flickr.com/photos/alasam/2463625340/ alasam http://www.flickr.com/photos/alasam/464279732/ pirateparrot http://www.flickr.com/photos/pirateparrot/333569969/
  105. 105. Thank you! Laura Scott @lauras "laura s" http://drupal.org/user/18973/contact pingv.com rarepattern.com

×