Horizontal Menus rule, right? Right, kids?
Vertical or Horizontal Menus?
Horizontal menus look great but you are limited to how many items you can have due to page width.
You want more than ten – am I right?
How does your site look on mobile? Therewhere you simply can’t use “horizontal menus”?
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) beneath main menu items, but strictly speaking – this means that you have hidden options for the user.
This issue is a little similar to the pre-2000AD navigation horror . . .
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.” Linked pictures which lead – who knows where? – are what’s called mystery meat navigation. You’ll also get funny looks from famous website usability experts like Jakob Neilsen if you use images or icons for navigation. In most cases the client has final say, but try to avoid mysterious icons or images which link to – I dunno – your About Website Development 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.
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?