Improving user experience with effective navigation design

Designing effective website navigation relies on giving the visitor a clear, concise way of moving through your site without making them think about how this is achieved.

Here are five things to consider for your navigation to ensure your visitors reach the content they want.

 

Make it simple to use.

Website navigation is your way of giving the user a meaningful and effective way of finding the content they have come to your site for. Simplicity is key to this experience as the concept of a website can be potentially confusing. In a society that has an innate understanding of the paradigm of printed literature built up over history and exposure to this medium, the shift to a digital format requires a different approach. While printed material can be quickly scanned, relying on page numbers, section titles and headlines, websites rely on a different set of concepts that need to be consistently present on the screen. These consist of top navigation, side menus, content filters and search functionality. All these need to follow common principles in order to be effective and usable.

 

Standardise the format.

Consistency in the positioning and size of your navigation gives the user a visual anchor to their experience. Your visitors will naturally look to the top of the page to find the links to content and breaking this principle will potentially confuse them. That is not to say that links cannot be put elsewhere but if you choose to do this, it is imperative that their location remains consistent and visitors clearly understand its function. As well as position, the size of the links should remain consistent at all screen widths, particularly with hover states. A relatively common mistake is text that goes from normal to bold when hovered over, causing the link to visually shift everything to the right of it and creating a jarring effect. Any change in text size should be activated by the user and be within their expectations of what will happen, for example a button that increase text size for visually impaired users.

 

Use descriptive links.

Navigation should use terminology that accurately describes the content it links to without ambiguity. Although it can be tempting to use cryptic terms or ones that follow the visual tone of your website, the longer the user takes to decipher a clever link, the more chance there is of them giving up altogether and leaving. Similarly, if icons are being used they must effectively convey the action or link that follows. Careful consideration and planning should be given to using icons where there is a large number of abstract terms that could cause confusion. Nothing halts a smart looking web design when you realise you have to find an icon that represents ’empathy’ or ‘gynaecology’.

 

Use concise terms.

Time is a key factor in the effectiveness of a website’s navigation. It takes time for the eyes to find a link, read it, understand it and finally take action by clicking on it. Now while this time may seem quite minimal, any disruption in this flow creates fatigue in the user and potentially breaks the process. By labelling links with concise names the time to action is reduced. For example, a school website could choose to use labels like ‘School Curriculum’, ‘School Library’ and ‘ The Sports Centre’. While these terms are accurate, in context the words ‘school’ and ‘the’ are not required as the user is already aware of their relevance and only gets in the way of the key words ‘Curriculum, Library and Sports Centre’. By using concise terms, the user’s journey through the site is unhindered and with the least amount of mental processing, allowing more energy to digest the cool content on the site.

 

Structure navigation.

Navigation should follow a logical structure that follows standards of expectation, such as top and side navigation. There are a variety of navigational systems in use and each have their place and context. It is crucial to use the appropriate system to meet the needs of the task that is being put in front of the user; typically navigating pages within a website. The following is a list (not exhaustive) of some of the common navigation systems and their uses:

  1. Top navigation – usually a horizontal list that contains key section links (and do not change).
  2. Buttons – used for isolated calls to action.
  3. Dropdown lists – extend the functionality of the Top Navigation to handle sub-sections.
  4. Breadcrumbs – a horizontal list of links that show page hierarchy in the user’s journey through the site.
  5. Back Button – acts similarly to Breadcrumbs but remembers the user’s path to the present page.
  6. Pagination – contextual links at the bottom of very large lists to navigate through items within that list only.
  7. Icons – common to Applications these represent an action or tool, such as a phone or thumbs up.
  8. Tabs – more common to Applications where similar documents are navigable.
  9. Hyperlink – a simple text link, often within a body of text.
  10. Image – an image that acts as link, usually backed up by a descriptive text link.

 

Conclusion: Creating effective navigation is a challenge but one well worth taking the time and planning to get right. A visitor’s experience can be cut short by poor navigation and they may never return to the site. By maintaining a simple to use structure that accurately represents the hierarchy and organisation of your content, your visitors will find the information they need quickly while giving you the opportunity to highlight the content you want them to see.