Breaking down Amazon's mega dropdown

Hey all,<p>I'm on the team that built this. We also built the redesign that launched last year. In fact, this was part of that. The article pretty much nails our implementation.<p>Point of fact: Our team is recruiting. If you dig UX projects like this, shoot our manager Chad an email: chaddes at amazon dot com

It's probably a great testament to its good design that I failed to notice how well it works when browsing Amazon. Everyone notices awful dropdown menus (and I really don't like Bootstrap's), but good ones like this often pass un-noticed because they work so well.

This has always irked me about Windows's implementation of the auto-complete box.<p>If I start typing, in the address bar for one example, and my mouse happens to be resting over where the auto-complete will soon appear (as is likely because I just had to move the cursor to the address bar to select it) when I hit "enter" it will go to whatever my mouse cursor was over rather than what I typed.<p>The auto-complete box should detect mouse MOVEMENT not mouse position. The fact that my mouse was there before the auto-complete box even rendered should be a massive red flag that I am NOT selecting something in the list.

There is an important point to be made about the quote from the end of this article.<p>"Thanks go to Ben Alpert for helping me understand the linear algebra / cross-product magic ...I ended up going w/ a cruder slope-based approach, mostly b/c I’ve lost all intuitive understanding of linear algebra"<p>Let that be a wake up call to all of the programmers who continue to claim that you can "get away" with out knowing much math. In this case, the author admits that he used an inferior solution at first because it was based on the math he was comfortable with.<p>There are so many reasons that math is important in programming, but this article added another item to my list, namely: the level of math that you are comfortable with heavily informs and influences the various options available to you in forming a plan of attack against all types of problems, even those as simple as a drop down menu on a website.

Tog wrote about implementing this in MacOS: <a href="http://www.asktog.com/readerMail/2000-07ReaderMail.html#Anchor6" rel="nofollow">http://www.asktog.com/readerMail/2000-07ReaderMail.html#Anch...</a>

Wow, I can't believe I saw both aspects of that behaviour (changing quickly and selecting an element diagonally) and I never noticed that something should be wrong. This exactly the definition of good UX.

For comparison to native applications:<p><pre><code> - Firefox 19 uses the delay technique - GTK3 uses the triangle technique - Tk 8.6 does what bootstrap does - I can't figure out what Qt 4 does</code></pre>

