Hide Your Menu - Hide Your Site

The Main Menu is one of the first things visitors will see on any website. Whether you own a business and its website, or you are a web designer creating such menus for other people, you know that, after the logo and any pictures placed above the fold, the main menu is probably the next thing to be seen. In part, your visitors see it so soon because it is always at the top of the page, and because it is usually designed to stand out and hit the eye.

But it's more than just that. The main menu is something visitors to a new site deliberately look for very early on because they know that on the this menu they will find an instant summary of all that they can see and do on the site. But does it always work?

What the Main Menu Does For a Business or Organisation

The Main Menu is only a few words long, maybe a dozen or so. Yet those few words both encapsulate the entire website, and also provide a doorway into every corner of that site and therefore into every corner of the organisation the site is for, whether it be a tiny one man firm working from a garage or a global corporation reaching into the farthest flung reaches of the earth. Those few words lead straightaway to the answers to all the questions the site visitor has about the business or organisation.

The visitors already expect some options to be there - About, Contact Us, and so on, and know that they will provide immediate sources of some of the most information about the organisation. Other menu options are also old friends instantly understood; Testimonials, Gallery, Pricing, FAQs and the like. Other options are more specific to the business or organisation, and form a list of things the visitor can find out about it.

Just seeing those words in a menu is the invitation to click and proceed to the delights that will exist beyond them.

And when the visitor has found out what they want to know, menu options like "Shop", "Buy", "Join", beckon to the visitor, silently but persuasively encouraging them to take the plunge and commit themselves in whatever way you, the owner or designer, intend.

But What About Mobiles?

Unfortunately, all I have just said only applies to your website as seen on a desktop. If the visitor is using their mobile phone or tablet, what will they see? Three tiny lines! The "hamburger" icon. Anonymous, small and hard to find, completely unattractive. Abstract, and therefore without any intuitive meaning.

This is the solution that has become the customary method, in Responsive Design, of coping with the problem of squeezing too much into too little. More and more sites replace their wonderfully meaningful main menu by those three little lines, in the mobile version. Meaning that the icon hides everything about the business that the site was actually intended to advertise! That icon is little incentive to a visitor to go further. It doesn't beckon to the user and say, "Click Me!".

In my view the invention of the menu icon was a step backward in user experience.

It was Bill Gates, I think, when he invented the Windows operating system, who first applied the old saying "a picture is worth a thousand words" to support the use of icons. Well, that saying is very true of the Mona Lisa and the Hay Wain. But not, Bill, to three tiny lines in an icon! The Mona Lisa calls to you to stand and marvel until the attendant comes to tell you the gallery is closing. The three little lines of a hamburger icon have about as much calling power as a wet sock.

The Space Problem

True, web designers have a genuine problem of space on mobile phones. Creating a good looking menu when it must wrap fluidly over two or three lines is tricky. And this post is certainly not an argument against icons in general. But in the case of a main menu, hiding the most important words of the entire site is not the solution. It isn't simply the words alone, it is the links that, in a single click, take the visitor deep into the world of the site owner. We should work out ways to show the menu on mobiles and tablets, not chicken out with an icon.

Many sites go much further than necessary in this switch to the hamburger icon, using it on tablet screens when really they could wait until a much smaller size before hiding the menu. Often this is due to the use of grid frameworks such as Bootstrap and Foundation, which have predetermined, default media query break points. On other sites too early use of the icon is probably down to a more mundane reason, simple custom - "we have the menu icon so let's use it".

So a good starting point in solving the "main menu problem" would be to ensure our media breakpoint for rearranging the menu only kicks in when diminishing screen size makes it imperative.

Another solution, becoming more popular with those designers who realise the problems of the hamburger (and very useful if the menu really is too long to keep on the mobile), is to simply use a button with the word "Menu" on it. That does at least make clear what it does, and it does have a certain amount of calling power - it is clearly the gateway to more choices.

One media company, zeebox, has given a very frank account of their experience with the hamburger icon. They tried to switch to it twice on their mobile layout, because they felt it resulted in a cleaner looking screen. The first time they introduced the hamburger icon they committed themselves to the change but the result in visitor analytics showed, in their words, "it was a disaster!" They had to reverse it quickly. The second time round they made the change in a controlled manner, with proper A/B testing, but still found the hamburger lost them click throughs.

Of course, if the visitor has a definite question in mind that they are determined to answer they will, naturally, click on the menu icon and proceed (unless they are internet newbies and don't know what it is). But more casual visitors are notoriously fickle. They don't stay on a site long on average, and it doesn't take a lot for them to leave and look elsewhere. A site needs the words of the main menu, I think, to entice potential customers to stay and delve deeper.

Remember Our Goal!

Most websites have one primary purpose, to lead people through the world of the site owner until they make a purchase, or sign up to something, or take some other action. We must not lose sight of that primary goal in our efforts to fit things into a mobile screen.

The best way to reach that goal is by placing the main menu options right in front of a person's eye, and making them prominent, so the user can scan quickly through the list to see what's available. If we hide the list away, and just show a wimpy little icon, we lose all the powerful impact of that menu.

So show that Main Menu! Don't hide it on the mobile screen, or you could be hiding your entire website!