Love the web

For years, we at Springload have met requests from clients for drop-down-pop-open navigation menus with the same kind of horror we would attach to their request to "just make the logo bigger". Drop-down menus were a big usability no-no. They were deemed difficult to use and the hidden nature of their content hampered users' ability to determine where they were in the site structure.

These were, and still are valid concerns, but the recent proliferation of online applications has resulted in a resurgence of the much maligned drop-down-pop-open menu. The once demon pariah of web navigation has now become menu-du-jour in many modern web apps.

However, most of us have experienced difficulty and frustration when using drop-down-pop-open menus on websites. Single level drop-downs aren't so bad, but when submenus are spawned things often turn nasty. Try to select the "Mesopristes" item (as seen in the screen shot below) in this example (it will open in a new window).

Scarred by prior experience, some of you might have been careful enough to successfully get to the "Mesopristes" option first time, but I bet many of you experienced the annoying situation of having the submenu disappear before getting there, forcing you to slow down and retry more carefully.

You've possibly never noticed, but the menu structures on your computer's operating system and desktop applications - which you've been happily using for years - are actually quite similar to these cheap web rip-offs. The reason you've never noticed is that they simply work intuitively, and the web versions don't. Why? What's the difference?

Unlike their rather primitive web cousins, application and system menus are subtly sophisticated and forgiving. Experiment with the menus on your computer and you'll notice that your mouse can take a direct path between the trigger item and the target item even if that path moves over another non-related trigger item, or even off the menu altogether. The revealed submenu remains intact ready for action as long as your mouse is tracking above a certain speed threshold.

The reason many drop-down-pop-open web menus are so hard to use is that no matter how fast your mouse is moving, unless it stays exactly inside the trigger area as it heads for the target, the submenu disappears. If the target is down and to the right most people will automatically take the shortest route with their mouse. In most cases this results in the menu prematurely closing and if you're unlucky enough to pass your mouse over another trigger item, another unrelated submenu can even be triggered. And we all know how annoying that can be!

But all is not lost. Javascript has evolved greatly and these sort of issues can be easily solved with a bit of thought and application on the part of the development team. Properly coded, dropdown/pop-out menus can work almost as well as their system level counterparts. Have a look at this example and play with the menu. As you can see, it works infinitely better than the previous example and can make all the difference between a bad user experience and a good one.