Horizontal Menus or Sidebar Navigation?

Which is better?

Horizontal menus look great but you are limited to how many items you can have due to page width. Which can be a good thing.

But you want more than ten items – am I right?

Well, with about 50% of users now viewing yoursite on mobile devices, You might want to check how your site looks there.

1200 Pixels Wide

These days, most websites are about 1000-1200px wide. You can fit around 7 items in your top menu without it looking too crowded. You can use sub-menus (or dreaded “mega-menus” – OMG) beneath main menu items, but strictly speaking – this means that you have many hidden options for the user.

This issue is a little similar to the pre-2000AD navigation horror of . . .

Mystery Meat Navigation

“Don’t Make Me Think” by Steve Krug

Ever been served a plate of meat by your grandmother but have no idea what it is – and you’re too afraid to ask? . . . Even after eating it?

That’s called “mystery meat.”

Mystery meat navigation was a term coined by Steve Krug in his 1999 book “Don’t Make me Think.” It’s a design book that is still 100% valid today. In fact, I’d call that book The Bible. It’s not just about websites.

Linked pictures which lead – who knows where? – are also called mystery meat navigation on the web. You’ll get funny looks from famous website usability experts like Jakob Neilsen if you use images or icons only for navigation.

In most cases, your client has final say, but try to avoid mysterious icons or images which link to – I dunno – your Website Design Process page.

Sidebar or Vertical Navigation?

Sidebar (a.k.a. vertical navigation) menus allow you to have many menu items. That’s great right? Not only can I have the usual About Us, but I can also include my download page and my sports page and my daughter’s hobby page and, and, and. . .

STOP! No. It’s not great.

busy vertical navigation

Adding pages to a site with a vertical menu structure is easy, but – like mega-menus – viewers can be given too much choice. Which can lead to no choice at all. Ever stopped at the tiny tins of tuna section at the supermarket thinking, “I can be healthy” and then, because of too much choice, bailing? No? Well. I did.

Horizontal Navigation

Give them about 6 choices

There’s plenty of space vertically – so why not just add items there? Lots of reasons. Too many choices clutter nav. Period.

I like to give a user no more than 6 top-menu choices. — Edwin J. Lynch
(I’m no Steve Krug, but you can quote me if you like)

With only 6 choices, users can dig down through an alternative sub-navigation structure (again, I recommend only a few options in any drop-down menus) to find more information if they really need it.

Other advantages with Horizontal Menus

  • You are ruthlessly forced to focus on 6 main navigation topics
  • You are ruthlessly forced to limits sub-nav items, too
  • People can only remember a few things
  • Everybody knows where they are and where they’ve been
  • Topics don’t disappear below “the fold” of a website
  • At a glance, users know where they are
  • You don’t “lose” your user
  • Nobody has to “think”
  • Users are corralled through the website

In a world where the average site visit is 3 seconds, it’s good to get your message across as quickly as you can. You don’t want juicy content linked low down on a front page (say, below your slider). It’s great if users can see main links at a glance – awful if everything is on show.

Quickly attract relevant people to your site while not frustrating those who didn’t want the information. Remove anything that makes users feel they have to work to find what they are looking for.

Don’t Do “Abundant Choice Nav”

People simply don’t like too much choice.

In other words, don’t link to everything in your site right off the bat. It’s just . . . why would you do that?

Clear navigation menus are a rarity on the web.

Keep it simple.

If you have a biggish website, reveal new elements as the user digs deeper into your site hierarchy.

Don’t listen to l’il ole me. Let the experts have a say.

That should be enough for all your UX assignments – right kids?

 

Tags: ,