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.
- How does your site look on mobile?
(Google mobile test)
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.
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.
- A great article by Kissmetrics on Navigation choices
- Some interesting pro vertical arguments by Cosmic UK
- Big discussion on UX at Stack Exchange
- The 2010 case against vertical navigation on Smashing Magazine
- The (belated) 2016 reply to the above article by Just UX Design
That should be enough for all your UX assignments – right kids?
Edwin wrote his first (Harrier Jump Jet) text adventure computer program in 1982 during the Falklands War. He now builds websites using best practice, future-proof web development, Ad marketing & SEO. He at Curtin Uni and OUA where in 2007 he was voted 5th best lecturer (out of 2,500) over all disciplines taught in Australia. He loves sharing what he knows with Australian businesses.
David Gibbens August 25, 2011 at 12:29 am
I did not “see the horizontal menu first” because there wasn’t one when I arrived at this post from a Google search. There is only the vertical menu on the left. Firefox 3.6.
Edwin Lynch September 12, 2011 at 9:58 am
Hi David. Thanks for spotting the deliberate mistake. ;) I’ve removed the offending sentence and tweaked the post accordingly.