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