Lab

Hierarchical menu usability

What does the users feel when they try to open a section in the website menu and fails?

A generic menu behavior may cause irritation when it suddenly closes, following an attempt to put cursor on a submenu item.

Classic trouble: menu in Bootstrap.


You would say major companies avoid this mistake? Well, think twice. This is one of the most common problems with hierarchical menus. You can start as early as at the operational system of your computer.  

Megafon.ru menu: an attempt to choose Options submenu closes the Internet tab. The user has to lead the cursor on a zig-zag trajectory.

Working with Messermeister we faced the necessity to achieve two navigational goals:
  • Extensive menu. The user inevitably crosses one of the tabs, and the drop-down menu covers the whole screen.
  • Section names consist of two words, which leads to high probability of accidentally touching the next tab when opening a menu section. Visually it is perceived as “twitching”.

Manu websites use hoverIntent, plug-in that creates a small delay for mouse actions. In our case it did not solve the problem: the menu took longer times to respond, while an acceptable result was achieved when the user moved the mouse across the screen fast enough.

The solution was to evaluate mouse cursor trajectory to find out when one needs to open the menu or to go to a next tab.

This solution was most likely first implemented by Bruce Tognazzini when he was working on NeXT and Mac OS operational systems: 

“When I specified the Mac hierarchical menu algorthm in the mid-'80s, I called for a buffer zone shaped like a <, so that users could make an increasingly-greater error as they neared the hierarchical without fear of jumping to an unwanted menu. As long as the user's pointer was moving a few pixels over for every one down, on average, the menu stayed open, no matter how slow they moved.”

Luckily, we did not have to create the solution from scratch: it was taken care of by Ben Kamens with his great plug-in Menu Aim and an exciting story of its development. This plug-in is used, with several modifications, on Messermeister platform::

  • Menu tabs react only when the user lets the cursor rest on them. If the user simply moves the cursor across the screen and touches the menu, it does not open.
  • At each point of time a “triangle” is created, based on the cursor position on the menu tab and the last right and left submenu items. If the cursor moves within the limits of this triangle, tabs do not change. In this case it does not matter how fast the cursor moves.
  • Natural response for menu elements in 200 ms is used.

Just 5 Kb of compressed code create a totally different user experience with primary navigation elements. A small thing, but a big change!  

Buying decisions at an eCommerce platform are made based on the overall experience of interaction. This emotional response is related not only to the prices and products, but also to the interface the user has to interact with. A solid, predictable and natural interface would never lead to a lower desire to buy. A badly executed, irritating and confusing interface may kill that desire.

Well, try to test how the interface of your website makes the user feel!

START A PROJECT

We work around the clock for amazing results for our clients. We will be happy to answer your call from 10-00 AM to 8-00 PM on weekdays.

MOSCOW

Moscow — Russia Varshavskoe highway, 28А +7 495 646 123 9

VILNIUS

Vilnius — Lithuania Smolensko gatvė, 10c +370 5 207 81 37