Mobile Design Pattern Gallery, Color Edition

Chapter 1. Navigation

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:

Figure 1-1. Primary Navigation Patterns

Springboard

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.

Figure 1-2. Facebook Springboard and Ovi Maps

Figure 1-3. Trulia and LinkedIn

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.

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.

Figure 1-6. Grid layouts for springboards

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

Note

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.

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

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

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

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

Note

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.”

Tabs

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.

Figure 1-12. Tab orientation for various OSs

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

Figure 1-13. Jamie Oliver Recipes and Molome, 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.

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.

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

Figure 1-17. Foursquare and HitPost, top tabs

Note

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

Gallery

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

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

Note

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

Dashboard

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.

Figure 1-21. Mint and ego dashoards

Note

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

Metaphor

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.

Figure 1-22. Awesome Note

Figure 1-23. Cellar

Figure 1-24. DoItTomorrow and TripJournal

Figure 1-25. Aldiko Book Reader

Note

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. RipCurlShop.com

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.

Figure 1-27. Facebook webOS and Walmart Android

Note

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.

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.

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:

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.

Figure 1-31. Nigella Quick Collection and Zappos

Figure 1-32. Yahoo! Finance and iMobile

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

Figure 1-33. ExcellentAnalytics—Too many pages

Note

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.

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.

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.

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

Note

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.

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 Gap.com mobile site. The Expanding List is used instead of a Cascading List to disclose all of the Women’s clothing categories.

Figure 1-39. Gap Mobile Website

Note

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