How and How Not to Make a Nonprofit Website Menu

Your nonprofit website menu is probably the main way visitors find information about your organization. Good navigation plays a critical role in determining whether your website works for people because:

  • Reading a menu gives a basic summary of what your nonprofit does.
  • Visitors build a mental model of your site based on your menu.
  • Helping people quickly and confidently find the information they need builds trust in both your website and nonprofit.

Making the perfect menu isn’t easy, so keep reading to learn how to build WordPress menus, best practices for designing nonprofit website navigation, and common mistakes nonprofits make when organizing their website.

The Nuts & Bolts of Making Menus in WordPress

First off, you’ll need to know how to create menus and place them on your site with WordPress. For a full walk-through, check out this brief free video from iThemes about the menu builder or sign up for the WP101video library and plugin. If you prefer written documentation with screenshots, the EasyWPGuide.com menu instructions are great too!

Here are the most important things to know about editing menus in WordPress:

  • Menus are built of links to your WordPress Pages, Posts, Categories, Tags, and more!
  • There are two places to edit your menus in WordPress:
    • Appearance > Menus
    • “Customize” in the Admin Bar > “Menus”
  • You decide where a specific menu appears on your site by assigning it to a “Menu Location”.
    • The available Menu Locations you can use will depend on the WordPress theme you choose,
    • You can also place menus in sidebars and footers using the Menus widget.
  • Enter your content (Pages, Posts, etc.) into WordPress first. Only then can you organize it with a menu.

The Basics of a Good Nonprofit Website Menu

Because all nonprofit websites need a menu, “Jakob’s Law” of website usability is a good starting point:

Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know.

That definitely applies to menus.

Look around at your peers’ websites to see how they organize them. Of course your nonprofit has unique needs and audiences to accommodate, but don’t design your menu in a vacuum.

In particular most nonprofit menus:

  • Start with “Home”
  • Include an “About” / “About Us” / “Who We Are” section
  • Make it easy to find “Contact” and “Donate” links
  • Directly link to their work from a “Programs”, “Services”, or “What We Do” section

Again, you won’t get good results with an exact copy of another organization’s menu, but it will give you good ideas to get started.

Six examples of nonprofit website menus
Notice the similarities and differences between the menus from nonprofits, big and small. (Top to bottom: The Harder Foundation, Social Justice Fund, Planned Parenthood, Campeon Foundation, World Wildlife Federation, Wildlands Network)

Here are some other tips for good website navigation:

  • “Show. Don’t tell.” Put the most important public-facing items about your work first. Put the “About” section with pages like Staff, Board, and Financials toward the end. Everyone who needs that information will easily find it.
  • If you have a lot of pages, consider intentionally making less-important, niche, and technical information “deeper” in the site. Your committed users will be motivated enough to find it, and then those pages won’t distract from your most important ones.
  • Work hard to make your menu items clear and concise (1-3 words).

Common Problems with Nonprofit Website Menus

As you try to follow the tips for making a good navigation menu, avoid these common mistakes many nonprofits make:

  • Each page should only appear in a menu once. Putting it in multiple places will confuse and frustrate visitors.
  • With minor exceptions like a 3rd-party donation page, don’t link to external sites from your menu. If you must, visually indicate that the link is different.
  • Your menu structure should not match your org chart! Remember: You are not your website’s primary user! Don’t be afraid to use labels in your menu that don’t align with your internal language if it’s clearer to your website visitors.
  • Avoid acronyms and jargon unless you are 100% sure all your visitors will know it.
  • Don’t get too cute or metaphorical with menu sections. Clarity is most important. Use these 5 attributes of good link labels to evaluate your menu item names.

One Approach for Developing Good Menus

A table covered with four groups of notecards
A card sort in action!

Once you’ve read all these tips, you still need to design your actual menu! Here’s one great way based on a “card sort” technique. Using this process works because you build a menu that accommodates your information rather than forcing it into predetermined “buckets”.

  1. Write out the title of each page on a notecard. (Use half a notecard to save paper!)
    • During this step, make sure your menu labels are clear and unique!
  2. Lay each card face up on a table.
  3. Shuffle the cards around.
  4. Arrange the cards into groups that make sense together.*
  5. Write labels for each group on new notecards.
  6. Take a photo of the result for saving to type up later.
  7. Repeat steps 3-6 multiple times, forcing yourself to experiment with different organizing schemes.

* Beware! This is the step where you will want to recreate your organizational structure!

Do this activity multiple times with yourself, a few colleagues, friend and family, or, best of all, some actual users of your website. You’ll be amazed how much you learn about the information of your site. Usually, by the end of this process, you’ve got a brand new improved website menu for your nonprofit!

You’re Ready to Go!

Building a great navigation menu for your nonprofit is hard work, but the payoff is worth it! By carefully crafting your WordPress menus, your users will be able to find the information they need quickly and help your nonprofit get work done!

On Small Donate Buttons & Contextual Requests for Support

When I’m building a website for a nonprofit, it’s common for the organization to ask me to make their donate button:

  • bigger
  • brighter
  • higher on the page
  • anything else to make it “stand out”

Donate Buttons Don’t Cause Donations. You Do!

I always want to please the client—and I definitely want all nonprofit websites to raise more money for the organizations they support—but this request always comes with an “ok, but…” response:

I’m happy to make this change, but a donate button—no matter the size, color, or position—has never compelled someone to donate on its own. Donate buttons just need to be easy to find once you’ve convinced someone to make a donation.

This seems obvious when you say it out loud, but it’s an important point. It’s the work your organization does and how you communicate that which leads to donations.

Why Donate Buttons Matter

One of the preeminent website usability research organizations Nielsen-Norman Group shows when you do need a well-designed donate button in their research-backed article “5 Tips to Get Donations on Nonprofit and Charity Websites”:

When users were ready to make a donation, they wanted to get to the donation process quickly and easily. Unfortunately, many users spent too much time looking for a way to donate when they were ready to do it. In fact, about 25% of the homepages included in our study failed to provide a Donate call to action. [original emphasis]

Those 25% of websites did need a more-prominent donate button, but they only needed it once their website visitors wanted to make a donation.

In order to generate donations, Nielsen-Norman Group recommends that you “clearly explain what [your] organization does,” “disclose how donations are used,” and “display third party endorsements.” If you haven’t done those three things on your website, it’s premature to worry about the color of the donate button.

Beyond the Donate Button

The fantastic web publication about making websites A List Apart offers an amazing example of how you can increase donations on your website with contextual requests in appropriate website content. In the article “The Core Model: Designing Inside Out for Better Results,” we learn about a Norwegian cancer organization that increased their donations.

[M]any users…look for general information on cancer research, and in this context, we can frame [a request for donations] more specifically: “If you think cancer research is important, you can help us by donating.”

Once they added these contextual, integrated donation requests to their websites, they increased the amount of online donations 398% in the first full year of the new website.

This was in spite of having fewer flashy requests for money on the website:

The previous NCS homepage had several banners and menu items pointing to different ways of supporting the NCS. Today, there’s just the “Support us” item in the menu, and the banners are gone.

This makes sense, right?

“Give me money!”

Ask any communications or development person and they’ll tell you that isn’t a particularly great message to raise money for a nonprofit. Yet, that’s all a “Donate” or “Support Us” button has space to communicate.

So remember:

  • The donate button design and placement is important, but not until you’ve convinced people your organization is worthy of support.
  • Don’t rely on your donate button to drive donations, integrate appropriate requests within the context of other website pages that emphasize the reasons for and impact of a donation.

Luckily, WordPress makes it easy to edit a website, so you can hopefully go make some changes right now!