You are previewing Mobile Design Pattern Gallery, Color Edition.

Mobile Design Pattern Gallery, Color Edition

Cover of Mobile Design Pattern Gallery, Color Edition by Theresa Neil Published by O'Reilly Media, Inc.
  1. Mobile Design Pattern Gallery
  2. Foreword
  3. Preface
    1. Introduction
    2. Intended Audience for This Book
    3. Safari® Books Online
    4. How to Contact Us
    5. Acknowledgments
  4. 1. Navigation
    1. Primary Navigation Patterns
      1. Springboard
      2. List Menu
      3. Tabs
      4. Gallery
      5. Dashboard
      6. Metaphor
      7. Mega Menu
    2. Secondary Navigation
      1. Page Carousel
      2. Image Carousel
      3. Expanding List
  5. 2. Forms
    1. Sign In
    2. Registration
    3. Checkout
    4. Calculate
    5. Search Form
    6. Multi-Step
    7. Long Form
  6. 3. Tables & Lists
    1. Basic Table
    2. Headerless Table
    3. Fixed Column
    4. Overview plus Data
    5. Grouped Rows
    6. Cascading Lists
    7. Table with Visual Indicators
    8. Editable Table
  7. 4. Search, Sort & Filter
    1. Search
      1. Explicit Search
      2. Search with Auto-Complete
      3. Dynamic Search
      4. Scoped Search
      5. Saved and Recent Searches
      6. Search Form
      7. Search Results/View Results
    2. Sort Patterns
      1. Onscreen Sort
      2. Sort Order Selector
      3. Sort Form
    3. Filter
      1. Onscreen Filter
      2. Filter Drawer
      3. Filter Dialog
      4. Filter Form
  8. 5. Tools
    1. Toolbar
    2. Option Menu
    3. Call to Action Button
    4. Contextual Tools
    5. Inline Actions
    6. Multi-State Button
    7. Bulk Actions
  9. 6. Charts
    1. Chart with Filters
    2. Preview Window
    3. Overview plus Data
    4. Datapoint Details
    5. Drill Down
    6. Zoom
    7. Pivot Table
    8. Sparklines
  10. 7. Invitations
    1. Dialog
    2. Tip
    3. Tour
    4. Video Demo
    5. Transparency
    6. 1st Time Through
    7. Persistent
    8. Discoverable
  11. 8. Feedback & Affordance
    1. Feedback
    2. Error Messages
    3. Confirmation
    4. System Status
    5. Affordance
      1. Tap
      2. Flick
      3. Drag
  12. 9. Help
    1. How To
    2. Cheat Sheet
    3. Tour
  13. 10. Anti-Patterns
    1. Novel Notions Anti-Pattern
    2. Metaphor Mismatch Anti-Pattern
      1. Control Mismatch
      2. Icon Mismatch
      3. Mental Model Mismatch
    3. Idiot Box
    4. Chart Junk
    5. Oceans of Buttons
  14. A.
    1. Additional Resources
    2. Navigation
      1. Primary Navigation
      2. Secondary Navigation
    3. Forms
    4. Tables
    5. Search
    6. Sort Patterns
    7. Filter
    8. Tools
    9. Charts
    10. Invitations
    11. Feedback
    12. Affordance
    13. Help
  15. About the Author
  16. Copyright
O'Reilly logo

Chapter 1. Navigation

image with no caption

Primary Navigation Patterns: Springboard, List Menu, Tab Menu, Gallery, Dashboard, Metaphor, Mega Menu

Secondary Navigation Patterns: PageCarousel, Image Carousel, Expanding List

I like to read reviews in mobile marketplaces to better understand how people are using the apps. The marketplace rating system is an incredibly valuable feedback tool that doesn’t exist for web and desktop applications. It provides a rich source of information about customers’ preferences and expectations.

In general, most 4 and 5 star reviews aren’t very specific. They often sound a lot like this: “What a great app, it looks good and works well”. The 1 and 2 star reviews are much more telling; they extensively outline the problems with the application. The most common complaints seem to revolve around:

  • Crashing

  • Lack of key features (syncing, filtering, account linking...)

  • Poor navigation (can’t go back, can’t find things...)

  • Confusing interface design

The first two issues can’t be fixed with design patterns, but the third and fourth most common complaints can be. Following common design patterns for navigation will ensure that people can find and use the valuable features in your application.

Primary Navigation Patterns

Good navigation, like good design, is invisible. Applications with good navigation just feel intuitive and make it easy to accomplish any task, from browsing friends to applying for a car loan. While there may be many options for navigating content within an app, I want to focus on seven patterns for primary navigation, i.e., patterns for the main menu:

Primary Navigation Patterns

Figure 1-1. Primary Navigation Patterns


