1. Help Customers Find Their Way With Better Navigation Bureau
2. Help Customers Find Their Way With Better Navigation Devices
3. Help Customers Find Their Way With Better Navigation Systems
4. Help Customers Find Their Way With Better Navigation System

Navigation is a conversation. It doesn't matter how good your site or app is if users can't find their way around. 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. When we examine the most successful interaction navigation designs of. An innovative product doesn’t come from a law passed by the government. It also doesn’t come from venture capitalists looking for a higher return on an investment. Innovation comes from identifying customers’ needs and providing solutions that meet those needs. Companies like Uber, Airbnb, and Intuit understand this. Uber’s success, for example, has come not. Help Customers Find Their Way with Better Navigation Weebly automatically generates a navigation bar as you build your site. Social navigation: to follow the crowd and learn from other people’s actions; Going further with the cognitive process, understanding it helps to build a better wayfinding system as designers learn how people navigate their way around and how to use those elements. On a pure usability level, navigation has one job: help visitors find the information they need. But in reality, there is a lot more going on under the hood that makes a site navigation succeed (or.

Design is more than just good looks – something all designers should know. Design also covers how users engage with a product. Whether it’s a site or app, it’s more like a conversation. Navigation is a conversation. It doesn’t matter how good your site or app is if users can’t find their way around.

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. If you want to take a go at prototyping your own navigation, you can download and test Adobe’s Experience Design CC for free and get started right away.

Further Reading on SmashingMag:

Let’s Get Started

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 a great mobile navigation:

Simple

First, and most importantly, a navigation system must be simple. Good navigation should feel like an invisible hand that guides the user. An approach to this is to prioritize 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 just 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 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. Your 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

In his research on mobile device usage, Steven Hoober has found that 49% of people rely on one-thumb to accomplish things on their phones. In the figure below, the diagrams on the mobile phones’ screens are approximate reach charts, in which the colors indicate what areas of a screen a user can reach and interact with their thumb. 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 they’re holding a device.

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

Another important point — 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.

Tab Bar

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

Three Crucial Moments For Bottom Navigation Design

Navigation is generally the vehicle that takes users where they want to go. Bottom navigation should be used for the designated top-level destinations of similar importance. These are destinations requiring direct access from anywhere in the app. Good bottom navigation design follows these three rules.

Help Customers Find Their Way With Better Navigation Bureau

1. Show Only The Most Important Destinations

Avoid using more than five destinations in bottom navigation as tap targets will be situated too close to one another. Putting too many tabs in a tab bar can make it physically difficult for people to tap the one they want. And, with each additional tab you display, you increase the complexity of your app. If your top-level navigation has more than five destinations, provide access to the additional destinations through alternative locations.

Avoid Scrollable Content

Partially hidden navigation seems to be an obvious solution for small screens — you don’t have to worry about the limited screen estate, just place your navigation options into a scrollable tab. However, scrollable content is less efficient, since users may have to scroll before they’re able to see the option they want, so it is best to avoid if at all possible.

2. Communicating The Current Location

The single most common mistake seen on app menus is failing to indicate the user’s current location. “Where am I?” is one of the fundamental questions users need to answer to successfully navigate. Users should know how to go from point A to point B based on their first glance and without any guidance from the outside. You should use the proper visual cues (icons, labels, and colors), so the navigation doesn’t require any explanation.

Icons

Bottom navigation actions should be used for content that can be suitably communicated with icons. While there are universal icons that users know well, mostly they are representing functionality like search, email, print and so on. Unfortunately “universal” icons are rare. Unfortunately, app designers often hide functionality behind icons that are actually pretty hard to recognize.

If the bottom navigation bar is colored, make sure to use black or white for the icon and text label of the current location.

Text Labels

Text labels should provide short and meaningfully definitions to navigation icons. Avoid long text labels as they do not truncate or wrap.Menu elements should be easy to scan. Users should be able to understand what exactly happens when they tap on an element.

Target Size

Make targets big enough to be easily tapped or clicked. To calculate the width of each bottom navigation action, divide the width of the view by the number of actions. Alternatively, make all bottom navigation actions the width of the largest action.Android guidelines suggest following dimensions for the bottom navigation bar on mobile.

3. Make Navigation Self-Evident

Good navigation should feel like an invisible hand that guides the user along their journey. After all, even the coolest feature or the most compelling content is useless if people can’t find it.

Behavior

Each bottom navigation icon must lead to a target destination, and should not open menus or other pop-ups. Tapping on a bottom navigation icon should guide a user directly to the associated view, or refreshes the currently active view. Don’t use a tab bar to give users controls that act on elements in the current screen or app mode. If you need to provide controls, use a toolbar instead.

Strive for Consistency

As much as possible, display the same tabs in every orientation. It’s best when you can give users a sense of visual stability.

Don’t remove a tab when its function is unavailable. If you remove a tab in some cases but not in others, you make your app’s UI unstable and unpredictable. The best solution is to ensure that all tabs are enabled, but explain why a tab’s content is unavailable. For example, if the user doesn’t have offline files, the Offline tab in the Dropbox app displays a screen that explains how to obtain them. This feature called Empty state.

Hiding the tab bar upon scrolling

If the screen is a scrolling feed, the tab bar can be hidden when people are scrolling for new content and revealed when they start heading back to the top.

Help Customers Find Their Way With Better Navigation Devices

Visual Delight

Avoid using lateral motion to transition between views. Transitioning between active and inactive views should use a cross-fade animation.

Pictorial Icons: Creative Navigation

The size of the display 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.

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 these controls by using a floating action button for the most important user actions.Tumblr has nice pictorial icons as well as proper labels for them. These icons also conveniently disappear when you're just scrolling through the app.

However, this pattern has one major downside — the floating action button concealscontent. From a UX point of view, users shouldn’t have to take an action to discover what other 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 your icons.

Conclusion

Navigation is generally the vehicle that takes users where they want to go. Always think about your user persona, and the goals they have when using your app. Then, tailor 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.

This article is part of the UX design series sponsored by Adobe. The newly introduced Experience Design app is made for a fast and fluid UX design process, creating interactive navigation prototypes, as well as testing and sharing them — all in one place.

You can check out more inspiring projects created with Adobe XD on Behance, and also visit the Adobe XD blog to stay updated and informed. Adobe XD is being updated with new features frequently, and since it’s in public Beta, you can download and test it for free.

Website navigation can make or break your visitors’ experience. The easier and more engaging your navigation experience is, the more time users will spend on your site.

Website navigation can make or break your visitors’ experience. Attempting to navigate a website without a logical, well-defined structure is like being dropped in the middle of a complex maze with no map and no frame of reference. It’s overwhelming, frustrating, and all-around unpleasant — not exactly the user experience you’re hoping for.

However, creating a good navigation system is easier said than done. That’s why we’ve come up with eight ways you can help users find their way. They’ll turn a potentially negative experience into a great one.

8 Website Navigation Best Practices

1. Optimize Your Mobile Website’s Navigation

Having a mobile-responsive navigation menu is essential to any ecommerce website. Consumers expect the mobile user experience of a website to be as good, if not better than the desktop experience. Provide your website visitors with a responsive, optimized navigation bar and you’re guaranteed to see an improvement in your mobile conversion rate.

Consider simplifying the navigation bar for your mobile site. The more unnecessary options you provide for visitors, the more convoluted the user-experience will become.

Ferrum Pipe has a very effective mobile menu that, while very simple, conveys to users: 1) what they sell, and 2) how to get in contact with them (see example below). It’s really as simple as that. Any inessential information you might want to provide users can (and should) be moved to your website’s footer.

