Slide 1: Improving Interface Design Web Visions Portland, OR | May 3rd, 2007 1
Slide 2: “ 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. Jakob Nielsen http://www.useit.com/alertbox/20050411.html ” 2
Slide 3: “ 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. Roger Martin ” http://www.fastcompany.com/magazine/109/open_design-tough-love.html 3
Slide 4: “ 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. Roger Martin http://www.fastcompany.com/magazine/109/open_design-tough-love.html ” 4
Slide 5: “ 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. ” Roger Martin http://www.fastcompany.com/magazine/109/open_design-tough-love.html 5
Slide 6: e "Universe" of User Experience Design Deliverables Usability Interaction Design Packaged Solutions APIs Architecting the Technology Prototyping Creative inking Design Back-End Information Architecture Flash Programming (Visual & UI) Designing the Experience AJAX (JavaScript) Content User Research User Experience Front-End Development DOM Scripting CSS Accessibility Problem Framing Delivering the Experience Business Intelligence Markup User Agents Defining the Problem Requirements Gathering / Research Project Mgmt. Account Mgmt. Managing the Project 6
Slide 7: We feel safer here. Logic We need to be somewhere in here. Gut Feel Lots of Bad Ideas Out Here 7
Slide 8: 1 Understand Design Design is NOT about decoration. It’s about communication and problem solving. Web Visions Portland, OR | May 3rd, 2007 8 8
Slide 9: “ Design is not just what it looks like and feels like. Design is how it works. ” 9 Steve Jobs
Slide 10: 10
Slide 11: http://nymag.com/nymetro/health/features/11700/ 11
Slide 12: 12
Slide 13: http://nymag.com/nymetro/health/features/11700/ 13
Slide 14: “ 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. ” Jeff Veen 14
Slide 15: 15
Slide 16: “ Like all forms of design, visual design is about problem solving, not about personal preference or unsupported opinion. ” Bob Baxley 16
Slide 17: http://worrydream.com/MagicInk/#p121 17
Slide 18: http://worrydream.com/MagicInk/#p126 18
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? 19
Slide 20: Smallest Effective Difference Edward Tufte Make all visual distinctions as subtle as possible, but still clear and effective. 20
Slide 21: http://www.37signals.com/svn/posts/137-design-decisions-basecamp-help 21
Slide 22: “ The details are not the details. They make the design. ” Charles Eames 22
Slide 23: http://gmail.com 23
Slide 24: http://threadless.com 24
Slide 25: http://writeboard.com 25
Slide 26: http://psychology.wichita.edu/surl/usbilitynews/62/whitespace.htm 26
Slide 27: http://nytimes.com 27
Slide 28: External Inspiration History, art, other mediums, other professions. Find beauty in everything. Web Visions Portland, OR | May 3rd, 2007 28 28
Slide 29: 29
Slide 30: 30
Slide 31: http://www.edwardtufte.com/tufte/fineart 31
Slide 32: http://www.edwardtufte.com/tufte/posters 32
Slide 33: http://www.edwardtufte.com 33
Slide 34: http://webtypography.net 34
Slide 35: 35
Slide 36: “ 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. Don Norman http://www.jnd.org/dn.mss/emotion_design.html ” 36
Slide 37: 2 Cultivate the Culture Lipstick on a pig doesn’t cut it. Web Visions Portland, OR | May 3rd, 2007 37 37
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. 38
Slide 39: 39
Slide 40: “ The definition of insanity is doing the same thing over and over again and expecting different results. ” Benjamin Franklin 40
Slide 41: http://positivesharing.com/happyhouris9to5/bookhtml/happyhouris9to55.html 41
Slide 42: “ Design groups really need a strong, diplomatic leader who can help engender a climate for good design. ” 42 Khoi Vinh
Slide 43: 3 Think Critically If the question is wrong, the answer is irrelevant. Web Visions Portland, OR | May 3rd, 2007 43 43
Slide 44: “ The greatest challenge to any thinker is stating the problem in a way that will allow a solution. ” Bertrand Russell 44
Slide 45: + http://www.infotoday.com/online/nov05/morville.shtml 45
Slide 46: Courtesy of Cameron Moll 46
Slide 47: Courtesy of Cameron Moll 47
Slide 48: Courtesy of Cameron Moll 47
Slide 49: “ Too Often we measure everything and understand nothing. ” Jack Welch 48
Slide 50: 49
Slide 51: “ There are three kinds of lies: lies, damned lies, and statistics. ” 50 Benjamin Disraeli Popularized in the U.S. by Mark Twain
Slide 52: 4 Ignore Users We have to look beyond what people say and understand their real needs. Web Visions Portland, OR | May 3rd, 2007 51 51
Slide 53: “ 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. ” 52 Jakob Nielsen http://www.useit.com/alertbox/20010805.html
Slide 54: 53
Slide 55: 54
Slide 56: “ 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. ” Sidney Deane White Men Can’t Jump, 1992 55
Slide 57: http://www.cree.com/press/press_detail.asp?i=1175179209372 56
Slide 58: “ 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. ” Steve Jobs 57
Slide 59: 5 Document & Code Better Current state of traditional and expected documentation is atrocious. Web Visions Portland, OR | May 3rd, 2007 58 58
Slide 60: 59
Slide 61: http://dilbert.com/comics/dilbert/archive/images/dilbert2007458210412.gif 60
Slide 62: 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. 61
Slide 63: 62
Slide 64: 63
Slide 65: “ 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 64
Slide 66: 65
Slide 67: “ 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). Getting Real http://gettingreal.37signals.com/ch10_Manage_Debt.php ” 66
Slide 68: 67
Slide 69: 68
Slide 70: <script type="text/javascript" language="javascript"> document.write("<a href=\"javascript:salesWindow();\" onclick= \"resetTimer()\" onFocus='javascript:window.status=\"Get a higher return plus penalty-free withdrawals. Learn more &gt;&gt; Selecting this link will open a new browser window.\"' onBlur= \"javascript:window.status='';\">"); document.write(" <img src=\"/cmsContent/eas-docs/images/ad_images/ dabg_updaterfcd_205x100.jpg\" width=\"100%\" alt=\"Get a higher return plus penalty-free withdrawals. Learn more &gt;&gt; Selecting this link will open a new browser window.\" border=\"0\" >"); // Rajarshi end document.write("<\/a>"); </script> <noscript> <a href="/cgi-bin/ias/ 4ag509_vulvnBACRDaFJA7uU_EQT8BNiAsf78Qnp237322/9/bofa/ibd/IAS/ presentation/SetBusinessEventControl" target="_blank" title="Get a higher return plus penalty-free withdrawals. Learn more &gt;&gt; Selecting this link will open a new browser window."> <img src="/cmsContent/eas-docs/images/ad_images/ dabg_updaterfcd_205x100.jpg" width="100%" alt="Get a higher return plus penalty-free withdrawals. Learn more &gt;&gt; Selecting this link will open a new browser window." border="0" ></a> </noscript> 69
Slide 71: <a href="..."> <img src="..." alt="Get a higher return plus penalty-free withdrawals. Learn More."> </a> 70
Slide 72: <a id="promotion" href= "..."> Get a higher return plus <strong>penalty-free withdrawals.<span>Learn more</span></ strong> </a> 71
Slide 73: <a id="promotion" href="..."> Get a higher return plus <strong> penalty-free withdrawals.<span>Learn more</span></strong> </a> 72
Slide 74: 6 Avoid Specialization Use specialists for special things. Web Visions Portland, OR | May 3rd, 2007 73 73
Slide 75: “ 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... Getting Real http://gettingreal.37signals.com/ch07_Unity.php ” 74
Slide 76: A R er iv B ri B ge d 75
Slide 77: A R ive r B B g id r e C 76
Slide 78: 77
Slide 79: http://www.joelonsoftware.com/items/2006/11/21.html 78
Slide 80: “ The design of good houses requires an understanding of both the construction materials and the behavior of real humans. ” Peter Morville 79
Slide 81: http://tinyurl.com/2d2t33 80
Slide 82: “ 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. Christopher Alexander The Timeless Way of Building ” 81
Slide 83: http://headrush.typepad.com/creating_passionate_users/2005/09/conversational_.html 82
Slide 84: 83
Slide 85: 84
Slide 86: 7 Cut Features (and ignore the darned competition.) Web Visions Portland, OR | May 3rd, 2007 85 85
Slide 87: 86
Slide 88: 87
Slide 89: “ 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. Paul Graham Foreword from Founders at Work ” 88
Slide 90: 89
Slide 91: “ [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. Steve Jobs ” 90
Slide 92: “ 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! ” Kathy Sierra 91
Slide 93: http://en.wikipedia.org/wiki/New_Coke 92
Slide 94: 93
Slide 95: “ We kept the tool clean and uncluttered by letting people get creative. People figured out how to solve issues on their own. ” Getting Real http://gettingreal.37signals.com/ch05_Human_Solutions.php 94
Slide 96: 95
Slide 97: 96
Slide 98: 97
Slide 99: “ The ability to simplify means to eliminate the unnecessary so that the necessary may speak. ” Hans Hofmann 98
Slide 100: 99
Slide 101: 100
Slide 102: 101
Slide 103: “ Progressive disclosure defers advanced or rarely used features to a secondary screen, making applications easier to learn and less error-prone. ” Jakob Nielsen (http://www.useit.com/alertbox/progressive-disclosure.html) 102
Slide 104: 103
Slide 105: http://www.basecamphq.com 104
Slide 106: 105
Slide 107: 106
Slide 108: Occam’s razor Entities should not be multiplied beyond necessity. 107
Slide 109: http://threadless.com 108
Slide 110: “ Making the simple complicated is commonplace; making the complicated simple, awesomely simple, that’s creativity. ” Charles Mingus 109
Slide 111: 110
Slide 112: 111
Slide 113: 112
Slide 114: http://writeboard.com 113
Slide 115: 8 Deliver the Basics Enough with the AJAX and superfluous visual effects. Web Visions Portland, OR | May 3rd, 2007 114 114
Slide 116: “ Clear content, simple navigation, and answers to customer questions have the biggest impact on business value. Advanced technology matters much less. ” Jakob Nielsen http://www.useit.com/alertbox/design_priorities.html 115
Slide 117: 116
Slide 118: “ Validation, by itself, should never be considered as a primary signifier concerning the quality or accessibility of a website. ” Joe Dolson http://www.joedolson.com/articles/2007/01/beyond-validation/ 117
Slide 119: “ From now on, instead of talking about making a site accessible, I’m going to talk about keeping a site accessible. ” Jeremy Keith http://adactio.com/journal/1224 118
Slide 120: “ Copywriting is interface design. ” 119 Getting Real http://gettingreal.37signals.com/ch9_Copywriting_is_Interface_Design.php
Slide 121: http://blinksale.com 120
Slide 122: “ If it needs instructions, there’s room for improvement. ” 121
Slide 123: http://www.cameronmoll.com/archives/001266.html 122
Slide 124: http://blinksale.com 123
Slide 125: 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. 124
Slide 126: http://virb.com 125
Slide 127: “ Yeah, but your scientists were so preoccupied with whether they could, they didn’t stop to think if they should. ” Iam Malcom Jurassic Park, 1993 126
Slide 128: http://www.tailshq.com 127
Slide 129: 9 Balance Context & Consistency Balance the need for consistency with the need for context. Web Visions Portland, OR | May 3rd, 2007 128 128
Slide 130: Jakob’s Law of the Internet User Experience Jakob Nielsen Users spend most of their time on other sites. 129
Slide 131: http://developer.yahoo.com/patterns/ 130
Slide 132: Ethnography http://en.wikipedia.org/wiki/Ethnography A system’s properties cannot necessarily be accurately understood independent of each other. 131
Slide 133: http://www.basecamphq.com 132
Slide 134: “ Things that look different should act different. Thinks that look the same should act the same. ” Larry Marine 133
Slide 135: 134 Pre-Order Purchase Context Sensitive 134
Slide 136: http://threadless.com 135
Slide 137: https://www.google.com/analytics/ 136
Slide 138: http://measuremap.com 137
Slide 139: 138
Slide 140: 139
Slide 141: http://simplelog.net 140
Slide 142: http://simplelog.net 141
Slide 143: http://www.boxesandarrows.com/view/ambient_signifi 142
Slide 144: http://amazon.com 143
Slide 145: http://highrisehq.com 144
Slide 146: http://highrisehq.com 145
Slide 147: 146
Slide 148: 147
Slide 149: 148
Slide 150: 149
Slide 151: 150
Slide 152: 151
Slide 153: 152
Slide 154: http://worrydream.com/MagicInk/#p98 153
Slide 155: http://worrydream.com/MagicInk/#p98 154
Slide 156: 10 Fail Fast. Iterate. Explore. This isn’t construction or rocket science. Web Visions Portland, OR | May 3rd, 2007 155 155
Slide 157: “ For every complex problem there is a solution that is simple, neat and wrong. ” H. L. Mencken 156
Slide 158: http://www.37signals.com/svn/archives2/the_long_road_to_simple_creating_debating_and_iterating_add_an_event.php 157
Slide 159: “ 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. Lead Designer at Netflix http://www.uie.com/articles/fast_iterations/ ” 158
Slide 160: http://en.wikipedia.org/wiki/Punch_cards 159
Slide 161: “ However beautiful the strategy, you should occasionally look at the results. ” Winston Churchill 160
Slide 162: http://en.wikipedia.org/wiki/Waterfall_process 161
Slide 163: 162
Slide 164: “ Genius is 1% inspiration and 99% perspiration. ” Thomas Edison 163
Slide 165: http://www.lifeclever.com/2007/01/23/what-50-pounds-of-clay-can-teach-you-about-design/ 164
Slide 166: 165
Slide 167: 166
Slide 168: 167
Slide 169: http://worrydream.com/MagicInk/#p228 168
Slide 170: http://worrydream.com/MagicInk/#p228 169
Slide 171: “ 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. Marisa Mayer Vice President for Search Products and User Experience at Google http://www.uie.com/articles/fast_iterations/ ” 170
Slide 172: http://gettingreal.37signals.com 171
Slide 173: 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. 172
Slide 174: Thank You Garrett Dimon http://garrettdimon.com/pages/improving_interface_design 173