“Dual” drop down menus are menus that perform a default action when the menu title is clicked, and only show the actual menu when the down arrow on the right side of the element is clicked. Usually such menus do not communicate clearly that clicking the left side of the element performs the default action, instead of showing the menu. (The expected behaviour is that of traditional drop down menus, which always show the menu whereever one clicks).

Of course this never constitutes a fatal usability problem, if the default action is reasonable and provides the choices the menu would have on the target page. It only potentially slows down users by one page load. However, when a truly fluid user experience is the aim, details easily become a differentiating factor compared to other similar products. Today I noticed a solution for “dual” drop down menus that is aesthetically subtle and still seems to efficiently communicate the functionality available.

screenshot 1: menu bar in default state

Delicious has what looks like a pretty standard (and plain) menu bar.

screenshot 2: mouse on the main link

However, when you hover the mouse over either the menu title or the down arrow (of the ‘People’ menu in this case), the corresponding side of the element is highlit.

screenshot 3: mouse on the menu arrow

This effect would not be achieved if either side were highlit already. The point is that the UI gives a subtle hint to the user as a reaction to their action. The user understands almost seamlessly the fact that the element that seemed to be just one menu actually behaves differently depending on where on it you click. (This was my experience, anyway.)