User Experience at IU

Navigation elements like menus and breadcrumbs often play two roles:

1. They assist in wayfinding.
2. They also reflect the web product's architecture, or hierarchy and organization. If a web space has a lot of unorganized pages, its navigation will likely reflect that—and users may struggle to find what they need.

Website navigation

Websites generally have three to four levels (UX Booth). When sites have more than that, navigation menus are usually not enough to signal a user's location. At this point, it's important to optimize your site's wayfinding system.

Marketing websites often include more information than actions. In these cases, use categories to label menu items, as they describe what users can find. For example, a site featuring an org chart could use the department names as menu items. If categories are "distinct and recognizable," flat hierarchies can work well.

User testing, tree testing, and card sorting are great ways to know if users can navigate through your website (regardless of hierarchy) and find what they need (NN Group).

Software navigation

Software architecture can be very similar to that of a marketing site. However, their menus are often different.

Software often uses task-based menus, targeting users who need to get something done (IC Thrive). These menu items (often buttons) should use action language, like "Request time-off" or "Fill out a support ticket."

However, if there are many actions to perform, top-level menus shouldn't include all of them (or use action language). Consider grouping them together, so users have fewer choices to make upfront (Freed Employee Experience Consulting).

Navigation menus & sliding drawers

Navigation menus appear generally as bars on the top and on the left of a website, and they give an overview of the top-level destinations in the website. They achieve lateral navigation. While some navigation bars "stick" to the top of the page, some don't. Sticky navigation bars are ideal for lengthy websites where a lot of scrolling is needed.

However, on mobile, the screen is not wide enough to display a full navigation bar and all the necessary links at once. As a result, a lot of websites turn to hamburger menus/sliding drawers, which frees up screen real estate. Although it creates a better visual design, you might sacrifice engagement by using sliding drawers.

In an A/B test for Zeebox (image 2), where 15% of mobile users see a sliding drawer, and 85% saw a top navigation bar, the company found out that users liked the sliding drawer better, but engagement dropped by 50% and average weekly frequency dropped 36%.