October 14
drop down navigation

Keys to successful drop-down navigation

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.

drop down and modal

 

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.”

drop down navigation

 

 

The design fix is straightforward: align the drop-down with the appropriate tab:

drop down fixed

 

Changing the marker would also help.

drop down fixed

 

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.

drop down mobile site

 

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:

drop down mobile fixed

 

Better yet, re-arrange the action buttons; log in and search are usually on the right:

mobile drop down fixed

 

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

 

 

 

 

 

 

 




Posted 14 October 2017 by Kathy Gill in category "Navigation

Leave a Reply

Your email address will not be published. Required fields are marked *