This evening, I found myself clicking and clicking to try to make a drop-down navigation pane go away. I finally resorted to page-refresh (cmd+R). That’s when I saw my mistake. Or the mistake of the designers.
The first thing I did to try to make the drop-down disappear was to click in the main body of the page — outside of the navigation. That didn’t work.
Then I looked “up” and saw “login” — which did not make sense as a way to close the drop-down. But I clicked it anyway. And a popup (“modal”) appeared, prompting me to login with Facebook or Google.
Surprisingly, that action did nothing to make the original drop-down disappear.
I x’ed out of the pop-over and hit refresh.
With fresh eyes, I saw the problem: the drop-down was aligned with “Log In” not with “About.”
The design fix is straightforward: align the drop-down with the appropriate tab:
Changing the marker would also help.
Functionally, however, the drop-down should disappear on-click anywhere outside this area.
~~~
The mobile version of the site has the same alignment issue, which is somewhat understandable given the size of the output device.
Although, there is a shade change in the blue text to helps link the drop-down to its parent, this “active” or “in focus” indicator would be better:
Better yet, re-arrange the action buttons; log in and search are usually on the right:
When designing drop-down navigation features, remember the principle of proximity:
- Align the drop-down with the parent navigation
- Provide persistent “this is the focus” markers, not just one that works on mouseover, to invisibly tie the drop-down to its parent
- Ensure that the drop-down disappears “on click” elsewhere
