Like A Cheat Sheet For Mobile Learning Design

User Interface Patterns For Mobile

Are you hesitant to get into mobile learning and mobile performance support? Would it be easier if you had a way to think through how users will move through your program and how you will structure it?

That’s where design patterns come in. These are collections of solutions for various types of challenges, such as how to design input forms that work well on a phone or how to design menus for various types of content.

Study Design Patterns for Solutions

The user experience and interaction design communities do a good job of identifying and collecting design patterns to help others find solutions. I wish we did more of this in our learning community. By collecting patterns, the designs begin to get standardized, which is good for users. In addition, collecting patterns demonstrates the best practices in a field. Most important, design patterns provide a resource for designers to find workable solutions to user interface and other challenges.

Using a few books and websites (see the Resources at the end), I’ve collected some mobile design patterns you may find useful for creating all types of mobile experiences (mLearning, just-in-time support, apps). This article focuses on common design patterns for navigation.

But first, let’s look at some guidelines for designing navigation.

A Few Key Navigation Design Guidelines

Think differently. Rather than thinking in terms of a mouse pointer, think in terms of gestures, such as taps, swipes and pinches. These are all part of the gestural user interface.

Prioritize the features people will use first as they enter the mobile experience. It might be to learn, to find information or to complete a task. Then ensure that the navigation is optimized for quickly accomplishing the task at hand.

Ensure the touch target is sufficiently large for users to tap without making errors or getting frustrated. Touch target size guidelines are available for each mobile operating system.

Use visual cues that orient users to where they are in a program. Examples include a back icon that displays on a secondary screen and the title of the current category.

Be consistent in the navigation model, icons and labels. This will help users build appropriate mental models of your app’s architecture.

Primary and Secondary Navigation

It’s helpful to think about navigation interfaces in terms of primary and secondary levels. Primary navigation is persistent and always available. It provides a consistent structure for moving around an app. It is typically based on and represents the information architecture.

Secondary navigation is transient. It displays in context or after selecting a primary navigation element. For example, in a reference app, after selecting a category, a list of selectable terms might appear.

Now, here are some common design patterns for navigation in a mobile environment.

Cards

Cards are a flexible user interface structure consisting of condensed information chunks that can be arranged in various layouts and combinations depending on the device size and context. Perhaps Pinterest was a precursor to card-based design.

The card-based interface is not merely a box of text. It is an element that embodies action. A card can be swiped to move to the next one as in the social news app, Flipboard and the social questions app, Jelly. Or a card can be tapped to navigate to a new location, as in the Google Now app. See the screen shots below. Some are saying that cards of aggregated content will eventually replace web pages.

Because cards are based on a familiar metaphor of a card deck, there is an intuitive sense that you will be able to touch it, move it and interact with it. Card-based design could be an ideal user interface for performance support. It provides a condensed way to present many types of media, it entices users to engage and it performs well on varied sizes of devices.

Card-based Design in Flipboard, Jelly and Google Now apps.

Image Grid or Matrix

Using an image grid for navigation is a bandwidth-heavy but visually appealing user interface. It is a good choice when there are many content entities of equal importance and when visuals are key. In the BBC app shown below, there is a hierarchy from top to bottom, yet the stories in each row are of equal weight, with the most recent being the first.

Note this word of warning from the user experience research group, Neilson/Norman, “For mobile navigation, image grids should be saved for deeper IA levels where visual differentiation between menu items is critical, as they increase page load times, create longer pages, and cause more scrolling.”

Launchpad

The launchpad is a landing page with icons, which are are typically arranged in a grid pattern. The icons serve as navigation options for selecting tasks, categories of information, or in the case of operating systems, to launch applications.

The launchpad user interface found in Duo Lingo, Expensify and Trip Journal

List Menu

The list menu is a native format for displaying navigation options in a text-based or graphic list. Each item on the list is a link to navigate to a specific location. Looking at the three types of lists below, you can see how the design is aligned with the needs of the user.

The productivity app, Things, groups the list options in a logical arrangement. Kayak, a travel app, uses informative icons to enhance the categories for which a user can find information. And the photographs displayed with each Ted talk make the options compelling.

A variety of ways to show lists as seen in the Things, Kayak and Ted apps.

Map

Sometimes geographical or location information is key to the task users want to accomplish or the content they need so navigating with a map user interface is a sensible choice. A good example is the real estate app, Trulia, shown below. The green markers are indicators of the elements that can be selected, in this case real estate. Selecting a marker on the map displays a photograph of the house associated with the marker.

Off-canvas Menu

The off-canvas menu is a way to save screen real estate. It’s a design pattern for responsive websites as well as for mobile apps. A common strategy is to display a menu icon consisting of three lines—often referred to as the hamburger icon. Upon selecting this menu icon, the off-canvas menu typically slides in from the left, though I’ve seen apps where it slides in from any direction. See the screen captures from Google+ below.

This slide-in menu has many names—Google calls it a drawer. You can find off-canvas menus in news and magazine apps that have many categories of information. Facebook currently uses the drawer menu too.

There are quite a few drawbacks to this approach, but I think they can be overcome.

Many users are not aware that the three-lined icon represents a menu, so it can reduce engagement.

If the drawer menu is not visible from the start, users may not remember to select it, according to the “out of sight, out of mind” adage.

If the app architecture has more than two levels, it is not always clear how to get back to the main screen.

With sufficient user interface design planning, however, it seems like there could be reasonable solutions to these problems, such as, using the word “menu” rather than an icon and placing a persistent back button to return to previously viewed screens.

Using the Google+ app, selecting the menu icon in the upper left initiates a menu to slide in from the left.

Skeuomorphic

Metaphors that are based on objects in the physical world seem to be decreasing in use as a means of navigation, other than in games. But using an underlying metaphor might make sense for your audience if they would benefit from a familiar mental model of how something works. For example, at one time, a bookshelf metaphor was a popular user interface strategy for reading and library programs. The example below shows a dial metaphor used in the Where To? app.

Tab Bar

The tab bar is a familiar user interface element because it resembles the desktop toolbar. Consisting of a row of persistent buttons at the bottom or top of the screen, the tab bar is a common UI element for navigation in smartphone apps. I can attest that once you have the information architecture of the app figured out, it is an easy type of navigation to design. I used this interface in my Instructional Design Guru app. See some examples below.