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