The Springboard pattern is OS neutral, working equally well across devices. It is also sometimes referred to as a Launchpad. The Springboard is characterized by a landing page of menu options that act as a jumping off point into the application. Facebook followed the Springboard design of the iOS home screen, and they were quickly emulated by other applications.

Facebook Springboard and Ovi Maps

Figure 1-2. Facebook Springboard and Ovi Maps

Trulia and LinkedIn

Figure 1-3. Trulia and LinkedIn

NewsRoom on Palm and Yahoo! on Nokia

Figure 1-4. NewsRoom on Palm and Yahoo! on Nokia

Personalized Springboards can be used to display personal profile information inline with the menu options. Typically a customization feature is available for changing the Springboard layout.

PayPal personalized springboard and early Gowalla

Figure 1-5. PayPal personalized springboard and early Gowalla

Grids for 3x3, 2x3, 2x2, and 1x2 are the most common layouts. But a Springboard doesn’t have to follow a grid layout. Some options can be proportionately larger to convey greater importance, like the video option in the Masters iPhone app is two to three times larger than the other menu items.

Grid layouts for springboards

Figure 1-6. Grid layouts for springboards

2x2 grid layout, Norton Mobile; irregular layout, Masters

Figure 1-7. 2x2 grid layout, Norton Mobile; irregular layout, Masters


Use a grid layout for items of equal importance, or an irregular layout to emphasize some items more than others. Consider personalization and customization options.

List Menu

The List Menu is similar to that Springboard in that each is a jumping off point into the application. There are numerous variations of this pattern including personalized list menus, grouped lists, and enhanced lists. Enhanced lists are simple List Menus with additional features for searching, browsing or filtering.

List menus: Valspar Paint and Kayak

Figure 1-8. List menus: Valspar Paint and Kayak

List menus: radiotime Palm and Cozi

Figure 1-9. List menus: radiotime Palm and Cozi

Personalized lists: Blackboard and Zoho CRM

Figure 1-10. Personalized lists: Blackboard and Zoho CRM

Enhanced list, Amazon MP3; grouped list, Stratus

Figure 1-11. Enhanced list, Amazon MP3; grouped list, Stratus


List Menus work well for long titles or those that require sub text. Applications using List Menus should offer an option on all internal screens for returning to the List Menu, usually a button in the title bar with a list icon or the word “menu.”


Tab navigation is not OS neutral since each OS has their own guidelines for tab location and design. When choosing this pattern for your application, be prepared to customize the tab location for the different OSs.

Tab orientation for various OSs

Figure 1-12. Tab orientation for various OSs

Bottom tabs, favored by iOS, WebOS, and BlackBerry, are the most thumb friendly option.

Jamie Oliver Recipes and Molome, bottom tabs

Figure 1-13. Jamie Oliver Recipes and Molome, bottom tabs

BlackBerry App World and WorldMate, bottom tabs

Figure 1-14. BlackBerry App World and WorldMate, bottom tabs

Horizontally scrolling bottom tabs, as shown in the Starbucks and Blue Mobile apps, provide a useful mechanism for offering more options without having to open up a More...screen.

Starbucks and Blue Mobile, scrolling bottom tabs

Figure 1-15. Starbucks and Blue Mobile, scrolling bottom tabs

Top tabs, favored by Android, Symbian, and Windows, look familiar since they are modeled after standard website navigation patterns. Nokia and Windows both use scrolling top tabs that you can flick to reveal more menu options.

Harvest TimeTractor and Fring on Nokia, scrolling top tabs

Figure 1-16. Harvest TimeTractor and Fring on Nokia, scrolling top tabs

Foursquare and HitPost, top tabs

Figure 1-17. Foursquare and HitPost, top tabs


Clearly indicate the selected menu item by visually differentiating the selected tab from the others. Use easy to recognize icons or icons with labels.


The Gallery pattern surfaces individual pieces of content for navigation. Content is usually individual articles, recipes, photos, or products and can be arranged in a carousel, grid, or slideshow.


Figure 1-18. BBC and PULSE

Flickr and PictureIt Palm

Figure 1-19. Flickr and PictureIt Palm

Sometimes the content will be easier to browse if it is grouped. Dwell use side tabs to organize gallery content into manageable chunks.


Figure 1-20. Dwell


The Gallery pattern works best for frequently updated content that people want to browse.


Dashboards provide a roll-up of key performance indicators, KPIs. Each metric can be drilled into for additional information. This primary navigation pattern is useful for financial applications, analytics tools and sales and marketing applications.

Mint and ego dashoards

Figure 1-21. Mint and ego dashoards


Don’t overload the dashboard; conduct research to determine the key metrics to include.


This pattern is characterized by a landing page modeled to reflect the application’s metaphor. This is used primarily in games, but can also be seen in applications that help people catalog and categorize items, like notes, books, wine, etc.

