cover.eps

Design for Software: A Playbook for Developers

Table of Contents

Introduction
Who Should Read this Book?
How This Book Is Structured
The Companion Web Site
Part I: Research
Chapter 1: Planning
An Introduction to User Research
User Research Is Not Usability
Design Lingo: Ethnography
Start with User Insights
Case Study: Lightning Fast Checkout
Making Sense of Your Findings
Summary
Chapter 2: Inspiration
Steal Like an Artist
If All Else Fails . . .
Summary
Part II: Design Thinking
Chapter 3: Sketching
Design Thinking—A Developer’s Kind of Design
Sketching—Where It All Begins
The Benefits of Sketching
When to Sketch
Tools for Sketching
The Basics of Application Flows
Creating an Application Flow
What Storyboards Can Do for You
When to Use Storyboards
Creating a Storyboard
Not Sure Where to Begin? Start with a Template
Summary
Chapter 4: Information Architecture
What Is information Architecture, Exactly?
The Cost of Usability
Information Architecture Deliverables
Personas, User Scenarios, and Storyboards
Content Models
Application Flow
Wireframes
Gesture Dictionary
Information Architecture Is All About the Content
Make It Meaningful
Information Architecture: Like a Boss in Five Steps
Step 1: Define Themes, Goals and Requirements
Step 2: Choose a Layout
Step 3: Group Similar Items
Step 4: Be Consistent
Step 5: Reduce
Summary
Chapter 5: Wireframes
Debunking Wireframes
Wireframes 101
When Should You Create the Wireframes?
Anatomy of a Wireframe
Are You Speaking Wireframe?
Do’s & Don’ts
Tools for Awesome Wireframes
Tools for Awesome-er Wireframes
Wireframe Techniques
Wireframe Technique #1: Creating the Basic Wireframe
Wireframe Technique #2: Using Shades of Gray and One Color
Wireframe Technique #4: Using the Frame-by-Frame Approach
Wireframe Technique #5: Using Bubbles
Wireframe Technique #6: Magnifying Details
Summary
Chapter 6: Prototyping
When Should I Prototype?
1. Communicating a New Idea
2. Creating a Proof of Concept
3. Conducting Basic Usability Testing
4. Determining Whether an Idea Is Worth a Bigger Investment
What Makes an Effective Prototype?
Fake It—Be Clever, Not Complicated
Making “Little Bets”
Awesome Tools for Prototyping
Microsoft SketchFlow
Adobe Edge Tools
Adobe After Effects
Keynote / PowerPoint
HTML / JavaScript / CSS3
Axure RP
Arduino, Openframeworks, Processing
Prototyping Techniques
Prototyping Technique #1: Paper Prototypes
Prototyping Technique #2: Interactive Wireframes
Prototyping Technique #3: Video Prototyping
Summary
Part III: Visual Design
Chapter 7: Color
Color Basics
Color Vocabulary
Color Models
Cool and Warm Colors
The Psychology of Color
Contrast
Applied Color: A Few Rules of Thumb
Stick With Two to Three Colors
Start with Solids, Then Move to Gradients
Use Shades of a Hue
Green Means Go
What Makes a Good Color Palette?
Shades of Gray
Five Color Palettes You Can’t Go Wrong With
Color Techniques
Color Technique #1: Use a Photograph to Generate a Color Palette
Color Technique #2: Code with Color
Color Technique #3: Use Photoshop
Bonus Color Technique: Use an Algorithm to Find Average Color
Summary
Chapter 8: Digital Typography
First Things First
A Lap Around Typography
Understanding Type Terminology
Font or Typeface—What’s the Difference?
Type Classification
Serif Typefaces
Sans-Serif Typefaces
Eight Ways to Improve Your Typography
1. Pick a Scale and Stick with It
2. Use Consistent Spacing
3. Consider the Measure
4. A Little Can Go a Long Way
5. Pick a Good Body Font
6. Use a Single Family
7. Combine Two to Three Typefaces
8. Use a Good Ampersand
Summary
Chapter 9: Visual Communication
It Ain’t That Simple
1. Design As Though You’re Designing for Yourself
2. Be Consistent
Five Ways to Clarify Your Design
1. Slap a Grid on It
2. Establish Hierarchy
3. Remove the Junk
4. Check for Parallelism
5. Create Clear Affordances
Summary
Chapter 10: Motion
Animations Look Cool, but Can They Actually Make It Work Better?
Transitions, Animations, and Timing Guidelines
What’s the Difference Between an Animation and a Transition?
Not Too Fast, Not Too Slow, Not Too Many
When Should I Use Motion?
When Should I Avoid Motion?
Fade, Slide, and Scale—Animation’s Super Tools
Fade
Slide
Scale
Motion Principles
Slow In and Slow Out
Squash and Stretch
Anticipation
Follow-Through and Overlapping Action
Arcs
Easing
Advanced Motion Techniques
Follow
Cognitive Tomfoolery
Summary
Part IV: Interaction Design
Chapter 11: Interaction Design Principles
An Introduction to Interaction Design
Getting In the Flow
Ways to Facilitate Flow
Learnability Versus Usability
Designing for Usability
Designing for Learnability
Ergonomics
Muscle Fatigue
Field of View and Peripheral Vision
Environment and Lighting Conditions
Optimal Touch Targets
Occlusion
Summary
Chapter 12: Design Patterns
Why Use Design Patterns?
Other Design Pattern Resources
The Patterns
Auto Focus
Drag and Drop
Auto Save
Blank Slate
Progress Indicators
Use Good Target Sizes
A Button Is a Button Is a Button
Avoid Modal States unless It’s Critical to Use Them
Direct Manipulation
Group Like Items
Continuous Scrolling
Size to Importance Visualization
Glance-View Dashboard
Error-Proof Controls
Get Me Out of Here
Right/Left Input Alignment
Super Search
Simple Task, Simple UI; Complex Task, Complex UI
Sync Position
Contrast Your Fonts
Summary

