5 Common Design Mistakes on Navigation Bar Buttons

by on 03/29/17 at 12:40 pm

The navigation bar is one of the most important elements on a site. Users rely on it to find the content they need. When designers don’t design navigation bar buttons correctly they force more work on the user.

This can lead to users getting lost and not knowing where they are in the navigation flow. It can also make it hard for them to read the labels and click buttons.

Below are the 4 most common mistakes designers make on navigation bar buttons. If you’re making these mistakes, it’s time to fix your navigation bar.

Not Highlighting the Selected Button

Many designers fail to highlight the selected button on their navigation bar. When users click on a button, they need visual feedback on what they selected.

Without it, they won’t know where they are in their task flow. They could mistake the page they’re on for another similar looking page.

navbarbutton_highlighted

Use both shape and color contrast to highlight the selected button. Using color only may make it hard for colorblind users to distinguish it.

The standard way to highlight with shape is to place a strong underline under the label. You could also place an outline around the label. But make sure it doesn’t compete with any call to action buttons in the bar.

The button label should also appear as the main page heading. But highlighting it in the navigation bar makes it extra clear to prevent any confusion.

Low Color Contrast on Selected Button

Many sites use low color contrast to distinguish the selected button. This is a mistake because it slows users down from recognizing where they are in the site hierarchy.

navbarbutton_selected

The low color contrast makes the button label hard to read. This forces the user to have to recall what they clicked. It’s much faster if users can recognize the selected button through a visual cue.

The selected button should have the highest color contrast of all the buttons. This allows users to recognize the active button at a quick glance.

Use a contrast checker to get the contrast ratio between the button label and background.

Low Color Contrast on Inactive Buttons

The color contrast of inactive buttons should have lower contrast than the selected. But not so low that the labels are hard to read. Too low of contrast can make users miss buttons and think they are disabled.

navbarbutton_inactive

Not Making Area Around Label Clickable

Navigation bar buttons have whitespace around it that separates it from other buttons. You should make each button’s peripheral whitespace a clickable area. This will give the buttons a larger click target so that users can navigate faster.

navbarbutton_peripheralarea

No Hover Effect on Buttons

Putting a hover effect on your navigation buttons makes them easier to click. This allows users to know when they are in a clickable area. Without a hover effect, users will assume they always have to click the button label to activate it.

Treat Navigation Bar Buttons Right

The navigation bar is often the first thing the user clicks on a site. Users need clear visual feedback when they click a button. And they need a visual cue of what button they clicked afterward.

Make your buttons intuitive by fixing or avoiding these common mistakes. No longer should designers neglect their navigation bar buttons. Giving them proper care and attention will make your site a breeze to navigate.


OUR PRODUCTS

Light Resume Light Freelancer Wireframe Sheets Wireframe Patterns Flow Patterns

AFFILIATE

Elegant Themes

Author and editor-in-chief of UX Movement. Finds beauty in clear, efficient design and loves fighting for users.

2 Responses to “5 Common Design Mistakes on Navigation Bar Buttons”

  1. Luis Braschi

    Mar 30th, 2017

    You might want to add “focus effect” along with hover, since they have almost the same functionality.
    I usually use the same CSS rule on both.

  2. Shannon

    Apr 14th, 2017

    Definitely agree with adding :focus to the :hover effect. It’s a really easy way to make your website more accessible for users who navigate using their keyboard.

Leave a Reply to Luis Braschi