Website menus are a balance of keeping it simple but not concealing what your website visitors are after
Menus on websites, seems like a simple topic, or so I thought before starting this article.
The most important thing about any menu is to keep it simple! That probably goes for food menus too.
Like most graphic design, it’s a balance of not too much information or in this case menu links that people get overloaded and not so few that people think what they’re after isn’t there.
Not too much
Having a lot of pages doesn’t have to mean massive menus. In fact, you don’t want a menu so long people have to scroll down to see the bottom, which they probably won’t think to do and miss out on the options at the bottom. We’ve all done that right? Gone onto a website, not bothered to scroll down but thought ‘oh that's it?’ and clicked off the site. I hate admitting it but it’s a common occurrence. This is why it’s best to put the important stuff at the top of your website page as well as menu links. Your menu should not go off-screen!
Think of amazon.com, how huge that website must be, how many products and services they now do. I remember when they just sold books back in the early noughties. Even though there is masses of content on that site, it never feels cluttered or overwhelming. How much of that is down to desensitisation and what we’ve been made to feel is normal from spending so much time on sites like this, perhaps they set the standard for how online shops and bidding websites work?
So, the question here is less about the menu and more about the content and where it all goes. The best way is to think of the content hierarchically. That is to say, if you have the basic content at the top, introductions, big images and short simple videos at the top, and people will drill down to the detail below.
You want to buy a lawnmower, for example, you go to the lawnmower page of a website, where you clicked Lawn Mowers from the navigation at the top, then there’s a range of lawnmowers to choose from. If it’s an online shop with hundreds of lawnmowers then, they may be subdivided into types of lawnmowers, so that would be petrol-powered, hover mowers, and into brands. On the page, there will usually be a range of the top sellers or the ones they really want to sell.
In the navigation there will be those sections to drill down into:
- Petrol powered
- Hover mower
The indented is a way to illustrate submenu item.
Submenu - how deep should you go?
A submenu is the items within a parent link in the main navigation
How many levels down should you expect people to go, well the answer is it depends.
If it’s a very technical site then you can expect people to click down and down, but for a website for the general public, the best place to bury a body is in third level navigation (I pinched that from Google, who said that about the second page of search results).
A well-optimised website for Google and Bing should expect to see its pages appear in the results page. The higher up the menu link is in the website, the more prominence Google will give it. But if you have a well-written page which is only accessible from the third level navigation it may well rank in Google.
Submenus are difficult to navigate on mobile devices, so be sure that people can access your site’s pages via multiple routes and / or have a separate mobile menu to the main navigation.
Design your menu
As a rule, anything designed to be read needs to be clear and easy to understand, that’s the point. This is especially true with a mobile menu.
Mobile menus should be easy to use for even the largest fingers to tap. So links should be big with spaces above and below the text to make the menu options easy to read.
There's not much space on a smartphone or even a small tablet computer, so you don’t want a massive menu taking up the screen. This is why mobile menus became slide-out affairs, so they could be tucked away when not in use.
The brilliantly simple hamburger menu was first designed in 1981 by Norm Cox for the Xerox Star personal workstation now synonymous with mobile menus on websites. Now though, they seem to have crept onto desktop versions of websites, which I think hides the beautiful menus and typography for websites on larger screens. It is helpful to be able to see what’s in the menu while navigating a website, and I feel the burger came out of the necessity for conserving space, what do you think?
Across the top or at the side?
If you have a website down the side of the screen it does mean you might run in the same issue as mobile menus have if they get too long. It can seem boring to do it the same as everyone else but sometimes there’s a practical reason behind it. Having your main menu across the top means you can group items as well as have a second-row if there are lots of links, though I don’t recommend the latter, a second row can cause information overload to a visitor, grouping them into subjects is a much better idea.
Having more than one menu is one way to break up menu subjects for ease of use, but beware a mobile menu can’t do this. For online shops, you may have the account and basket items in one menu and the main menu items (home contact us etc) in different menus. You can have more than one burger menu but this can be confusing for the user. You can group your items into one menu for mobile and have multiple menus for desktop,
Other things in menus
Calls to action such as phone numbers and contact links should be obvious and easy to tap on mobiles. You can put them in the mobile menu but this does risk them being missed along with enquiry opportunities.
So keep it simple
‘Less is more’ my old graphic design lecturer used to tell us, and we’d roll our eyes. He was very right, annoyingly.
Keep your menus simple and clear. This usually starts with planning what pages will link to where. This very much is about what your website visitors will find intuitive. If you over complete it, or make links hard to find, you may put people off and they’ll go elsewhere.
Get it right and people find what they’re looking for and make that all-important ‘hello!’