ux-choices

8 Innovative Ways to Optimize Your Website Navigation

By David Hoos
6 minute read | Last Updated: July 15, 2016

Website navigation can make or break your visitors’ experience. The easier and more engaging your navigation experience is, the more time users will spend on your site.

Website navigation can make or break your visitors’ experience. After all, navigating a site without a logical, well-defined structure is like being dropped in the middle of a complex maze with no map and no frame of reference. It’s overwhelming, frustrating, and all-around unpleasant — not exactly the effect you’re hoping for.

However, creating a good navigation system is easier said than done. That’s why we’ve come up with eight ways you can help users find their way. They’ll turn a potentially negative experience into a great one.

1. Replace the Drop-Down Menu

When the options in your drop-down menu are fairly complex, unfamiliar, or extensive, consider replacing it with a detailed page. Usability research shows drop-down menus are annoying; plus, you’ll need to sacrifice valuable info to make everything fit.

Apple has used this strategy to help customers make Genius Bar appointments. Rather than cramming all of its products into a drop-down menu, it’s showcased them on a menu page. The accompanying visuals make finding the right option a simple task.

website-navigation-Apple

2. Make Searching Frictionless

People who run a site search convert approximately two times more often than people who don’t.

It makes sense: Visitors who use search typically have intent to buy or act. Plus, they’re much likelier to find what they’re looking for.

With this stat in mind, make searching as frictionless as possible. You could make your search bar sticky, as Twitter does:

website-navigation-Twitter

NASA also offers a fixed header:

website-navigation-NASA

However, sticky menus can be distracting. If you want the benefits of site search without the potential drawbacks, opt for making your search bar prominent on the page, like Target:

website-navigation-Target

3. Provide Context

To help visitors find the right page without expending a single click, include clues within your drop-down menu. A clue could be a handy icon, a visual, or another helpful piece of information.

Help users find the right page by including clues in your navigation. Click To Tweet

For instance, the “Category” tab on Awwwards doesn’t just display the various categories—it also tells you how many entries are in each one.

website-navigation-Awwwards

Want to browse websites by hue? Each choice in the “Color” menu is helpfully color-coded.

The Warby Parker site also embeds clues within its menu to aid navigation.

Click “Eyeglasses” on the Warby Parker site, and this menu pops up:

website-navigation-Warby

The faces are a quick and easy way to differentiate between the two options.

B&O Play help shoppers figure out which headphones or speakers they want to view with simple sketches.

website-navigation-B_O Play

Since the product names are pretty technical, this touch makes a huge difference in navigability.

It’s even better for mobile users — due to slower loading times, clunky controls, and decreased screen legibility, clicking the wrong link on a phone is pretty agonizing. B&O’s icons will help them navigate to the right page with a minimum of error.

4. Create Separate Menus for Different Audiences

It’s always tricky to design an interface that caters equally to two distinct groups. To make sure each one can find what they need — without having to dig through irrelevant content — divide your links into two.

The Muse, for instance, has two audiences: job-seekers and employers. The first four links in the top nav bar target job-seekers, while the fifth redirects companies to their own section of the site. The link is gray, not white, to indicate that it’s different from the others.

website-navigation-The Muse

Uber’s using the same concept on its homepage. On the left, there are links to “Drive” and “Ride.” On the right, you can choose your city, get help, sign in, or “Become a Driver.” The last button is green to differentiate it from the others.

website-navigation-Uber

5. Add a Fat Footer

Navigational fatigue is definitely a real thing — and when your site has a complex hierarchy, users quickly get tired of expanding sub-menu upon sub-menu.

Fat footers are an optimal solution. They provide a bird’s eye view of your site, so people can quickly zoom in on the page they’re looking for.

Take a look at Baxter’s footer to get an idea.

website-navigation-Baxter

Want to improve your local SEO? Take inspiration from GrubHub’s footer. If you’re trying to rank for a number of specific locations, including them in your footer will help.

website-navigation-GrubHub

6. Choose Your Menu Order Strategically

If I asked you to buy 12 things from the grocery store, chances are you’d come back with the first two items, the last two items, and maybe one of the middle items. That’s thanks to the serial position effect, which shows people have the greatest recall for the first and last items in a list.

You can take advantage of this effect in your navigation design. To drive visitors to your most important links, place them at the beginning and end of your menu.

To drive visitors to your most important links, place them at the beginning and end of your menu. Click To Tweet

Digital Kitchen has book-ended its nav bar with “Clients” and “Contact.” This was a wise choice: first, the agency builds social proof with its roster of previous clients, then it directs visitors to get in touch.

website-navigation-Digital Kitchen

7. Re-List Sub-Choices

Common UX wisdom dictates that you shouldn’t repeat content. However, navigation is one of the few exceptions to this rule. If one or more of your pages naturally fits into two categories, you should list it in both.

REI’s menu illustrates why. Someone who’s interested in buying a backpack might look under “Travel” or she might look under “Camping” — whichever she clicks, you want her to find the backpack page.

website-navigation-REI

In that example, both navigation choices probably seem obvious. But you’ve probably noticed users often confound your expectations. Usability testing definitely comes into play here; watch how visitors try to find their way to specific pages, and look out for common trends.

Of course, you don’t want to go too far in the other direction and start listing every link under multiple headings. If people are always having trouble identifying the appropriate categories, your labels are probably misleading or incorrect.

8. Make Your Navigation Bar Dynamic

To improve your conversion rate without using up valuable real estate, make your navigation bar dynamic.

Cosmetics brand Frank Body has one of the best examples I’ve seen. As you scroll down the page, the “Add to Cart” button floats up in front of each product. You can even adjust the item quantity.

website-navigation-Frank Body

Apple is also riffing on the idea of a sticky purchase option. Its long-scroll product pages have a discreet fixed header with links to “Design,” “Performance,” “Tech Specs,” and most importantly, a “Buy” button.

website-navigation-Apple Sticky Header

The easier and more engaging your navigation experience is, the more time users will spend on your site. Don’t abandon them in a maze — hand them a map.

Is your website frustrating your customers? Get your Stuck Score™ (free) and find out where the problem is and how to fix it.

Leave a Reply

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