By using the Together Incredible site you agree to the use of your data as per the guidelines in our privacy policy

5 navigation UI mistakes designers need to avoid

02.04.2018

ux navigation prototype

UI relates to the visual aspect of a user’s experience of a website. This includes navigation, menus, buttons, images etc. We would consider the navigation as one of the most important features on a website – it should focus on the most important tasks that users undertake.

 

“Top tasks are the small set of tasks (usually less than ten, often less than five) that matter most to your customers.” Gerry McGovern

Good UI has the potential to improve a user’s experience of a website, and consequently their outlook towards the brand or business. Strong UI design can be the difference between a website that makes an impact and one that fails to succeed.

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.

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

 

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 in 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_nav

Nike.com

For example, Nike uses 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.

 

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 understanding where they are in the site hierarchy. Avoid these small mistakes as these could have big effects.

apple_support_nav

Apple Support

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

 

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

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

 

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/developers bypass is making the whole target area clickable; this will help the user navigate quicker. Taco Bell has made this very prominent in their navigation design, see below.

Taco Bell

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.

Foot Locker

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.

Share Post

Words by Becky Birch

www.togetherincredible.com

Subscribe

Subscribe to our newsletter to stay updated on UX tips and career advice on how to succeed.