Android Design Patterns - Greg Nudelman - ebook

Android Design Patterns ebook

Greg Nudelman

0,0
129,99 zł

Opis

Master the challenges of Android user interface development with these sample patterns With Android 4, Google brings the full power of its Android OS to both smartphone and tablet computing. Designing effective user interfaces that work on multiple Android devices is extremely challenging. This book provides more than 75 patterns that you can use to create versatile user interfaces for both smartphones and tablets, saving countless hours of development time. Patterns cover the most common and yet difficult types of user interactions, and each is supported with richly illustrated, step-by-step instructions. * Includes sample patterns for welcome and home screens, searches, sorting and filtering, data entry, navigation, images and thumbnails, interacting with the environment and networks, and more * Features tablet-specific patterns and patterns for avoiding results you don't want * Illustrated, step-by-step instructions describe what the pattern is, how it works, when and why to use it, and related patterns and anti-patterns * A companion website offers additional content and a forum for interaction Android Design Patterns: Interaction Design Solutions for Developers provides extremely useful tools for developers who want to take advantage of the booming Android app development market.

Ebooka przeczytasz w aplikacjach Legimi na:

Androidzie
iOS
czytnikach certyfikowanych
przez Legimi
Windows
10
Windows
Phone

Liczba stron: 520




Table of Contents

Cover

Title

Copyright

Dedication

About the Author

Credits

Acknowledgments

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

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

End User License Agreement

List of Illustrations

Chapter 1: Design for Android: A Case Study

Figure 1-1: The Yelp and Twitter launch icons have distinctive shapes.

Figure 1-2: The initial AutoTrader launch icon isn’t distinctive, so here’s a redesigned icon.

Figure 1-3: The AutoTrader app emphasizes the useless Settings function in the home screen design.

Figure 1-4: The AutoTrader app places essential functions in the old-style navigation bar menu, which is an antipattern.

Figure 1-5: Version 1 is a straightforward port to Android 4.0 with settings and actions in the overflow menu.

Figure 1-6: In Version 2, the more useful functions are on the top action bar and settings have been moved to the overflow menu.

Figure 1-7: The Google Plus app design uses a Drawer menu that includes both text and icons.

Figure 1-8: Version 3 is the recommended design for the AutoTrader app: a top-level redesign that uses a Drawer menu.

Figure 1-9: The top shows the tabs in the AutoTrader app before a suggested redesign; the bottom is the suggested Android 4.0 treatment.

Figure 1-10: The top shows the link to the Dedicated Selection Page before redesign; the bottom is the suggested Android 4.0 treatment.

Figure 1-11: The AutoTrader app uses an iOS-style form for selecting the year and price.

Figure 1-12: The redesign uses native Android wheel controls and a section header.

Figure 1-13: The current AutoTrader buttons are shown at the top; the redesign is in the middle; and an alternative of Android “tap areas” is at the bottom.

Figure 1-14: This is what the search screen looks like before redesign.

Figure 1-15: This is Version 1 of the redesigned AutoTrader app search screen with Title Bar.

Figure 1-16: Recommended Version 2 of the AutoTrader app search screen redesign adds a Sort view selector.

Figure 1-17: This is what the original AutoTrader app Result Detail screen looks like before redesign.

Figure 1-18: The Gmail app uses the Swipe Views control in the Result Detail screen.

Figure 1-19: This is how you can redesign the AutoTrader detail page.

Figure 1-20: This is what the three AutoTrader screens look like before redesign.

Figure 1-21: The three AutoTrader screens redesigned for Android 4.0.

Chapter 2: What Makes Android Different

Figure 2-1: Compare the two Messaging apps from iOS and Android 4.0.

Figure 2-2: Compare the semitransparent menus of Android 4.0 in the Google Earth app to the physicality of iOS menus in the iPhone app.

Figure 2-3: Compare table rows in Android 4.0 and iOS.

Figure 2-4: Compare the Android tap-worthy areas to the iOS beveled buttons.

Figure 2-5: This example from the AutoTrader app demonstrates how the hardware menu functions for Android 2.3 and older hide essential functions.

Figure 2-6: The Gmail app has an action bar at the top and a split action bar at the bottom.

Figure 2-7: In the Gmail app on smaller screens, extra functions move to the overflow menu.

Figure 2-8: The Google Plus app uses icons and text in the Drawer menu.

Figure 2-9: The iOS Settings app demonstrates emphasis in iOS on UI containers.

Figure 2-10: Windows Modern UI Settings app demonstrates the sweeping backgrounds and titles in a Panorama control.

Figure 2-11: The Android 4.0 Settings screen uses simple headers instead of containers to promote page flow.

Figure 2-12: The Amazon.com app uses the iOS tab bar to make global navigation accessible throughout the app.

Figure 2-13: Older Android apps have a global menu in the navigation bar as in the Amazon.com app.

Figure 2-14: The Gmail app’s List view shows global actions.

Figure 2-15: The Gmail app’s detail view shows contextual actions instead of the global menu.

Figure 2-16: Compare the Android title header on the left with the back button and screen title in iOS on the right.

Figure 2-17: Compare the Android 4.0 action bar from the Photo Gallery app on the left to the Android 2.3 breadcrumb on the right.

Chapter 3: Android Fragmentation

Figure 3-1: Compact Phone Kyocera Milano is used to demonstrate the right-hand grip hot zone for the touch screen.

Figure 3-2: This is the hot zone for a right-hand grip on a full-size mobile phone, Samsung Galaxy SIII.

Figure 3-3: The Samsung Galaxy Note’s limited one-handed hot zone forces the customer to use a two-handed grip.

Figure 3-4: The 7-inch Samsung Galaxy Tab 2 is an example of a small tablet device.

Figure 3-5: Small tablets dictate different hot zones for one-handed vertical, two-handed vertical, and two handed horizontal orientations.

Figure 3-6: Large tablets such as the 10-inch Samsung Galaxy Tab 2 offer unique design challenges.

Figure 3-7: These are the hot zones for a large tablet in a two-handed grip in vertical and horizontal orientations.

Chapter 4: Mobile Design Process

