Design for Software – A Playbook for Developers

Acknowledgements viii
<p>Introduction 1</p>
<p>Part I: Research 5</p>
<p>CHAPTER 1 Planning 7</p>
<p>An Introduction to User Research 8</p>
<p>User Research Is Not Usability 9</p>
<p>Design Lingo: Ethnography 9</p>
<p>Start with User Insights 9</p>
<p>Case Study: Lightning Fast Checkout 14</p>
<p>Making Sense of Your Findings 18</p>
<p>Summary 20</p>
<p>CHAPTER 2 Inspiration 21</p>
<p>Steal Like an Artist 22</p>
<p>If All Else Fails 34</p>
<p>Summary 36</p>
<p>Part II: Design Thinking 37</p>
<p>CHAPTER 3 Sketching 39</p>
<p>Design Thinking A Developer s Kind of Design 40</p>
<p>Sketching Where It All Begins 40</p>
<p>The Benefi ts of Sketching 41</p>
<p>When to Sketch 42</p>
<p>Tools for Sketching 42</p>
<p>The Basics of Application Flows 47</p>
<p>Creating an Application Flow 49</p>
<p>What Storyboards Can Do for You 58</p>
<p>When to Use Storyboards 59</p>
<p>Creating a Storyboard 59</p>
<p>Not Sure Where to Begin? Start with a Template 60</p>
<p>Summary 62</p>
<p>CHAPTER 4 Information Architecture 63</p>
<p>What Is information Architecture, Exactly? 65</p>
<p>The Cost of Usability 65</p>
<p>Information Architecture Deliverables 66</p>
<p>Personas, User Scenarios, and Storyboards 67</p>
<p>Content Models 67</p>
<p>Application Flow 67</p>
<p>Wireframes 69</p>
<p>Gesture Dictionary 69</p>
<p>Information Architecture Is All About the Content 70</p>
<p>Make It Meaningful 70</p>
<p>Information Architecture: Like a Boss in Five Steps 72</p>
<p>Step 1: Define Themes, Goals and Requirements 73</p>
<p>Step 2: Choose a Layout 74</p>
<p>Step 3: Group Similar Items 85</p>
<p>Step 4: Be Consistent 86</p>
<p>Step 5: Reduce 87</p>
<p>Summary 88</p>
<p>CHAPTER 5 Wireframes 91</p>
<p>Debunking Wireframes 92</p>
<p>Wireframes 101 93</p>
<p>When Should You Create the Wireframes? 93</p>
<p>Anatomy of a Wireframe 94</p>
<p>Are You Speaking Wireframe? 95</p>
<p>Do s &amp; Don ts 98</p>
<p>Tools for Awesome Wireframes 102</p>
<p>Tools for Awesome–er Wireframes 105</p>
<p>Wireframe Techniques 107</p>
<p>Wireframe Technique #1: Creating the Basic Wireframe 107</p>
<p>Wireframe Technique #2: Using Shades of Gray and One Color 108</p>
<p>Wireframe Technique #4: Using the Frame–by–Frame Approach 111</p>
<p>Wireframe Technique #5: Using Bubbles 112</p>
<p>Wireframe Technique #6: Magnifying Details 112</p>
<p>Summary 114</p>
<p>CHAPTER 6 Prototyping 115</p>
<p>When Should I Prototype? 116</p>
<p>1. Communicating a New Idea 117</p>
<p>2. Creating a Proof of Concept 117</p>
<p>3. Conducting Basic Usability Testing 117</p>
<p>4. Determining Whether an Idea Is Worth a Bigger Investment 117</p>
<p>What Makes an Eff ective Prototype? 118</p>
<p>Fake It Be Clever, Not Complicated 120</p>
<p>Making Little Bets 121</p>
<p>Awesome Tools for Prototyping 122</p>
<p>Microsoft SketchFlow 122</p>
<p>Adobe Edge Tools 123</p>
<p>Adobe After Effects 124</p>
<p>Keynote / PowerPoint 125</p>
<p>HTML / JavaScript / CSS3 126</p>
<p>Axure RP 127</p>
<p>Arduino, Openframeworks, Processing 128</p>
<p>Prototyping Techniques 129</p>
<p>Prototyping Technique #1: Paper Prototypes 130</p>
<p>Prototyping Technique #2: Interactive Wireframes 131</p>
<p>Prototyping Technique #3: Video Prototyping 136</p>
<p>Summary 140</p>
<p>Part III: Visual Design 141</p>
<p>CHAPTER 7 Color 143</p>
<p>Color Basics 144</p>
<p>Color Vocabulary 144</p>
<p>Color Models 146</p>
<p>Cool and Warm Colors 149</p>
<p>The Psychology of Color 151</p>
<p>Contrast 154</p>
<p>Applied Color: A Few Rules of Thumb 156</p>
<p>Stick With Two to Three Colors 156</p>
<p>Start with Solids, Then Move to Gradients 157</p>
<p>Use Shades of a Hue 157</p>
<p>Green Means Go 157</p>
<p>What Makes a Good Color Palette? 158</p>
<p>Shades of Gray 159</p>
<p>Five Color Palettes You Can t Go Wrong With 160</p>
<p>Color Techniques 163</p>
<p>Color Technique #1: Use a Photograph to Generate a Color Palette 163</p>
<p>Color Technique #2: Code with Color 165</p>
<p>Color Technique #3: Use Photoshop 167</p>
<p>Bonus Color Technique: Use an Algorithm to Find Average Color 170</p>
<p>Summary 173</p>
<p>CHAPTER 8 Digital Typography 175</p>
<p>First Things First 176</p>
<p>A Lap Around Typography 177</p>
<p>Understanding Type Terminology 177</p>
<p>Font or Typeface What s the Difference? 182</p>
<p>Type Classification&nbsp; 182</p>
<p>Serif Typefaces&nbsp; 182</p>
<p>Sans–Serif Typefaces 185</p>
<p>Eight Ways to Improve Your Typography 187</p>
<p>1. Pick a Scale and Stick with It 187</p>
<p>2. Use Consistent Spacing&nbsp; 188</p>
<p>3. Consider the Measure&nbsp; 189</p>
<p>4. A Little Can Go a Long Way 190</p>
<p>5. Pick a Good Body Font&nbsp; 191</p>
<p>6. Use a Single Family 193</p>
<p>7. Combine Two to Three Typefaces 194</p>
<p>8. Use a Good Ampersand 199</p>
<p>Summary&nbsp; 199</p>
<p>CHAPTER 9 Visual Communication&nbsp; 201</p>
<p>It Ain t Th at Simple 202</p>
<p>1. Design As Th ough You re Designing for Yourself 203</p>
<p>2. Be Consistent 203</p>
<p>Five Ways to Clarify Your Design 204</p>
<p>1. Slap a Grid on It 204</p>
<p>2. Establish Hierarchy 211</p>
<p>3. Remove the Junk 215</p>
<p>4. Check for Parallelism 220</p>
<p>5. Create Clear Aff ordances 221</p>
<p>Summary 226</p>
<p>CHAPTER 10 Motion 227</p>
<p>Animations Look Cool, but Can Th ey Actually Make It Work Better? 228</p>
<p>Transitions, Animations, and Timing Guidelines 229</p>
<p>What s the Difference Between an Animation and a Transition?&nbsp;229</p>
<p>Not Too Fast, Not Too Slow, Not Too Many 230</p>
<p>When Should I Use Motion?&nbsp; 230</p>
<p>When Should I Avoid Motion? 231</p>
<p>Fade, Slide, and Scale Animation s Super Tools 232</p>
<p>Fade&nbsp; 232</p>
<p>Slide 233</p>
<p>Scale&nbsp; 233</p>
<p>Motion Principles 234</p>
<p>Slow In and Slow Out 234</p>
<p>Squash and Stretch 235</p>
<p>Anticipation 236</p>
<p>Follow–Through and Overlapping Action 237</p>
<p>Arcs 238</p>
<p>Easing&nbsp; 239</p>
<p>Advanced Motion Techniques 242</p>
<p>Follow 242</p>
<p>Cognitive Tomfoolery 243</p>
<p>Summary&nbsp; 244</p>
<p>Part IV: Interaction Design 245</p>
<p>CHAPTER 11 Interaction Design Principles 247</p>
<p>An Introduction to Interaction Design 248</p>
<p>Getting In the Flow&nbsp; 249</p>
<p>Ways to Facilitate Flow 250</p>
<p>Learnability Versus Usability 256</p>
<p>Designing for Usability 256</p>
<p>Designing for Learnability&nbsp; 258</p>
<p>Ergonomics 259</p>
<p>Muscle Fatigue&nbsp;260</p>
<p>Field of View and Peripheral Vision&nbsp; 261</p>
<p>Environment and Lighting Conditions 263</p>
<p>Optimal Touch Targets 263</p>
<p>Occlusion&nbsp; 265</p>
<p>Summary&nbsp; 267</p>
<p>CHAPTER 12 Design Patterns&nbsp;269</p>
<p>Why Use Design Patterns? 270</p>
<p>Other Design Pattern Resources 271</p>
<p>The Patterns 273</p>
<p>Auto Focus 274</p>
<p>Drag and Drop 274</p>
<p>Auto Save 275</p>
<p>Blank Slate 276</p>
<p>Progress Indicators 277</p>
<p>Use Good Target Sizes 278</p>
<p>A Button Is a Button Is a Button 279</p>
<p>Avoid Modal States unless It s Critical to Use Them&nbsp;279</p>
<p>Direct Manipulation 281</p>
<p>Group Like Items 281</p>
<p>Continuous Scrolling 282</p>
<p>Size to Importance Visualization 283</p>
<p>Glance–View Dashboard 284</p>
<p>Error–Proof Controls 285</p>
<p>Get Me Out of Here 286</p>
<p>Right/Left Input Alignment 287</p>
<p>Super Search 288</p>
<p>Simple Task, Simple UI; Complex Task, Complex UI 288</p>
<p>Sync Position 290</p>
<p>Contrast Your Fonts 290</p>
<p>Summary 291</p>
<p>Index 293</p>