Functional
Interaction Design
Laura Scott
• President & Creative Director of pingVision
• Designing websites since 1995
• Designing DVDs since 2001
• Dr...
Computer/Programming experience

•   Watching 2001 and Star Trek

•   Punch cards in 7th grade

•   PASCAL in college

•  ...
$session !=
• Theming, CSS, (x)html, PHP
• Beauty for beauty's sake
• The be-all, end-all of design
Thoughts.
  Observations.
Things I've learned.
   (Rambling stuff.)
I want your feedback
               @lauras
     #drupalcon or #drupalconparis
               and #fid

                "la...
WTF is
"Functional" Interaction Design?
Design that serves a function.
Design that is usable.
Design that works.
Functional design serves the user
Functional
 design is easy
to understand...
...or at least easy
   to figure out
  without stress.
Sometimes
design seems to be
       a bit unusual
Herman Miller Aeron chair
• Shaped to fit the human
      body
•     Holes keep you cool
•     Lightweight: easy to
      move
•     Handle: easy to ...
Who is your
 audience?
Who is your
 audience?
 Hint: This actually looks
  good to some people.
Intuitive
Is functional design
     any less important
in software or on the web
  than it is for your chair
      or coffee maker
 ...
How much time do you
  spend on the web?
Functional design used
 to be exclusively in the
realm of product design.
http://tomgpalmer.com/2005/09/
source: Wikimedia Commons
source: Wikimedia Commons
source: Wikimedia Commons
http://www.global-b2b-network.com
http://blogs.sun.com
source: Wikimedia Commons
source: Wikimedia Commons
The "expert" interface
(that requires expertise just to do basic things)
The "expert" interface
(that requires expertise just to do basic things)
The "expert" interface
(that requires expertise just to do basic things)
The "expert" interface
(that requires expertise just to do basic things)
1981: GRID Compass
designed by Bill Moggridge
Designing Interactions
  by Bill Moggridge
The "Desktop"
         Analogues of
     what we already knew




Xerox's Tim Mott's doodled schematic for UI
from Moggrid...
Xerox PARC
Tim Mott and Larry Tessler
    (and many others)
"guided fantasies"
   to learn about user needs
source:
Wikimedia
Commons
The lesson of the
  analogue….
Applications that are
    easy to use are
designed to be familiar.
            –Jennifer Tidwell
How do I create a group?
How do I create a page?
How do I find unread replies?
How do I find unread replies?




meh!
Some basics
Clear mental model.
Reassuring feedback.
Navigability.
Consistency.
Intuitive interaction.
"When we design a computer-based
  system or device, we're designing
  not just for what it looks like but
 how it behaves...
Functional Design Concepts
Affordance
How the design itself invites you to use it.
What is this
 about?
?
    http://www.iqcontent.com/blog/2007/01/the-usability-of-garda-doors/
http://www.ihatehardware.com/?tag=push-pull
http://www.ihatehardware.com/?tag=push-pull
Legibility
Gray on Gray is not beautiful
Legibility
Gray on Gray is not beautiful
10 words:

   pear
   pearl
  prude
sandwich
 orange
  purple
 crisper
lunchbox
   seed
   pith
Perceptual limits
  Maximum number of objects in a glimpse: 3
 Maximum number of objects with attention: 7

Most people ca...
Remember those words?
10 words:

   pear
   pearl
  prude
sandwich
 orange
  purple
 crisper
lunchbox
   seed
   pith
Five "Hat Racks"
      alphabet
     chronology
      location
      category
     continuum
Category
Chronology
Location
Alice    Beauregard    Captain   Dizz    Eloise     Fifi            Frankie




Glenda Gorgeous Hieronymus Horatio Ignatius...
Continuum
Continuum
Continuum
iStockPhoto.com
Error Handling
Error Handling
     Action
    Attention
   Perception
    Decision
   Knowledge
Action
   Slips   Attention
           Perception
Mistakes   Decision
           Knowledge
• Perception problem.
• Decision problem.
• Knowledge problem.
X   Help fix this!
    http://drupal.org/node/475596
Drupal Usability Sprint
   this weekend!
Errors happen.
Error Handling

  Confirmation
Error Handling

     Undo
Forgiveness
Constraint
Limit actions and options.
Consistency
Have similar parts expressed in similar ways.
Feedback
Feedback
print $message needs CSS love

   Module: Message Effects
Closure
We tend to perceive elements as a single recognizable
 pattern, rather than multiple individual elements.
What are the Goals of
successful interactive design?
Safe exploration
Instant Gratification
Satisficing
Changes in Midstream
Deferred Choices
Incremental
Construction
Habituation
Spatial Memory
Recommended books
Designing Interfaces
    by Jennifer Tidwell
Designing Interfaces      Universal Principles of Design
    by Jennifer Tidwell       by William Lidwell, Kritina Holden
...
Designing
  Interactions
by Bill Moggridge
Many others.
Kitten                            Merlijn Hoek

Credits                           http://www.flickr.com/photos/merlijnhoek/...
Thank you!
           Laura Scott
              @lauras
                 "laura s"
  http://drupal.org/user/18973/contact
...
Functional Interaction Design
Functional Interaction Design
Functional Interaction Design
Functional Interaction Design
Functional Interaction Design
Functional Interaction Design
Functional Interaction Design
Functional Interaction Design
Functional Interaction Design
Functional Interaction Design
Functional Interaction Design
Functional Interaction Design
Functional Interaction Design
Functional Interaction Design
Functional Interaction Design
Functional Interaction Design
Functional Interaction Design
Functional Interaction Design
Functional Interaction Design
Functional Interaction Design
Functional Interaction Design
Functional Interaction Design
Functional Interaction Design
Functional Interaction Design
Functional Interaction Design
Functional Interaction Design
Functional Interaction Design
Functional Interaction Design
Functional Interaction Design
Functional Interaction Design
Functional Interaction Design
Functional Interaction Design
Functional Interaction Design
Upcoming SlideShare
Loading in...5
×

Functional Interaction Design

4,377

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
4,377
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
0
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide

Transcript of "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

×