Essential Mobile Interaction Design: Perfecting Interface Design in Mobile Apps

359 Pages·2014·9.08 MB·English

by  Cameron Banga

About This eBook
ePUB is an open, industry-standard format for eBooks. However, support of
ePUB and its many features varies across reading devices and applications. Use
your device or app settings to customize the presentation to your liking. Settings
that you can customize often include font, font size, single or double column,
landscape or portrait mode, and figures that you can click or tap to enlarge. For
additional information about the settings and features on your reading device or
app, visit the device manufacturer’s Web site.
Many titles include programming code or configuration examples. To
optimize the presentation of these elements, view the eBook in single-column,
landscape mode and adjust the font size to the smallest setting. In addition to
presenting code and configurations in the reflowable text format, we have
included images of the code that mimic the presentation found in the print book;
therefore, where the reflowable format may compromise the presentation of the
code listing, you will see a “Click here to view code image” link. Click the link
to view the print-fidelity code image. To return to the previous page viewed,
click the Back button on your device or app.
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 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
[email protected] or [phone].
For government sales inquiries, please contact
[email protected].
For questions about sales outside the U.S., please contact
[email protected].
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 [phone].
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
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 Editorial Assistant
Olivia Basegio Cover Designer
Chuti Prasertsith Compositor
Shepherd, Inc.
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
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
Contents
Preface
Acknowledgments
About the Authors
1 A Look at Mobile and Its Main Players
The Field of Interface Design
The Dawn of the App
Defining an App in Today’s Context
Build It and They Will Come
What Is a Mobile Device?
A Portable, Pocket Computer
Tablets, Too
Other Devices That Are Part of the Revolution
The Industry’s Key Players
Apple
Google and Android
The Other Players
Distinctions between Platforms
Conclusion
2 Design for Humans, by Humans
What Is Interaction Design?
Goals When Designing an Interface
Designing for Humans
Designed by Humans
Where to Begin
Anticipating Your User Base
Mobile’s Role in User Workflow
Conclusion
3 Dynamic Differences in Mobile Design
Understanding the Role of Mobile
Mobile-Only Interactions
Interactions Only Possible with a Smartphone
Interactions Only Possible with a Tablet
Interactions That Aren’t Possible on Mobile
Keyboards and Data Entry
Click, Tap, Point
Expandability
Universal Appeal
Interaction Experiences for Phones and Tablets
Interaction Experiences for Multiple Platforms
Complementing Traditional Workflows
Conclusion
4 First Sketches of an App
What Tools Do You Need?
Becoming a Designer
Planning for a Specific Platform
Starting with a Workflow
Meeting Design Expectations
Wrapping Up Design Documentation
Creating Pixel-Perfect Digital Mockups
Reiterating Before It’s Too Late
Preparing for the Next Stage
Conclusion
5 Finding the Right Design Flow
The Big Three App Types
Native Apps
Web Apps
Hybrid Apps