WE CREATE BRANDS PEOPLE L♥VE
Share

UX Design for Navigation Menus


Tegra - October 12, 2020 - 0 comments

UX Design for Navigation Menus

UX Design for Navigation Menus 💥

Courtesy of @learn_uxd

Navigation menus are one of the most-viewed and most-clicked-on pieces of the interface 🧭

Let’s look at some principles of nav design that’ll help our users have a better experience.

An extra note about mobile 📱

The default these days seems to be the hamburger menu, but there are alternatives that don’t hide the nav completely like tabs, progressive collapsing, scrollable lists, and so on.

Do you realize... Navigation menus are one of the most-viewed and most-clicked-on pieces of interface. Let's look at some principles of nav design that will help our users have a better experience.

Do you realize…

Navigation menus are one of the most-viewed and most-clicked-on pieces of interface. Let’s look at some principles of nav design that will help our users have a better experience.

Placement matters  The web has developed a clear pattern for where navigation goes (very top, left side, or in the footer). When menus are placed outside of these areas, it feels awkward, confusing, and hard to find.

Placement matters

The web has developed a clear pattern for where navigation goes (very top, left side, or in the footer). When menus are placed outside of these areas, it feels awkward, confusing, and hard to find.

Show them where they are  Clearly communicate the user's current location. Use multiple clues, like the ones below, to help them orient themselves. Our users should never have to wonder where they are.

Show them where they are

Clearly communicate the user’s current location. Use multiple clues, like the ones below, to help them orient themselves. Our users should never have to wonder where they are.

Mega menus vs. dropdowns  Research shows that mega menus provide a better experience than list dropdowns because they show everything at a glance, are able to utilize imagery, allow for better grouping, and feel more engaging.

Mega menus vs. dropdowns

Research shows that mega menus provide a better experience than list dropdowns because they show everything at a glance, are able to utilize imagery, allow for better grouping, and feel more engaging.

Effective link titles  A user should be able to easily predict where a link will take them before they click it (this is called information scent). The single biggest factor in this is how good of a job we do at link labeling.

Effective link titles

A user should be able to easily predict where a link will take them before they click it (this is called an information scent). The single biggest factor in this is how good of a job we do at link labeling.

How many items?  The right number of items in your menu depends on a few things, like how complicated your product is or how savvy your users are. But try to get to fewer than 6 or 7 items. The order also matters.

How many items?

The right number of items in your menu depends on a few things, like how complicated your product is or how savvy your users are. But try to get to fewer than 6 or 7 items. The order also matters.

Don't hide it  Navigation menus are one of the most-clicked-on pieces of interface, and they provide major contextual information to the user. Default to keeping it visible, even on mobile.

Don’t hide it

Navigation menus are one of the most-clicked-on pieces of interface, and they provide major contextual information to the user. Default to keeping it visible, even on mobile.

Visual design tips  Good UI design makes a big difference. Below are a few tips to create a better experience. When in doubt, test! And don't forget about accessibility.

Visual design tips

Good UI design makes a big difference. Below are a few tips to create a better experience. When in doubt, test! And don’t forget about accessibility.

Get 50+ Marketing Tools we use in Tegra 🤘

Follow the link 👉 https://use.tegra.co/tools to get a list of 50+ free (or cheap) growth marketing tools that we and other growth agencies use to scale businesses like yours + growth hacking insights.

Related posts

Post a Comment

Your email address will not be published. Required fields are marked *