Do you prefer a hamburger, drop-down, sticky, horizontal or vertical? We’re talking menus of course – that crucial navigation element of a website which it is so important to get right.
If your website is going to work well the users need to be able to comfortably navigate their way around the site to source the information they need. There are various ways to structure a website menu and different places that it can be positioned on the webpage.
Not that many years ago it was pretty standard to have a vertical menu down the left-hand side of the home page, listing links to all the site sections and sub-sections. You can still go for that format, of course, but there are now far many more variables to consider when it comes to site navigation best practice – things like sites needing to be responsive to different devices, web design themes that offer little flexibility and fixed width websites.
HORIZONTAL OR VERTICAL
Generally nowadays left-hand vertical menus are not favoured by website designers. They’re considered old-fashioned and wasteful of valuable space, covering one-fifth or more of the page width that would be better put to use for valuable content. Having a chunk of the page width eaten up by the menu doesn’t leave much room for an interesting, eye-catching layout with good readability that will encourage the reader to follow through on a call to action or conversion.
The latest trends in web design favour a horizontal menu at the top of the webpage. The secret of success here is not to overwhelm readers with too many links. On a horizontal link you won’t have room for more than six or seven, which some may think is restrictive compared to a vertical menu. However, fewer headings/links means you have to be more discerning about what to include in your top level navigation, which is no bad thing. You can, if you wish, have drop-downs from your main menu items to include sub-pages.
The only place where it is necessary to use vertical navigation is on large e-commerce websites, where they are required in addition to horizontal menus to help with product sorting and categorisation.
STICKIES AND HAMBURGERS
Other trendy navigational tools currently in favour – largely due to their suitability for responsive web design – are the so-called “sticky” (fixed) navigational bar and the “hamburger”.
Many websites have their menu bar stuck to the top of the screen, so that it stays put while the user scrolls down the page. Making navigation easier and faster is an obvious advantage of a fixed menu bar; its very important on sites with a great deal of content to be able to browse quickly through it while still having the functional menu bar to hand. (Our own website, dentonsdigital.com, has a fixed menu bar).
Last, but by no means least, let’s discuss the hamburger menu, also referred to as a navigation drawer, a tri-bar, pancake and sundry other culinary terms! You will recognise it as being an icon consisting of three horizontal bars, placed one under the other, generally put in the corner of the screen. Click on it and it opens as a dropdown or fly-out into a menu selection. Handy, especially on mobile screens, because it is inobtrusive and small, and doesn’t impact on the bigger picture. Terrible, according to UX web designers, because there is the fear that any navigation hiding behind this little hamburger will go unnoticed and therefore not accessed and actioned. Many designers have tried getting around this by labelling the hamburger icon with the word MENU boldly displayed on top of it, beside or below it.
It’s fair to say that the hamburger icon has become very common, so most internet users will now be familiar with what it means and what to do with it. There are still those who will miss it, however – and designers believe the website will be losing out on usability as a result.
The compromise is to keep your main navigation immediately visible and accessible, and, if necessary, opt for partial use of hamburger menus for any secondary items.
Top web designers know that good navigation begins with good Information Architecture (IA) – deciding which content to prioritise and highlight, and designing a site that is uncluttered and well organised. The need for websites to be mobile responsive has made this even more crucial.
Make sure your business website design is appetising for hungry users! If you need any help, give Dentons Digital a call on 01373 580126.