essential mobile interaction design

free ebooks ==> www.ebook777.com

www.it-ebooks.info
WWW.EBOOK777.COM


free ebooks ==> www.ebook777.com
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

www.it-ebooks.info
WWW.EBOOK777.COM


free ebooks ==> www.ebook777.com

This page intentionally left blank

www.it-ebooks.info
WWW.EBOOK777.COM


free ebooks ==> www.ebook777.com

Essential Mobile
Interaction Design

www.it-ebooks.info
WWW.EBOOK777.COM


free ebooks ==> www.ebook777.com

This page intentionally left blank

www.it-ebooks.info
WWW.EBOOK777.COM


free ebooks ==> www.ebook777.com

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

www.it-ebooks.info
WWW.EBOOK777.COM


free ebooks ==> www.ebook777.com

Many of the designations used by manufacturers and sellers to distinguish their products are
claimed as trademarks. Where those designations appear in this book, and the publisher was aware
of a trademark claim, the designations have been printed with initial capital letters or in all capitals.
The authors and publisher have taken care in the preparation of this book, but make no expressed
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
the information or programs contained herein.

App Store, Apple, the Apple logo, Apple TV, Aqua, Cocoa, Cocoa Touch, Cover Flow, Dashcode,
Finder, iMac, Interface Builder, iOS, iPad, iPhone, iPod, iPod touch, iTunes, the iTunes logo, Leopard,
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.
Android, Google Chrome, Google Maps, and Google Play are trademarks of Google, Inc. Chatheads,
Facebook, Facebook Chat, Facebook Home, and the Facebook logo are trademarks of Facebook, Inc.
Bitbucket and the Bitbucket logo are trademarks of Atlassian Software Services. The TestFlight logo
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
logo and the Yahoo! logo are trademarks of Yahoo!, Inc. Chicago Fire and the Chicago Fire logo
are trademarks of Andell Holdings, LLC and Major League Soccer. The CNN logo is a trademark of
Turner Broadcast System, Inc. The Cincinnati, Inc. logo and CL-900 are trademarks of Cincinnati, Inc.
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,
training goals, marketing focus, or branding interests), please contact our corporate sales
department at or (800) 382-3419.
For government sales inquiries, please contact
For questions about sales outside the U.S., please contact

Editor-in-Chief
Mark L. Taub
Executive Editor
Laura Lewin
Development Editor
Michael Thurston
Managing Editor
John Fuller
Project Editor
Elizabeth Ryan
Packager

Anna Popick
Copy Editor
Melinda Rankin
Indexer
Jack Lewis
Proofreader
Anna Popick
Technical Reviewers
Jonathon Becker
Victor Lara
Francisco Velazquez

Visit us on the Web: informit.com/aw
Cataloging-in-Publication Data is on file with the Library of Congress
Copyright © 2014 Pearson Education, Inc.
All rights reserved. Printed in the United States of America. This publication is protected
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,
mechanical, photocopying, recording, or likewise. To obtain permission to use material from this
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

www.it-ebooks.info
WWW.EBOOK777.COM

Editorial Assistant

Olivia Basegio
Cover Designer
Chuti Prasertsith
Compositor
Shepherd, Inc.


free ebooks ==> www.ebook777.com

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

www.it-ebooks.info
WWW.EBOOK777.COM


free ebooks ==> www.ebook777.com

This page intentionally left blank

www.it-ebooks.info
WWW.EBOOK777.COM

free ebooks ==> www.ebook777.com
Contents
Preface
Acknowledgments
About the Authors
1 A Look at Mobile and Its Main Players

xvii
xix
xxi
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?
A Portable, Pocket Computer

8
9

Tablets, Too

10

Other Devices That Are Part of the Revolution

11

The Industry’s Key Players
Apple

12
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

www.it-ebooks.info
WWW.EBOOK777.COM


free ebooks ==> www.ebook777.com
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

The Big Three App Types

81
82

Native Apps

82

Web Apps

83

Hybrid Apps

84

www.it-ebooks.info
WWW.EBOOK777.COM


free ebooks ==> www.ebook777.com
CONTENTS

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

6 Designing for Visual Appeal
How Appearance Changes Interactions

102

103
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

