Tag: 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.

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.

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.

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.

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:

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.

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.