titlepg.png

For Bob, Chris and Val 
Without you, I wouldn’t be me. 

Publisher’s Acknowledgements

About the Author

9781119942900-fgfm01.tif

About the Technical Reviewer

9781119942900-fgfm02.tif

Acknowledgements

Introduction

SINCE I CAN remember, I’ve always had a special love for technology and design. In fact, my earliest childhood drawings weren’t made with crayon and paper but with my Grandmother’s Apple II. Throughout my career I’ve struggled with a bit of an identity crisis—Am I a designer? Am I a developer? Could I be both? In college I had a hell of a time trying to sign up for courses that allowed me to get a dual degree in Computer Science and Fine Arts. For the next four years people would ask, “Why are you wasting your time getting a Fine Arts degree? Physics is a much better compliment to computer science.” Or “Computer Science? What are you going to do with that? You should be thinking about getting experience at a design studio.”

Out of college I was hired into a long-established software development company. In many ways, I was responsible for defining my own role within the company, educating people about design and how it fit into to their projects. Initially, there was some hesitancy and even animosity towards the presence of design in a well-oiled development process. But over time it became clear that having a design competency in the tech field gave us a unique advantage.

And here I am, writing a book about the intersection of design and software. I would have never guessed…Reminiscing about my story always a reminds me how just a few short years ago the coexistence of design and technology was a relatively foreign concept. And now we’ve come full circle, UI and UX design are first class citizens in the software world.

For over a decade I’ve been helping engineers design and produce software in a variety of industries—healthcare, auto, finance, retail, law, entertainment, insurance, marketing, education, consumer products, gaming, sports, food and beverage, communications, media, security and more. Working closely with developers for so long I’ve gleaned some unique insights on how to approach design in a software setting. Over time I’ve compiled a collection of design frameworks, tactics, and heuristics that have ultimately become my design process for creating software. This process is the premise for the book.

The best desktop, mobile, or web apps all share one thing in common— they have stellar user experiences. In other words, they look and function beautifully. Yet, it’s not always clear how to go from those napkin sketches to a fully polished app.

If you didn’t go to design school, or even if you did, designing software can be intimidating. I’ve worked with many developers and designers that had great ideas for applications but weren’t sure where to start. Within the last few years, software and interface design has emerged as a unique discipline comprised of a variety of fields and professions. This interdisciplinary nature warrants its own design process; one different from those found in traditional design and computer science.

That’s why I wrote this book. 

I think great software consists of three key ingredients:

Cognitive Psychology—Anticipating what your users need and empowering them where they are weak.

Visual Aesthetics—People want to be engaged by their apps. Great looking software lends itself to great working software. 

Engineering Excellence—Committing to building software that is intuitive. Even if that means going beyond what comes “out of the box”. 

Design for Software connects the dots between these elements with a process that approaches the mechanics of design with real world techniques.

Interface design is often equated to knowing design tools like Photoshop and Illustrator—creating gradients, drop shadows, and the quintessential glass themed buttons. That is one type of design. Design for Software is something else, a method for producing applications that look great and people want to use.

