We know that the design of a website can make or break that site’s content — and the bigger goals that hinge upon your site’s success. And while you shouldn’t judge a book by its cover, you’ll be hard-pressed to find someone who does not judge a website by its navigation. Think about it: If you had a terrible map, would you know how to get from Point A to Point B?
Site navigation is especially important for SEO as it gives your site a structure and helps search engines to “understand” your site as they crawl the web via links. You can help teach the bots of Google and its competitors by highlighting the most valuable content, keyword verticals, and key landing pages. The right website navigation, then, is like a Russian nesting doll: Bigger categories that gradually get smaller and more specific as you work your way through, in a finite and manageable number of clicks.
Here are 7 best practices to keep in mind for your website navigation, looking at both header and footer menus to better organize all of the content that happens in between.
1. Put your menus where people expect to see them
Remember when we talked about how psychology influences site design? The Gestalt principle of meaningfulness states that we perceive new designs based on how we’ve historically experienced other designs. Websites like the TSE Foundation know that the eye is trained to look at the top of the page for where to go first.
TSE Foundation’s site navigation
Because heatmap data show that we read print and websites on an F pattern, other websites like the Artists at Risk Connection can also make left-hand vertical menus work.
Artist at Risk Connection’s vertical site navigation
And don’t forget the footer menu which, as the name implies, lives at the bottom of the page. This is also a great place to include other vital terrestrial info, like your mailing address, or your social links, as we see the Rhode Island School of Design do here:
Rhode Island School of Design’s footer menu
2. Beware the Paradox of Choice
Speaking of psychology, in 2004 psychologist Barry Schwartz wrote that “Autonomy and Freedom of choice are critical to our well being, and choice is critical to freedom and autonomy. Nonetheless, though modern Americans have more choice than any group of people ever has before, and thus, presumably, more freedom and autonomy, we don’t seem to be benefiting from it psychologically.”
This is Schwartz’s Paradox of Choice. Give us no choice, and we’ll shut down. Give us too many choices and we’ll… shut down. Likewise, you want people to make smart decisions on your website, so you can help guide them to this by narrowing down the number of items in your header menu. Best practices range on this, but go from anywhere between 5 to 9 items depending on how robust your site content is. These items can also have drop-downs.
Using a Chrome extension like Page Analytics by Google can give you insight into which sections of your site attract the most clicks. Use this and your other GA data to determine the pages that are most useful to users and make those the centerpieces of your header menu. A more robust table of contents can live in the footer. And you knew if we were talking about nonprofit digital design that charity: water was going to come up eventually. We love that their main site nav cuts straight to the chase with four site sections: Why Water?, Our Work, About Us, and Thirst Book. This is balanced out on the right with offset buttons for donating, fundraising, and signing in.
charity: water’s header menu
We get a much more in-depth look at the site structure for charity: water in the footer, which uses a design hierarchy to sort out its other website sections, bucketed under the headers Get to Know Us, Connect, Resources, and Get Involved.
charity: water’s footer menu
3. Leverage industry familiarity in your navigation
No matter what cause your organization supports, your organization is, in and of itself, a nonprofit. There are words and phrases that are more commonly associated with the business of helping others, and it’s important to capitalize on the tried-and-true rather than trying to break the mold. For instance, the copy on the Council on American-Islamic Relations’s website navigation could more or less be mapped onto the site nav for, say, Planned Parenthood and make just as much sense.
Council on American-Islamic Relation’s website navigation
This is helpful for users who are trained to look for key phrases like Resources, Get Involved, or — the big one for your organization — Donate. We might even suggest to CAIR that they track click-throughs on Get Involved versus Take Action to see if one resonates more with their audience. Choosing one may reduce the paradox of choice of using two phrases that may seem too similar. (#FreeAdvice)
4. Highlight the pages where key action is taken
We get it. You LOVE your site. And every department LOVES their section on your site. But which are the sections of your site that users love? This is an excellent barometer to prioritize items that can live in the header versus footer. At this point, you should know why you have a website and have set up Google Analytics goals and events to track the key predictive indicators that can show your organization is leveraging offline impact based on online activity.
Let’s take a look at the Natural Resources Defense Council’s website, which earns extra points for not only highlighting its Donate button, but including a sticky feature on that button with a suggested amount (I see you, price anchoring!) and an option that defaults to donating that amount monthly versus once (holla, lifetime donor value!).
NRDC Site Navigation
Clearly that is the end-goal for a visitor to the NRDC’s site, but before that we see how NRDC can nurture users from aware of and interested in their work, experts, and stories of impact to getting involved with their cause — perhaps on a lighter level like signing up for their emails — before financially committing to support their mission. #TFW your site nav mirrors the steps along the funnel of engagement. Mind? Blown.
5. Don’t make people think
This is one of the main criteria against which we judge all site navigation in Whole Whale UX audits, and it’s an important one. Taken in this context, one thing to consider is that you want to set up clear hierarchies in your menus. If you use a drop-down, how do you offset those items to create a compact set of Russian dolls versus a minefield of Legos? (Don’t let your site nav become the lego that embeds into someone’s foot as they make their way through the dark to find the light switch.)
The Kennedy Center’s drop-down menu
The Kennedy Center is a great example of a website that needs to cater to a number of stakeholders — both internal and external. In order to keep users from having to overthink, the Center uses a combination of font pairings and images to set up a visual hierarchy that caters to some of their marquee events (like the annual Kennedy Center Honors) and breaking down other presentations by genre.
6. The fewer clicks, the better
Here’s a little UX mythbusting for you: The three-click rule has been disproven by multiple studies, thereby debunking the idea that users will quit your site if they can’t find what they want within 3 clicks. In fact, sometimes trying to cram everything onto one page in the name of limiting the number of clicks to key information is worse for user experience.
That said, the important thing to note here is the scent of information. Just like Hansel and Gretel were able to find their way home using pebbles, you want to step out your site journey in a way that doesn’t cause your users to turn into Indiana Jones, crossing continents just to find your donation page.
For instance, if I’m looking for a specific article on the website for Sojourners, it may take me more than 3 clicks to get onto their website, the magazine section, and the appropriate backissue. If I’m not logged in as a Sojourners subscriber, then I’ll have to go through that process. But the path makes sense, so I’ll keep at it.
Website navigation for Sojourners
7. Consistency in navigation design is key
Another way of offsetting the demands you make on your users is keeping design elements consistent to help them understand what is part of the menu — and what may be as important as a menu item but still offset just-so in order to distinguish it from the rest of the pack. This is how we leverage Similarity and Proximity within the Gestalt principles of design.
We’ve seen this rule play out already in many of the above examples, but here’s a specific shoutout to Doctors Without Borders, both for how it leverages consistency in several subsections of its website navigation (including that bright red offset for the Donate button)…
Doctors Without Borders website nav
…and for how it breaks this down on mobile.
Doctors Without Borders mobile site menu
#DoctorsWithoutUXIssues
Ultimately, your website navigation should guide users to the actions you want them to take — even if they don’t know that they want to take those actions just yet. Consider the journey from beginning to end, and make sure you’re prioritizing the right trips, for both your audience and the SEO robots that will help broaden your audience. You can lay out a more general map of highlights at the bottom to inspire readers further once they’ve found the site sections that move your mission forward.
Have a specific SEO or content question? Tweet it to us at @WholeWhale!