Awesome Note

Figure 1-22. Awesome Note


Figure 1-23. Cellar

DoItTomorrow and TripJournal

Figure 1-24. DoItTomorrow and TripJournal

Aldiko Book Reader

Figure 1-25. Aldiko Book Reader


Use the Metaphor pattern judiciously, as a poorly implemented metaphor can look a lot like the Novel Notion anti-pattern in Chapter 10.

Mega Menu

A mobile Mega Menu is like the web Mega Menu, a big overlay panel with custom formatting and grouping of the menu options. The RipCurl website uses a mega menu for navigating into sub categories of clothing.

Figure 1-26.

The webOS version of Facebook uses a megamenu for streamlined navigation, avoiding the extra navigation found in a Springboard pattern. Walmart uses this same pattern in their Android app.

Facebook webOS and Walmart Android

Figure 1-27. Facebook webOS and Walmart Android


Determine your information architecture before choosing the navigation pattern. Choose a more appropriate pattern, like Tabs, if there are only a few major sections in the app.

Secondary Navigation

This chapter didn’t feel complete with only menu patterns, so I broadened it to include secondary navigation. By secondary navigation, I mean the navigation within a page or module. For example, the Springboard in the ANZ application is secondary to the primary Tab navigation. Similarly in Jamie Oliver’s Recipes, the List is secondary to the primary Tab navigation.

(Left) Primary, tabs; secondary, springboard. (Right) Primary, tabs; secondary, list.

Figure 1-28. (Left) Primary, tabs; secondary, springboard. (Right) Primary, tabs; secondary, list.

Any of the primary navigation patterns can be reused as secondary navigation patterns. It is common to see Tabs with Tabs, Tabs with Lists, Tabs and Dashboard, Springboard and Gallery, etc.

(Left) Primary, tabs; secondary, dashboard. (Right) Primary, tabs; secondary, tabs.

Figure 1-29. (Left) Primary, tabs; secondary, dashboard. (Right) Primary, tabs; secondary, tabs.

There are some additional patterns that work well for secondary navigation, but probably aren’t ideal for primary navigation:

Secondary navigations patterns

Figure 1-30. Secondary navigations patterns

Page Carousel

This pattern can be used to quickly navigate a discreet set of pages using the flick gesture. The page indicator (the iOS term for the little dots) displays how many pages are in the carousel; flicking displays the next page. All four examples below use the page carousel within a selected tab.

Nigella Quick Collection and Zappos

Figure 1-31. Nigella Quick Collection and Zappos

Yahoo! Finance and iMobile

Figure 1-32. Yahoo! Finance and iMobile

The page carousel pattern has its limits. Consider using a list for navigating more than eight pages.

ExcellentAnalytics—Too many pages

Figure 1-33. ExcellentAnalytics—Too many pages


The page carousel works best for navigating a small number of pages. Use a visual indicator to reflect the number of screens, and current screen. Flick is the common gesture to navigate the carousel.

Image Carousel

The image carousel may be a 2D carousel or more like the iTunes coverflow. IMDB uses the image carousel to surface the most viewed movies. We used it to display featured products in the retail application we designed for the Adobe Flex Showcase.

IMDB and Adobe Flex 4.5 Showcase App

Figure 1-34. IMDB and Adobe Flex 4.5 Showcase App

The Photo Cookbook is another example of the Image Carousel; however, the images are grouped in columns by recipe type.

The Photo Cookbook

Figure 1-35. The Photo Cookbook

Tap’n’Scrap has good examples of both styles. They use a 2D carousel for background and frame selection, and the coverflow style scrapbook viewing.


Figure 1-36. Tap’n’Scrap

ANZ’s banking app displays account information payment sources in a coverflow. While this is attractive and probably demos well, the excitement of flicking through cards to make a payment probably wears thin after the first few uses.

Image Carousel in ANZ for payment selection demos well, but gets old fast

Figure 1-37. Image Carousel in ANZ for payment selection demos well, but gets old fast


The Image Carousel works best for displaying fresh visual content, like articles, products, and photos. Provide visual affordance, either with arrows, partial images or page indicators (dots) that more content can be accessed.

Expanding List

The Expanding List allows a single screen drill down to reveal more information. Android Gingerbread uses this pattern in the call log. All calls from the same number are collapsed into one row. Tapping the icon expands the list to show the individual instances.

Android Call Log

Figure 1-38. Android Call Log

This pattern is more common in mobile optimized websites than mobile applications, but can work well in both cases. Take for example the mobile site. The Expanding List is used instead of a Cascading List to disclose all of the Women’s clothing categories.

Gap Mobile Website

Figure 1-39. Gap Mobile Website


The Expanding List pattern works best for progressively disclosing more details or options for an object.

The best content for your career. Discover unlimited learning on demand for around $1/day.