Having a good menu for your Inspire Site is crucial to your users being able to find the information they need on your website. When designing your site, consider two distinct groups of people who will visit your site:
1) Visitors who know what they need.
These are people who come to your site with a specific purpose. They may already be your supporters or members, and are looking for specific content. You want to design your menu to make important call-to-action items readily available.
2) Visitors who come to browse.
These people may not be familiar with your organization, or maybe they are, but they want to learn more. You want to design your menu so people can easily flow through important content on your site.
As you design your menu, you want to keep these two distinct groups in mind. Can they find the information they need? Does your menu make sense to people who are looking for specific information? Can you scan the options to discover the main areas of interest?
1) Limit your top menu to 5 or 6 items. The fewer menu items, the less likely your visitors’ eyes are to scan past important items. Every time you remove a menu item, the remaining items become more visible and therefore more significant. Challenge yourself to limit your navigation to five main items.
Here a few well designed menu examples:
2) Make sure people can find your menu. There is no reason to hide a menu when you have room to display it. Tiny menus or icons are great for mobile, not for desktop. Additionally, put your menu in an expected spot (the top or side). For the most part, menu placement is not the time to be creative, people have expectations of where a menu should be.
3) Make sure people know that your menu is interactive. Encourage people to click on it. If you use too many graphics or the menu is flat, people may not understand they can click. Take advantage of a hover effect (like a menu item changing color when hovered over) as a visual cue for your user.
4) Draw the visitor's eye with your menu. If the menu is in a prominent and expected place, it may not require significant instruction to the viewer. But don't allow it to get lost, keep your design simple and use contrasting colors for legibility.
5) Be careful of colors. Make sure your text color contrasts with the background color, don't make people squint to read your menu.
6) Use understandable labels. Do not be creative with your language or branding. Be clear and concise. Use words that are understandable to a wide audience.
7) Use Drop Downs or Mega-Menus for more content. If you need to direct people to additional pages or content, create additional options below your 5 or 6 main menu items. However, don't let these get out of hand. People can navigate to a landing page and navigate further from there.
Example of a Drop Down:
Example of a Mega-Menu:
8) Consider making your menu sticky. Make sure people don't lose the menu when they scroll to the bottom of a long page by keeping your menu fixed to the top of the window.
9) Make sure your menu is well spaced. If you squish your menu together, people may have trouble clicking (or tapping) on the item they want to access.
10) Consider anchor links and additional menus on long pages. You can learn more about how to build anchor links in this guide: Creating Anchor Links in your Inspire Website