Website navigation and user experience

Advertisement

Website navigation usability is the most crucial element in design.

It makes the difference between a website where users find what they are looking for and one which causes so much frustration that users want to abandon it.

The whole point of designing a website is to allow access the content, so the success of the design depends entirely on the quality of navigation user experience.

It has the same as the navigation of a ship out at sea, which can mean life or death to the sailors on board. A website that provides a poor navigation loses conversions and can kill the business.

Unlike content, which has to be unique, the navigation should be entirely predictable.

Customers are more likely to make additional purchases or give positive feedback on a website that is a delight to navigate.

Keeping it simple

Keeping it simple

Image source: itsjustyes.com[1]

The simpler the navigation menu is, the better the user experience will be. Bear in mind that a design that is stripped down to the minimum, and only retains the key elements, will have far better navigation usability.

The starting point to how the menu should be designed is the information architecture of the website.

This architecture is formed from the number of categories and the amount of internal linking in the content. Even when this appears to be very complex, the navigation of the website has to be planned in a way that will not ask too much of the user.

Keeping the website navigation simple

Image source: grosselanterne.com[2]

The best way of keeping navigation simple[3] is to define all the different categories and then group relevant items within the content together in such a way that it makes good sense to user[4].

You can get help with structuring your content into categories by using a focus group or with any testing technique that allows users to let you know of any difficulty they have with finding any of the content they want to access.

Navigation placement

Navigation placement 1

Image source: Frantisek Kusovsky[5]

The placement of different actions will influence how users are going to respond to those actions. Navigation placement on the page requires good organization of all the choices, along with some strong visual clues that will be clearly understood.

Choices that will make an impact on the website’s navigation include actions such as returning to the previous page, watching a video, reading more of the text, visiting an external link and entering personal data.

The most common behavioral pattern when viewing a page, according to research, is F-shaped, with a quick scan horizontally at the top, then scanning down the left side vertically towards the bottom of the page.

Navigation placement 2

Image source: Mani[6]

This is because English speaking people are used to reading from the left side of a page, so they focus their attention on what is on that side. The opposite applies to Arabic speakers, for example, who are used to reading from right to left.

The most effective navigation placement for a menu in English is therefore across the top of the page or down the left side.

Use easy to understand copy

Use easy to understand copy

The wording of a navigation menu also has an important part to play in the navigation UX.

Even when the information listed in a navigation menu is easy to find, difficulties with website navigation will occur if some of the items are described in an unusual way.

Zeta Website

Image source: Saptarshi Prakash[7]

Effective navigation of a website depends on having simple and familiar wording in the menu.

The wording of each item should be kept short and must be to the point. Any attempt to be creative in the naming of categories will only result in the sort of confusion that will lead users away from the website.

The wording used in a menu can vary according to the type of website:

  • Standard wording is familiar and avoids any confusion, so it should be used whenever possible.
  • Minimal wording can be effective when visuals are added for greater clarity
  • Descriptive wording might be necessary if the website has some unusual categories
  • Personalized wording can create a more personal navigation experience when it is appropriate for the website

Sorting categories alphabetically?

In some cases an alphabetic sequence will be the method that works best, but categories should not be listed alphabetically if any of the following points apply:

  • When there is a more logical order for different types of category to be organized
  • When visitors might not be familiar with exact names, so being alphabetical will not help
  • When a large number of categories could mean that some of them need to be prioritized

Links should be organized in a way that is going to allow the greatest number of people to quickly find what they are seeking. If the most frequently used navigation links appear at the top, this is going to save time for users, because they will not need to read through the entire menu to find what they want.

Sorting nav links

Image source: 7diamonds.com[8]

Prioritizing will also prevent the most important navigation links being lost among all the others, or being featured too far too low down on an alphabetic list.

It can also be more of an advantage to a business website to have the most widely used or most critical navigation links placed close together at the top of the menu, rather than included with all the other categories.

Be careful with hover activated menus

A hover activated menu will provide instant access to users of desktop and laptop computers, but it is important to keep in mind that a proportion of the website’s audience will be accessing it on a small touch screen device, which makes hover activation less desirable.

The navigation links will be too small to be accurately tapped on a touch screen device, and scrolling down the menu will also be more difficult.

Graceful degradation is required to be sure that touch screen users can use the same menu as those who are accessing the content through hover activation on a computer.

Ending thoughts

Google Fonts Navigation

Image source: Google Fonts[9]

Website navigation usability[10] relies on having a well designed menu that makes it absolutely clear how to access each part of the website content. Getting this right is just as important as the quality of the content, because navigation has a big influence on how the content is going to be experienced.

The structure of navigation needs to evolve in accordance with new advances in technology. A rapidly rising number of people accessing websites on handheld devices with small touch screens must be taken into consideration.

Ending thoughts on web design navigation usability

Image source: Ghani Pradita[11]

The best starting point for building effective website navigation usability is the information architecture of the content, which includes everything that needs to be linked.

Some theoretical knowledge can help with navigation planning, organization, placement and wording. Combining that theory with knowledge you gain from user testing is the best way to ensure that the navigation user experience of your target audience is as good as it needs to be.

References

  1. ^ itsjustyes.com (www.itsjustyes.com)
  2. ^ grosselanterne.com (www.grosselanterne.com)
  3. ^ keeping navigation simple (blog.kissmetrics.com)
  4. ^ makes good sense to user (mashable.com)
  5. ^ Frantisek Kusovsky (dribbble.com)
  6. ^ Mani (dribbble.com)
  7. ^ Saptarshi Prakash (dribbble.com)
  8. ^ 7diamonds.com (www.7diamonds.com)
  9. ^ Google Fonts (fonts.google.com)
  10. ^ navigation usability (www.userfocus.co.uk)
  11. ^ Ghani Pradita (dribbble.com)
  12. ^ DesignYourWay (www.designyourway.net)