# Navigation

One of the most important aspects of any online experience - it allows the user to find the product or service they are looking for.

When creating a navigation system, our goal is to simplify choices for the user by breaking down complex tasks into smaller steps. Hicks Law states that the time it takes to make a decision increases with the number and complexity of choices.

Evidence of this can be found in the recent Simply Be mobile menu test, where we tested the current menu which contained 50 links against a simplified menu with 14 links. We found that the simplified menu increased click throughs and conversion by 1.7%.

# Choice

Baesd on Hicks Law and previous tests, we know that customers respond better when they're presented with fewer choices.

Further reading

The jam experiment

When choice is demotivating

Do

  • Consider reducing menu items where possible - we recommend between 7 and 10 main category links

Don't

  • Don't have a menu with too many links

# Colour

We should design in line with our colour contrast and accessibility rules.

Bright block colours can often feel like banners or adverts and they may be ignored by customers. See banner blindness for more information.

Do

  • Design with accessibility and colour contrast ratios in mind
  • Use red text to denote sale or clearance links

Consider

  • Consider using icons or emojis to make a category stand out instead of using a block colour

Don't

  • Don't use block colours to denote different occasions and events (e.g. Christmas or Sale)

# Consistency

Consistency helps customers understand an interface more quickly.

We know that when a customer enjoys their experience, they are more likely to return to the site. Consistency plays a key part in this.

Do

  • Create consistent site navigation
  • Put 'shop all' links at the bottom of a shopping category on mobile

Don't

  • Don't create confusing and inconsistent interactions, e.g. having some sub category links clickable, and others not

# Hierarchy

Help customers find what they're looking for.

If a customer can quickly scan for the information they're trying to find, they are likely to navigate there more quickly. A clear visual hierarchy helps reduce cognitive load.

Do

  • Use typography to make a visual hierarchy
  • Use different font weights and sizes to create section titles
  • Clearly denote primary, secondary and tertiary sections
  • Ensure 'sale' category links are always in the same place - we recommend at the top or bottom of the menu

Don't

  • Don't use the same font size and font weight for different sections in the menu

# Iconography

Iconography can be used to great effect to help customers quickly understand our interfaces.

We should use icons that match the expected interaction behaviour. E.g. use plus/minus for accordion menus, a chevron or right arrow for links.

Do

  • Use icons from the NBUX pack - this can be provided on request

Don't

  • Don't use icons that don't match the expected interaction behaviour, e.g. right pointing chevrons that open accordion menus below

# Intent

Respect user intent and reduce distractions - the aim is always to help a customer find what they are looking for. Their journey should be as frictionless as possible.

We know that customers who are able to narrow down their product choices by navigation or filtering, convert at a higher rate than those who don't.

Do

  • Use a full-width menu on mobile to remove visual noise

# Interaction

Highlight 'active' categories by showing visible changes to the customer once they've tapped into a category.

This can be done with colour or a transition, e.g. moving the active category to the top of the screen and adding an active state, such as a slightly darker grey.

Do

  • Visually inform customers that their interaction has changed something on screen
Last Updated: 10/15/2020, 4:04:22 PM