My three simple rules for better website menus

This because competing business interest ignore these three basic rules to better website menus.

When designing menus for websites, there are three things that need to be considered.

1. Does it meet the brand's goals?
2. Does it meet the user's goals?
3. Does it break any of the three simple rules for better website menus.

The first two are always overruled by the third. Only the third point is sacrosanct. There is no point in bringing users to a website if it is unusable.

Rule one. The desktop menu must be only be designed at the smallest breakpoint it appears at.

I don't know how much money is wasted in agencies up and down the country because of failing to follow this very simple rule. All I know is that at the agencies I've worked at, it's been a lot.

Here's a common mistake I see made time and time again.

The point at which the mobile menu becomes a desktop menu is when the browser window is 960px wide.

The designer, opening their favourite design software, creates an artboard with a width of 1280px. They design a full-width menu at that size, that uses all the available space.

Can you spot what's going to go wrong here? Yup. Yet despite the obvious fact that something that is 1280px wide won't fit into a space of 960px wide, designers make this mistake time and time again.

Solution

Design menus at the width that they will appear. If the space isn't big enough, then you need to consider either whether it is it possible to have the mobile menu on larger screens without impacting the UX of a site, or you need to cut the number of items in the menu. The latter is almost always the right decision. Ignore those SEO 'experts' who claim otherwise.

Rule two. Never use a megamenu. Ever. No excuses.

Megamenus are one of those things that seem like a great idea, but never work like you think they will. They are a pain to build (resulting in a poorer ROI for the business), they are a pain to maintain (resulting in on-going opex as its not something non-developers can change), and they are generally crap when it comes to responsive sites.

I've seen projects where more than £1,000 man hours were billed trying to get megamenus to work. It drove the client mad that their ideas weren't being realised and it drove the developer that had been lumbered with bringing it to life to quit.

Like sliders, this is one design trend that doesn't work and should be consigned to the bin of bad-ideas never to be resurrected.

Solution

Never use a megamenu. Ever. No excuses.

Rule three. Never use hover as a way of interacting with a menu.

Until there is a clear and foolproof way of being able to tell what interaction method a visitor to your website is using, always assume they are on a touch-based device.

One of the most important principles in web development is progressive enhancement. That means catering for the very base of users and building on top of that.

As touch screen users can't trigger hover, you should never use it for any interaction with the website.

Solution

Use click and dbl-click to trigger events.