www.it-ebooks.info
WWW.EBOOK777.COM

xi


free ebooks ==> www.ebook777.com
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

8 Making Apps Usable by All

148

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
The Sophistication of Simplicity

167
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

www.it-ebooks.info
WWW.EBOOK777.COM


free ebooks ==> www.ebook777.com
CONTENTS

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
Using Well-Known Visuals

183
184

Following Industry Leaders

185

Going Against the Grain

186

Testing Simplicity

186

Speed of the App

186

How the App Is Being Used

187

Social Reach

188

Dogfooding

189

Conclusion

10 Gaining Valuable Feedback

191

193

Showing Off Your Work

194

Protecting Your Secrets

194

Choosing the Right Testers

195

When to Share Your Work with Testers

196

Devising a Beta-Test Strategy

198

Tracking an App’s Issues

199

Prepping Every Build

200

Handing the Beta Off

203

Analyzing Valuable Test Data

204

Knowing Where Testers Spent Their Time

205

Finding Software Bugs and Crashes

206

Managing Issue Resolve

207

From Beta to Positive Changes

208

Determining When Enough Is Enough

208

Releasing the App

210

Conclusion

211

www.it-ebooks.info
WWW.EBOOK777.COM

xiii


free ebooks ==> www.ebook777.com
xiv

CONTENTS

11 Refreshing a Design
Improving as a Designer

213
214

Maintaining a Work Journal

215

Evaluating Your Own Work

216

Judging Who Is Worth Listening To

218

Review Web Sites

219

App Store Reviews

221

Personal Messages

222

Avoiding Negativity

223

Turning Requests into Changes

224

Preparing Users for Design Changes

226

The Resubmission Process

228

Conclusion

230

A Standout Apps

231

1Password

232

Amazon Mobile

232

CNN News

233

Coach’s Eye

234

Evernote

234

Facebook

235

Flipboard

236

Google Chrome

237

Google Maps

237

Instagram

237

Instapaper

239

MLB.com At Bat

240

Twitter

240

TuneIn Radio

241

Wolfram|Alpha

242

B Apps for Designers

243

Adobe Photoshop

244

Balsamiq

244

www.it-ebooks.info
WWW.EBOOK777.COM


free ebooks ==> www.ebook777.com
CONTENTS

Bugshot

245

Dribbble

246

Icon Slate

247

MindNode Pro

247

Pngyu

248

Skitch

249

Spark Inspector

249

xScope

249

C Artwork Requirements for Android and iOS
Android

251
252

Icon Sizes

252

General Art File Format

252

General Art File Management

253

Naming Conventions

254

Other Tips

254

iOS

255

Icon Sizes

255

General Art File Format

256

General Art File Management

257

Naming Conventions

258

Other Tips

258

Index

261

www.it-ebooks.info
WWW.EBOOK777.COM

xv


free ebooks ==> www.ebook777.com

This page intentionally left blank

www.it-ebooks.info
WWW.EBOOK777.COM


free ebooks ==> www.ebook777.com

PREFACE
This text offers an introduction to and general overview of interaction design for all mobile

computing platforms, with a particular emphasis on Google’s Android and Apple’s iOS
platforms.
Mobile apps should feel natural and intuitive. Users should quickly and easily understand them.
This means that effective interaction and interface design is crucial to the success of any mobile
app. Few mobile app developers (or even designers), however, have had adequate training in
these areas.
Touchscreen-focused, mass-market mobile applications are a type of technology that’s only
been possible to create since 2008, and the industry has seen monumental shifts and growth in
the six years between the introduction of the “app economy” and the publication of this work.
This book aims to help put you in a place to succeed as a designer in today’s app market by
teaching proven principles and techniques that you can use in your next app, no matter what
mobile platform, targeted device, form factor, or user base you’re targeting.
In short, the tutorial style used here aims to help you master the mindset, processes, and vocabulary of mobile interaction design so that you can start making better choices right away. This
book guides you through the entire process of app design, demystifying many of the tasks and
issues that arise during the many stages of developing, releasing, and improving a mobile app.
Cameron Banga has been working in mobile application development since 2009, and in the
nearly five years since releasing his first app he’s contributed as a designer or as an adviser to
more than 100 applications for iPhone, iPad, Android, and OS X. In that time, he’s seen firsthand
the growth and change experienced in the mobile industry and has worked to meet client and
customer expectations throughout the many evolutions of mobile platforms.
This book aims to serve as a central resource for programmers or designers looking to best
determine how to establish themselves in today’s modern mobile landscape by offering advice
formulated and acquired through Cameron’s experiences over the past several years as a pioneer of the mobile app economy.
Topics chosen for this book were selected carefully by Cameron with advice from and in coordination with several successful and award-winning industry colleagues. The goal of each chapter
was to focus on a particular strong primary skill required of any successful designer, breaking
that skill down into a few key components that any novice could focus on and, with some
strong advice and clear guidance, work to master quickly.

