How to Apply Depth Contrast for Better UI Navigation

Make your menus look natural

Every UI navigation has a set of states. These states indicate which menu items are active and which are inactive. In other words, they represent what the user has clicked, what the user hasn’t clicked, and what the user can click.

Representing navigation states is a challenge for most designers. They often make the mistake of designing states that don’t look or feel natural. The result is a navigation that’s either confusing to understand or jarring to look at.

The last thing you want to do is distract users when they’re trying to navigate a long list. To keep them focused on their task, you need to apply natural depth contrast to your states. Natural depth contrast isn’t merely color contrast but rather color contrast applied strategically and effectively to the interface.

The example above illustrates how unnatural color contrast differentiates navigation states and elements poorly. The search field is too prominent and clashes with the menu items. The indicator for the active item closely resembles a call-to-action button. As a result, users may mistakenly click it when they’re looking for another blue button.

Not only that, but the inactive items also look too “active” because the icons and text are…