Android Design Patterns: Interaction Design Solutions for Developers

559 Pages·2013·29.61 MB·English

by  Greg Nudelman

Table of Contents
Cover
Part I: UX Principles and Android OS
Considerations
Chapter 1: Design for Android: A Case Study
Launch Icon
Action Bars and Information Architecture
Tabs
Dedicated Selection Page
Select Control
Buttons
Search Results
Result Detail
Bringing It All Together
Chapter 2: What Makes Android Different
Welcome to Flatland
Tap Anywhere
Right-Size for Every Device
Mobile Space, Unbound
Think Globally, Act Locally
Chapter 3: Android Fragmentation
What’s Fragmentation?
Everything Is in Time and Passes Away
Android Device Trends
Celebrate Fragmentation
Chapter 4: Mobile Design Process
Observe Human-Mobile Interaction in the Real World
Your Prototyping Methods Must Allow for Variety in Form
Factors
Your User Testing Must Allow People to Explore the Natural
Range of Motion, Voice, and Multitouch
Touch Interfaces Embody Simplicity and Sophistication
Delight Is Mandatory
Tell a Complete Story—Design for Cross-Channel Experiences
Mobile Design Case Study
Part II: Android Design Patterns and
Antipatterns
Chapter 5: Welcome Experience
5.1 Antipattern: End User License Agreements (EULAs)
5.2 Antipattern: Contact Us Impediments
5.3 Antipattern: Sign Up/Sign In
5.4 Pattern: Welcome Animation
5.5 Pattern: Tutorial
Chapter 6: Home Screen
6.1 Pattern: List of Links
6.2 Pattern: Dashboard
6.3 Pattern: Updates
6.4 Pattern: Browse
6.5 Pattern: Map
6.6 Pattern: History
Chapter 7: Search
7.1 Pattern: Voice Search
7.2 Pattern: Auto-Complete and Auto-Suggest
7.3 Pattern: Tap-Ahead
7.4 Pattern: Pull to Refresh
7.5 Pattern: Search from Menu
7.6 Pattern: Search from Action Bar
7.7 Pattern: Dedicated Search
7.8 Pattern: Search in the Content Page
7.9 Antipattern: Separate Search and Refinement
Chapter 8: Sorting and Filtering
8.1 Antipattern: Crippled Refinement
8.2 Pattern: Refinement Page
8.3 Pattern: Filter Strip
8.4 Pattern: Parallel Architecture
8.5 Pattern: Tabs
Chapter 9: Avoiding Missing and Undesirable Results
9.1 Antipattern: Ignoring Visibility of System Status
9.2 Antipattern: Lack of Interface Efficiency
9.3 Antipattern: Useless Controls
9.4 Pattern: Did You Mean?
9.5 Pattern: Partial Match
9.6 Pattern: Local Results
Chapter 10: Data Entry
10.1 Pattern: Slider
10.2 Pattern: Stepper
10.3 Pattern: Scrolling Calendar
10.4 Pattern: Date and Time Wheel
10.5 Pattern: Drop Down
10.6 Pattern: Multiple Select
10.7 Pattern: Free-Form Text Input and Extract
10.8 Pattern: Textbox with Input Mask
10.9 Pattern: Textbox with Atomic Entities
Chapter 11: Forms
11.1 Pattern: Inline Error Message
11.2 Pattern: Toast Alert
11.3 Pattern: Pop-up Alert
11.4 Pattern: Callback Validation
11.5 Pattern: Cancel/OK
11.6 Pattern: Top-Aligned Labels
11.7 Pattern: Getting Input from the Environment
11.8 Pattern: Input Accelerators
Chapter 12: Mobile Banking
12.1 Pattern: Login Accelerator
12.2 Pattern: Dedicated Selection Page
12.3 Pattern: Form First
12.4 Pattern: Dedicated Pages Wizard Flow
12.5 Pattern: Wizard Flow with Form
12.6 Pattern: Verification-Confirmation
12.7 Pattern: Near Field Communication (NFC)
Chapter 13: Navigation
13.1 Antipattern: Pogosticking
13.2 Antipattern: Multiple Featured Areas
13.3 Pattern: Carousel
13.4 Pattern: Popover Menu
13.5 Pattern: Watermark
13.6 Pattern: Swiss-Army-Knife Navigation
13.7 Pattern: Integration: The Final Frontier
Chapter 14: Tablet Patterns
14.1 Pattern: Fragments
14.2 Pattern: Compound View
14.3 Experimental Pattern: Side Navigation
14.4 Pattern: Content as Navigation/Multitouch Gestures
14.5 Pattern: 2-D More Like This
14.6 Experimental Pattern: C-Swipe
Foreword
Introduction
Why Mobile Computing?
Why Android?
Why This Book?
What About the Code?
How Should You Use This Book?
Who Should Read This Book?

Part I
UX Principles and Android OS
Considerations
Chapter 1 Design for Android: A Case Study
Chapter 2 What Makes Android Different
Chapter 3 Android Fragmentation
Chapter 4 Mobile Design Process
Chapter 1
Design for Android: A Case Study
This book is about what works: design patterns. Design patterns in this book
build on the official Google Android design guidelines by communicating best
practices while addressing the complexities involved in real design problems.
The official Android guidelines (available at
http://developer.android.com/design/get-started/ui-overview.html) form the
foundation; this book shows you how to bring these guidelines to life as
complete solutions to real-world design challenges.
With this chapter, I am laying the foundation for the 58 patterns (and 12
antipatterns) in the book by providing a case study of an app that could benefit
from a more refined design—the AutoTrader app. The appropriate patterns are
referenced in each section of this chapter; feel free to flip to the relevant pages to
explore design solutions in more detail.
The AutoTrader app is a typical example of a straight port, which is to say
that it is basically an iOS app that was quickly and minimally made to work for
Android. The following sections show you how to redesign this app for Android
4.0+ (Ice Cream Sandwich). The entire app isn’t covered because this would be
exceedingly tedious to write (and even more tedious to read). Instead, three
representative screens are discussed: home screen with a search form, the search
results screen, and the item detail screen. These three screens should give you a
good idea of some unique and interesting aspects of the Android visual design
and navigation, and they give you a taste of the interaction design patterns in this
book. Think of this chapter as an appetizer for a rich smorgasbord of practical
solutions waiting for you in Part 2 of the book.
Launch Icon
The first thing to look at is the launch icon. Most apps that do a straight port
from iOS neglect the essential part of redesigning the launch icon. The Android
launch icon design is not bound by the iOS square shape with rounded corners.
Designers are encouraged to give their Android launch icons a distinctive outline
shape. Take a look at the launch icons for Yelp and Twitter in Figure 1-1—these
folks get it.
Figure 1-1: The Yelp and Twitter launch icons have distinctive shapes.
In contrast, AutoTrader, the app for the case study, did not take the time to
customize its icon. Fortunately, this is often a simple modification. In the case of
AutoTrader, one suggested redesign is included in Figure 1-2. You could use the