Design for Software E-Book

Erik Klimczak

• Herausgeber: John Wiley & Sons
• Kategorie: Wissenschaft und neue Technologien
• Sprache: Englisch

Seitenzahl: 354

Veröffentlichungsjahr: 2013

Beschreibung

A unique resource to help software developers create a desirable user experience Today, top-flight software must feature a desirable user experience. This one-of-a-kind book creates a design process specifically for software, making it easy for developers who lack design background to create that compelling user experience. Appealing to both tech-savvy designers and creative-minded technologists, it establishes a hybrid discipline that will produce first-rate software. Illustrated in full color, it shows how to plan and visualize the design to create software that works on every level. * Today's software demands attention to the quality of the user experience; this book guides you through a practical design process to achieve that goal * Approaches the mechanics of design with a process inspired by art and science * Avoids the abstract and moves step by step through techniques you can put to use immediately * Covers planning your design, tested methods, how to visualize like a designer, psychology of design, and how to create software that developers will appreciate * Explores such elements as choosing the right typeface and managing interactivity Design for Software: A Playbook for Developers brings the art of good design together with the science of software development to create programs with pizazz.

Leseprobe

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

This edition first published 2013

© 2013 Erik Klimczak

Registered office

John Wiley & Sons Ltd, The Atrium, Southern Gate, Chichester, West Sussex, PO19 8SQ, United Kingdom

For details of our global editorial offices, for customer services and for information about how to apply for permission to reuse the copyright material in this book please see our website at www.wiley.com.

The right of the author to be identified as the author of this work has been asserted in accordance with the Copyright, Designs and Patents Act 1988.

All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by any means, electronic, mechanical, photocopying, recording or otherwise, except as permitted by the UK Copyright, Designs and Patents Act 1988, without the prior permission of the publisher.

Wiley also publishes its books in a variety of electronic formats. Some content that appears in print may not be available in electronic books.

Designations used by companies to distinguish their products are often claimed as trademarks. All brand names and product names used in this book are trade names, service marks, trademarks or registered trademarks of their respective owners. The publisher is not associated with any product or vendor mentioned in this book. This publication is designed to provide accurate and authoritative information in regard to the subject matter covered. It is sold on the understanding that the publisher is not engaged in rendering professional services. If professional advice or other expert assistance is required, the services of a competent professional should be sought.

Trademarks: Wiley and the Wiley logo are trademarks or registered trademarks of John Wiley & Sons, Inc. and/or its affiliates in the United States and/or other countries, and may not be used without written permission. All other trademarks are the property of their respective owners. John Wiley & Sons, Inc. is not associated with any product or vendor mentioned in the book.

A catalogue record for this book is available from the British Library.

ISBN 978-1-119-94290-0 (paperback); ISBN 978-1-119-94369-3 (ebook); 978-1-119-94370-9 (ebook); 978-1-119-94371-6 (ebook)

Set in 10/12.5pt Chaparral Pro Light by Indianapolis Composition Services

Printed in United States by Command Web

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

Publisher’s Acknowledgements

Some of the people who helped bring this book to market include the following:

Editorial and Production

VP Consumer and Technology Publishing Director: Michelle Leete

Associate Director–Book Content Management: Martin Tribe

Associate Publisher: Chris Webb

Associate Commissioning Editor: Ellie Scott

Project Editor: Box Twelve Communications

Copy Editor: Melba Hopper

Technical Editor: Jacob Gable

Editorial Manager: Jodi Jensen

Senior Project Editor: Sara Shlaer

Editorial Assistant: Annie Sullivan

Marketing

Associate Marketing Director: Louise Breinholt

Marketing Manager: Lorna Mein

Senior Marketing Executive: Kate Parrett

Marketing Assistant: Tash Lee

Composition Services

Compositor: Jennifer Mayberry

Proofreader: Joni Heredia Language Services

Indexer: Potomac Indexing, LLC

About the Author

Erik Klimczak is an interaction designer and software developer who specializes in creating products and services that help make people’s lives easier. He is hugely passionate about the blurry part of design where cognitive behavior, fine art, and technology converge. Erik leads a design group in Chicago, where his unique skill set helps bridge the gap between highly inspiring creative and technical teams, from whom he learns something new every day. His work covers a vast range of creative and technical ground, which he has brought to bear for the entertainment, financial, health, consumer, and retail domains. When he is not at the whiteboard, Erik spends his time indulging in his passion for photography and music. You can get in touch with him via Twitter at @eklimcz.

About the Technical Reviewer

Jacob Gable is a Father, Amateur Philosopher and Creative Technologist living in Chicago, IL. He has created desktop, mobile and web based software of all kinds for small, large and “just right” companies across the world. He is a contributor to open source projects including jQuery Mobile, and creator of several useful libraries available on Github and Node Packaged Modules (NPM).

When he’s not obsessing over some weekend hacking project he can usually be found Sailing or Biking around Chicago with his wife, Kristen, and daughter, Addison. He writes occasionally on technology and the meaning of life on his blog: http://jacobgable.com. You can get in touch with him via Twitter at @jacob4u2.

Acknowledgements

Even though my name is the only name on the cover of this book, I couldn’t have done it without a lot of help.

First, a great deal of gratitude is owed to the hard-working team at Clarity Consulting who’ve been a constant source of inspiration long before the conception of this book. 

Then there’s good folks at Wiley, particularly Chris Webb and Jeff Riley, who helped turn my rambling thoughts and incoherent writing into a book my English teaches would be proud of.

My technical editor, Jacob Gable, whose complementary skill set and sage insight kept me honest and gave me encouragement through over a year of writing. 

Thanks are also due to Sean Devlin and Raphael D’Amico, who selflessly dedicated their time and artwork, which was crucial throughout the writing process. 

Finally, there is one person without whom this book would never have happened: Valerie, whose love, friendship, encouragement, and numerous brain massages allowed me to carry on. Thank you.

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.

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