Figure 4-1: This is the storyboard for the ThirstyPocket app selling process.

Figure 4-2: Using a pack of sticky notes to simulate a phone is an effective, lightweight prototyping technique.

Figure 4-3: This is the mobile design prototype for early testing that I created using sticky notes.

Chapter 5: Welcome Experience

Figure 5-1: The Chase app includes the EULA antipattern.

Figure 5-2: There is no EULA on the Chase mobile website.

Figure 5-3: When things go wrong during registration in the US Bank app, the customer experiences the Contact Us Impediments antipattern.

Figure 5-4: The Contact Us Impediments antipattern is expressed as a long form in the Kodak app.

Figure 5-5: This registration failure is a Sign Up/Sign In antipattern in the SitOrSquat app.

Figure 5-6: Behold the glory of the Complete Sign Up/Sign In antipattern in the SitOrSquat app.

Figure 5-7: This lavish boot animation variant of the Welcome Animation is on the Galaxy Nexus.

Figure 5-8: The Priceline iPhone app includes a creative implementation of the Welcome Animation.

Figure 5-9: This excellent integrated Tutorial pattern is from the game N.O.V.A.

Figure 5-10: This is how the Flipboard app implements the Tutorial pattern using a Watermark.

Figure 5-11: This wireframe shows a row-level integrated Tutorial in the search results of the Pet Shop app.

Chapter 6: Home Screen

Figure 6-1: The Travelocity app uses a typical List of Links pattern.

Figure 6-2: Google Plus List of Links tells more of the story.

Figure 6-3: The Southwest Airlines app shows a grouped variation of the List of Links pattern.

Figure 6-4: The List of Links pattern supports multiple IAs.

Figure 6-5: The Mint app is an excellent example of the Dashboard pattern.

Figure 6-6: Use the Pet Shop app Dashboard pattern to keep track of Fido.

Figure 6-7: The Facebook app’s implementation of the Updates home screen pattern is excellent.

Figure 6-8: This wireframe presents an alternative approach to mixed media: the two-sectioned Updates pattern in the Pet Shop app.

Figure 6-9: The Amazon.com app includes a decent example of the Browse pattern.

Figure 6-10: The Newegg app has a better implementation of the Browse pattern.

Figure 6-11: This wireframe shows a gallery of pets on the home screen of the Pet Shop app using the Browse pattern.

Figure 6-12: The Google Maps app makes excellent use of the Map pattern.

Figure 6-13: Compare the Map pattern implementation in the SitOrSquat app (on left) and the Trulia app (on right).

Figure 6-14: This is a suggested implementation of the Map pattern in the Pet Shop app home screen.

Figure 6-15: The initial SitOrSquat Map pattern zooms too close.

Figure 6-16: The Android Global Search app has an excellent History pattern homepage.

Figure 6-17: The disappointing Priceline app homepage doesn’t include the History pattern.

Figure 6-18: The Trulia app forces an explicit save and login instead of adding to on-board app History.

Figure 6-19: The Pet Shop app History pattern home screen with local Updates is highly effective.

Chapter 7: Search

Figure 7-1: Google’s native Voice Search in Android 4.0 is straightforward.

Figure 7-2: Adding the Voice Search pattern to the Yelp app would be easy from the UI standpoint.

Figure 7-3: Siri responds to a Voice Search query: “I need to hide a body.”

Figure 7-4: The Auto-Complete and Auto-Suggest patterns work in tandem in Android 4.0 Native Search.

Figure 7-5: This wireframe is for a useful combination of Auto-Complete and Auto-Suggest in the Pet Shop App.

Figure 7-6: The Android 4.0 Native Search includes an implementation of the Tap-Ahead pattern.

Figure 7-7: The Pull to Refresh pattern was popularized in the Twitter app.

Figure 7-8: The Amazon app uses the Search from Menu pattern.

Figure 7-9: See the Search from Menu with previous searches in the Pet Shop app.

Figure 7-10: The Google Plus app uses the Search from Action Bar pattern at the top of the app.

Figure 7-12: Check out the Search from Action Bar in the Pet Shop app.

Figure 7-11: The Android Messaging app includes the Search from Action Bar pattern in the split action bar at the bottom of the screen.

Figure 7-13: The Yelp app includes a good example of the Dedicated Search pattern.

Figure 7-14: This is how the Dedicated Search pattern looks when used in the Pet Shop app.

Figure 7-15: This is how the Twitter app uses the Search in the Content Page pattern.

Figure 7-16: The Search in the Content Page pattern appears in the Pet News section of the Pet Shop app.

Figure 7-17: There’s an awkward separation of keyword search from the rest of the search refinements in this antipattern from TheFind.

Figure 7-18: In this antipattern there are two slightly different places for a keyword search in TheFind homepage and dedicated search page.

Chapter 8: Sorting and Filtering

Figure 8-1: The Amazon app includes an example of the Crippled Refinement antipattern.

Figure 8-2: Here’s a battery of filters and sort options in the Amazon.com desktop web.

Figure 8-3: The Amazon mobile app does not support multistep refinement.

Figure 8-4: The eBay app is an excellent example of a Refinement Page pattern.

Figure 8-5: One uncommon refinement in the eBay app is the use of multiple select check boxes.

Figure 8-6: This is an example of drill-down refinement.

Figure 8-7: The eBay app provides both search refinement and sort in the same Refine page.

Figure 8-8: The Refinement Page pattern in the eBay app offers distance-based refinement.

Figure 8-9: The Refinement Page Lightbox in the Yelp app is a good implementation of the pattern.

Figure 8-10: The Kayak app includes separate Sort and Filter refinement controls.

Figure 8-11: The Yelp app uses the Filter Strip pattern when refinements are made to a search.

Figure 8-12: In the Yelp iOS app, the Filter Strip is semi-transparent.

Figure 8-13: Filter Strip and Refinement Lightbox play well together in the Pet Shop app.

Figure 8-14: The Yelp app is an excellent example of Parallel Architecture.

Figure 8-15: The Parallel Architecture pattern provides multiple convenient engagement levels in the Pet Shop app.

