/blog/thumbs/600x300r/2018-07/square1-desktop.png
Masterclass

What Makes a Good Website Menu And How To Get There

By Matthew Beck

Every website needs a menu, but even with such a huge amount of collective work put into creating them worldwide, many new websites still get things wrong. The less time a visitor needs to understand your navigation, the better your menu is.

Let's identify the best things to include in a menu to ensure your visitors can effortlessly get around.

Clear Menus Are Clear Winners

very clear and open menu
Locate your content well away from your menu.

Your menu is the most important secondary piece of content on your website. While saying almost nothing on its own, your menu is your portal to everything you have to say.

So why treat it badly?

Give your menu room to breathe, well spaced from any other content.

Blank space is not wasted space, the eye is drawn to anything that breaks the emptiness.

Make sure your menu font is easy to read. While it's tempting to go with fancy font choices, stay well away. They'll only serve to make your navigation hard to read, which is the opposite of what you're aiming for.

Keep It Snappy

menu that could be cluttered is well organised
Having a lot to say doesn't mean you need to say it all at once.

It might be that you have a lot to say and a lot to offer. But don't feel that you need to say everything all at once. As the saying goes, if everything stands out, nothing stands out.

Focus on the important things. If you can categorise your content into just five top level menu items, do it.

Having too many top level menu items will make the whole thing look cluttered. No level of design will be able to rectify that, especially on smaller screens.

Put yourself into the mindframe of your visitors. They probably know what they're looking for on your website, which is why they clicked through in the first place.

Help them find what they want as quickly and easily as possible.

Order Menu Items Properly

Well ordered and concise menu
The wrong order can have unintended psychological consequences.

The ordering of your menu items is extremely important. Have you ever noticed that most website's menus end with 'contact'?

That's not a coincidence, it's to do with our psychology. Our eyes are naturally drawn to the top right of a web page. So of course it makes sense to put a link to the page you'd like people to go to.

Except...

You don't have to go with 'contact'.

Put a link to the page you'd most like your visitors to end up on over on the far right. If your goal is to sign people up, put the signup link there instead of contact.

The first entry in your menu is also important. That's the first place your visitors will look when they've decided to scan through your menu. Put your primary content in the first slot.

Make Sure Your Menu Is Coded Properly

Mobile Menu
The code behind a menu goes hand in hand with the design.

All websites built today need to be fully reponsive. Mobile menus need to be styled in a completely different way to desktop menus due to the serious lack of horizontal space.

This means that the code behind a menu must account for both of these designs at once. If a desktop screen is resized small enough, it should turn into a mobile menu automaically.

User feedback is important, the best mobile menus will have a lot of attention paid to user interaction. Include animations between states and change things fluidly when needed.

I'm Matthew Beck, web designer, developer and owner of Lightspeed Digital. I create bespoke websites from scratch, working with any industry. To find out what I can do for you, call 01273 421702 or send me message at: lightspeed-digital.com/contact