While most mobile menus are well designed, desktop menus are something else entirely. 

Good and well-sized desktop menus exist but far too many are cluttered and require a lot of effort to make sense of even for people with perfect eyesight. That’s assuming they even bother to linger so they can squint at the screen. 37% of visitors will just give up and leave if they’re unable to figure out your navigation.

A lot of these problems come with designing for mobile and then just porting the entire creation to desktop. Sadly, it doesn’t always translate well. 

While screen real estate is a big deal on mobile phones, desktops do not suffer from similar issues. Cramping your menu items together in order to save space on mobile makes perfect sense. Doing the same on a desktop with six times as much screen area is highly counterproductive.

Burger menus are a good example. They’re excellent on mobile, saving space and providing intuitive drop-downs as one scrolls down. They make little sense on a desktop however. While navigating with a mouse, clicking on one is just too much of a bother.

57% of mobile visitors use the burger menu but only 27% of those browsing on desktops ever bother with it.

What should you do?

• Remember to put your menus in familiar locations (i.e. where everyone else puts theirs). While pursuing uniqueness is generally a good idea, having an alien menu layout will just confuse your would-be customers and cost you conversions.
• Make your menu items look interactive and clickable. 
• Use whitespace, contrast, and color saturation to make your menus stand out from the background. Your text color should also contrast with the background.
• Aim for around seven menu items per page. Too many and you overwhelm your visitors with information, too few and you fail to show them everything you have to offer.

On desktop

• I recommend using prominent menu icons across the top of the page and down the left side in desktop design. Burger menus should only be used on mobile.
• You should ensure that the main menu as well as the sub-category items are big enough to avoid mis-clicks and mis-hovers.

On mobile

The smaller the device your users are on, the smaller the menu items are. Make sure they’re tall enough in the burger menu so that they don’t misclick.

Read more…

Read more about how to optimize for mobile.

Examples

Adidas

Amazon

ASOS

Crutchfield

Nordstrom

REI