Figure 8-16: Accessing local search from the home screen in the TripAdvisor app is more complicated than it should be.

Figure 8-17: Accessing local search from the App bar in the TripAdvisor app results in a different interface and refinement options.

Figure 8-18: Accessing local search from the menu in the TripAdvisor app catapults the user to the “Eat” tab.

Figure 8-19: The Tabs pattern is used in the Android 4.0 Wikitude app.

Figure 8-20: This is how the Tabs pattern was used in a previous version of the Wikitude app.

Figure 8-21: This is a proposed wireframe of the Tabs treatment for the Wikitude app.

Figure 8-22: The Tabs pattern finds an effective application in the Google Play app.

Figure 8-23: Tabs are used to show various views in the Pet Shop App.

Figure 8-24: Here Tabs are used to show various sort orders in the Pet Shop App.

Figure 8-25: The Yelp app includes a dedicated Map/List button for switching views.

Figure 8-26: Yelp’s AR view is separate from the List and Map views.

Chapter 9: Avoiding Missing and Undesirable Results

Figure 9-1: The Yelp app includes an example of the Ignoring Visibility of System Status antipattern.

Figure 9-2: The Lack of Interface Efficiency antipattern is evident in the Target app.

Figure 9-3: The TripAdvisor app demonstrates the Useless Controls antipattern.

Figure 9-4: The Booking.com app includes a creative implementation of the Did You Mean? pattern.

Figure 9-5: Amazon.com's mobile website includes an excellent example of the Partial Match pattern.

Figure 9-6: The Partial Match pattern is missing in the Amazon.com app.

Figure 9-7: The Basic Local Results pattern assists with missing results recovery in the Target app.

Figure 9-8: The Local Results pattern is used as the default Around Me tab in the Booking.com app.

Figure 9-9: The Did You Mean?, Partial Match, and Local Results patterns work together in the Pet Shop app.

Chapter 10: Data Entry

Figure 10-1: The Trulia app uses a dual slider.

Figure 10-2: The Zillow app uses two single sliders.

Figure 10-3: Each mark on the axis represents an equal absolute change in value on a linear price Slider.

Figure 10-4: A linear price Slider with Histogram pattern provides more information.

Figure 10-5: The alternative price slider is based on the inventory counts.

Figure 10-6: The continuous price slider fails to dial a reasonable hotel price in Los Angeles on the Kayak app.

Figure 10-7: The Kayak app makes excellent use of the Stepper pattern.

Figure 10-8: The Peapod app uses Stepper as a row-level auto-submit control.

Figure 10-9: When the customer taps the center of the custom Stepper pattern implementation in the Peapod app, the numeric keyboard lightbox opens.

Figure 10-10: This wireframe shows the use of the custom Stepper pattern implementation as a row-level, auto-submit control in the Pet Shop app.

Figure 10-11: This is a simplified dial-a-number lightbox design.

Figure 10-12: The Kayak app includes an excellent implementation of a scrolling calendar.

Figure 10-13: The Kayak app places the scrolling calendar too far from the edge on tablets.

Figure 10-14: This is an antipattern. The Kayak app resets an incorrect end date silently, without any messaging.

Figure 10-15: This is the Google Calendar app’s reference implementation of the Date picker in the Date and Time Wheel pattern.

Figure 10-16: Here’s the Time picker lightbox of the Date and Time Wheel in the Google Calendar app.

Figure 10-17: This is the implementation of the Date and Time Wheel pattern in the Google Calendar app on Android 2.3.

Figure 10-18: The Alarm Clock Xtreme app uses the Android Picker widget.

Figure 10-19: Android 4.0 includes the Wheelie mode in the Date and Time Picker lightbox, as shown in the Google Calendar app.

Figure 10-20: This Combination Wheel Date and Time Picker control is from the Pocket Informant iPhone app.

Figure 10-21: This wireframe shows a Combination Wheel Date and Time Picker for the Pet Shop app.

Figure 10-22: This experimental pattern of Dual Combo Wheels would enable the user to set to and from times and dates in one shot.

Figure 10-23: This is how the Calendar Android date wheel is implemented on a Galaxy Tab 2 7-inch tablet.

Figure 10-24: You can type the date directly into the Calendar Android date wheel on a Galaxy Tab 2 7-inch tablet.

Figure 10-25: This is an antipattern; the Google Calendar app simply swallows date entry errors.

Figure 10-26: The Trulia app includes a typical Drop Down implementation.

Figure 10-27: The Zillow app implements the Drop Down pattern a little differently.

Figure 10-28: The Calendar app includes an implementation of the Drop Down Combination control with pictorial and text values.

Figure 10-29: Check out the Pet Shop app implementation of the Select control with pictorial and text values.

Figure 10-30: This is the Drop Down implementation of the Multiple Select pattern in the Contacts app.

Figure 10-31: The Gallery variation of the Multiple Select pattern is in use in the Photo Gallery app.

Figure 10-32: Another variation of the Drop Down Multiple Select pattern is being able to add a new value in the Contact app.

Figure 10-33: Using a Gallery Multiple Select in the Pets list of the Pet Shop app might look like this.

Figure 10-34: This typical textbox implementation is in the Contacts app.

Figure 10-35: The Extract Text Input variation is displayed when a device is in the horizontal orientation.

Figure 10-36: This is how a textbox implementation looks in the Calendar app on the 7-inch Galaxy Tab 2 running Android 4.0.

Figure 10-37: The Next and Done buttons appear on textboxes in the Calendar app.

Figure 10-38: In Google Calendar, the keyboard for a long description field remains on the screen even while the focus shifts to other controls.

Figure 10-39: In Google Calendar, Done buttons in landscape and portrait perform diametrically opposite functions.

Figure 10-40: In the Contacts app, the single text entry lightbox is launched without the keyboard and focus shifts randomly.

Figure 10-41: The Name field label acts as a kind of input mask.

Figure 10-42: Implicit input masks launch various types of mobile soft keyboards.

Figure 10-43: The Kayak app uses explicit input masks.

Figure 10-44: This experimental pattern puts a static input mask inside the Android 4.0-Style phone number field.

Figure 10-45: This wireframe for the Pet Shop app demonstrates implied and static input mask patterns.

