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.

1. Functional
Interaction Design

2. Laura Scott
• President & Creative Director of pingVision
• Designing websites since 1995
• Designing DVDs since 2001
• Drupal since 2004
• BA and MFA FWIW

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. $session !=
• Theming, CSS, (x)html, PHP
• Beauty for beauty's sake
• The be-all, end-all of design

5. Thoughts.
Observations.
Things I've learned.
(Rambling stuff.)

6. I want your feedback
@lauras
#drupalcon or #drupalconparis
and #fid
"laura s"
http://drupal.org/user/18973/contact

7. WTF is
"Functional" Interaction Design?

8. Design that serves a function.

9. Design that is usable.

10. Design that works.

11. Functional design serves the user

12. Functional
design is easy
to understand...

13. ...or at least easy
to figure out
without stress.

14. Sometimes
design seems to be
a bit unusual

16. Herman Miller Aeron chair

17. • Shaped to fit the human
body
• Holes keep you cool
• Lightweight: easy to
move
• Handle: easy to move
• Stackable
• Appealing color
= beautiful

26. Who is your
audience?

27. Who is your
audience?
Hint: This actually looks
good to some people.

28. Intuitive

29. Is functional design
any less important
in software or on the web
than it is for your chair
or coffee maker
or favorite pen?

30. How much time do you
spend on the web?

31. Functional design used
to be exclusively in the
realm of product design.

32. http://tomgpalmer.com/2005/09/

33. source: Wikimedia Commons

34. source: Wikimedia Commons

35. source: Wikimedia Commons

36. http://www.global-b2b-network.com

37. http://blogs.sun.com

38. source: Wikimedia Commons

39. source: Wikimedia Commons

40. The "expert" interface
(that requires expertise just to do basic things)

41. The "expert" interface
(that requires expertise just to do basic things)

42. The "expert" interface
(that requires expertise just to do basic things)

43. The "expert" interface
(that requires expertise just to do basic things)

44. 1981: GRID Compass
designed by Bill Moggridge

45. Designing Interactions
by Bill Moggridge

46. The "Desktop"
Analogues of
what we already knew
Xerox's Tim Mott's doodled schematic for UI
from Moggridge: "Designing Interactions"

47. Xerox PARC
Tim Mott and Larry Tessler
(and many others)

48. "guided fantasies"
to learn about user needs

51. source:
Wikimedia
Commons

52. The lesson of the
analogue….

53. Applications that are
easy to use are
designed to be familiar.
–Jennifer Tidwell

55. How do I create a group?

56. How do I create a page?

57. How do I find unread replies?

58. How do I find unread replies?
meh!

59. Some basics

60. Clear mental model.

61. Reassuring feedback.

62. Navigability.

63. Consistency.

64. Intuitive interaction.

65. "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

66. Functional Design Concepts

67. Affordance
How the design itself invites you to use it.

68. What is this
about?

69. ?
http://www.iqcontent.com/blog/2007/01/the-usability-of-garda-doors/

70. http://www.ihatehardware.com/?tag=push-pull

71. http://www.ihatehardware.com/?tag=push-pull

72. Legibility
Gray on Gray is not beautiful

73. Legibility
Gray on Gray is not beautiful

74. 10 words:
pear
pearl
prude
sandwich
orange
purple
crisper
lunchbox
seed
pith

75. 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

76. Remember those words?

77. 10 words:
pear
pearl
prude
sandwich
orange
purple
crisper
lunchbox
seed
pith

78. Five "Hat Racks"
alphabet
chronology
location
category
continuum

80. Category

81. Chronology

82. Location

83. Alice Beauregard Captain Dizz Eloise Fifi Frankie
Glenda Gorgeous Hieronymus Horatio Ignatius Jojo Kiki Larry
Alphabetical
Moe Mystique Nattie Opal Pris Sydney Zeke

84. Continuum

85. Continuum

86. Continuum

92. iStockPhoto.com

93. Error Handling

94. Error Handling
Action
Attention
Perception
Decision
Knowledge

95. Action
Slips Attention
Perception
Mistakes Decision
Knowledge

97. • Perception problem.
• Decision problem.
• Knowledge problem.

98. X Help fix this!
http://drupal.org/node/475596

99. Drupal Usability Sprint
this weekend!

100. Errors happen.

101. Error Handling
Confirmation

102. Error Handling
Undo

110. Forgiveness

113. Constraint
Limit actions and options.

115. Consistency
Have similar parts expressed in similar ways.

118. Feedback

119. Feedback
print $message needs CSS love
Module: Message Effects

120. Closure
We tend to perceive elements as a single recognizable
pattern, rather than multiple individual elements.

123. What are the Goals of
successful interactive design?

124. Safe exploration

125. Instant Gratification

126. Satisficing

127. Changes in Midstream

128. Deferred Choices

129. Incremental
Construction

130. Habituation

131. Spatial Memory

132. Recommended books

133. Designing Interfaces
by Jennifer Tidwell

134. Designing Interfaces Universal Principles of Design
by Jennifer Tidwell by William Lidwell, Kritina Holden
and Jill Butler

135. Designing
Interactions
by Bill Moggridge

136. Many others.

137. 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/

138. Thank you!
Laura Scott
@lauras
"laura s"
http://drupal.org/user/18973/contact
pingv.com
rarepattern.com