Praise for Essential Mobile Interaction Design “In Essential Mobile Interaction Design, Banga and Weinhold do a great job of explaining what it takes to make a good-looking and easy-to-use app. The accessible language and visual examples of quality work combine to make this book a great resource for those looking to get into app design, or to take their craft to the next level.” — Jon Becker boom. reactive. “Essential Mobile Interaction Design is not merely a book full of pictures and design concepts or one of straight technical drivel. Instead, it is a guidebook for creating human-based interfaces that feature simplicity, functionality, and value. Whether you have questions about how mobile design is different from traditional desktop design, how to work with a developer, or even what tools to use for the creation process, Essential Mobile Interaction Design demonstrates the answer for that.” — Phil Dutson Lead UX and Mobile Developer, ICON Health & Fitness “Filled with nuggets of useful information, this book is a solid resource for the many aspects of designing a mobile app. I’ve found many recommendations in this book that we can use in our apps.” — Lucius Kwok CEO, Felt Tip, Inc. “A well-rounded, easy-to-read book that provides a good grounding in mobile design and how to keep all those small details in mind so that your apps will really shine.” — Dave Verwer Shiny Development and iOS Dev Weekly This page intentionally left blank Essential Mobile Interaction Design This page intentionally left blank Essential Mobile Interaction Design Perfecting Interface Design in Mobile Apps Cameron Banga Josh Weinhold Upper Saddle River, NJ • Boston • Indianapolis • San Francisco New York • Toronto • Montreal • London • Munich • Paris • Madrid Capetown • Sydney • Tokyo • Singapore • Mexico City Many of the designations used by manufacturers and sellers to distinguish their products are Editor-in-Chief claimed as trademarks. Where those designations appear in this book, and the publisher was aware Mark L. Taub of a trademark claim, the designations have been printed with initial capital letters or in all capitals. Executive Editor The authors and publisher have taken care in the preparation of this book, but make no expressed Laura Lewin or implied warranty of any kind and assume no responsibility for errors or omissions. No liability is assumed for incidental or consequential damages in connection with or arising out of the use of Development Editor the information or programs contained herein. Michael Thurston App Store, Apple, the Apple logo, Apple TV, Aqua, Cocoa, Cocoa Touch, Cover Flow, Dashcode, Managing Editor Finder, iMac, Interface Builder, iOS, iPad, iPhone, iPod, iPod touch, iTunes, the iTunes logo, Leopard, John Fuller Mac, the Mac logo, Macintosh, Maps, Mavericks, Multi-Touch, Objective-C, Safari, Snow Leopard, Spotlight, and Xcode are trademarks of Apple, Inc., registered in the U.S. and other countries. Project Editor Android, Google Chrome, Google Maps, and Google Play are trademarks of Google, Inc. Chatheads, Elizabeth Ryan Facebook, Facebook Chat, Facebook Home, and the Facebook logo are trademarks of Facebook, Inc. Packager Bitbucket and the Bitbucket logo are trademarks of Atlassian Software Services. The TestFlight logo Anna Popick is a trademark of Burstly, Inc. SkyDrive, Skype, Windows 8, and Windows Phone 7 are trademarks of Microsoft, Inc. The Twitter logo and the Vine logo are trademarks of Twitter, Inc. The Tumblr Copy Editor logo and the Yahoo! logo are trademarks of Yahoo!, Inc. Chicago Fire and the Chicago Fire logo Melinda Rankin are trademarks of Andell Holdings, LLC and Major League Soccer. The CNN logo is a trademark of Indexer Turner Broadcast System, Inc. The Cincinnati, Inc. logo and CL-900 are trademarks of Cincinnati, Inc. Jack Lewis For information about buying this title in bulk quantities, or for special sales opportunities (which may include electronic versions; custom cover designs; and content particular to your business, Proofreader training goals, marketing focus, or branding interests), please contact our corporate sales Anna Popick department at [email protected] or (800) 382-3419. Technical Reviewers For government sales inquiries, please contact [email protected]. Jonathon Becker Victor Lara For questions about sales outside the U.S., please contact [email protected]. Francisco Velazquez Visit us on the Web: informit.com/aw Editorial Assistant Cataloging-in-Publication Data is on file with the Library of Congress Olivia Basegio Copyright © 2014 Pearson Education, Inc. Cover Designer All rights reserved. Printed in the United States of America. This publication is protected Chuti Prasertsith by copyright, and permission must be obtained from the publisher prior to any prohibited reproduction, storage in a retrieval system, or transmission in any form or by any means, electronic, Compositor mechanical, photocopying, recording, or likewise. To obtain permission to use material from this Shepherd, Inc. work, please submit a written request to Pearson Education, Inc., Permissions Department, One Lake Street, Upper Saddle River, New Jersey 07458, or you may fax your request to (201) 236-3290. ISBN-13: 978-0-321-96157-0 ISBN-10: 0-321-96157-9 Text printed in the United States on recycled paper at RR Donnelley in Crawfordsville, Indiana. First printing, March 2014 I dedicate this book to Gavin. Although we’ve only just met, I couldn’t be more excited to be your uncle. Hopefully, you’ll be interested in interface design one day so that you can read through this and remind me how silly and archaic our phones and computers once were. —Cameron I dedicate this book to Mallory. Thank you for always encouraging me to take on new challenges and pushing me to always aim higher. —Josh This page intentionally left blank Contents Preface xvii Acknowledgments xix About the Authors xxi 1 A Look at Mobile and Its Main Players 1 The Field of Interface Design 2 The Dawn of the App 3 Defining an App in Today’s Context 5 Build It and They Will Come 7 What Is a Mobile Device? 8 A Portable, Pocket Computer 9 Tablets, Too 10 Other Devices That Are Part of the Revolution 11 The Industry’s Key Players 12 Apple 12 Google and Android 13 The Other Players 14 Distinctions between Platforms 16 Conclusion 19 2 Design for Humans, by Humans 21 What Is Interaction Design? 22 Goals When Designing an Interface 25 Designing for Humans 25 Designed by Humans 28 Where to Begin 30 Anticipating Your User Base 32 Mobile’s Role in User Workflow 35 Conclusion 37 x CONTENTS 3 Dynamic Differences in Mobile Design 39 Understanding the Role of Mobile 40 Mobile-Only Interactions 41 Interactions Only Possible with a Smartphone 42 Interactions Only Possible with a Tablet 44 Interactions That Aren’t Possible on Mobile 46 Keyboards and Data Entry 46 Click, Tap, Point 47 Expandability 48 Universal Appeal 48 Interaction Experiences for Phones and Tablets 48 Interaction Experiences for Multiple Platforms 53 Complementing Traditional Workflows 55 Conclusion 57 4 First Sketches of an App 59 What Tools Do You Need? 60 Becoming a Designer 65 Planning for a Specific Platform 66 Starting with a Workflow 68 Meeting Design Expectations 70 Wrapping Up Design Documentation 73 Creating Pixel-Perfect Digital Mockups 73 Reiterating Before It’s Too Late 75 Preparing for the Next Stage 77 Conclusion 79 5 Finding the Right Design Flow 81 The Big Three App Types 82 Native Apps 82 Web Apps 83 Hybrid Apps 84 CONTENTS xi Common App Navigation Methods 85 Single View 85 Stacked Navigation Bar 87 Tab Controller 88 Scroll Views 89 Search-Driven Navigation 90 Modal Controller 91 Gesture-Based Navigation 92 Picking an Interaction Type 93 Minimizing Interface Friction 96 Preparing for Connectivity Failure 98 Conclusion 102 6 Designing for Visual Appeal 103 How Appearance Changes Interactions 104 Skeuomorphic Design 104 Flat Design 106 Creating an App Icon 107 Finding a Unique Look 111 Matching Art to Interaction Design 115 Crossing Platforms 117 App Branding Guides 118 Building Art That Scales 119 Adding the Final Touches 123 Conclusion 126 7 Working with Programmers 127 Understanding Your Programmer 128 Learning Programming Languages 128 From Sketch to Programmable Design 130 Describing Your Design 132 xii CONTENTS Communicating During Development 136 Clear Communication 136 Tracking Issues 137 Learning More 139 Comprehending the Source Code 141 A Designer’s Introduction to Programming 141 Writing Source Code 143 Knowing What to Change 144 Conclusion 148 8 Making Apps Usable by All 149 Knowing Your Audience 150 How Sandboxing Changed Mobile 152 Interactions for the Mass Market 157 Trait 1: Not a Computer Geek 157 Trait 2: Only Uses a Handful of Apps 158 Trait 3: Uses Apps in Short Bursts 159 Trait 4: Follows the 80/20 Rule 159 Trait 5: Likes What Everyone Else Likes 160 Building Multilingual Interaction Designs 160 Designing for Users with Disabilities 163 Conclusion 166 9 Designing for Simplicity 167 The Sophistication of Simplicity 168 Striving for Simple Interaction Design 168 The Difficulties of Simplicity 170 Simple Design Goals 171 Clarity 171 Continuity and Flow 172 Retention and Growth 173 Interfaces That Do It Well 175 iOS’s Slide-to-Unlock 175 Android’s Action Bar 176 CONTENTS xiii Creating Simple Interactions 178 Learning to Say No 178 Making Tasks Obvious 178 Offering Subtle Hints 179 Putting Elements in the Right Location 180 Addition by Subtraction 182 Simplicity through Familiarity 183 Using Well-Known Visuals 184 Following