Figure 10-46: This antipattern in the native Calendar app on the Galaxy Tab 2 uses a loose dynamic input mask.

Figure 10-47: It’s an antipattern for a strict dynamic input mask to remove characters as they are typed.

Figure 10-48: Disabling Keyboard Keys is an antipattern.

Figure 10-49: The textbox with Atomic Entities pattern works well for adding Contacts to a Calendar Invite.

Figure 10-50: Adding a dog breed using the textbox with the Atomic Entity pattern is quick and intuitive.

Chapter 11: Forms

Figure 11-1: This implementation of the Inline Error Message pattern is from the Calendar app.

Figure 11-2: The Inline Error Message pattern in the eBay app uses two ways to alert the customer of issues.

Figure 11-3: This proposed wireframe provides an alternative implementation (the Toast Alert) of the eBay app's Inline Error Message.

Figure 11-4: This wireframe of the Inline Error Message pattern is for the Pet Shop app user registration form.

Figure 11-5: The Inline Error Message pattern in the eBay app registration form works even better on a 7-inch Galaxy Tab 2 with Android 4.0.

Figure 11-6: These proposed wireframes of the Inline Error Message pattern in the eBay app registration form provide extra field-level help information.

Figure 11-7: The Trulia (left) and Kayak (right) apps use the Toast Alert to indicate a weak network signal.

Figure 11-8: The “Traditional” Toast Alert comes up on the bottom of the page in the LinkedIn app.

Figure 11-9: The Amazon Fresh app's confirmation Toast Alert displays on the top of the page.

Figure 11-10: The Alternative Confirmation Toast Alert drops down over the top of the search results in the Pet Shop app.

Figure 11-11: Here is the Welcome Toast Alert on the top of the page in the N.O.V.A. Game app on a tablet.

Figure 11-12: This long and complicated Peapod app Toast Alert that requires customer action is an antipattern.

Figure 11-13: The Mailchimp app includes a typical Pop-up Alert with three buttons.

Figure 11-14: This system Pop-up Alert warns about a low battery.

Figure 11-15: You can use the Pop-up Alert as a Welcome tutorial this example from the Maps app.

Figure 11-16: The Google Plus app uses the Pop-up Alert pattern for the terms and conditions.

Figure 11-17: The Pop-up Alert is used as a reminder to register in the Pet Shop app.

Figure 11-18: The terms and conditions in the eBay app on a 7-inch Galaxy Tab 2 display as a Pop-up Alert.

Figure 11-19: The Pop-up Alert can be an antipattern if it shows a no results condition as it does in the Booking.com app.

Figure 11-20: This Pop-up Alert antipattern shows the Date and Time Wheel input errors in the Booking.com app.

Figure 11-21: In the Pop-up Alert Legion antipattern, multiple Pop-up Alerts show form input errors one at a time in the Yelp app.

Figure 11-22: The Twitter app includes an excellent implementation of the Callback Validation pattern.

Figure 11-23: The Pet Shop app sports Callback Validation with auto-suggestions.

Figure 11-24: This reference implementation of the Cancel/OK pattern is from the Calendar app.

Figure 11-25: This second reference implementation of the Cancel/OK pattern is shown in lightboxes from the Calendar (left) and Contacts (right) apps.

Figure 11-26: This form (with buttons at the bottom) from the Trulia app is a great alternative Cancel/OK implementation .

Figure 11-27: A sole Done button is on the left side of the screen in the Contacts app.

Figure 11-28: A sole OK button spans the width of the screen on the Kayak search form.

Figure 11-29: The Contacts app uses a smaller sole Add Another Field button in the middle of the screen.

Figure 11-30: The Calendar app includes a good placement of the Cancel/OK button group on the top-right edge in the Samsung 7-inch tablet; although, the buttons are reversed.

Figure 11-31: The haphazard placement of the action buttons in the Calendar app on a 7-inch Samsung Galaxy Tab is an antipattern.

Figure 11-32: If the Sign Up button was disabled in this Yelp form, the customer may never find out that the Picture field is required.

Figure 11-33: Antipattern: Cancel and OK look the same in the Kayak app refine screen.

Figure 11-34: The Calendar app implements the Top-Aligned Labels pattern.

Figure 11-35: The eBay app uses a device-agnostic style for the Top-Aligned Labels pattern.

Figure 11-36: The left-aligned labels in the Southwest app limit the visible portion of the field.

Figure 11-37: The in-field labels in the PayPal app make it hard to tell what field is being filled out.

Figure 11-38: In this implementation, the Top-Aligned Labels pattern is used to label a group of Events fields in the Contacts app.

Figure 11-39: Top-aligned labels limit vertical space for tablets in the horizontal orientation.

Figure 11-40: In this experimental pattern, labels adjust to optimize space based on the tablet's orientation.

Figure 11-41: A group label takes up 36 pixels of vertical space.

Figure 11-42: Using group labels for nongroup fields is an antipattern in the Contacts app.

Figure 11-43: Gestures are used as input in the Angry Birds game.

Figure 11-44: Map gestures are input in the Trulia app.

Figure 11-45: Gesture Search uses sophisticated gestural form input.

Figure 11-46: The Yelp app makes effective use of location-based form input.

Figure 11-47: The Red Laser QR code reader is in action reading a business card with a URL payload.

Figure 11-48: Amazon Remembers uses simple pictures as form inputs.

Figure 11-49: Yelp’s Monocle demonstrates the effective use of location, accelerometer, and video form inputs.

Figure 11-50: YCard uses image form input in combination with Mechanical Turk services.

Figure 11-51: The pet registration form uses image as input in combination with a Mechanical Turk service.

Figure 11-52: The Maps app includes an excellent auto-suggest layer Input Accelerator.

Figure 11-53: This experimental form of the Input Accelerator pattern uses a drop-down in the Pet Shop app's travel date inputs.

Figure 11-54: The Maps app shares Input Accelerator values across devices.

Figure 11-55: The width of the auto-suggest Input Accelerator is too small to accommodate most values in the vertical orientation.

Chapter 12: Mobile Banking

