Top 10 UX Design Tips for a Dropdown Menu
The dropdown menu has long been a venerable entry in the web developer’s toolkit. It is so widely used because it can be terribly useful: the dropdown menu tucks away all your pages until a user hovers over a button. It frees up a lot of space for content.
Most commonly, the dropdown menu appears as a horizontal bar of navigation labels at the top of a website. Hover over any particular label and a further submenu will appear, offering instant access to a range of pages within that category. Very often, items in that list will in turn ‘drop down’ further lists.
The trouble is that dropdown menus can also pose challenges to a savvy web developer. Because they can feature so many labels – and once collapsed take up so much space – that it can make the website look quite unappealing. Unless – that is – you follow our top tips:
- Make Hover States Obvious.
If your dropdown menu is to work, your user needs to know where they are in it. Use colour and highlighting to make that clear. - Padding Is Not A Dirty Word.
You’re not a writer, or a musician making your difficult second album: don’t be afraid to pad things out. Put space between your menu’s buttons. - Mark Those Sub-Menus.
If one of your menu’s labels expands a further menu – a section within a section – mark it appropriately, with an arrow, a dot or other icon. - Animate!
Menus don’t have to be dull or static – in fact, dropdowns are so common they can become dull without a bit of subtle animation to spice up their transitions. - Explore The Alternatives.
Many web develops decry dropdowns – particularly if you want a responsive website for mobile devices. Look into scrolling panels and hamburgers. - Consider The Click.
Usually dropdown menus operate simply via hover – but depending on your application clicking to open a submenu, or to hide a menu, could make sense. - Make It Seamless.
There shouldn’t be any lag at all between click or hover and the appearance of your menu – it should load immediately. You owe your user slickness. - Say No To Tooltips.
Tooltips – those often helpful labels which appear when hovering over an item – can be good. With dropdowns, they get in the way. Eliminate them! - Style Consistently.
Make your menu a part of your website. It might not always be on show, but when it is give it the same fonts, colours and feel as the rest of your site. - Be Ruthless With Your Content.
The dropdown menu can go on forever – but that doesn’t mean it has to do so. Only have the number of pages you absolutely need.
Dropdowns have detractors. But follow theses rules of thumb and you’ll have success.
Contact Image Plus for Usability and Website Redesign
If you’re unsure about UX or need help to design your website or drop-down menu then then speak to our experts. Our Web Developers are based in Coventry, Warwickshire and are always ready to help. Please feel free to contact us and speak to one of our website design specialists.
Contact us on 024 76834780 or send us an email at info@image-plus.co.uk
