What You Need to Know About Popular UX Navigation Patterns

Facebooktwitterlinkedinmail

effective ux navigation patternsNavigation is an important part of website design because it serves to aid the user in finding what they’re looking for. If you’re optimizing a site for task completion, navigation plays a big role in whether or not users can accomplish what they set out to do. Effective UX navigation patterns help users quickly find what they’re looking for and are an important part of creating a good website experience.

Here are some things to consider when determining effective UX navigation patterns for your website:

Simple Text Link Navigation

This is the standard type of navigation where you see a few text links that lead users to the core functionality of the site. You can make text link navigation more useful with design features such as underlining and changing color. Category labels should be familiar and relevant. People want to know what to expect when they click on an item and will avoid unfamiliar terms.

Nike simple text UX navigation pattern

Nike uses a very simple navigation menu with five hypertext links.

Pros: simplicity, ease-of-use

Cons: may not work for mega-sites which require much greater depth

Sticky Navigation

Sticky navigation stays in place as a user scrolls down the page. Sticky navigation is used to make sure the main menu is always easily accessible to users. This helps users to quickly locate what they want on your site. Sticky navigation should be used when the user needs to do a lot of scrolling.

Sticky navigation is also known as fixed navigation and persistent navigation.

Pros: user accessibility, ease of access to a website’s core functionalities

Cons: it takes up space (especially on mobile), distracting, unnecessary, doesn’t always work for mobile, complicated design can increase page load times

Mega Menus

Mega menus are large, drop down menus with many layers of navigation to help users easily pinpoint specific items of interest. Mega menus are good for sites with a lot of content and categories. This can work well for large retail ecommerce sites. Mega menus are most often used on desktops.

Pros: all options visible, organizing options – structure into panels or sub-areas, illustrate choices – images and icons

Cons: can overwhelm users with too many options, can become completely non-functional if the window is narrow (think mobile), users can’t scroll because it only stays displayed when the mouse is hovering over the menu, potential problems for SEO (huge number of on page links, hundreds of keywords, link dilution, etc.)

“Menus should be edited judiciously — and pruned even more ruthlessly than full pages.” – Jakob Nielsen

Slide-Out Menus

spotify slide out hamburger menu

Spotify’s slide-out menu allows users to access their music interrupted but keeps the core functionality just a click away. Keeping the core functionality behind the hamburger menu could be a detriment though.

Slide-out menus allow for the main content to be displayed first without the menu getting in the way. This type of UX navigation pattern is popular on mobile and is now seen on desktop sites as well. Slide-out menus can be responsive, so they are device-agnostic. They allow people to access the menu without losing their place on the screen. Slide-out menus are often used with the hamburger icon, which is comprised of three horizontal lines, stacked vertically.

Slide-out menus can also be referred to as fly-out menus, off-canvas layouts, sliding drawer menus, side menus, navigation drawers, sidebar menus, hamburgers, or basements.

Pros: it feels very natural to users because it’s like holding onto a physical item to save your place while looking for something else, can save space, provide a clean layout with access to content

Cons: can be bad for engagement, people may not know to look there, people may forget they exist, require more effort because you have to tap first to see the options, may hinder discoverability, not glance-able

Animated Navigation Elements

walmart functional animation ux navigation patterns

Walmart uses an animated yellow arrow to indicate when a menu is being opened up and remind users it can be closed.

Animations can serve to show users how to interact with your website. Simple animations can draw users in and give users clues as to where to look and what to do. For example, when you hover over the navigation menu on walmart.com, you’ll see an arrow quickly spin upwards, indicating that the menu can go up again. Many websites have navigation elements that are animated on hover. For example, when you hover over a navigation item, the item may change background color or text color, it may increase in size, bounce, or glow.

Pros: can engage users, draws attention, can be entertaining, can help users find what they’re looking for, can help users orient to where they are on the screen

Cons: can slow your website down if not done properly, some users may find them annoying, could become a distraction 

Vertical Patterns and Scrolling

Mobile users viewing content on small screens tend to scroll a lot. Designers are catering to mobile users by designing vertical user flows. Scrolling is faster than clicking from page to page. We’re also ready to move past the myth of “above-the-fold,” thanks to studies that show users don’t mind scrolling. Long scrolling can be used for storytelling by allowing designers to create an experience with a beginning, middle, and end.

Pros: encourages interaction, faster, better for responsive design, better for gesture control

Cons: SEO drawbacks because of one page (Quicksprout and Moz have proposed solutions), potentially disorienting for users, site speed can be negatively affected, need a lean, “sticky” footer so you don’t sacrifice your footer

Takeaways

  • Focus on the needs of your user
  • Don’t forget about the website’s business goals
  • Put navigation menus in places where people will expect them
  • Make it easy-to-use
  • Keep it simple
  • Consider content context
  • Embrace iteration – test to see what works and make appropriate adjustments

Leave a Reply

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