Have you been tasked to design the Navigation bar? We have shared some common mistakes to avoid!

We would consider the navigation as one of the most important features on a website, users depend on it to find their required information.

Studies by Forrester Research suggest that 50% (more or less) of possible sales are lost because users cannot find what they’re looking for and 40% of users don’t return when their first visit had a negative impact.

We have listed 5 common mistakes to avoid when designing the navigation:


1. No Highlight indication on an active button

There are still so many websites that fail to highlight the active button on the navigation, don’t be guilty of this! It is essential as a designer to indicate how the UI would look for this on your original designs. Users need visual feedback when interacting with your website or they will have no clue where they are in their task flow.

nike navigation image

For example, Nike use colour contrast and a shape (line) to indicate the active button. This shape is equally important as it takes into consideration accessibility for colour blind users.


2. Opacity on selected buttons

Designers often add styles to buttons which are not user friendly, regardless of how good they may look. Some websites use low contrast or decrease opacity to make selected buttons stand out but, this simply confuses the users from recognising where they are in the site hierarchy. Avoid these small mistakes as these could have big effects.

apple navigation image

Can you tell which page the user is on based on the navigation? We are on the ‘support’ page which on apple.com is displayed by dimming the white text to a darker grey. The Navigation is a risky place to use low contrast or opacity, as user may perceive their options to be limited, or waste time trying to work out where they are on the site.

You can use a contrast check software to get the right contrast between button and background. 


3. Low Contrast on inactive buttons

We agree that inactive buttons should have a lower contrast however, not so low that the labels are hard to read. Users often refer to low contrast buttons as disabled or ‘not clickable’ so be vigilant when applying this UI to your website.

github navigation image

For example, the search bar text on GitHub looks in active. We would consider this a crucial element on their website and would avoid the low contrast text on this feature.


4. The area surrounding the navigation label 

There is white space surrounding a label or navigation button which separates it from other buttons. One mistake designers bypass is making the whole target area clickable; this will help user navigate quicker.

tacobell navigation image


5. No hover effects on buttons

It’s a simple win yet, so many websites are without it. Applying a hover effect to your navigation buttons makes them easier to click and lets the users know when their cursor is in a clickable area. Without the hover effect, the users assume they need to hit the actual label to activate the link therefore makes the target area smaller and requires more precision from the user – this is too much effort.

footlocker navigation image


In Conclusion

The navigation bar is often the first thing that the users look for to help them reach their end goal. We advise you make your buttons intuitive by taking these common mistakes into consideration.


You may also like to read:

6 UX principles that will guide you to create killer content 

50 terms you need to know as a UX designer