How to Improve User Experience with Better Website Navigation

When designing a website, the most important element is the navigation menu. It is responsible for guiding users to each part of the website and is the most interacted with part of the user experience. The navigation’s ease of use will have a great effect on conversion rates, as users who become frustrated with the navigation will quickly begin to look elsewhere, often avoiding a hard to traverse website altogether in the future. Poor navigation can seep into brand perception.

So a quick way to ruin a user’s experience and send them fleeing from your site to a competitor’s is to welcome them with an overwhelming navigation menu. Users become perplexed when their path becomes convoluted by copious amounts of links, confusing verbiage and positioning, or over-extravagant animations. Improving user experience by offering simplified navigation that provides clarity to the user experience can go a long way in avoiding user frustration. In other words, the goal should be to make it easy for them to find the information they came looking for.

To help avoid a bad user experience, we’ve put together a list of some of the best practices in navigation design that can help build navigation that provides a clear path for users to travel to get where they want to go. Most of these can be implemented fairly quickly, and while it is best to consider these when beginning the design process, the majority can be utilized on active websites as well.

If you want to improve user experience then your goal should be to make it as easy as possible for them to find the information they came looking for in the first place.

Consider the Content

Before beginning to think of what links to include the content must first be organized, creating logical groupings of all pages into categories and subcategories. If need be, create a site map diagram to visualize the hierarchy of the content. Be sure to keep the users in mind when doing this, recognizing that how they would structure the content might be different than what someone inside the profession would.

Once the content is organized it can be arranged into categories in order of importance. Categories deemed most crucial would be those that are important to all users, followed by those that are important to some, but not all, users. The last tier of categories will include content that does not get a lot of hits but is still a necessary piece of the puzzle. If an active website is using analytics it can act as a guide as to what categories should fall under what tiers of importance.

Improve User Experience with Better Navigation - Sitemap Diagram
Content Flow Diagram: Arrange content into prioritized categories. Take the perspective of your user/audience when creating a Content Flow Diagram.
 

Universal Navigation

Probably the most important factor in proper navigation design is positioning the menu in the same location on all pages. By keeping the location consistent users are given a spot where they know they can go to if they need to go somewhere else on the site. Most websites will have a bar at or near the top of their pages, while the majority of those that do not place them on the left. While exact position is not the same, what will be found on any good navigation menu is that the position stays the same and that they contain links to the important categories of the site.

Rule of Seven

Another way to make navigation easier for the user is limit the options to select from. With a smaller selection, the user has less of a chance of skipping over important items as they scan over the list of links. Psychology experiments have come to show that the average human mind can store an average of seven items at a time, so that should be the maximum number of items in navigation. More often than not this is more than substantial, and if an even smaller number can be used then all the better!

If there are issues dropping the number of navigation items down, try moving some of the ones of lesser importance to other areas. For example, as it is fairly standard for a website’s logo to link to the home page it should not be a problem to remove a similar link from the navigation. Another option would be to move utility links, such as Contact Us or Login, to an area above the primary navigation.

Drop-down Menus: Do Them Right or Not at All

Many designers (myself included) have utilized drop-down menus for their ability to make more links accessible from the navigation menu without over-crowding. However, the hard truth is that drop-down menus are not perfect; there’s no if, ands, or buts about it. They are not the SEO faux-paux that they once were when they were heavily dependent upon Javascript and Flash, but there are still a handful of drawbacks when it comes to using drop-downs.

The first and greatest shortcoming of drop-downs is that they hide relevant links from the user’s initial view. A typical user does not stick around for more than a few seconds before they establish whether a site has what they’re looking for. By hiding important links users are forced to dig deeper to see if they are where they need to be, and unless they intentionally came to a site they aren’t likely to be willing to poke around for long. Drop-downs also discourage users from viewing important pages, as they tend to head directly to the links in the submenu.

Another issue with drop-downs is that if not properly developed they can be nearly impossible to use. If submenus appear or disappear too quickly, the user is required to use precise mouse movements to view and select the link they want, which can be extremely frustrating.

