Enhancing your website with hamburgers, simplified navigation and drop down menus

Written by Finn Taylor on 29th January 2016

(Last updated 27th October 2016)

No comments
Enhancing your website with hamburgers, simplified navigation and drop down menus

Historically multi-media designers spent a lot of time showing off their prowess with fancy nav bars, which animated and did all kinds of funky effects, however as interactive design matured, it became an accepted ‘good practice' that having ‘flashy effects’ on your navigation was form-over-function and that this was actually overshadowing the content. Navigation was thankfully simplified to be a subtle ‘contents' list which did not distract from what you were reading.

Whilst a clean and simple Navigation design which does not distract from content is still best practice, there are things we can do to improve the user’s experience and journey with some well thought out navigation menus.

Simplifying your navigation

A site-mapping mantra is that a menu should not have more than 7 or 8 top level sections, otherwise it would be difficult to read and therefore use, so care should be taken to limit the number of nav items in a list.

Whilst this is true that the eye can ready 7/8 items and multiple Navigation menus can be used to simplify things, it is all too easy to have a collection of menu items that require the visitors to make decisions, rather than simply being led in.

In recent times we have worked with a number of clients to really focus their navigation, improving the user's experience of the website.

London School of English website nav was dramatically simplified down to 3 key options focusing on the visitors journey.

Enhanced mobile navigation

Whilst mobile responsive websites are commonplace and have been a standard part of our working process for many years, mobile responsive websites have often lacked the finesse of true mobile websites.

Bridging this gap, we have been deploying an enhanced mobile navigation menu which provides a multi-level navigation bar, allowing the users to seamlessly navigate the entire website in a single step (rather  than multiple page loads) offering a much nicer and more initiative experience.

Bellwood Prestbury website using a multi-level mobile navigation that allows the users to navigate the entire site without a single reload.

Drop down menus and mega-menus

Historically we had a bit of an aversion to drop down menus as in the early days they often did not work well across browsers, and often from a usability perspective were not as easy to use as they should have been.

The birth of the mega-menu has however allowed for a much more flexible approach to drop down menus, allowing more custom experience to be created to help users better navigate the website, sidestepping the previous usability issues.

The RH Supplies mega-menu offers visitors a brief description of sections/pages prior to navigating into them, ensuring they can quickly understand the website structure and its lower levels.

Whilst  navigation should be simple and non-distracting as content is king, your website’s  navigation should not be taken for granted, as the corrected information architecture, combined with the right mobile and desktop nav implementations can really deliver an enhanced user experience.

This article was posted in Musings, Responsive, UX by Finn Taylor

  • Finn Taylor

    Finn Taylor

    Finn is a founding director of Liquid Light, and he still (after 22 years of web design) likes to get involved in projects. When he is not worrying about the clients, he is studying Chinese medicine, working with young criminals and doing spartan challenges.

Comments

No comments have yet been posted, be the first to comment by using the form below:

Post a comment

*
*

Sign up to the Liquid Light newsletter

Subscribe to our Newsletter and stay up to date with all things web related. It's crammed full of useful articles, tips and knowledge, invaluable if you have a website or are starting a new web project.