Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Improving Interface Design

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.

Garrett Dimon
PRO

May 03, 2007
Tweet

More Decks by Garrett Dimon

Other Decks in 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