All that being said, the use of drop-downs is fairly common throughout the web, with most users having learned how to deal with them. There are also some instances where users find them to be more beneficial. If a website is deemed worthy to benefit from drop-downs it would best be served following these rules:

  1. Indicate a submenu – The best drop-down menus have some sort of visual hint (typically a small arrow) that a submenu is present. Without these a user may never realize that there are more options available to them, or may waste valuable time testing each link to see if a menu appears.
  2. Make them usable – When developing drop-downs, be sure that the submenu remains visible for a fraction of a second after the user leaves it, as this allows them a grace period in case they overshoot the area with their cursor. The same should be done for when they initially hover over the top-level link. This ensures that they intend on displaying a submenu, rather than having them display on accident. That being said, submenus should be hidden immediately when another one is being displayed.
  3. Leave no user behind – Drop-down menus can be borderline impossible to use with touch-screen devices since the majority of them rely on a hover event that can be very finicky to implement. There can even be issues on desktop browsers, as users who have disabled Javascript will find that drop-downs that rely on it to be inoperative. To avoid these situations be sure that top-level links are able to be clicked, thus removing the need for a hover state to be triggered. In some cases, a unique menu experience developed for mobile devices is the best choice.
  4. Don’t over-crowd – The same principle applies to submenus as it does to main navigation. Be sure that only a handful of links are listed in each submenu to limit the options the user needs to choose from.
  5. Limit to a single sub-level – Working with two levels of navigation can be a nuisance on its own. It is very seldom, if ever, that a third tier provides a beneficial user experience.
Improve User Experience with a Guide to Better Navigation - Apple Menu
Apple’s site is a great example of quality navigation. The combination of conventional layout and positioning, only seven choices, and the use of product names as labels allows users to quickly find what they’re looking for. You will also notice that in lieu of drop-downs a relevant secondary menu is provided only when on internal pages.

It can be a daunting task when deciding on labels for navigation links. First off they need to be relatively short in length in order to accommodate all of the other labels, but also so that they are easily read as users skim over them. In addition to this, the labels need to be descriptive so that the user has a clear idea of where they will be going if they select it.

Because of this, labels such as “Products”, “Services”, and “What We Do” do not do much for telling the user anything about where they’re going. While they know what sort of information they are about to view these labels are still somewhat vague. In addition to being only marginally helpful to users, these sorts of generic labels are almost useless when it comes to SEO. Valuable link juice is being used up on generic terms that are not going to be helpful to rankings.

If the site’s main products or services can be listed in the navigation, the user will be able to quickly determine more specifically what sort of information they will find than they would with generic labels. Be careful not to use words or acronyms that are only understood in the company or industry, as they may be foreign to the average user and/or your target audience. Using tools such as the Google Keyword Planner to determine commonly searched keywords and keyphrases can help in selecting succinct labels for navigation.

For innovation to succeed it must solve a pain point or create a better overall user experience.

Convention is Key

When designing website navigation it is best not to stray from standard conventions. Part of building a product that people will enjoy using is creating something that doesn’t make them think. When outside-the-box concepts are implemented it can have a negative impact on the user’s experience.

Think about if a new car was for sale that replaced the steering wheel with two levers on either side of the driver’s seat. Who would buy that car? People would have to re-learn how to avoid other drivers and stay on the road! This might be an extreme example, but the principle behind it is clear. Your website must be intuitive enough so that any user can ‘steer’ it.

Remember that just because navigation is conventional doesn’t mean it has to be mundane. Innovation has its place, but when it comes to areas that tend to follow a standard convention across the board it should be limited to aesthetics and steer clear of functionality. Consider our steering wheel example. Not all vehicles have identical steering wheels. There are, in fact, a wide array of options with different colors, shapes, materials, contours, and embedded accessories on each one. However, they all share key similarities with regards to form and function: located in front of the driver, rotate left to turn left, right to go right, push the center to honk the horn.

No one would argue against the benefits of innovation. Without original ideas we would still be hunting our food with rocks and this article would have been written by hand, contained in a book that weighs 30 lbs that is chained to a shelf. Hardly mobile-friendly. For innovation to succeed it must solve a pain point or create a better overall user experience. So when straying from convention the question that must be asked is, “Does this add value to the product?” When applied to navigation, it could be put this way, “Will the user have an easier time finding what they’re looking for?”

In the end, the helpful points are of far greater value than the style points.

Does your site’s navigation need streamlining? Are you seeing high bounce rates off your pages? The people at Edge have the know-how to help improve user experience on your website. Succeed with well-organized content and well-structured, helpful navigation. Check out our Next Step Tool to get the ball rolling or get in touch with us and we can help you create a successful website.