Improving Interface Design

Presentation from a half-day workshop on interface design that explored the influences of physical products and every aspect of design from shape, color, typography all the way through to usability and accessibility as being defining aspects of interface design.

Transcript

1. Improving
   Interface
   Design
   Web Visions
   Portland, OR | May 3rd, 2007
   

   View Slide

2. Jakob Nielsen
   A field study identified twenty-two
   ways that automated hospital
   systems can result in the wrong
   medication being dispensed to
   patients. Most of these flaws are
   classic usability problems that have
   been understood for decades.
   “
   ”
   http://www.useit.com/alertbox/20050411.html
   

   View Slide

3. Roger Martin
   A reliable process--which tends to
   attract folks in finance, engineering,
   and operations--produces a
   predictable result time and again.
   This is business as algorithm:
   quantifiable, measurable, and
   provable.
   “
   ”
   http://www.fastcompany.com/magazine/109/open_design-tough-love.html
   

   View Slide

4. Roger Martin
   A valid process, on the other hand,
   flows from designers’ deep
   understanding of both user and
   context, and leads them to ideas they
   believe in but can’t prove. They work
   in a world of variables: the
   unpredictable, the visual,
   the experimental.
   “
   ”
   http://www.fastcompany.com/magazine/109/open_design-tough-love.html
   

   View Slide

5. Roger Martin
   The challenge is to manage the
   chronic push and pull between a
   value system premised on what’s
   valid and one based on
   what’s reliable.
   “
   ”
   http://www.fastcompany.com/magazine/109/open_design-tough-love.html
   

   View Slide

6. User Experience
   Usability
   Design
   (Visual & UI)
   Project Mgmt.
   AJAX
   (JavaScript)
   Back-End
   Information
   Architecture
   Account
   Mgmt.
   Flash
   Programming
   APIs
   Packaged
   Solutions
   Interaction
   Design
   Content User
   Research
   Design
   Deliverables
   Business
   Intelligence
   Problem
   Framing
   Requirements
   Gathering /
   Research
   DOM
   Scripting
   Accessibility
   CSS
   Front-End
   Development
   User
   Agents
   Markup
   e "Universe" of User Experience
   Designing the
   Experience
   Managing the
   Project
   Defining the
   Problem
   Architecting the
   Technology
   Delivering the
   Experience
   Prototyping
   Creative
   inking
   

   View Slide

7. We need
   to be
   somewhere
   in here.
   Logic Gut Feel
   Lots of Bad Ideas Out Here
   We feel safer here.
   

   View Slide

8. Web Visions Portland, OR | May 3rd, 2007
   Understand Design
   Design is NOT about decoration. It’s about communication and problem solving.
   8
   1
   

   View Slide

9. Steve Jobs
   Design is not just what it looks like
   and feels like. Design is how it works.
   “
   ”
   

   View Slide

10. View Slide

11. http://nymag.com/nymetro/health/features/11700/
    

    View Slide

12. View Slide

13. http://nymag.com/nymetro/health/features/11700/
    

    View Slide

14. Jeff Veen
    I’ve been amazed at how often those
    outside the discipline of design
    assume that what designers do is
    decoration. Good design is
    problem solving.
    “
    ”
    

    View Slide

15. View Slide

16. Bob Baxley
    Like all forms of design, visual
    design is about problem solving,
    not about personal preference or
    unsupported opinion.
    “
    ”
    

    View Slide

17. http://worrydream.com/MagicInk/#p121
    

    View Slide

18. http://worrydream.com/MagicInk/#p126
    

    View Slide

