5 Mistakes To Avoid While Designing A Navigation Bar

By December 19, 2017App, UX, Website

Designing a Navigation Bar? Here are some mistakes to avoid!

It would be silly to not take in into consideration the navigation bar, a pretty important function. Users depend on it to find their required information.

A small error in designing the navigation bar can force more work on the user. We know what happens when users have to over-do, they leave the site.

We have enlisted 5 common mistakes done while designing a navigation bar. If you are making any of these mistakes, it’s time to fix them mate!


1. Missing Out on Highlighting

Quite a number of designers miss out on highlighting the selected button on their navigation bar. This is a rookie mistake as highlighting is essential because when users click on any given button, they require a visual feedback on if and what they have selected.

Minus that, they will have less clue about where they are in their task flow.

For example, they can easily mistake the page they are on in present for any other similar looking page. Remember to use colour contrast as well as shape to highlight the buttons as limiting it only to colour will make it least accessible for colour blind people and usage of shapes will aid this.

The standard thumb rule of highlighting is to place a bold underline under the label. You can also experiment more, like placing an outline around it. But make sure that it stands out from any other call to action button to avoid confusion.


2. Going For Low Color Contrast on Selected Button

In the bid of having a variation, some sites use low color contrast to make the selected button stand out. Why this is a mistake? Simply because it slows down the users from where they are in the site hierarchy.

The low color contrast button becomes hard to read. This compels the user to have to retract and think what they had clicked. This can cause lag and hence lead to irritation. It’s much faster and easier if users can recognize the selected button through a visual sign.

You can utilize a contrast checker software to get the right contrast ratio between the button label and the background.


3. Low Color Contrast on Inactive Buttons

Yes, it is perfectly correct to now think that the inactive buttons should have a lower contrast. That’s true, however, it shouldn’t be so low that the labels are hard to read. Too low in contrast can make users miss out on a button as they might think that it is disabled.


4. Importance of The Area Around Label

As we know, there is a white space we provide surrounding the bar button that separates it from other buttons. One mistake that designers usually make is that they miss out on making the white space clickable. Making it so gives the user a bigger click target area and hence makes the navigation easier and faster.


5. No Hover and Focus Effect on Buttons

Another trick is to design a hover effect on your navigation button which makes it easier to click. This allows the user to know when their mouse is in the clickable area. Minus the hover button, the user can tend to think that their cursor always needs to hit the actual label to activate the button which consequently makes the hit target smaller as you can imagine and requires more precision from the user.

As navigation bar is often the first thing that the users utilize for navigation make your buttons intuitive by overcoming these common mistakes.