Hello,

We noticed you're browsing in private or incognito mode.

To continue reading this article, please exit incognito mode or log in.

Not an Insider? Subscribe now for unlimited access to online articles.

John Pavlus

A View from John Pavlus

The Ingenious Engineering Trick That Makes Amazon Menus Usable

Hysteresis + path prediction = slick UX.

  • March 9, 2013

Drop-down menus and submenus are a necessary evil of graphical user interfaces. For a site like Amazon, which forces the customer to manipulate an endless number of Matryoshka-doll-like text labels, it’s absolutely crucial to make this hierarchical navigation as easy and fluid as possible. How can you screw up a simple submenu? Oh, trust me, there are ways. If you’ve ever encountered what engineer Ben Kamens calls the “whack-a-mole” menu, you’ll know what I mean. Here’s his example:

GIF by Ben Kamens.

The submenu displays itself instantly when you roll the mouse over its target, but also makes it disappear just as instantly unless you “thread the needle” by moving your mouse exactly horizontally into the submenu area. 

This is super irritating. If Amazon’s menus acted this way, it could cost them millions of dollars in lost sales. 

According to Kamens, the usual solution to “whack a menu” is something called hysteresis. It’s a fancy word that basically just means “delay.” Software engineers makes sure that the submenu doesn’t display (and un-display) instantly; instead, there’s a tiny lag. This gives the user enough time to move her mouse directly (i.e., diagonally) to the submenu item she wishes to click, without the damn thing disappearing out from under her in the process.

The downside is that the submenu itself takes a small bit of time to display in the first place. It’s a very small amount of time, but when navigating in software, anything less than “instant” can feel sluggish. Amazon’s submenus display instantly (no hysteresis up front), but there’s no “whack a menu” problem either. How? 

As Kamens explains, it comes down to something pretty simple: predicting where you’ll move your mouse. Amazon’s engineers predict a certain “zone” of possible mouse paths when you roll over a submenu. If you move into this “zone” (as you would when moving to select an item in the submenu), the hysteresis effect engages, holding the submenu open for you. If you move the mouse outside of this zone, Amazon assumes you’re not interested in the submenu, and it vanishes as instantly as it appeared. 

The result? Well, the result (most likely) is that you never even know how good you have it when using Amazon’s menus. They “just work”; they do what you want and stay out of your way. This is the hallmark of a good software interface: not noticing how good it is. 

But what Kamens’s post (you should really read it) makes fascinatingly clear is just how much engineering and design must fuse together behind the scenes in order to deliver this kind of ultra-subtle, yet ultra-important bit of user experience. At Amazon’s scale, this atomic attention to detail has huge downstream effects on revenue. It’s the perfect example of what Steve Jobs meant when he said “design isn’t how it looks, it’s how it works.” And it’s the kind of human-centric nano-innovation that you never even notice, but have to applaud when you do. 

Read Ben Kamens’s original post here. 

Become an MIT Technology Review Insider for in-depth analysis and unparalleled perspective.

Subscribe today

Uh oh–you've read all of your free articles for this month.

Insider Premium
$179.95/yr US PRICE

More from Connectivity

What it means to be constantly connected with each other and vast sources of information.

Want more award-winning journalism? Subscribe to Insider Plus.
  • Insider Plus {! insider.prices.plus !}*

    {! insider.display.menuOptionsLabel !}

    Everything included in Insider Basic, plus the digital magazine, extensive archive, ad-free web experience, and discounts to partner offerings and MIT Technology Review events.

    See details+

    What's Included

    Unlimited 24/7 access to MIT Technology Review’s website

    The Download: our daily newsletter of what's important in technology and innovation

    Bimonthly print magazine (6 issues per year)

    Bimonthly digital/PDF edition

    Access to the magazine PDF archive—thousands of articles going back to 1899 at your fingertips

    Special interest publications

    Discount to MIT Technology Review events

    Special discounts to select partner offerings

    Ad-free web experience

/
You've read all of your free articles this month. This is your last free article this month. You've read of free articles this month. or  for unlimited online access.