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?

 

On desktop

 

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