Adobe Creative Cloud

March 31, 2016 /UX/UI Design /

XD Essentials: Mobile Navigation – Tab Bar and Pictorial Icons

Designers know that design is more than just good looks. Design also covers how users engage with a product, whether it’s a site or app. It’s like a conversation. Navigation is a conversation. Because it doesn’t matter how good your site or app is if users can’t find their way around it.

In this post, we’ll help you better understand the principles of good navigation for mobile apps, then show you how it’s done using two popular patterns.

Golden Rules of Mobile Navigation Design

Navigation UI patterns are a shortcut for good usability. When you examine the most successful interaction navigation designs of recent years, the clear winners are those who execute fundamentals flawlessly. While thinking outside the box is usually a good idea, there are some rules that you just can’t break. Here are four important rules for creating solid mobile navigation:

Simple

First, and the most important, a navigation system must be simple. Good navigation should feel like an invisible hand that guides the user. An approach to this is to prioritise content and navigation for mobile apps according to the tasks a mobile user is most likely to carry out.

Visible

As Jakob Nielsen says, recognizing something is easier than remembering it. This means that you should minimize the user’s memory load by making actions and options visible. Navigation should be available at all times, not when we anticipate a user needs it.

Clear

Navigation function must be self-evident. You need to focus on delivering messages in a clear and concise manner. Users should know how to go from point A to point B on first glance, without any outside guidance. Think of the shopping cart icon, it serves as an identifier to check out or view items. Users don’t have to think about how to navigate to make a purchase; this element directs them to the appropriate action.

Consistent

The navigation system for the all views should be the same. Don’t move the navigation controls to a new location on different pages. Do not confuse your user — keep words and actions consistent. You navigation should use “The Principle of Least Surprise.”  Navigation should inspire users to engage and interact with the content you are delivering.

Design with Thumbs in Mind

Steven Hoober in his research on mobile device usage found that 49% of people rely on a one-thumb to get things done on their phones. In figure below, the diagram that appears on the mobile phones’ screens are approximate reach charts, in which the colors indicate what areas a user can reach with the thumb to interact with the screen. Green indicates the area a user can reach easily; yellow, an area that requires a stretch; and red, an area that requires users to shift the way in which they’re holding a device.

 

nav1

Representation of the comfort of a person’s one-handed reach on a smartphone. Image Source: uxmatters

 

When designing, take into account that your app will be used in  several contexts, even people who always use a two-handed grip will not always be in a situation where they can use more than one finger or both hands to interact with your UI. It’s very important to place top-level and frequently-used actions at the bottom of the screen, because they are comfortably reached with one-handed and one-thumb interactions.

Another important moment ━ bottom navigation should be used for the top-level destinations of similar importance. These are destinations that require direct access from anywhere in the app.

Last but not least, pay attention to the size of targets. Microsoft suggests you set your touch target size to 9 mm square or greater (48×48 pixels on a 135 PPI display at a 1.0x scaling). Avoid using touch targets that are less than 7 mm square.

 

nav2

Touch targets

 

Tab Bar: Standard Navigation

Many apps follow this rule and use the tab bar for an app’s most important features. Facebook makes main pieces of core functionality available with one tap, which allows rapid switching between features.

nav 3

Facebook bottom tab bar for iOS.

 

There are three crucial moments for tab bar navigation design:

  1. Avoid using more than five destinations in tab bar navigation, as tap targets will be situated too close to one another. Avoid scrollable content in tab bar, because it’s less efficient since you have to scroll once before you’re even allowed to see the option you want.
  2. Provide short and meaningful text labels to navigation icons. Make bar elements easy to scan and targets big enough to be easily tapped.
  3. Show the current location using proper visual cues (icons, labels, and colors), so that the navigation doesn’t require any explanation.

Pictorial Icons: Creative Navigation

The size of displays is a major challenge in communicating your point to the user. Using pictorial icons as menu elements is one of the most interesting solutions to the problem of saving mobile screen space. The shape of the icon explains where it will take you, making them more space-efficient. They can make navigation simple and easy-to-use, but still with enough freedom to separate you from others.

nav4

Google Material Design, Floating Action Button

 

Google Material Design uses the term Floating Action Buttons for this type of navigation. They are distinguished by a circled icon floating above the UI and have motion behaviors. Apps like Evernote simplified the controls by using floating action button for the most important user actions.

nav5

Floating action button in Evernote app for Android. Image Source: Evernote.

 

Tumblr has both nice pictorial icons and proper labels for them. These icons also conveniently disappear when you’re just scrolling through the app.

nav6

Tumblr mobile application.

 

But this pattern has one major downside ━ the floating action button conceals content. From a UX point of view, users shouldn’t have to take an action in order to find out what actions they can take.

Also many researchers have shown that icons are hard to memorize and are often highly inefficient. Only universally understood icons work well (e.g. print, close, play/pause, reply, tweet). That’s why it’s important to make your icons clear, and intuitive, and introduce text labels next to the icons.

Conclusion

Navigation is generally the vehicle that takes users where they want to go. Always think about your user persona, and think about the goals users have when using your app and use your navigation to help them meet those goals. You’re designing for your users. The easier your product is for them to use, the more likely they are to use it.

UX/UI Design

Design. Prototype. Share. All in Adobe XD.

Go from idea to prototype faster with Adobe Experience Design (Preview) CC, the first all-in-one tool for creating and sharing website and mobile app designs. Test drive the XD preview and tell us what you think.

DOWNLOAD