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 information 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 5 most common mistakes designers make on navigation bar buttons. If you’re making these mistakes, it’s time to fix your navigation bar.

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

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

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

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

5. No Hover and Focus Effect on Buttons

Putting a hover effect on your navigation buttons makes them easier to click. This lets users know when their mouse cursor is in a clickable area. Without a hover effect, users will assume their cursor always needs to hit the text label to activate the button. This makes the hit target smaller which requires more precision from the user.

Not every user uses a mouse. Screen reader users who use a keyboard to navigate need a focus effect when they tab between options. The focus effect is a good accessibility practice for all types of clickable elements.

Visual Cues on the Navigation Bar

The navigation bar is often the first thing the user clicks to navigate a site. Users need visual cues when they click a button so that they know where they are and where they can go.

Make your buttons intuitive by avoiding these common mistakes. Neglecting the visual cues on your navigation bar can affect user engagement. Without clear visual cues, users are navigating in the dark.


Our Products

Light Resume Light Freelancer Wireframe Sheets Wireframe Patterns Flow Patterns

Affiliates

Elegant Themes UX T-Shirts

Author and founder of UX Movement. Founded this site to help you learn user experience design for a more user-friendly world.

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 Comment