It's funny to see this level of attention to detail. I've always found Amazon to be one of the worst designed websites outside of the checkout process, and not from a prettiness point of view. I'm convinced their success is purely due to a smooth checkout process, superior customer service (easy refunds, Amazon Locker, etc.) and price.<p>Amazon never makes we <i>want</i> to buy anything. I only buy if I go there knowing what I want. Browsing (as in shop browsing) is broken, the suggestions are inane (you've just bought a white 3m network cable, why not buy a blue 5m one?) and the search tools are lacklustre (can't sort by price until you choose one of three plausible departments your product falls into).<p>I have a Kindle and often go to their website looking for a book to buy. This experience sucks. If I go to Waterstones on the high street, they have both a relatively good depth of inventory but also attractively laid out tables of books grouped by subject. I invariably find 2 or 3 books that I like the look of. Unfortunately for Waterstones, physical books are not what I want (I live in London. Space is not plentiful).<p>Amazon the store front sucks. Amazon the check-out is awesome.

If the right side box is very short, this algorithm gets a bit fussy. Not a problem for Amazon since their right side box is fixed height, but often a problem for menus where there is only one item in the sub-menu (usually because the sub-menu is programatically filled in.) You have to thread the needle moving your pointer to the right, because if you leave the line, it collapses the selection and selects the next item.<p>Even OS X has this issue, so if someone gets a good solution, they can beat Apple at their own game.

This is why I read HN.

Really nice! Two questions:<p>- What's the "cross-product magic Amazon uses to detect movement inside the 'blue triangle.'"?<p>- How did you do those GIFs?

This is some really good UI code. You're storing the state in a very clear way and do the geometry calculations in one place, making it easy to understand what's going on. Nice!

How sad is it that the first thing I thought was, "I wonder if they're going to sue him."

So who's going to submit the pull request to Bootstrap?

Maybe I'm just cynical, but this seems like the kind of thing they would have patented (not that it deserves a patent, just that they would have applied for one).

Excellent presentation in this blog post. Perfect use for looped GIFs.

You can sort of do the same thing in just CSS by adding two small boxes as :after and :before pseudo elements.<p>See: <a href="http://i.imgur.com/aSnjEYx.png" rel="nofollow">http://i.imgur.com/aSnjEYx.png</a> Not perfect, but pretty close.<p>Relevant SASS:<p><pre><code> $boxSize:30px &#38;:hover:after, &#38;:hover:before content: " " display: block position: absolute top: 50% right: -$boxSize height: $boxSize width: $boxSize background-color: transparent z-index: 1000 &#38;:hover:before right: auto left: -$boxSize</code></pre>

Thanks for this and I'm looking forward to trying it out!<p>I've long been annoyed by delayed menu dropdowns, but also having to maintain fine mouse control to get the dropdown to behave how I want it to behave. I don't know why the delay bothers me as much as it does, but I think I'd rather take the finicky preciseness of dropdowns over delayed dropdowns. Amazon's solution is really the elegant winner. There are still some tradeoffs, but I think their solution makes the most sense for delivering expected results to users.

Awesome UX. I believe this implementation is called a v-buffer, though I can't find any references right now but I am fairly certain I read about it a decade back.<p>Apple used this technique for their menus early on while Microsoft took the alternate route of using a delay which was quite annoying. A lot of power users removed the delay via registry settings and it was surprising why Microsoft didn't adopt the v-buffer--might be patents related?<p>The problem with the delay is not only the delay itself but for wider menus the delay needs to be even longer. Then to account for novice users, you add in a little bit extra just for good measure.<p>One way to mitigate long delays is to make the parent menu taller so the user has a bigger margin of error while they move the mouse horizontally to the right.<p>However before hi-res displays became common, vertical real estate was far more limited. On the earlier windows machines where you often ended up having two columns of menus, this was even more annoying because trying to get to the second column of menus required moving your mouse right, through the first-column's submenus. In later version of Windows, Microsoft did away with two column menus and introduced a single column with scroll up/down to solve this issue,but introduced further delay when trying to get to menu items below the visible screen.<p>(edited for grammer)

"See the delay? You need that, because otherwise when you try to move your mouse from the main menu to the submenu, the submenu will disappear out from under you like some sort of sick, unwinnable game of whack-a-mole."<p>How will a delay before displaying the submenu prevent that? If it would be a delay before it disappears I would understand but in the example it doesn't seem to have that.

Thank you for the write-up on this! Like you, that has been a pet-peeve of mine as well.<p>I wonder if we can get a comment from Amazon or Nycto, on why the search box is not auto-focused though. This seems like such a natural thing to do, and saves your users a mouse move and click every time they come to the site.

This is really fantastic behavior, but content - the actual list items they show - is much more important for user experience. Why should "Amazon Cloud Drive" be a "Department"?<p>In the wild, I suspect I would quickly glance at the top level items and decide that this menu isn't useful for me. If I were searching for something specific (presumably the main use case) I'd jump over to the search bar. If I were just browsing, I'd jump to one of the 100000 other random things to look at on the homepage.<p>Somewhat related: I wonder if they thought about varying the top level list items by user.

I don't get why is detecting the mouse direction necessary in the case of the Amazon dropdown; I can see the utility in the Bootstrap example that the article highlights, but if the dropdown menu and its submenus both fit in a perfect square, wouldn't it be enough to detect whether the cursor is inside of either the menu or the submenu to properly show/hide the dropdown and its submenus? What are the drawbacks of this method compared to detecting the mouse direction like the article suggests?

I seem to recall this same technique being used in the pre-OS X era of the Mac OS. Not sure exactly how far back, but I'd say at least into System 8 if not System 7.

An example of doing it wrong? The Facebook chat sidebar, on the right (when trying to access a friend's profile from the hover box).

A little bit more nerdy here.<p>What about the opposite direction, ie. moving from a sub-menu to its parent menu.<p>I see both Amazon and new Khan Academy menu shows instant opening of another submenu when my cursor moves over another parent menu item.<p>I think there needs to be some delay when your cursor stays on another menu item in case you go back to the original parent menu item.

Strange. I re-invented that technique for some drop-down menus years ago. I'm not sure if I observed it elsewhere.

Is the triangle thing straight from amazon code? Because I think it would make more sense to track mouse movement and keep the submenu shown until the mouse is moving <i>towards</i> the submenu. Not in any specific triangle. If the mouse moves below, above or away form the submenu, the submenu changes.

Small, almost trivial things like that are what distinguishes good from awesome! And great post! As alot of people already mentioned, you don't actually see difference, you just see that it's way better but you can't put your finger on it. Thats what great design is there for!

Amazon is often considered a lumbering giant, so it's great to see this type of innovation from them. We all know they spend lots of time on UX, but I had no idea they had teams thinking outside the box like this.

I don't remember when Microsoft started doing the triangular beam (to allow moving the mouse right slightly inaccurately) in Windows, but it was really annoying until they did. I think they had it in Windows 98.

That's quite clever. I've played with the amazon widget quite a bit and it seems to work as intended too.<p>Are there desktop widget toolkits that implement that behaviour? At a glance it seems GTK at least does not.

After reading this thread all day, i felt like i should try out the feature: was as perfect as the work and mathematics behind it, intended ;)

That's where you understand that attention to detail is pretty darn important. Hats off for pointing this out sir.

Somebody needs to nail sub menu ux in Mobile. I haven't seen anything that is impressive. Facebook menu is good.

Wow! Am I stupid or what? Never heard or thought of this technique! Genius! Thanks! :p

Kinda complicated on some parts for me, but neat! Thanks for sharing.

I remember that this is how Mac menus worked vs Windows menus!

Brilliant break down.

That is what is up! Thanks I am definitely using it.

This is what separates boys from men.

Genius! Thanks!

That such a trivial improvement gets a top vote on HN and needs a blog entry just shows how not very far at all we are when it comes to UI.<p>I do honestly believe that we're still in the stone age of UIs and that there's room for a gigantic number of improvements.

hopefully my current customer, will not read this article :D