another question about dropdown menus: should the parent item be clickable?
TL;DR
In my opinion, the parent element (that which when hovered spawns the dropdown menu) MUST be clickable. Other items in the global navigation bar that do not have have dropdown menus take you somewhere when you click them. This must stay consistent. The question at hand is: what's the best way to ensure that the user does not "forget" that that parent element is still a link to a page even when there's a dropdown menu displaying additional links?
I know this has been asked a couple times in a couple different ways, but I don't feel any of the answers address all of my concerns adequately, and I also wanted to get some feedback on my potential solution. I felt it would be hijacking another thread, especially one that has already been answered, to add my thoughts to one of the existing questions, hence this fresh one. Also, all of those questions are from like 7 years ago - there's got to be a lot that's changed since then.
Consider the following structure for a website promoting a fictional SaaS product:
_ 0.0 Home
|_ 1.0 - Solutions
|_ 1.1 - Home
|_ 1.2 - School
|_ 1.3 - Work
|_ 2.0 - Pricing
|_ 3.0 - Company
Hovering over item 1.0
in the global navigation bar will display a dropdown menu, containing the sub-items (1.1
, 1.2
and 1.3
). Hovering over 2.0
and 3.0
does not display a dropdown because there are no sub-items. So what is the behavior when clicking on each of these?
2.0
and 3.0
is easy... the user is taken to the Pricing and About Us pages respectively.
1.0
is not as simple and this is where my conflict lies. I feel like in so many web sites these days, a very common pattern is to have clicking 1.0
do nothing, forcing the user to click on one of the items in the dropdown menu instead. The main problem I have with that is:
Shouldn't the same thing happen when you perform the same action on visually consistent navigation elements? Removing the link from 1.0
could cause confusion - "why can't I click this? I want general information about this company's solutions". Call me a purist, but this inconsistency troubles me.
One solution I've seen proposed is to either remove or leave the link on 1.0
but add another item in the dropdown menu that correlates to the page for 1.0
. So the section would look like this:
|_ 1.0 - Solutions
|_ 1.1 - Overview
|_ 1.2 - Home
|_ 1.3 - School
|_ 1.4 - Work
My main problem with this is that any sense of hierarchy that was designed during the IA is greatly diminished now that 1.0
has been transformed into a sub-page (1.1
). It would not likely be an issue with such a simple structure, but what about for ginormous sites with hundreds of pages and gobs and gobs of information whose easy access is dependent upon comprehension of that hierarchy? One of my main questions: what do the cognitive experts say about this? Is that need to maintain the hierarchy legitimate or am I inflating it?
And secondly... if you remove the link from 1.0
, you've got the same problem as above - keep it and you've got two menu items in close proximity that go to the same place when clicked... that's confusing and doesn't make any sort of fundamental sense to me.
My stance/practice has typically been to leave 1.0
clickable and only display 1.1
, 1.2
and 1.3
in its dropdown. I've tried sticking to my guns with this but the data shows such ridiculously low traffic to 1.0
that change is required..., as if users are so enamored by this bright, shiny dropdown menu, they forget they can click on the parent item (1.0
). Being around in the days before dropdown menus weren't anything but a javascript, cross-browser, cross-platform nightmare, this is surprising to me (get with the times, I know), but it is what it is.
In an effort to fight off bad practice (imo) becoming good practice because it became a trend, I'm hoping to make "my" method work with some deliberate design techniques. I'm hoping that styling all the items (1.0
- 1.3
) consistently while still showing the hierarchical order will be enough to remind (for lack of a better term) users that the parent element is clickable and that clicking it will bring them to a page about exactly what the label says AND AT THE SAME TIME make it clear that clicking any of the sub-items will bring them to a page related to the parent but that likely goes into greater detail.
Something like this:
I will obviously have to build a prototype and do some testing, but I wanted to get my rant and wireframe in front of the wise eyes here first to see what I might improve or am just plain missing. Feedback/criticism welcome.
My final concern is with respect to the content that goes on 1.0
. If this was a retail site and the label was "menswear", it would be easy - 1.0
is a list (or grid or whatever) of ALL the menswear available (or maybe just a list of all the categories showing the top sellers for each... whatever). And 1.1
- 1.3
would be different categories within menswear. But in the case of our SaaS product, 1.0
would talk about the company's product/solution in very broad strokes... meant for the user who just wants to get the gist of it without getting into the nitty gritty - a rather important page in the flow for 1st time visitors.
This brings me to my other main question: While i hope my proposed solution will get more page views for 1.0
(while retaining overall consistency and the site's overarching information hierarchy), is the fact that it is so important a good enough reason to break the rules and make the priority to ensure that it is seen/accessible "by any means necessary"? I hope not, but again, I'd love to hear what you all have to say.
Thanks for making it through!!