Figure 12-1: The Chase mobile banking app uses two-factor authentication.

Figure 12-2: The Login Accelerator in the Chase app saves the User ID.

Figure 12-3: The USAA banking app uses a Login Accelerator with a four-digit pin called Quick Logon.

Figure 12-4: After the initial setup, the Login Accelerator in the USAA Banking app allows customers to login quickly.

Figure 12-5: The Login Accelerator pattern in Android 4.0 Nexus uses facial recognition.

Figure 12-6: A lack of login accelerators in Yahoo! Mail makes it tedious and hard to use.

Figure 12-7: This experimental form of the Login Accelerator pattern could be used as a voice recognition password in the Pet Shop Bank app.

Figure 12-8: Don’t forget to provide back-door access.

Figure 12-9: The Chase mobile banking app includes a Dedicated Selection Page for bill pay recipients.

Figure 12-10: Dedicated Selection Page with a search box is used for me-to-me account transfers in the Pet Shop Bank app.

Figure 12-11: The Chase app uses a simple Select for the From account in the Bill Pay flow.

Figure 12-12: The USAA mobile banking app uses the Form First pattern for me-to-me transfers.

Figure 12-13: These wireframes show the Form First me-to-me transfer in the Pet Shop Bank app.

Figure 12-14: The extraction of text fields turns them into Dedicated Pages, but this pattern breaks when it encounters a Select control in the Calendar app.

Figure 12-15: The PayPal app’s Send Money function on the Apple iPhone uses the Dedicated Pages Wizard Flow.

Figure 12-16: The form for creating a Google ID has a common (non-dedicated) wizard flow.

Figure 12-17: This wireframe shows the tightly efficient Dedicated Pages Wizard Flow pattern for a me-to-me transfer in the Pet Shop Bank app.

Figure 12-18: The Chase app Bill Pay feature uses the Wizard Flow with Form pattern.

Figure 12-19: This wireframe for the me-to-me transfer uses the Wizard Flow with Form in the Pet Shop Bank app.

Figure 12-20: It’s an antipattern to use a Next keyboard button that goes to a nonrequired Memo field in high-stakes flows.

Figure 12-21: In this proposed fix for the flow in Figure 12-20, the Done keyboard button closes the keyboard and places the highlight on the Next button.

Figure 12-22: This is how the Verification-Confirmation pattern looks in the Chase app Bill Pay flow.

Figure 12-23: The confirmation implemented as a lightbox in the PayPal app returns the customer to the beginning of the flow.

Figure 12-24: The Amazon.com app’s checkout process is an excellent example of the Verification-Confirmation pattern.

Figure 12-25: Google Mobile Wallet uses the NFC pattern.

Figure 12-26: NFC Google Mobile Wallet maintains security through a four-digit login PIN.

Figure 12-27: To see which credit card is selected for payment, a Google Wallet customer needs to drill down to the Payment Cards screen.

Figure 12-29: The Pet Shop Bank app Mobile Wallet solves some current UX issues.

Figure 12-28: The NFC-enabled QR Code tag combines the QR Code with NFC technology.

Figure 12-29: The Pet Shop Bank app Mobile Wallet solves some current UX issues.

Chapter 13: Navigation

Figure 13-1: This example of the Pogosticking antipattern is from the TripAdvisor app.

Figure 13-2: This is Yelp’s solution to the Pogosticking antipattern.

Figure 13-3: There’s a lot going on in the Multiple Featured Areas antipattern in the NewEgg app.

Figure 13-4: The Multiple Featured Areas antipattern in the Amazon.com app is hidden under Gold Box.

Figure 13-5: The Amazon.com app features an excellent example of the Carousel pattern on the home screen.

Figure 13-6: The Carousel pattern in the Amazon.com app adjusts to various screen sizes and works even better in the horizontal orientation.

Figure 13-7: The See More link in the Carousel pattern navigates to the featured search results.

Figure 13-8: The NewEgg Carousel has a few issues.

Figure 13-9: Amazon.com’s Carousel sometimes omits the thumbnails.

Figure 13-10: LinkedIn app uses the Popover Menu pattern for navigation.

Figure 13-11: The Popover Menu pattern is used for selecting a search domain in the Wapedia app.

Figure 13-12: The Popover Menu pattern is used to expand row-level functions in the Fandango app.

Figure 13-13: The Twitter app uses a tap-and-hold overlay menu variant to expand row-level functions.

Figure 13-14: The tap-and-hold overlay menu variant expands row-level functions in the Pet Shop app.

Figure 13-15: An antipattern occurs in the LinkedIn app where it strongly deprecates the Android device menu in favor of the popover menu.

Figure 13-16: This antipattern in the Wapedia app popover mixes filtering with navigation.

Figure 13-17: The Google Plus app divides and conquers navigation and functionality with two popover menus.

Figure 13-18: Here the Watermark pattern is demonstrating in-game gestures in the Major Mayhem app.

Figure 13-19: The Watermark pattern demonstrates the shaking action for accessing filtering and sorting in the Pet Shop app.

Figure 13-20: The Watermark pattern in this case demonstrates drawing a circle to access filtering and sorting in the Pet Shop app.

Figure 13-21: Microsoft’s Clippy was possibly the most universally hated contextual tutorial agent of all time.

Figure 13-22: Urban Spoon provides back-door access to its shaking gesture.

Figure 13-23: The Angry Birds app is an excellent model of an immersive experience with its semi-transparent button and window shade menu.

Figure 13-24: Here’s the Swiss-Army-Knife Navigation in the Wells Fargo app.

Figure 13-25: The Facebook app uses excellent Swiss-Army-Knife Navigation.

Figure 13-26: Swiss-Army-Knife Navigation in the Photo Gallery app uses a single tap in the middle of the screen instead of a button.

Figure 13-27: The Swiss-Army-Knife Navigation pattern is used to bring up the Android Notifications screen.

Figure 13-28: These novel multitouch gestures are from Epic’s Infinity Blade game.

Figure 13-29: The Google Maps and Google Earth apps use semitransparent action bars.

Figure 13-30: The Pet Shop App uses the four-corners Swiss-Army-Knife Navigation variant.

