by anthony 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.
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.
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.
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.
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.