A user interface algorithm in the menu?

By Rickard Dahlstrom | Posted Nov 10, 2014 | 3 min. (614 words)

A few days ago I was for private reasons researching algorithms. I came across Mark DiMarco Youtube talk User Interface Algorithms which I found quite interesting. I’d like to share some ideas and thoughts around this.

I will focus on the algorithm idea Amazon are using for their menu. But before we dig deeper into that I will break down the problems they tried to solve.

We’re all used to menus that unfold on one of the sides of the root menu. If we don’t move the mouse perfectly horizontally the sub-menu will collapse. This forces the user to move the mouse more slowly and carefully and can be a pain in the ass for people with disabilities.

One quite common solution to this problem problem is to add an on-hover-delay. The submenu will wait x milliseconds until it will collapse. If the user slips on the menu item or tries to cross diagonally to a choice on the sub-menu, it won’t collapse… well, at least if the user does this quick enough. The downside is that the menu could feel a bit slow. This solution will help less experienced users and people with disabilities but it’s not waterproof.

This reminds me of the good old times when the mouse had a ball inside. When the ball gathered enough dust it could make this cool jumping effect on the cursor. These menus became a sport based on luck and moving-the-mouse-skill.

AMAZON SOLUTION: No shaky-hand-problem and space rocket fast

The Amazon way to do this is to guess what the user is aiming for. If we know what they are aiming for we know when to collapse and when not to. Amazon is using an algorithm that’s calculating a triangle between your mouse position to the top and bottom of the sub-menu. With a timer they’re frequently checking to see if the triangle is shrinking or growing. If it shrinks we can assume that the user is aiming for the sub-menu. If it grows, the user is probably aiming for something else and we can collapse the menu.

Good

No delay, super responsive menu.
The users can cross straight to their target link.

Bad

If you want to reach the link below and move the mouse slightly to the right the sub-menu won’t change

I would say it depends on how the menu looks. Something I haven’t mention yet is that the Amazon menu is massive and they are using pictures in the sub-menu as well. The way they designed the menu encourages the user to move the cursor across. See picture below. For this menu the algorithm is great. The question now is if we should use this technique on a classic vertical menu like the one I’ve been demonstrating.__

Screen shot of Amazons massive menu.

What more can we use this for?

If we can guess what the user is aiming for there must be more uses for this idea. Algorithms are used a lot on the server side to create intelligent apps but it’s less discussed in the context of user interface. I’d like to end by asking you: how, where and when can we use algorithms in the user interface?