www.it-ebooks.info
WWW.EBOOK777.COM

free ebooks ==> www.ebook777.com
xviii

PREFACE

No programming knowledge and only basic design knowledge is required to understand this
book, as it’s been carefully crafted to be universally readable and helpful. In situations in which
it does dive into extremely specific terminology or a topic for which prior information would
be required, breakout boxes offer context and suggestions as to where the reader can look for
further information that’s beyond the scope of this book.
Only basic design tools were used to create the example work included in this book, and the
software or hardware that was used is detailed where relevant. Much of this book focuses on
general theories and somewhat universal design practices that can be slightly modified and
fine-tuned to the reader’s specific circumstances. Additional resources that are required or may
be helpful have been posted online at />We hope you enjoy this book and that it helps you make progress toward your goal of becoming an outstanding mobile app designer. If you would like to share your thoughts or if you have
a question, feel free to contact the authors at

www.it-ebooks.info
WWW.EBOOK777.COM


free ebooks ==> www.ebook777.com

ACKNOWLEDGMENTS
This book would not exist without the dedicated work of Laura Lewin (our gracious and everhelpful executive editor) and Olivia Basegio (our wonderful editorial assistant, always willing
to lend a hand and keep us on track). We’d like to give a huge thank you to the entire AddisonWesley editorial team, especially Michael Thurston and Melinda Rankin.
Special thanks go out as well to our technical reviewers: Jonathon Becker, Victor Lara, and
Francisco Velazquez. The book is significantly better due to their recommendations, nitpicking,

and fact-checking.

Cameron
I am extremely thankful for all of the people who worked with me and tolerated me throughout the lengthy process of book development, particularly my mother, father, brother, and
sister-in-law. I can’t explain the gratitude I have for my family and their ability to put up with
the absences, stress, and limited schedule that comes with writing a book. Thanks to the entire
9magnets team: Dillon Carter, Nathan Feldsien, Michael Phelps, and Francisco Velazquez; they
were amazing coworkers and even better friends throughout the entire process. I would also
like to give special thanks to all the amazing people that I’ve had the pleasure to meet in the
independent app development community that serve as my biggest source of inspiration every
day. Cabel Sasser, I hope that this makes you proud.

Josh
I am incredibly grateful for the patience and understanding of my wife, Mallory, who was amazingly focused on planning our wedding while I was off working on this book. I’m also thankful
for my parents, who never stopped encouraging me to work hard and see what followed, and
for the grandparents, aunts, and uncles who feigned amazement at the not-so-creative writing
of my childhood. I’m also indebted to the many teachers and editors over the years who offered
invaluable lessons and priceless opportunities, especially Jeff Burton, Greg Halling, Linda
Jegerlehner, Marshall King, Pat Milhizer, Paul Oren, Mark Schwehn, and Susan Swift.

www.it-ebooks.info
WWW.EBOOK777.COM


free ebooks ==> www.ebook777.com

This page intentionally left blank

www.it-ebooks.info
WWW.EBOOK777.COM

free ebooks ==> www.ebook777.com

