Website Navigation: The Tastiest Menus

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.

Want to grow your business online?

Get Some Helpful Advice

Fill in the form below, and one of the Dentons Digital Team will be in touch.

If you would rather, you can ring up for a chat, or drop in for a coffee. We can help and advise you on how to improve your digital presence. There are no catches.

Share this post

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on print
Share on email

Related Posts

WordPress
Lucille Parker

WordPress FAQ

Whether you are already the owner of a WordPress website, or are considering entering into the wonderful world of WordPress, you will have all sorts of questions to ask, and perhaps be a bit bamboozled by some of the terminology associated with WordPress.

Read More »
WordPress
Lucille Parker

WordPress Plugin Customisation

We are able to reflect the unique style and functionality needs of each business that commissions a website from our team, using a bespoke set of tried and tested plugins that transform each client’s online space into a vibrant reflection of their vision and practical requirements.

Read More »

What We Provide

We provide custom web development, purpose-built for the needs of your customers and business. Through every step of the development process, we’ll stay in full contact with you to ensure your site is accessible and usable.

Call us on 01373 482774 or click on the link below to see how we can help you.