A user interface algorithm in the menu?Posted Nov 10, 2014 | 3 min. (614 words)
Do we really need an algorithm in a page menu?
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.
MENU PROBLEM 1: My hand is too shaky to unfold the menu
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.
MENU PROBLEM 2: My shaky hand is no longer a problem but gosh the menu is so slow
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.
- No delay, super responsive menu.
- The users can cross straight to their target link.
- If you want to reach the link below and move the mouse slightly to the right the sub-menu won’t change
Should we use the algorithm in our menu?
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?
- Mark DiMarcos talk on youtube – User Interface Algorithms
- Ben Kamens blog post – Breaking down Amazon’s mega dropdown
- Amazon.com Try the menu for yourself
- menu-aim.js a jQuery plug in on Github