Menu Best Practices
Module 3.2 – Advanced: Site Organization: Menu Best Practices
There are a variety of things you can do to ensure that your navigation menu is intuitive and useful to your visitors. From knowing which pages to include on your menu, to how to structure it, this tutorial will explore some best practices for creating a menu in cuTheme.
But first, let’s look at the new top-level nav in cuTheme.
Top Level Menu
As you can see, we’ve moved to a top-level navigation structure with cuTheme. This may be a big change if you are used to working in ccms with the side-level navigation.
Benefits of a Top Nav
- Consistent user experience across the Carleton domain
- Use the full width of the screen for content – more real estate!
- More modern approach
- Simplifies our template with streamlined development
- Mobile friendly
- Accessible
Step-By-Step: Best Practices
1. Keep it Simple
A top-level nav limits the number of items you can have at the top level due to actual space. However, this is not such a bad thing! Having too many items on your menu can be overwhelming. You don’t need to add every page.
We recommend 5-7 items at the top level. Too many choices can confuse users and lead to choice paralysis.
2. Take Inventory & Create a Plan
Start by looking at the pages on your website. How many pages are there? Can anything be deleted, or merged? Are pages organized in hierarchically in the backend? The most important pages should be at the top level and child pages beneath.
Creating an outline or plan for your website structure and menu is a very useful approach. Consider how many levels you need, and what will fall under each section
Use the Parent Page dropdown at the right to choose your top-level page. This organizes your site, which helps you find pages in the back end more easily, creates a logical URL and path for search engines as well as a logical organizational structure for your users.
3. Chunk Info Logically
Group related sub-menu items under main headings for a straightforward and intuitive menu. For example:
- Future Students
- Undergraduate
- Programs
- Graduate
- Undergraduate
4. Create Clear Menu Labels
By default, WordPress uses the page name as the label for your menu item. You can change this to shorten or clarify for your visitors.
Expand the menu item by clicking on the arrow at the top right. Under Navigation Label, highlight the name in the text field and type in a new menu item label. Click the Save Menu button.
5. Order and Prioritize Items
Once you have your main sections in mind, it’s time to prioritize your content. Decide which sections or pages are the most important and should be prominent. These will form the top level of your navigation menu.
The primacy effect tells us that people tend to remember or go to the first items in a list while the recency effect suggests that the most recent item read (usually the last in a list,) also sticks in the reader’s memory. This suggests the first and last items on your menu garner the most attention.
Following, are some of the critical pages typically found on Carleton sites. But note, your priorities may vary based on your website’s goals and content:
- About
- Programs
- Future Students
- Current Students
- Research
- News & Events
- Contact
Conclusion
To summarize, here are our recommended best practices and steps to re-organize your menu:
- Keep it simple (5-7 items top level) Remove unnecessary items
- Take inventory of your pages and the organizational structure (number of pages, parent/child page relationships)
- Group like items and logically organize your menu. Use sub-items to further group split up your menu
- Make labels descriptive and clear (but not unnecessarily long)
- Put important items at the very top or very bottom of your menu
Video Tutorial
-
Hello and welcome to module 3 of our advanced cuTheme training series. This video is all about creating a great navigation for your visitors.
There are a number of things that you can do to make your navigation menu intuitive and useful.
First of all, keep it simple. We recommend five to seven items at the top level of your menu. If you have a look at the menu for this site, we have about seven currently. And it’s good practice to review your menu periodically as it has a tendency to grow. Remove unnecessary items as a large menu can be overwhelming for your visitors.
Next, take inventory of your pages and the organizational structure. Look at the number of pages, and the parent/child relationships. And then make a plan. Put the most important items at the top level.
If you go to the back end of your site (Pages > All Pages), you can see the number of pages on your website. Here we have 98 Pages published.
Use the parent page drop-down over here at the right under the page tab. This helps you organize your site and find pages more easily in the back end. It creates a logical URL for search engines as well as for your users.
The way that it works is if you look under Page Attributes, you’re going to choose the parent for this particular page. This is module three and underneath that, we have best practices. So here I’ve chosen module 3 as the parent page.
Next, chunk information logically. You’ll want to group like items and logically organize your menu. How would it make the most sense to your visitors?
Use submenu items to further chunk information and break it down in a logical way. At the top level, I have Getting Started then we have the first module, Editing Essentials, and underneath that these three submenu items or sorry these five submenu items.
Make labels descriptive and clear but not too long. By default, the menu item name is the name of your page. But you can change that over here if you go to your menu under Appearance > Menus, click on this arrow. And under Navigation Label, you can change that. If I have something a bit longer, for example About this Training, I can change the navigation level label to read About.
And finally, order and prioritize. Put your most important items as the first or the last items in your menu. According to the primacy effect, people tend to remember or go to the first items. And the recency effect suggests that the most recent items read, usually the last in the list, also stick out in the reader’s memory. So it’s likely that the first and the last items on your menu get the most attention.
Try it Out!
Now that you better understand menu best practices, try implementing them!
- Open your menu
- Consider menu best practices and evaluate your menu
- Re-organize and/or re-label if this would improve your users’ experience