I like to think of the design in this book as a “developer’s kind of design”— practical, efficient and high in utility. Best of all, this book shows you how to overcome the “hard parts” of software design with no formal design training. Once learned, you’ll have acquired design knowledge that transcends the screen and can be used in any job—designer, developer, product manager, and even CEO.

I believe that anyone can learn to design great software. But the learning requires some guidance, and that guidance is provided throughout this book. It won’t make you a rock star designer overnight, but with the tools in this text you’ll be well on your way.

Who Should Read this Book?

In short, this book is for anyone who has an appetite for creating digital products that help make people’s lives easier. More specifically, the content in this book best serves the creative-minded technologist and the tech-savvy designer.

The bar for great applications and well-designed software is getting higher every day. And many folks with a background in software development are looking to enhance their skillset with design competency. However, most developers I know recoil at the concept of “learning design” mostly because it tends to be abstract and unnecessarily theoretical. Design for Software attempts to parse the “theory” of design into practical, consumable techniques that can be applied directly to application development.

Similarly, if you have a background in design, chances are school didn’t teach you how to design user interfaces. And while you might have a leg-up on your developer counterparts, designing for digital applications is its own beast. This book goes well beyond core principles of visual design and explores design thinking and interaction techniques. Organizing application flows, creating wireframes, and building prototypes are just some of the ways you’ll learn to quickly express your ideas and turn them into great apps.  

Finally, many of you are completely new to the field, while some of you are seasoned practitioners. I’ve tried to meet the needs of both groups. While I believe this book serves as a helpful introduction, I hope that those of you with some experience under your belts take away some fresh perspectives and techniques.

How This Book Is Structured

This book is divided into four parts and 12 chapters. The breakdown of each section is shown in Figure 1. I’ve organized the book this way because it loosely maps to the design process I used for projects.

9781119942900-fgin01.tif

Figure 1: I organized the book this way because it loosely maps to the design process I use for approaching projects.

We typically start every project with user research, finding inspiration and competitive analysis (Chapter 1, 2). Once we’ve gained some key insights and established our target audience we move on to “design thinking.” This is where the brunt of the application gets created. We start by sketching out ideas (Chapter 3) and organizing content into something that start to resemble an app (Chapter 4). Once we have a good handle on all of the moving parts we create wireframes that describe the app’s overall flow and interaction (Chapter 5). At this point we also build prototypes to demonstrate interactivity and uncover any obvious ergonomic flaws (Chapter 6). With the foundation of the app established we move into the visual design portion of the process. We explore different layouts, color palettes and typography treatments to create a look and feel that is appropriate for the app (Chapter 7, 8, 9). Then we add some personality and character with motion. This creates the “glue” between screens and adds an element of delight (Chapter 10). Once we’ve arrived at a well-manicured design we put together another prototype, which allows us to envision the product’s look and feel before we’ve written much code.

The last section of the book is focused on interaction design. In practice, the concepts in this section should be peppered throughout the entire design process. However, I’ve intentionally placed this section at the end because it contains advanced topics best learned once you’ve nailed down the basics. We explore how context and environment can influence and application’s design (Chapter 11). And finally, the last chapter is a collection of my favorite design patterns that you can leverage and extend for your own projects (Chapter 12).

The Companion Web Site

I’ve created a companion site for the book that features code samples, design templates, and a handful of useful resources that coincide with various chapters and themes within the text. Get the goods at http://designforsoftware.com, or from the book's companion website at www.wiley.com/go/designforsoftware.

Part I: Research

When building a house or remodeling a kitchen, it’s not uncommon to spend a fair amount of time planning before you let contractors go willy-nilly. Typically, you research neighborhoods or cabinet manufactures, and look for inspiration in various interior design or architecture magazines. Then during the build-out, things will more or less go according to plan and everybody’s happy. Can you imagine what the process would be like if you didn’t plan anything upfront and winged it? It would be a disaster—you wouldn’t even consider it…Not surprisingly, designing software without a plan usually ends the same way—a disaster.

I talk to many folks that have great ideas for apps, yet so many of those apps remain exactly that—ideas. Nothing gets built and ideas fade away. Or what’s worse, they jump in headfirst, slapping things together and the result, amongst other things, is a poorly designed product. On the contrary, I’ve seen applications come together in a mere few weeks that look and work great. As with any process, doing the due diligence and planning upfront has its benefits.

The first two chapters of the book will help you kick off your next project right. If you’re new to the field and aren’t sure how to get started, or if you’re looking for inspiration to help kick-start your design, these chapters will be helpful. Throughout Part I you will learn about the following topics:

Performing fundamental user research

Gleaning user insights that will fuel your next application

Finding inspiration and leveraging it in your app design

Presenting user research to stakeholders