# Navigation

Navigation is one of the most important aspects of an online retail 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. The UX principle, Hicks Law, states that the time it takes to make a decision increases with the number and complexity of choices. Keeping choices to a minimum reduces the cognitive load for users, helping them complete their goals easily.

# Choice

Minimising the number of menu items presented to users, decreases the time needed for them to make a decision. We recommend between 7 and 10 main category links in a top-level navigation.

# Colour

Legibility is important, so designers have to ensure designs are in-line with our colour contrast ratios and accessibility rules.

Large blocks of colour can be mistaken by users as banners or adverts, so it's important to avoid this as they may be ignored by customers. Consider using icons or emojis to make a category stand out instead of using a block colour. Furthermore, it's important to not use block colours to denote different occasions and events (e.g. Christmas or Sale).

# Consistency

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

A consistent navigation can help users understand an interface more quickly. Ensuring interactions are consistent and all links are clickable helps this. Placing a 'shop all' link at the top of a shopping category allows users to quickly navigate to that category.

# Hierarchy

A clear and easy-to-follow hierarchy helps customers find what they're looking for. Hierarchy is important as it allows customers to scan the page for relevant information. A clear visual hierarchy helps reduce cognitive load.

# Rules

  • 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.

# Iconography

Iconography can be used to help customers quickly understand our interfaces. We should use icons that have an existing and expected interaction behaviour. E.g. use plus/minus for accordion menus, a chevron or right arrow for links. See iconography for more information about icons.

# Intent

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

Providing customers with a full-width nav menu on mobile can help remove visual noise and aid their experience.

# Interaction

It's important to give users visual feedback once they've tapped a category to inform them that their interaction has changed something on screen.

Last Updated: 10/25/2022, 8:58:23 AM