2. Replace the Drop-Down Menus

When the options in your drop-down menu are fairly complex, unfamiliar, or extensive, consider replacing it with a detailed page. Usability research shows drop-down menus are annoying; plus, you’ll need to sacrifice valuable info to make everything fit.

Apple has used this strategy to help customers navigate their support menu. Rather than cramming all of the support options into a drop-down menu, they opted to create an entire page that has each product category they offer. The accompanying visuals make finding the right option a simple task.

3. Make Site Search Frictionless

People who run a site search convert approximately two times more often than people who don’t.

It makes sense: Visitors who use search typically have intent to buy or act. Plus, they’re much more likely to find what they’re looking for.

IKEA is a great example of a company that relies heavily on their site search capability. Stores that carry thousands of SKUs in a variety of product categories need a prominently displayed search bar, so their customers can find exactly what they’re looking for. You can see on the mobile version of their website that they stick with a very minimal design: a hamburger menu button, a shopping cart button, and a search bar.

Airbnb is another great example of how you can highlight the search function in your navigation menu. On their website, the search bar is the first element to load on the homepage, and it’s prominently displayed at the top of screen to encourage visitors to interact with it. If site search is an essential component to the user-experience of your site, make sure that the search bar is prominently displayed for visitors to see.

4. Provide Context

