Website

7 mistakes to avoid when creating your main menu

Philipp Steinweber
Written by Philipp Steinweber

7 mistakes to avoid when creating your main menu

The most favorite question of our clients is: What will it cost to make a website? While there are approximate numbers which we can and do give out, it often comes down to how much consulting the client needs. We know the technical framework we are operating in very well, but when we begin we might not yet be aware of the amount and depth of the content which is supposed to be on the website. Over the years we have worked out some best practices, which we share with clients who are willing to invest some time of their own dealing with the structure of the content, rather than spending money on us taking care of that. This is absolutely fine, and we’re more than happy to support them in that mission. In the following article we’ll share with you the most common mistakes that can happen in this process.

Mistake #1: Using More Than 7 Entries per Hierarchy Level

This is a crucial one! The human eye is only able to differentiate between seven elements at first sight. That means that when you drop a couple of matches, you can see exactly how many there are without actually counting them, if there are seven or less. Why? Because your eye (ok: mind) is easily able to distinguish between up to 7 elements.

You definitely want the users to grasp all the possibilities in the first few seconds, otherwise you’ll lose them. The good news is: you will always be able to fit your content within seven categories or less. You might just have to think in other categories. Wanna see how confused you get, and how long it takes you to figure out where everything is, once there are too many entries? Here you go with this unfortunate example of a website we visit regularly:

Screen Shot 2013-08-12 at 18.09.59

When we insisted on the 7-entries-rule, the results were outstanding. Let’s take Eco Femme as an example: A project where there’s a lot to talk about, and where we knew it would grow over time. Kathy and Anita wanted to convince us to allow eight menu points. If we hadn’t ‘won the argument’ and ended up using seven, and therefore consolidated the entries in more general categories, the main menu would have grown too many more entries by now (and more is bad!):

Screen Shot 2013-08-12 at 18.15.42

Let’s wrap it up visually:

01-more-than-7-entries

Mistake #2: Inconsistent Title Structure

The main menu’s function is to confuse the user as little as possible. Therefore it is very helpful to stick to a naming convention throughout all hierarchies. It is usually best to stick to ‘keep it simple’. Depending on your audience and the values you want to communicate, you can add a personal touch by adding words like ‘us’, ‘we’ or ‘me’ to the titles, e.g.: About Us, What We’re Doing, Contact Us. If you’re going down that road, be sure that you’re using the same structure throughout your website.
The negative example would be mixing personal pronouns with plain titles and sentences.

02-inconsistent-titles

Mistake #3: Titles Too Long

Let’s hope your new title structure survives the following rule! For various reasons, your general menu titles should be between 5-20 characters. Exceptions can be made, for example when you’re selling products which simply have long and descriptive names. But for a general, normal website, try to stay within those boundaries.

The main reason from a usability standpoint is readability at first glance. As mentioned in the first rule, there are certain amounts of information the user can deal with at first glance. And it’s usually very easy to serve the information in such a way that the user can digest it perfectly. In this case: stay between 5-20 characters.

Another reason is the layout. From a design perspective it makes a lot of sense to have certain boundaries in which the navigation takes place defined. By obeying this rule, you make sure every designer considers your title length as appropriate, and that it won’t make the template explode. That’s a point which is getting more and more important, through the increasing number of mobile first websites.

03-titles-too-long-03

Mistake #4: Unequal Submenu Distribution

Your website’s purpose is to not surprise its visitors in any way. While that might sound a bit boring, just think the way the users think: they are expecting to find certain information as quickly as possible. Sure, you want to advertise your special offer and sell your products, but please do that with as little confusion as possible. Remember the Zen!

Ignorance of this principle can be seen in main menus quite a lot: for example in unequal content distribution throughout the submenus. Try to spread your content equally throughout your hierarchy, so try to avoid having one main menu point with 10 sub entries and the others with none. Exceptions can be made for ecommerce sites and other applications of mega menus (see next point) – but don’t try to box through a mega menu for your simple, personal page!

04-unequel-distribution-04

Mistake #5: Using Multilevel Dropdowns

Many of the current WordPress templates support two or more levels of hierarchy. Meaning that after the first dropdown menu, you can go to another dropdown from there. This is tricky, and therefore should be avoided for a couple of reasons. You probably even remember this situation: you try aiming at the second dropdown but miss it slightly, and so the first dropdown also disappears, and you end up aiming into nowhere. So start all over please! If that happens even to us, it must be a real pain for less tech savvy people. And then we also have mobile users. A rapidly growing audience. When implemented badly, it’s often technically not even possible to get into the first level of dropdown, let alone the second tier.

But wait, the solution can’t be fitting everything into an almost flat hierarchy, right? How are large ecommerce websites solving this? The answer is called: Mega Menus. This humbly named approach combines various levels of hierarchies in one dropdown. You can see it especially in web stores all over the internet, e.g. at adidas:

adidas shop mega menu

Various variations of Mega Menus, and those which work best, are being discussed over at Nielson Normal Group. But the reason for them is the same throughout:

05-multilevel-dropdowns

Mistake #6: Not Highlighting Active Title

Remember: cause as little confusion as possible. A very simple thing to do so is letting the user know where he currently is. This might not be too important if the user knows what he’s doing and navigated to a certain menu point on his own. But that’s only one case of usage. It also has to be considered that users often come from search engines and might land on a specific sub page of your website. Then it’s crucial to give them an overview of where they are and what else is there at the first glance.

06-highlight-active

Mistake #7: Not Including ‘Home’

Last but very much not least is including the ‘home’ button. It is common to link to the homepage via the logo and/or header image. But it doesn’t hurt to have it inside the menu in addition. How do we know it’s important? Look at the big players. Facebook for example is still sticking to their text link, and they know why. When you look closer you can see that they’re tracking which link people use to ‘go home’. Their results seem to be that it’s worth to keeping the text link in the main menu, in addition to the image link.

How can you see that they’re tracking? Hover the link and you’ll notice that the image link goes to https://www.facebook.com/?ref=logo and the text link to https://www.facebook.com/?sk=nf. That’s a simple way of testing how people are using the website.

07-forgetting-home

Roundup

A lot of things to consider. Some might be common sense if you have been working with websites for a long enough time. But it’s always worth going back to the checklist and seeing if you implemented everything correctly before you launch your site.
Did we forget something essential, or do you think some points are stupid? Please let us know in the comments!

About the author

Philipp Steinweber

Philipp Steinweber

Philipp is the founder of Metamonks and Omooni, and passionate about personal growth. On Soulful Hustle he open-sources the strategies and insights learned from his projects.

x