How do users expect dropdown navigation to work?
This question is in regards to expected behavior with drop-down navigation in web pages.
This is part of an email I just got from a client: ("Admissions" is one of the top level navigation links)
Question about top level of navigation when it comes to Admissions (and any other top level items you can click on and get a page to open). There’s good stuff under Admissions when you click the top. Unless you click on the word Admissions, you don’t get the full description. This may sound silly, but do people know to first click on the navigation headings to get info, and then work the sub-menus that pop up? I always thought you hover over the main heading, get the pop-down menu, and go from there. (Maybe said more technically – do top menu navigation items typically have a landing page when you click on them directly?)
Here's another email I got from a client with the same question:
Question for you - the pull down menus.....when I see a pulldown menu I don't think to click on the top item because I assume it's the heading - is that just me or do you think people might acutually miss clicking on the 'About the foundation' and seeing the piece there? Same with the grant application - should the instructions and application both be sub-menu items so people can easily find both the application and instructions? I'm not sure if this makes sense to you, but I guess I'm asking if when there are sub menu items the heading should not be a link?
In the past I've assumed users know that the top-level link in indeed a link to a page, and not just a placeholder to hover over in order to trigger the dropdown and display the "real" links. I think this assumption has been wrong, and this is not the first time I've had a client ask me about this, or miss reviewing several pages because they weren't aware of the links.
If I didn't have best practices in mind and wasn't an HTML purist, I would simply make the top level links "dead", either with href="#"
or href="javascript:void(0)"
, let them be placeholders only, and call it a day. For technical reasons, they do still need to be <a>
elements. Though this is tempting, I think it's bad practice and there are probably accessibility issues with doing that as well.
I've handled this issue by duplicating the top level link inside the dropdown (creating another identical link with different text), which is the best idea I can think of. I've also made "summary" pages that just re-list the sub links (kind of pointless).
Users don't always know that hovering the link will trigger a dropdown until they actually do it (unless there are little arrows or something). Do they expect every link that opens another level of navigation (when hovered) to actually link to a page when clicked as well? What about for navigation that is 3 or even 4 levels deep?
It's amazing I've gone so may years without ever thinking about this: How do users expect links in dropdown navigation to work, and what do I tell this client?
Should links that have a sub-menu be either unclickable or navigate to an overview/summary page (likely containing an expanded version of the sub-menu), or is it "OK" to put links to unique, important pages as the top level of a drop-down? The more I think about it, the more I'm inclined to say that it's not OK, because these links can be easily missed or overlooked, or users expect nothing more than an overview page.
Interested in hearing what you have to say about user expectations of this extraordinarily common web interface.