ABOUT THE AUTHORS
Cameron Banga is the lead designer at a company he cofounded, 9magnets, LLC. He has
worked on more than 100 mobile apps for clients ranging from professional sports teams, to
educators, to large corporations. His first application, Battery Go!, quickly became an iPhone
best-seller, and his apps have been recommended by the New York Times, Fox Business News,
Macworld, PC Magazine, and many other media outlets. Cameron holds a B.A. in economics
from Valparaiso University.
When not writing, Cameron is an avid photographer, novice runner, and coffee connoisseur in
training. Cameron can be most easily reached via Twitter, at @CameronBanga.
Josh Weinhold is the assistant editor of the Chicago Daily Law Bulletin newspaper and Chicago
Lawyer magazine. He spent five years as a political reporter and has written hundreds of news
articles and feature stories published in the Daily Law Bulletin, the Elkhart Truth, the Dubuque
Telegraph Herald, and on msnbc.com. He shared a National Press Club Online Journalism Award
with other members of an msnbc.com and Elkhart Truth reporting team, and won The Chicago
Bar Association’s Herman Kogan Award for legal beat reporting.
He spends his free time slowly working through the long list of movies and TV shows he’s been
dying to see and fanatically following many real-life and fantasy sports teams.

www.it-ebooks.info
WWW.EBOOK777.COM


free ebooks ==> www.ebook777.com

This page intentionally left blank

www.it-ebooks.info
WWW.EBOOK777.COM


free ebooks ==> www.ebook777.com

CHAPTER 1

A LOOK AT MOBILE AND
ITS MAIN PLAYERS

Apple may have popularized the use of smartphones
and tablets, but a number of other companies
followed its path and moved quickly to get in on
this latest digital revolution. Now the marketplace
is filled with hardware manufacturers and
platforms. In this chapter, you’ll find an overview of
introductory topics that will be crucial to understand
as you begin designing for iPhone, Android, and
other mobile platforms.
You’ll also find a brief history of mobile app
design and information about how this industry
grew. As a designer, you’ll need to understand the
past in order to successfully design for the future.

www.it-ebooks.info
WWW.EBOOK777.COM


free ebooks ==> www.ebook777.com

2

CHAPTER 1

A LOOK AT MOBILE AND ITS MAIN PLAYERS

The Field of Interface Design
There once was a very dark time in the world of mobile computing: a time when we navigated
phones using small arrow keys or a rough scroll ball, a time when a calculator and an alarm
clock were considered advanced features on a device that primarily made calls and sent text
messages, a time when the most advanced game a phone could run involved a rectangular
“snake” chasing after pixelized “fruit.”
But in the late 2000s, a combination of two companies, touch-screen technology, and one ad
campaign changed all of that.
Just a few years after Apple touted in print and television advertising that “there’s an app for
that,” asserting that there was a way to accomplish anything you wanted to on the iPhone, it
seems that there has become an application for any task our hearts desire to perform. Yet, there
can’t be an app for everything already; otherwise, you wouldn’t be looking to jump into the
world of mobile development.
Today, smartphones function as portable computers that respond to our every touch and that
come equipped with a digital marketplace flush with programs for every imaginable purpose.
In just a few short years, the world of mobile computing has gotten noticeably brighter.
Now there are a host of companies competing for consumers’ mobile device dollars and even
more companies competing for consumers’ mobile application dollars. If you’re reading this
book, you’re most likely a developer, designer, or project manager working in mobile, and you’re
looking to gain a better understanding of interface and interaction design on a mobile phone.
Over the course of this book, we hope to be able to lend a hand by explaining many of the most
difficult problems that pop up in mobile interaction design. We’ll offer in-depth analysis of the
differences between mobile and traditional computing, the tools needed to optimize design, how
to develop a visually attractive design, the best methods of gaining feedback, and much more.

If you’re not a programmer or technically minded, fear not; this book is intended for everyone.
The topics discussed—including theoretically optimal interaction design and operating-systemagnostic interface implementations—should be helpful regardless of the platform you’re using.
This book may be most helpful for people who have some experience with general software
design, perhaps on the Web or traditional desktop computers, and are now looking to learn
how they can best apply their skills to mobile devices. If you’ve never worked in software
before, though, don’t fret; everything in this book is served up for easy digestion. Likewise, if
you’re a grizzled mobile veteran there are also a ton of tips and tricks you should find handy.
As with many technical volumes, this content is not necessarily designed to be consumed in a
linear fashion. If only one or two chapters seem most applicable to your next app development
project, feel free to skip ahead and take in the relevant pieces as you see fit.

www.it-ebooks.info
WWW.EBOOK777.COM