Navigation Best Practices
Global Navigation Considerations
This post was originally published for the Agencyport Developer Zone on February 24th, 2015. Edits have been made from the original post.
What is Global Navigation and Why is it Important?
Global navigation is navigation in an app or website that occurs consistently on every “page” of the experience. It is important because it can easily make or break the experience. If the user is unsatisfied it will reflect poorly on the product and they will eventually consider alternatives. Suddenly the competition is “easier to use” and you risk losing business because of an easily avoidable mistake. Having the better overall product will not matter if the user can’t easily figure out how to use it.
The global navigation bar is the optimum place for branding, as it serves as a constant reminder to the user no matter what page or stage of the process they happen to be on. When incorporating your brand, carefully decide what elements are most important, such as the logo or brand colors. Is it more important to customize an existing product to make it completely unique to your brand or would a simpler approach be more appropriate? A complete overhaul of design may encroach on functionality if not carefully taken into consideration.
Color and Placement
The navigation should stay in the same place on every page to be consistent. We chose to place our navigation at the uppermost part of the page and keep it “fixed,” so that a user can scroll with the options always in view. Global navigation is often found at the top of the page. As for color, Portal 5’s global navigation is a distinct, dark-gray color to contrast with the light gray background on every page. It also creates a hierarchy when a secondary form of navigation is displayed, such as on the “My Work” page.
Each page is represented with an icon next to it. Since we use so many icons within the app, it’s important that each represents something unique or else it creates confusion. For example, the “Home” icon couldn’t be represented by a house since it currently represents the “Home Owners” line of business. Keep in mind that the more pages you have, the more icons you would need to represent those pages — if using icons at all. Ideally, the label should be sufficient enough without the icon.
When choosing an icon, it’s important that the meaning of the icon makes sense. A helpful article with rules for choosing icons is “9 Rules to Make Your Icons Clear and Intuitive”:
“There’s often a tendency to use metaphoric imagery on icons when images visually similar to an action aren’t obtainable. However, this can sometimes backfire if the metaphoric image isn’t closely associated with the action it represents. Using an image of scissors to represent the action ‘cut’ is easy to understand because most people associate scissors with cutting things. However, using an image of a chain link to represent hypertext linking is not as easy to understand because most people have not closely associated the two. The same study found that 64.71% of the users they tested did not understand the chain icon for hypertext linking .”
Number of Pages and Using Drop-Downs
Due to the limited space in the global navigation, only a specific number of main links can be displayed before they violate the space of the branding. As a result, sub-menu pages are consolidated in drop-downs for a glance-able, compact way of displaying multiple groups of links. There is limited real-estate, particularly when viewed on a mobile device, so space should be used strategically. Ideally, pages should be represented in a way where the user does not have to use the “Back” button to get around.
Ease of Use Versus Number of Clicks
A common concern that pops up within the topic of navigation is the notion that a user having to click several types ensures a terrible user experience. This is not necessarily the case. Research has shown that a user’s ability to navigate through the website does not rely on a specific number of clicks, as long as the navigation is clear. This is particularly important for more complex experiences where maintaining such an arbitrary rule would be impossible.
In Joshua Porter’s article “Testing The Three-Click Rule”, he uses research to disapprove the idea:
“If we looked at the tasks that were dramatically longer than three clicks, do we see a drop in the satisfaction of the users? At the end of each of the 620 tasks, we had asked users to rate how satisfied they were with the site for that task. Again, there was a wide variety of answers — sometimes users were very satisfied, other times they were completely unsatisfied. Did these ratings correlate with the number of clicks?
After analyzing the satisfaction data, we still found no evidence for the Three-Click Rule. When we looked at the percentage of users who were unsatisfied, our data showed there was little variation (between 46% and 61%) between different lengths of clickstreams. Fewer clicks do not make more satisfied users.”
Improvements that can be made to the current navigation include an active state and linking the branding back to the home screen. An active state allows the user to know where in the process they are, similar to breadcrumbs, but in an easily glance-able way. Linking the logo or branding back to the home page has become a standard way for someone to return to the first phase without having to use the “Back” button excessively.
In conclusion, these are just some of the aspects to take into consideration when it comes to global navigation. Compared to other aspects of the designed experience, global navigation creates a lasting impression from start to end. As such, consistency, functionality, and ease-of-use should be made top priority.
Please recommend if this article was helpful!