Figure 13-31: The Facebook app uses a Three-Corner Swiss-Army-Knife Navigation pattern.

Figure 13-32: The Foursquare app uses a process-driven integration with Google Maps.

Figure 13-33: It’s an antipattern that Foursquare and Twitter widgets can’t be integrated on a single homepage screen.

Figure 13-34: The Foursquare app on Windows Phone uses this Panorama Control.

Figure 13-35: The coordinates-driven process-driven integration of Yelp and Google Maps has serious drawbacks.

Figure 13-36: “Captured” Bing maps do not offer directions in the Kayak app.

Figure 13-37: On Kayak, all integration points except Maps fail to find the target or provide directions.

Chapter 14: Tablet Patterns

Figure 14-1: The Fragments pattern in the Google Play app forms a single column on a 7-inch tablet in the vertical orientation

Figure 14-2: The Fragments pattern in the Google Play app forms two columns on a 7-inch table in a horizontal orientation.

Figure 14-3: The Settings app shows an excellent Compound View implementation.

Figure 14-4: The Ustream app does not allow the Categories list to be accessed in a vertical view, which is an antipattern.

Figure 14-5: The Plume app includes a decent implementation of the Side Navigation as a Drawer pattern.

Figure 14-6: An excellent implementation of the Side Navigation pattern is available on the Twitter iPad app.

Figure 14-7: This proposed wireframe shows an alternative design of the Plume categories with icons that can slide out to a full menu.

Figure 14-8: The Flipboard app provides an excellent implementation of the Content as Navigation pattern.

Figure 14-9: Playful content as navigation is implemented in the News 360 app.

Figure 14-10: Complex multitouch gestures are used to manipulate the real-world content directly in the Google Earth app.

Figure 14-11: The Netflix app includes an excellent 2-D More Like This pattern implementation.

Figure 14-12: This elegant 2-D More Like This pattern implementation with a menu drawer is from the Pulse app.

Figure 14-13: This wireframe shows a redesign of the Flipboard app with a C-Swipe menu.

Guide

Cover

Table of Contents

Begin Reading

Pages

Cover

Contents

iii

iv

ix

v

vii

viii

xi

xix

xxi

xxii

xxiii

xxiv

xxv

xxvi

xxvii

1

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

373

374

375

376

377

378

379

380

381

382

383

384

385

386

387

388

389

391

392

393

394

395

396

397

398

399

400

401

402

403

404

405

406

407

408

409

410

411

Android™ Design Patterns

INTERACTION DESIGN SOLUTIONS FOR DEVELOPERS

Greg Nudelman

Android™ Design Patterns: Interaction Design Solutions for Developers

Published by

John Wiley & Sons, Inc.

10475 Crosspoint Boulevard

Indianapolis, IN 46256

www.wiley.com

Copyright © 2013 by John Wiley & Sons, Inc., Indianapolis, Indiana

Published simultaneously in Canada

ISBN: 978-1-118-39415-1

ISBN: 978-1-118-41755-3 (ebk)

ISBN: 978-1-118-43934-0 (ebk)

ISBN: 978-1-118-65058-5 (ebk)

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, scanning or otherwise, except as permitted under Sections 107 or 108 of the 1976 United States Copyright Act, without either the prior written permission of the Publisher, or authorization through payment of the appropriate per-copy fee to the Copyright Clearance Center, 222 Rosewood Drive, Danvers, MA 01923, (978) 750-8400, fax (978) 646-8600. Requests to the Publisher for permission should be addressed to the Permissions Department, John Wiley & Sons, Inc., 111 River Street, Hoboken, NJ 07030, (201) 748-6011, fax (201) 748-6008, or online at http://www.wiley.com/go/permissions.

Limit of Liability/Disclaimer of Warranty: The publisher and the author make no representations or warranties with respect to the accuracy or completeness of the contents of this work and specifically disclaim all warranties, including without limitation warranties of fitness for a particular purpose. No warranty may be created or extended by sales or promotional materials. The advice and strategies contained herein may not be suitable for every situation. This work is sold with the understanding that the publisher is not engaged in rendering legal, accounting, or other professional services. If professional assistance is required, the services of a competent professional person should be sought. Neither the publisher nor the author shall be liable for damages arising herefrom. The fact that an organization or Web site is referred to in this work as a citation and/or a potential source of further information does not mean that the author or the publisher endorses the information the organization or website may provide or recommendations it may make. Further, readers should be aware that Internet websites listed in this work may have changed or disappeared between when this work was written and when it is read.

For general information on our other products and services please contact our Customer Care Department within the United States at (877) 762-2974, outside the United States at (317) 572-3993 or fax (317) 572-4002.

Wiley publishes in a variety of print and electronic formats and by print-on-demand. Some material included with standard print versions of this book may not be included in e-books or in print-on-demand. If this book refers to media such as a CD or DVD that is not included in the version you purchased, you may download this material at http://booksupport.wiley.com. For more information about Wiley products, visit www.wiley.com.

Library of Congress Control Number: 2012956395

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 other countries, and may not be used without written permission. Android is a trademark of Google, Inc. All other trademarks are the property of their respective owners. John Wiley & Sons, Inc. is not associated with any product or vendor mentioned in this book.

For Katie and Juliette: Let your dream be the golden compass you live your life by.

About the Author

Greg Nudelman believes in designing what works. His first experience with designing for mobile came when he joined the SkunkWorks team that created the original eBay mobile app that today generated more than $5 billion in revenue.

For more than 15 years, Greg helped craft cross-platform digital experiences for today’s top Fortune 500 companies, non-profits, and startups: eBay, WebEx, Wells Fargo, Safeway/Vons, Cisco, IBM, Groupon, Associated Press, the U.S. Patent Office, and many others.

Greg is the author of Designing Search: UX Strategies for eCommerce Success (Wiley, 2011), which has a solid 5-star rating on Amazon. The book includes 19 perspectives from today’s top names in search (a fact that Greg is particularly proud of).

Greg has contributed chapters and perspectives to the following publications:

Mobile Design Patterns

(Smashing Media, 2012)

The Mobile Book