Help Customers Find Their Way With Better Navigation Systems

To help visitors find the right page without expending a single click, include clues within your drop-down menu. A clue could be a handy icon, a visual, or another helpful piece of information.

For instance, the “Category” tab on Awwwards doesn’t just display the various categories—it also tells you how many entries are in each one.

Want to browse websites by hue? Each choice in the “Color” menu is helpfully color-coded.

Swiss Gear has an interesting approach to designing a nested navigation menu. For their top-level product categories, they include a small picture of each sub-category to provide some context as to what you’ll see in that sub-category. For example, in the ‘1900 Collection’ sub-category (see below), they provide a small image to give the customer a sample of what that product line looks like.

This tactic works especially well if you have a multitude of product categories that are very specific to your industry. Using confusing jargon in your navigation menu is the worst thing you could do, but it’s an essential component of your website you should at least provide your users with some visual indicators to help understand

5. Create Separate Menus for Different Audiences

It’s always tricky to design an interface that caters equally to two distinct groups. To make sure each one can find what they need — without having to dig through irrelevant content — divide your links into two.

The Muse, for instance, has two audiences: job-seekers and employers. The first four links in the top nav bar target job-seekers, while the fifth redirects companies to their own section of the site. The link is gray, not white, to indicate that it’s different from the others.

Lyft uses the same concept on its homepage. Instead of having a traditional nested navigational menu layout, they created separate menus and homepages for each category of users. Depending on which section of the website you’re on, you’ll see different main menu items.

6. Add a Mega Footer

Navigational fatigue is definitely a real thing — and when your site has a complex hierarchy, users quickly get tired of expanding sub-menu upon sub-menu.

Mega footers are an optimal solution. They provide navigation links to all the important pages on your site, so people can quickly jump to exactly what they’re looking for. Including a mega-footer on your site can positively impact your site’s bounce rate as well as overall conversion rate.

Take a look at Baxter’s footer to get an idea.

A mega footer can also be a great place to incorporate important keywords to improve your Google search engine result page (SERP) rankings. Take inspiration from GrubHub’s mega footer. If you’re trying to rank for a number of specific locations, including them in your footer will help will your local SEO without you having to list them in your main menu.

7. Choose Your Menu Order Strategically

If I asked you to buy 12 things from the grocery store, chances are you’d come back with the first two items, the last two items, and maybe one of the middle items. That’s thanks to the serial position effect, which shows people have the greatest recall for the first and last items in a list.

You can take advantage of this effect in your navigation design. To drive visitors to your most important links, place them at the beginning and end of your menu.

Help Customers Find Their Way With Better Navigation System

To drive visitors to your most important links, place them at the beginning and end of your menu.

Digital Kitchen has book-ended its nav bar with “Clients” and “Contact.” This was a wise choice: first, the agency builds social proof with its roster of previous clients, then it directs visitors to get in touch.

8. Re-List Sub-Choices

Common UX wisdom dictates that you shouldn’t repeat content. However, navigation is one of the few exceptions to this rule. If one or more of your pages naturally fits into two categories, you should list it in both.

REI’s menu illustrates why. Someone who’s interested in buying a backpack might look under “Travel” or she might look under “Camping” — whichever she clicks, you want her to find the backpack page.

In that example, both navigation choices probably seem obvious. But you’ve probably noticed users often confound your expectations. Usability testing definitely comes into play here; watch how visitors try to find their way to specific pages, and look out for common trends.

Of course, you don’t want to go too far in the other direction and start listing every link under multiple headings. If people are always having trouble identifying the appropriate categories, your labels are probably misleading or incorrect.

Make Your Site Navigation Seamless

The more user-friendly your navigation experience is, the more time users will what to spend on your site. Don’t abandon them in a maze — hand them a map.

At The Good, we’re experienced in optimizing web navigation menus. In a conversion rate optimization program, the navigation menu is one of the first places we look to improve because it plays such an essential role in the user experience of a website. If you’re interested in testing and improving on your site’s navigation menu, request a free landing page assessment. In your assessment we’ll take a close look at your website design and identify key areas that may benefit from improvement.