Let’s talk about navigation.
If the last time you considered navigation on your site was before Amazon dominated textbook ordering, it’s time to have a think. Digital giants such as Amazon, Spotify, Netflix, Instagram, Hulu, and Airbnb have been busy redefining online habits on their platforms. One element they have invested heavily in for the past three years? Navigation.
As the foundation of any good UX, navigation is a make-or-break piece of your website. Just because you’ve set it up or inherited it, doesn’t mean your job is done. Clean UI, direct links, search, and menus are meant to be the best way of giving visitors what they want.
Still, we’re left with questions: One top menu, or two stacked? What about hamburger menus and dropdowns? Should I ditch the dropdown and feature the search bar? How do I drive traffic to my key pages?
With all of these questions, limited resources, and competing priorities, it’s easy for the perfect site navigation to feel like a pipe dream. You can’t do it all at once. But you and your team can make small improvements that make a big difference to the UX of your site.
Not every navigation is good navigation.
You need not settle for a frustrating journey for your users and your team. Sending your visitors on a wild goose chase for information all over your site is a sure-fire way to lose interest, make a bad impression, and lose confidence in your website. By contrast, strong site navigation helps visitors find what they need, improves conversion rates, helps with SEO, and gives your team insights into user intent. Smart navigation is a marketing tool that keeps website visitors engaged and drives them down the funnel. It’s just as important as a physical visit or non-digital interaction with your brand.
Whether you’re in the middle of a redesign, dreaming of the next one, or happy with your site now, tackling site navigation can be an iterative project of continuous improvement.
5 essential tips to implement today:
1. Hyperlink all navigation elements
Keep your header and footer consistent to act as an anchor for the user. They’ll always know they can navigate to a different page from where they are if clicking always results in an action. Whether a click produces a drop-down menu, a new page, or expanding a current selection, make sure all navigational elements are clickable with an explicit description of where they are leading.
To invite your users to explicitly understand their journey within the website’s architecture, use breadcrumb navigation. LMU uses breadcrumb navigation here, with clickable links for users to easily go back to a broader category. These links prove especially helpful if visitors landed on this page through a search engine (on-site search OR Google) to get to the page.
2. Keep order in mind for your navigation bar
When it comes to your navigation bar, make your first and last items the most important. Take advantage of human’s natural propensity to recall the first and last in your menus.
CVTC’s navigation bar shows “Programs and Courses” as the first tab, and “Apply Today” positioned as the last. Exploring programs is the number one reason that students come to your website, so this tab helps prospects find what they came for. Smart navigation ensures nothing is getting in the way of your highest conversion rate.
3. Drop your dropdowns.
We know, this is going to be controversial. But dropdown menus are on our list of things to nix this year because visitors typically move their eyes faster than they move their mouse. That means, by the time they’ve moved their mouse to a link, they have already decided to click. When they see more options, it just slows them down. More importantly for your content, it gives site visitors the option to skip key pages when browsing your site. You worked hard on your admissions page. Give it the attention it deserves before skipping to the transfer page.
4. But, if you do choose a dropdown, make it count.
If you’ve chosen to have subcategories in your navigation menu, make sure they drop down to make it easier for the user to click around, without accidentally moving to a different tab. In this example, Seattle U creates a dropdown menu that spans the entire screen. This “mega menu” approach allows for a clear hierarchy and enough room for lots of links to live.
Careful with mobile dropdowns! On mobile sites, due to the smaller screen and no ability to hover, consider a different approach to a large navigation menu on the homepage. One option is a fullscreen navigation menu, shown above, the mobile user clicks on the hamburger icon on the homepage.
5. Advanced Search Functionality
A results page of ten blue links hasn’t been cutting it for a while now. With Google snippets, Amazon’s filters and recommendations, and the centrality of the search function to e-commerce and social media, your users expect the ability to filter their search and account for synonyms. Make sure a student searching for “dorms” is not left with a dead-end because the page is called “housing”.
6. Speaking of dead ends, make use of those 404 pages
Nothing is more of a good navigation kill-joy than facing a 404 page when you’re trying to find a specific piece of information. You only have a few seconds before a visitor will abandon their task, so it’s imperative you keep them engaged. Here’s an opportunity to conduct a search with the terms that triggered the 404 or point to popular pages. Amazon has leaned into the 404 pages with a delightful surprise, but gives the option of returning to the homepage or conducting a search.
How do I get started?
Look at some of your competitors (or perhaps some of the schools we’ve highlighted above.) What do you like about their navigation? What makes it difficult to complete common tasks on the website? What makes it easy?
A/B test navigation menus and search bar position. On average, 43% of users automatically use the search bar on your site. What’s more, using site search is correlated to a higher conversion rate, so why not feature the search bar prominently? By testing out different layouts, you can lead the user to be more engaged and most efficiently complete the task they came for.
The schools above took different approaches to search and navigation. Based on your traffic metrics, bounce rates, and popular site search queries, you can begin to improve your navigation and tailor it to your audience and institutional goals.