(Smashing Media, 2013)

Designing the Search Experience

, Tony Russell-Rose and Tyler Tate (2013, Morgan-Kaufmann)

Search Analytics for Your Site,

Lou Rosenfeld(Rosenfeld Media, 2011)

Greg’s work on storyboarding tablet transitions was featured recently in Rachel Hinman's The Mobile Frontier (Rosenfeld Media, 2012).

Greg has authored more than 30 industry articles on mobile and tablet design and digital design strategy for leading industry magazines: Smashing Magazine, Boxes and Arrows, JavaWorld, ASP.NET Pro, UXmatters, and UXMagazine.

He is a FatDUX, Rosenfeld Media, Wiley, and eConsultancy affiliate and workshop leader, and he has taught design workshops at Marquette University, HULT Business School, Associated Press, and Wells Fargo.

Greg is an internationally acclaimed speaker, with repeated appearances and sold-out workshops at leading industry events such as Adaptive Path’s UXWeek, SXSW, MobX, IA Summit, WebVisions, Design4Mobile, Search Engine Summit, Enterprise Search Summit, Net Squared Conference, DrawCamp, and SketchCamp.

He is a co-founder of the UX SketchCamp movement with the landmark UX SketchCamp SF 2011 event. Greg’s cross-platform design strategy consulting company, DesignCaffeine, Inc., is based in the San Francisco Bay Area.

Credits

Executive Editor

Robert Elliott

 

Project Editor

Charlotte Kughen, The Wordsmithery LLC

 

Technical Editor

Ambrose Little

 

Production Editor

Christine Mugnolo

 

Copy Editor

San Dee Phillips

 

Editorial Manager

Mary Beth Wakefield

 

FreelancerEditorial Manager

Rosemarie Graham

 

Associate Director of Marketing

David Mayhew

 

Marketing Manager

Ashley Zurcher

 

Business Manager

Amy Knies

 

Production Manager

Tim Tate

 

Vice President and Executive Group Publisher

Richard Swadley

 

Vice President and Executive Publisher

Neil Edde

 

Associate Publisher

Jim Minatel

 

Project Coordinator, Cover

Katie Crocker

 

Compositor

Maureen Forys, Happenstance Type-O-Rama

 

Proofreader

Nancy Carrasco

 

Indexer

Johnna VanHoose Dinse

 

Cover Image

Greg Nudelman

 

Cover Designer

Ryan Sneed

Acknowledgments

To anyone who's never written a book it is difficult to imagine the blood, sweat, and tears required to finish one. I wish to acknowledge the generous help of my agent, Neil Salkind of Studio B as well as my fantastic team at Wiley: Charlotte Kughen and Ambrose Little. Any inaccuracies in the book are my own and no fault of theirs. Also, I'd like to thank Robert Elliott, from whose creative mind the idea for this book idea was initially born. I also want to acknowledge generous help provided by Kimberly Johnson, who helped decipher and sort out key Android visual design themes. Last, but definitely not least, I want to thank my family for their strong support and continual tolerance during this time of missed family commitments, forgotten appointments, and general mental fog surrounding the focused time of book writing.

Foreword

The first thing Greg told me when we met was, “You wrote the book I was working on,” referring to the book Mobile Design Pattern Gallery that I had just released with O’Reilly Media (2012). I felt a little guilty at the time, but now I am glad I beat him to it. But not for the reasons you might think.

When I started the pattern gallery, I focused on identifying universal design patterns across the six major mobile platforms. Two years later, the industry is maturing, and only three big players are left, each with their own distinct patterns and principles. Universal patterns are still valuable, but more valuable yet are the deep dives into specific operating systems.

Greg saw this coming and decided to focus on the fastest growing platform, Android, and the most sophisticated release yet, Jelly Bean. His book meets mobile designers and developers where they are most comfortable and expertly guides them towards mastery of mobile user experience.

This book is more of a workshop than a reference book. Greg builds upon the universal design patterns for mobile devices and tablets and the Android UI design guidelines and takes the topic further into hands-on practical applications of the design principles. Each section covers fundamentals, warns of pitfalls and antipatterns, and then puts the lessons to the test by showing in detail how to redesign an existing app. You can and should bring this book to design sessions, and you should share it with your team. You will save countless hours solely from using the patterns in Chapter 7, “Search,” and Chapter 8, “Sorting and Filtering.” By reading and using Greg’s entire book you will tremendously improve all aspects of the mobile experience you will be creating for your customers.

Bottom line, there is no other resource out there that goes to this level of depth on Android application design. I just hope Greg writes a Windows pattern book next.

Enjoy,

Theresa Neil

UX Designer, Start-up Advisor, Author/Speaker

Theresa Neil Interface Designs (www.theresaneil.com)

Introduction

Let me begin by answering some questions about the book you hold in your hands.

Why Mobile Computing?

Jim Rhodes: You're not a soldier.

Tony Stark: Damn right, I'm not—I'm an army.

—Iron Man, Marvel Studios, 2008

Mobile computing is the most game-changing development in human history. You live in the most exciting age—one of almost limitless potential, where your information, idea, product (in short, any meme)can reach virtually every person on the planet in a matter of days, if not minutes. And that is because no other modern technology has the reach and the potential of mobile computing. But simple penetration is not enough. The transformative force of mobile technology comes from the way it cradles people, empowers them to connect easier, make smarter decisions, and frees their minds in their soaring flight to go beyond the mundane.

With the coming of capable touch smartphones, the relationship with technology has shifted to that of intuitive digital assistant, an extra organ with super-human sensors—a true symbiosis that can best be described as a relationship of a Cyborg with his cybernetic components, or that of Tony Stark and his Iron Man suit.

Iron Man is my favorite metaphor because the suit is not a part of Tony, yet when he puts it on, he is one with the device. The Iron Man suit takes Tony’s intention and transmutes it into action, on a grand scale, and without much effort on Tony’s part (that is, without cognitive friction). At the end of the day, the Iron Man is just a man. Yet the power is always inside him, as it is in each of us. It takes this unique symbiosis with technology to truly enable and unleash that incredible power.