19. Components of Usability (http://www.useit.com/alertbox/20030825.html))
    Learnability. How easy is it to accomplish basic tasks on the first
    encounter of an interface?
    Efficiency. Once users are familiar with the interface, how quickly
    can they perform tasks?
    Memorability. When users return after a period of not using the
    interface, how easily can they reestablish proficiency?
    Errors. How many errors do users make, how severe are the errors,
    and how easily can they recover?
    Satisfaction. How pleasant is it to use the interface?
    

    View Slide

20. Smallest Effective Difference Edward Tufte
    Make all visual distinctions as
    subtle as possible, but still clear
    and effective.
    

    View Slide

21. http://www.37signals.com/svn/posts/137-design-decisions-basecamp-help
    

    View Slide

22. Charles Eames
    The details are not the details.
    They make the design.
    “
    ”
    

    View Slide

23. http://gmail.com
    

    View Slide

24. http://threadless.com
    

    View Slide

25. http://writeboard.com
    

    View Slide

26. http://psychology.wichita.edu/surl/usbilitynews/62/whitespace.htm
    

    View Slide

27. http://nytimes.com
    

    View Slide

28. Web Visions Portland, OR | May 3rd, 2007
    External Inspiration
    History, art, other mediums, other professions.
    Find beauty in everything.
    28
    

    View Slide

29. View Slide

30. View Slide

31. http://www.edwardtufte.com/tufte/fineart
    

    View Slide

32. http://www.edwardtufte.com/tufte/posters
    

    View Slide

33. http://www.edwardtufte.com
    

    View Slide

34. http://webtypography.net
    

    View Slide

35. View Slide

36. Don Norman
    The field of usability design takes root in the
    cognitive sciences -- a combination of
    psychology, computer science, human
    factors, and engineering. These are all
    analytical fields. The discipline prides itself
    on its scientific basis and experimental
    rigor. The hidden danger is to neglect areas
    that are not easily addressed in the
    framework of science and engineering.
    http://www.jnd.org/dn.mss/emotion_design.html
    “
    ”
    

    View Slide

37. Web Visions Portland, OR | May 3rd, 2007
    Cultivate the Culture
    Lipstick on a pig doesn’t cut it.
    37
    2
    

    View Slide

38. Conway’s Law
    It is a consequence of the fact that two
    software modules A and B cannot interface
    correctly with each other unless the design
    and implementer of A communicates with
    the designer and implementer of B. Thus the
    interface structure of a software system
    necessarily will show a congruence with the
    social structure of the organization that
    produced it.
    

    View Slide

39. View Slide

40. Benjamin Franklin
    The definition of insanity is doing the
    same thing over and over again and
    expecting different results.
    “
    ”
    

    View Slide

41. http://positivesharing.com/happyhouris9to5/bookhtml/happyhouris9to55.html
    

    View Slide

42. Khoi Vinh
    Design groups really need a strong,
    diplomatic leader who can help
    engender a climate for good design.
    “
    ”
    

    View Slide

43. Web Visions Portland, OR | May 3rd, 2007
    Think Critically
    If the question is wrong, the answer is irrelevant.
    43
    3
    

    View Slide

44. Bertrand Russell
    The greatest challenge to any thinker
    is stating the problem in a way that
    will allow a solution.
    “
    ”
    

    View Slide

45. http://www.infotoday.com/online/nov05/morville.shtml
    +
    

    View Slide

46. Courtesy of Cameron Moll
    

    View Slide

47. Courtesy of Cameron Moll
    

    View Slide

48. Jack Welch
    Too Often we measure everything
    and understand nothing.
    “
    ”
    

    View Slide

49. View Slide

50. Benjamin Disraeli
    There are three kinds of lies:
    lies, damned lies, and statistics.
    Popularized in the U.S. by Mark Twain
    “
    ”
    

    View Slide

51. Web Visions Portland, OR | May 3rd, 2007
    Ignore Users
    We have to look beyond what people say and understand their real needs.
    51
    4
    

    View Slide

52. Jakob Nielsen
    To design an easy-to-use interface,
    pay attention to what users do, not
    what they say. Self-reported claims
    are unreliable, as are user
    speculations about future behavior.
    “
    ”
    http://www.useit.com/alertbox/20010805.html
    

    View Slide

53. View Slide

54. View Slide

55. Sidney Deane
    Look man. You can listen to Jimi, but
    you can’t hear him. There’s a
    difference man. Just because you’re
    listening to him doesn’t mean you’re
    hearing him.
    “
    ”
    White Men Can’t Jump, 1992
    

    View Slide

56. http://www.cree.com/press/press_detail.asp?i=1175179209372
    

    View Slide

57. Steve Jobs
    It’s really hard to design products by
    focus groups. A lot of times, people
    don’t know what they want until you
    show it to them.
    “
    ”
    

    View Slide

58. Web Visions Portland, OR | May 3rd, 2007
    Document & Code Better
    Current state of traditional and expected documentation is atrocious.
    58
    5
    

    View Slide

59. View Slide

60. http://dilbert.com/comics/dilbert/archive/images/dilbert2007458210412.gif
    

    View Slide

61. 1. User enters the building
    1.1 User opens door. (See Misc-01)
    1.2 User walks through door.
    1.3 User closes door.
    2. User leaves the building.
    2.1 User opens door.
    2.2 User walks through door.
    2.3 User closes door.
    Misc-01
    Outside doors should open inwards
    and the knob should be placed
    towards the outer edge of the door
    about waist high. The doors should
    be 7’2” tall and 3’ wide.
    

    View Slide

62. View Slide

63. View Slide

64. Getting Real
    No matter how much you plan you’re
    likely to get half wrong anyway. So
    don’t do the ‘paralysis through
    analysis’ thing. That only slows
    progress and saps morale.
    Getting Real
    http://gettingreal.37signals.com/ch06_Done.php
    “
    ”
    

    View Slide

65. View Slide

66. Getting Real
    The same way you should regularly
    put aside some of your income for
    taxes, regularly put aside some time
    to pay off your code and design debt.
    If you don’t, you’ll just be paying
    interest (fixing hacks) instead of
    paying down the principal (and
    moving forward).
    “
    ”
    http://gettingreal.37signals.com/ch10_Manage_Debt.php
    

    View Slide

67. View Slide

68. View Slide

69. <br/>document.write("<a href=\"javascript:salesWindow();\" onclick=<br/>\"resetTimer()\" onFocus='javascript:window.status=\"Get a higher<br/>return plus penalty-free withdrawals. Learn more &gt;&gt; Selecting<br/>this link will open a new browser window.\"' onBlur=<br/>\"javascript:window.status='';\">");<br/>document.write(" <img src=\"/cmsContent/eas-docs/images/ad_images/<br/>dabg_updaterfcd_205x100.jpg\" width=\"100%\" alt=\"Get a higher return<br/>plus penalty-free withdrawals. Learn more &gt;&gt; Selecting this link<br/>will open a new browser window.\" border=\"0\" >"); //<br/>Rajarshi end<br/>document.write("<\/a>");<br/>
    
    
    
    
    

    View Slide

70. 
    
    
    

    View Slide

71. 
    Get a higher return plus
    penalty-free
    withdrawals.Learn more
    strong>
    
    

    View Slide

72. 
    Get a higher return plus
    penalty-free withdrawals.Learn
    more
    
    

    View Slide

73. Web Visions Portland, OR | May 3rd, 2007
    Avoid Specialization
    Use specialists for special things.
    73
    6
    

    View Slide

74. Getting Real
    Too many companies separate
    design, development, copywriting,
    support, and marketing into different
    silos. While specialization has its
    advantages, it also creates a
    situation where staffers see just their
    own little world instead of the
    entire context...
    http://gettingreal.37signals.com/ch07_Unity.php
    “
    ”
    

    View Slide

75. A
    Bridge
    River
    B
    

    View Slide

76. Bridge
    River
    A
    B
    C
    

    View Slide

77. View Slide

78. http://www.joelonsoftware.com/items/2006/11/21.html
    

    View Slide

79. Peter Morville
    The design of good houses requires
    an understanding of both the
    construction materials and the
    behavior of real humans.
    “
    ”
    

    View Slide

80. http://tinyurl.com/2d2t33
    

    View Slide

81. Christopher Alexander
    So it is inevitable that as the work of
    building passes into the hands of
    specialists, the patterns which they
    use become more and more banal,
    more willful, and less anchored
    in reality.
    “
    ”
    The Timeless Way of Building
    

    View Slide

82. http://headrush.typepad.com/creating_passionate_users/2005/09/conversational_.html
    

    View Slide

83. View Slide

84. View Slide

85. Web Visions Portland, OR | May 3rd, 2007
    Cut Features
    (and ignore the darned competition.)
    85
    7
    

    View Slide

86. View Slide

87. View Slide

88. Paul Graham
    A few years ago I read an article in
    which a car magazine modified the
    “sports” model of some production
    car to get the fastest possible
    standing quarter mile. You know
    how they did it? They cut off all the
    crap the manufacturer had bolted
    onto the car to make it look fast.
    “
    ”
    Foreword from Founders at Work
    

    View Slide

89. View Slide

90. Steve Jobs
    [Innovation] comes from saying no
    to 1,000 things to make sure we don’t
    get on the wrong track or try to do
    too much. We’re always thinking
    about new markets we could enter,
    but it’s only by saying no that you
    can concentrate on the things that
    are really important.
    “
    ”
    

    View Slide

91. Kathy Sierra
    Give users what they actually want,
    not what they say they want. And
    whatever you do, don’t give them
    new features just because your
    competitors have them!
    “
    ”
    

    View Slide

92. http://en.wikipedia.org/wiki/New_Coke
    

    View Slide

93. View Slide

94. Getting Real
    We kept the tool clean and
    uncluttered by letting people get
    creative. People figured out how to
    solve issues on their own.
    “
    ”
    http://gettingreal.37signals.com/ch05_Human_Solutions.php
    

    View Slide

95. View Slide

96. View Slide

97. View Slide

98. Hans Hofmann
    The ability to simplify means to
    eliminate the unnecessary so that the
    necessary may speak.
    “
    ”
    

    View Slide

99. View Slide

100. View Slide

101. View Slide

102. Jakob Nielsen (http://www.useit.com/alertbox/progressive-disclosure.html)
     Progressive disclosure defers
     advanced or rarely used features to a
     secondary screen, making
     applications easier to learn and
     less error-prone.
     “
     ”
     

     View Slide

103. View Slide

104. http://www.basecamphq.com
     

     View Slide

105. View Slide

106. View Slide

107. Occam’s razor
     Entities should not be multiplied
     beyond necessity.
     

     View Slide

108. http://threadless.com
     

     View Slide

109. Charles Mingus
     Making the simple complicated is
     commonplace; making the
     complicated simple, awesomely
     simple, that’s creativity.
     “
     ”
     

     View Slide

110. View Slide

111. View Slide

112. View Slide

113. http://writeboard.com
     

     View Slide

114. Web Visions Portland, OR | May 3rd, 2007
     Deliver the Basics
     Enough with the AJAX and superfluous visual effects.
     114
     8
     

     View Slide

115. Jakob Nielsen
     Clear content, simple navigation,
     and answers to customer questions
     have the biggest impact on business
     value. Advanced technology matters
     much less.
     “
     ”
     http://www.useit.com/alertbox/design_priorities.html
     

     View Slide

116. View Slide

117. Joe Dolson
     Validation, by itself, should never be
     considered as a primary signifier
     concerning the quality or
     accessibility of a website.
     http://www.joedolson.com/articles/2007/01/beyond-validation/
     “
     ”
     

     View Slide

118. Jeremy Keith
     From now on, instead of talking
     about making a site accessible,
     I’m going to talk about keeping a
     site accessible.
     http://adactio.com/journal/1224
     “
     ”
     

     View Slide

119. Getting Real
     Copywriting is interface design.
     “ ”
     http://gettingreal.37signals.com/ch9_Copywriting_is_Interface_Design.php
     

     View Slide

120. http://blinksale.com
     

     View Slide

121. If it needs instructions, there’s room
     for improvement.
     “
     ”
     

     View Slide

122. http://www.cameronmoll.com/archives/001266.html
     

     View Slide

123. http://blinksale.com
     

     View Slide

124. Principle of Least Astonishment
     When two elements of an interface
     conflict or are ambiguous, the
     behavior should be that which will
     least surprise the human user or
     programmer at the time the
     conflict arises, because the least
     surprising behavior will usually be
     the correct one.
     

     View Slide

125. http://virb.com
     

     View Slide

126. Iam Malcom
     Yeah, but your scientists were so
     preoccupied with whether they
     could, they didn’t stop to think if
     they should.
     “
     ”
     Jurassic Park, 1993
     

     View Slide

127. http://www.tailshq.com
     

     View Slide

128. Web Visions Portland, OR | May 3rd, 2007
     Balance Context & Consistency
     Balance the need for consistency with the need for context.
     128
     9
     

     View Slide

129. Jakob’s Law of the Internet User Experience Jakob Nielsen
     Users spend most of their time on
     other sites.
     

     View Slide

130. http://developer.yahoo.com/patterns/
     

     View Slide

131. Ethnography http://en.wikipedia.org/wiki/Ethnography
     A system’s properties cannot
     necessarily be accurately understood
     independent of each other.
     

     View Slide

132. http://www.basecamphq.com
     

     View Slide

133. Larry Marine
     Things that look different should act
     different. Thinks that look the same
     should act the same.
     “
     ”
     

     View Slide

134. 134
     Context
     Sensitive
     Pre-Order Purchase
     

     View Slide

135. http://threadless.com
     

     View Slide

136. https://www.google.com/analytics/
     

     View Slide

137. http://measuremap.com
     

     View Slide

138. View Slide

139. View Slide

140. http://simplelog.net
     

     View Slide

141. http://simplelog.net
     

     View Slide

142. http://www.boxesandarrows.com/view/ambient_signifi
     

     View Slide

143. http://amazon.com
     

     View Slide

144. http://highrisehq.com
     

     View Slide

145. http://highrisehq.com
     

     View Slide

146. View Slide

147. View Slide

148. View Slide

149. View Slide

150. View Slide

151. View Slide

152. View Slide

153. http://worrydream.com/MagicInk/#p98
     

     View Slide

154. http://worrydream.com/MagicInk/#p98
     

     View Slide

155. Web Visions Portland, OR | May 3rd, 2007
     Fail Fast. Iterate. Explore.
     This isn’t construction or rocket science.
     155
     10
     

     View Slide

156. H. L. Mencken
     For every complex problem there
     is a solution that is simple, neat
     and wrong.
     “
     ”
     

     View Slide

157. http://www.37signals.com/svn/archives2/the_long_road_to_simple_creating_debating_and_iterating_add_an_event.php
     

     View Slide

158. Lead Designer at Netflix
     We make a lot of this stuff up as we go
     along. I’m serious. We don’t assume
     anything works and we don’t like to make
     predictions without real-world tests.
     Predictions color our thinking. So, we
     continually make this up as we go along,
     keeping what works and throwing away
     what doesn’t. We’ve found that we about
     90% of it doesn’t work.
     http://www.uie.com/articles/fast_iterations/
     “
     ”
     

     View Slide

159. http://en.wikipedia.org/wiki/Punch_cards
     

     View Slide

160. Winston Churchill
     However beautiful the strategy,
     you should occasionally look at
     the results.
     “
     ”
     

     View Slide

161. http://en.wikipedia.org/wiki/Waterfall_process
     

     View Slide

162. View Slide

163. Thomas Edison
     Genius is 1% inspiration and
     99% perspiration.
     “
     ”
     

     View Slide

164. http://www.lifeclever.com/2007/01/23/what-50-pounds-of-clay-can-teach-you-about-design/
     

     View Slide

165. View Slide

166. View Slide

167. View Slide

168. http://worrydream.com/MagicInk/#p228
     

     View Slide

169. http://worrydream.com/MagicInk/#p228
     

     View Slide

170. Marisa Mayer Vice President for Search Products and User Experience at Google
     Since only 1 in every 5 to 10 ideas
     work out, the strategy of
     constraining how quickly ideas must
     be proven allows us to try out more
     ideas faster, increasing our odds
     of success.
     http://www.uie.com/articles/fast_iterations/
     “
     ”
     

     View Slide

171. http://gettingreal.37signals.com
     

     View Slide

172. In Summary...
     1. Understand Design
     2. Cultivate the Culture
     3. Think Critically
     4. Ignore Users
     5. Document & Code Better
     6. Avoid Specialization
     7. Cut Features
     8. Deliver the Basics
     9. Balance Context & Consistency
     10. Fail Fast. Iterate. Explore.
     

     View Slide

173. Thank You
     Garrett Dimon
     http://garrettdimon.com/pages/improving_interface_design
     

     View Slide