The mobile phone is our Iron Man suit. The mobile experience, when executed well, is a cybernetic skeleton. If you design and develop your app skillfully, your customers will feel protected and empowered in a way similar to how Tony Stark feels when he puts on his Iron Man suit.

Why Android?

Anyone following mobile space is aware that in the beginning Android had a few growing pains. (And that’s putting it mildly.) Market fragmentation, overall confusion born out of a lack of focus and standards, and overly frequent updates all bear some of the blame. Yet like a professional prizefighter fueled by massive adrenaline and steroids, Android embraced these challenges head-on and managed to improve and evolve rapidly and grow market share faster than anyone thought possible.

As of this writing, the Android smartphone operating system was found on three out of every four smartphones shipped during the third quarter of 2012 (3Q12). According to the International Data Corporation (IDC) Worldwide Quarterly Mobile Phone Tracker, total Android smartphone shipments worldwide reached 136.0 million units, accounting for 75 percent of the 181.1 million smartphones shipped in the third quarter of 2012. The 91.5 percent year-over-year growth was nearly double the overall market growth rate of 46.4 percent (https://www.idc.com/getdoc.jsp?containerId=prUS23771812). With the release of Android 4.0 Ice Cream Sandwich, Android created a purely digital, business-like demeanor with a powerful core of a set of standards that work on virtually every device, while also dealing a left hook to fragmentation through a set of clever responsive design decisions for the structure of the menu and navigation scheme. All this new serious business sense comes wrapped up in a set of open standards and a well-evolved code base.

In short, in my humble opinion, the state of the Android ecosystem is now the perfect storm combining the factors for explosive near-term growth and long-term market dominance.If you have been working with Apple iOS, Windows Mobile, BlackBerry, and older Android OS, or if this is your first foray into the mobile space, today is the perfect time to look at designing and developing Android 4.0 apps.

Why This Book?

If you want your customers to feel as empowered when using your app as when they put on the Iron Man cybernetic exoskeleton, you need to unlock the patterns behind effective mobile design and apply them to your context. The book in your hands is the key to those patterns. Within these pages is everything you need to succeed in creating a great mobile experience.

Use What Works

This book is about what works: design patterns. A design pattern is a repeatable solution that helps resolve a particular problem within a specific context. But why do you need patterns—isn’t reading the Android design docs enough? What makes design patterns uniquely effective is the way they communicate best practices whileaddressing the complexities involved in real design problems. As Christopher Alexander (the early pioneer of design patterns as formal ideas) says in his book Timeless Way of Building (Oxford University Press, 1979), the patterns make up the vocabulary of a design language that can be used to build things that are whole, complete, and alive (what he calls "the quality without a name").

In addition to helping you build usable apps, design patterns are intensely practical building blocks: they are small and can be learned and understood easily. You can combine patterns to create usable and delightful designs. Finally, patterns form the design language you can use to communicate simply and effectively.

Apply 58 Essential Android App Patterns

In Part 2 of the book, you discover all the patterns you need to create great interaction design and intuitive Information Architecture for your Android 4.0+ apps. There are 58 essential interaction design patterns for dealing with the most challenging aspects of the Android app design: welcome experience, home screen, navigation, search, sorting and filtering, data entry, and forms. The patterns in this book are designed to look beyond the obvious and build on the official Google documentation, allowing you to move smoothly from theory to practical applications. In addition, there are specific chapters covering key design patterns for mobile banking and dealing with the tricky aspects of tablet design.

Avoid Common Pitfalls with 12 Antipatterns

In addition to 58 patterns, there are 12 antipatterns, describing the most common mistakes to avoid in your quest for customer empowerment, delight, and enjoyment. Standalone antipatterns are mobile evolutionary dead-ends you want to steer clear of. Sometimes you also see the same antipattern icon used as part of the regular pattern. These are common pitfalls (lined with spikes on the bottom) that will catch the unwary. Read those carefully—often only a part of the screen or a specific interaction is called out as the antipattern and not the entire screen. The antipatterns and negative examples are marked with the symbol you see in the margin next to this paragraph.

Be Inspired by Innovative Ideas

In addition to helping you build a rock-solid design pattern foundation, this book gives you the confidence and inspiration to move beyond the tried-and-true patterns to create exciting innovative implementations from existing mobile ideas and interface components. You can explore experimental patterns (marked with the symbol you see in the margin next to this paragraph), which stretch the existing ideas and mobile status quo.

In the workshops I teach around the world, people often ask me: “Do experimental patterns work?” To answer this question, let me tell you a short story. In September 2010, I presented a pattern I called Immersive Navigation at Design4Mobile in Chicago. I suggested that the fold-out menu navigation used by games like Angry Birds can and should be adopted to more “serious” mobile applications like e-commerce, news, and social media. Many of those present were skeptical: Would this work? Can you even get these apps past Apple’s stringent guidelines that require the use of the tab bar? To this I replied that the Apple tab bar is merely a set of training wheels, and that I believe the mobile consumer is ready to upgrade to the latest Harley-Davidson, which, at the time, caused quite an uproar.

Less than a year later, Facebook came out with a new fold-out navigation menu on the top-left corner. Other successful apps started using it too; Flipboard, for example, used the same pattern on the top-right corner. Today this pattern, known as the Drawer,is part of the standard Android 4.0 toolkit, and it’s used by apps like Google Plus. I cannot, of course, claim credit for this development. I merely hope that I helped to provide another tiny push in the direction many talented people were already taking.

Mobile design moves at incredible, unprecedented speed. Experimental patterns described in this book are possible near-future design patterns that run slightly outside current mainstream mobile approaches. For those willing to try out new ideas, these experimental patterns represent incredible opportunities to stand out from the 700,000 apps currently available in Google Play, leap-frog the competition, and deliver uniquely engaging mobile experiences (“Google Says 700,000 Applications Available for Android,” Bloomberg Businessweek, 29 October 2012, Retrieved 5 November 2011). But please don’t take my word for it! Instead, I invite you to try out and customer-test the experimental patterns you like, to see if they will work for your particular project. I also invite you to use the ideas in this book as an inspiration to thinking outside the training wheels and building your own