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.
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
I sit next to the team that built this, and work with them nearly every day. They are every bit as awesome as the dropdown would suggest, and you should definitely email Chad about working with them if you are interested in projects like this.
Am I the only one that gets tripped up each time I go to Amazon by mousing over the button and immediately clicking on it, thinking that's how to get the dropdown to appear, only to have the click take me to 'my account', then requiring me to go back up to the menu and wait for it to drop down instead of clicking? :)
I've always found the 2-stage menu a major annoyance. Navigation always takes way too many steps: 1) hover "Department" if the window isn't wide enough; 2) hover category; 3) decipher the crazy sub-menu that appears to the right; 4) move mouse over and click the same category.
I've always disliked doing this many steps. Please make the Department menu into links such that I can avoid the sub-menus.
Brilliant. I have to admit I was wondering how that was done. It's always fast when I go to use it. Nice work, it's the little things like that that really matter
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.
Exactly what I was thinking. I never noticed that Amazon's dropdown both displayed the submenu instantly and prevented it from mistakenly disappearing.
Speed is also involved. For example, if you hover on Sports & Outdoors and quickly move your mouse towards the Exercice & Fitness sub-item, it'll work. But taking the same path at a slower speed will hide the submenu.
This has always irked me about Windows's implementation of the auto-complete box.
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.
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.
This happens with Win7's start search. Considering that many power users use start search without the mouse (i.e. hit windows key, start typing the name of something, hit enter) it's a really bad implementation.
The Mac equivalent (cmd+space to trigger spotlight, start typing, hit return) behaves as it should. If you move your mouse it'll highlight what is under it, otherwise the highlight stays on the top result as you type.
I use the keyboard shortcut "L" to label my mails. But because my mouse is usually somewhere around the location of the labels submenu before it even renders, I'll often apply the wrong label: the one at the mouse's position rather than the first one in the list. On a side note, starting to type actually hides the mouse cursor, so it took me some time to figure out why the 4th label was applied and not the 1st one.
I think, it depends on Windows version and auto-complete behavior setting. FWIW, Windows 7 doesn't do this with default setting. I do, however, recall observing this kind of behavior on XP.
There is an important point to be made about the quote from the end of this article.
"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"
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.
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.
While I agree that it's good to exhort one another to learn as much math as possible, I feel compelled to offer myself as a counterexample in the "getting away with it" argument.
My formal math education ended with calculus in high school (and college) and then probability in college. Never even took linear algebra, something I've always intended to remedy. I did rock Phil 160A, but that's not really apropos.
Anyway, on to the counterexample:
My first company was math-heavy, doing some pretty sweet web-scale analytics (in 1998!) pushing those matrices into SVD and then some crazy orthogonal rotation routines to make the results more human-readable. I was the only engineer for the first year plus, and the lead engineer for the lifetime of the company (1996-2002). One of the founders was a stats genius, old school, and he designed all of the analytics routines although I ended up implementing them. There is no way I could have ever approached his level, regardless of how much undergrad (or grad-level) math I had undertaken. If that company had been founded by a bunch of CS grads thinking "oh, sweet, I know some big data algos" I don't think we could have pulled it off. He had decades of psychographic analysis under his belt, informing all of our choices, and heading off any number of dead ends. But, even with my limited math, working with him, I was certainly able to implement the relevant bits in a performant manner.
My second company - which I founded - involves, essentially, zero math. (big surprise) Sure I know my CS algorithms and data structures and making educated choices like "should I use a bloom filter here?", but in the end our company deals almost exclusively in business processes that don't happen to need much math. And we're quite successful, with a great 10-years-and-going-strong history as a SaaS vendor.
Point being, there are tons of business problems that don't actually require big math to solve them. What they do require is a deep understanding of the problem space. If you're working on solving a real-world problem, and you've got some spare time, I'd argue that you are better off understanding every last frigging detail of that problem than you are doing some catch-up work in linear algebra. Sure, it may turn out that the solution you need requires sophisticated math - and, to your point, you may not even know that solution space exists if you ain't got the math - but that's secondary to the deep understanding in the first place.
Software is a big, complicated place full of layers upon layers of really complicated stuff. Some layers are full of math, especially when it comes to examples like the OP's. Other layers, however, are not - they are instead full of rules and processes that are based on RFC compliance and real-world knowledge ("oh, Exchange actually does it that way").
I, personally, think the OP took the right path in implementing a solution he understands rather than one which he'll never be able to debug down the road.
I took away the exact opposite - this is yet another example of not needing to know the right math. In the end, he can study up a bit and/or seek out a friend who does know, but be got the hack done without it.
This is how it works with my wife and I sometimes. I write a lot of code, and she either fixes or writes or advises me on the bit I need to work much better.
I admit we can't run the world or write good code without math, but some of us have strengths in other areas.
If your point is that it can be useful, then yeah, point made. If your point is that it is so useful that all programmers need it desperately, sorry, a single place where a more complex understanding of math might (we'll never know) have yielded a better product does not go anywhere near being a point to be made.
I loved all sorts of math while in school, have forgotten almost all of it, and have had to use almost none of what I learned in such a direct way as this. I definitely wouldn't argue that it's not important, but you are overstating it based on an outlier.
I find my math background to be extremely valuable in programming, but this is only sometimes because I use any actual math. Most of the advantage comes from being able to reason about abstractions more effectively. Similar to what you'd expect from a good CS background, which I'm sure most programmers would agree is useful.
For the 0.1% case where he actually would have needed math, he got away with it and just asked a friend. Nothing wrong in focusing on the 90% of the 90/10 and asking for help if you're in that 10% part.
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.
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.
Amazon never makes we want 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).
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).
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.
Even OS X has this issue, so if someone gets a good solution, they can beat Apple at their own game.
It's not magic, it's just math. The cross product [1] between the vector of the mouse movement and the vector of the mouse's location to the menu's top left corner tells you the relative orientation of the two vectors. Compare that to cross product in regards to the menu's bottom left corner and you can easily figure out that the mouse must be moving towards the menu. This is much easier than figuring out the bounding triangle that the person drew in this article and then figuring out if the mouse is inside of it.
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!
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).
Maybe, but I'm not aware of Amazon being a patent troll in its recent history. I'm aware of the fight they had early on with one-click checkout, but since then?
Thanks for this and I'm looking forward to trying it out!
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.
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?
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.
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.
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.
"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."
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.
[+] [-] Nycto|13 years ago|reply
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.
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
[+] [-] revorad|13 years ago|reply
Please tell us why the Amazon homepage doesn't auto-focus into the search box. I think of this every single time I go to the site.
[+] [-] jordw|13 years ago|reply
[+] [-] null_ptr|13 years ago|reply
[+] [-] Serow225|13 years ago|reply
[+] [-] Raphael|13 years ago|reply
I've always disliked doing this many steps. Please make the Department menu into links such that I can avoid the sub-menus.
[+] [-] oh_sigh|13 years ago|reply
[+] [-] tytung2020|13 years ago|reply
[+] [-] BlindRubyCoder|13 years ago|reply
[+] [-] robotmay|13 years ago|reply
[+] [-] bbx|13 years ago|reply
Speed is also involved. For example, if you hover on Sports & Outdoors and quickly move your mouse towards the Exercice & Fitness sub-item, it'll work. But taking the same path at a slower speed will hide the submenu.
[+] [-] sazpaz|13 years ago|reply
[+] [-] UnoriginalGuy|13 years ago|reply
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.
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.
[+] [-] clauretano|13 years ago|reply
The Mac equivalent (cmd+space to trigger spotlight, start typing, hit return) behaves as it should. If you move your mouse it'll highlight what is under it, otherwise the highlight stays on the top result as you type.
[+] [-] bbx|13 years ago|reply
I use the keyboard shortcut "L" to label my mails. But because my mouse is usually somewhere around the location of the labels submenu before it even renders, I'll often apply the wrong label: the one at the mouse's position rather than the first one in the list. On a side note, starting to type actually hides the mouse cursor, so it took me some time to figure out why the 4th label was applied and not the 1st one.
[+] [-] Bjartr|13 years ago|reply
[+] [-] jimbobimbo|13 years ago|reply
[+] [-] calhoun137|13 years ago|reply
"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"
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.
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.
[+] [-] finnh|13 years ago|reply
My formal math education ended with calculus in high school (and college) and then probability in college. Never even took linear algebra, something I've always intended to remedy. I did rock Phil 160A, but that's not really apropos.
Anyway, on to the counterexample:
My first company was math-heavy, doing some pretty sweet web-scale analytics (in 1998!) pushing those matrices into SVD and then some crazy orthogonal rotation routines to make the results more human-readable. I was the only engineer for the first year plus, and the lead engineer for the lifetime of the company (1996-2002). One of the founders was a stats genius, old school, and he designed all of the analytics routines although I ended up implementing them. There is no way I could have ever approached his level, regardless of how much undergrad (or grad-level) math I had undertaken. If that company had been founded by a bunch of CS grads thinking "oh, sweet, I know some big data algos" I don't think we could have pulled it off. He had decades of psychographic analysis under his belt, informing all of our choices, and heading off any number of dead ends. But, even with my limited math, working with him, I was certainly able to implement the relevant bits in a performant manner.
My second company - which I founded - involves, essentially, zero math. (big surprise) Sure I know my CS algorithms and data structures and making educated choices like "should I use a bloom filter here?", but in the end our company deals almost exclusively in business processes that don't happen to need much math. And we're quite successful, with a great 10-years-and-going-strong history as a SaaS vendor.
Point being, there are tons of business problems that don't actually require big math to solve them. What they do require is a deep understanding of the problem space. If you're working on solving a real-world problem, and you've got some spare time, I'd argue that you are better off understanding every last frigging detail of that problem than you are doing some catch-up work in linear algebra. Sure, it may turn out that the solution you need requires sophisticated math - and, to your point, you may not even know that solution space exists if you ain't got the math - but that's secondary to the deep understanding in the first place.
Software is a big, complicated place full of layers upon layers of really complicated stuff. Some layers are full of math, especially when it comes to examples like the OP's. Other layers, however, are not - they are instead full of rules and processes that are based on RFC compliance and real-world knowledge ("oh, Exchange actually does it that way").
I, personally, think the OP took the right path in implementing a solution he understands rather than one which he'll never be able to debug down the road.
[+] [-] andrewljohnson|13 years ago|reply
This is how it works with my wife and I sometimes. I write a lot of code, and she either fixes or writes or advises me on the bit I need to work much better.
I admit we can't run the world or write good code without math, but some of us have strengths in other areas.
tl;dr my matrix algebra is fuzzy too.
[+] [-] obviouslygreen|13 years ago|reply
I loved all sorts of math while in school, have forgotten almost all of it, and have had to use almost none of what I learned in such a direct way as this. I definitely wouldn't argue that it's not important, but you are overstating it based on an outlier.
[+] [-] smilliken|13 years ago|reply
[+] [-] jules|13 years ago|reply
[+] [-] d0m|13 years ago|reply
[+] [-] czr80|13 years ago|reply
[+] [-] StavrosK|13 years ago|reply
[+] [-] LukeShu|13 years ago|reply
[+] [-] bruceboughton|13 years ago|reply
Amazon never makes we want 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).
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).
Amazon the store front sucks. Amazon the check-out is awesome.
[+] [-] unknown|13 years ago|reply
[deleted]
[+] [-] smackfu|13 years ago|reply
Even OS X has this issue, so if someone gets a good solution, they can beat Apple at their own game.
[+] [-] MatthewPhillips|13 years ago|reply
[+] [-] mryall|13 years ago|reply
[+] [-] slig|13 years ago|reply
- What's the "cross-product magic Amazon uses to detect movement inside the 'blue triangle.'"?
- How did you do those GIFs?
[+] [-] moron4hire|13 years ago|reply
[1] http://en.wikipedia.org/wiki/Cross_product
[+] [-] bjterry|13 years ago|reply
[+] [-] glomph|13 years ago|reply
[+] [-] kamens|13 years ago|reply
[+] [-] bazzargh|13 years ago|reply
http://www.blackpawn.com/texts/pointinpoly/default.html
[+] [-] karl_nerd|13 years ago|reply
[+] [-] damoncali|13 years ago|reply
[+] [-] hackerboos|13 years ago|reply
[+] [-] rkuykendall-com|13 years ago|reply
http://blog.getbootstrap.com/2013/02/07/bootstrap-2-3-releas...
( Bootstrap 3 update > "Dropping submenu support." )
[+] [-] mhp|13 years ago|reply
[+] [-] masklinn|13 years ago|reply
[+] [-] adventured|13 years ago|reply
[+] [-] trhaynes|13 years ago|reply
[+] [-] Encave|13 years ago|reply
See: http://i.imgur.com/aSnjEYx.png Not perfect, but pretty close.
Relevant SASS:
[+] [-] ssharp|13 years ago|reply
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.
[+] [-] aleem|13 years ago|reply
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?
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.
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.
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.
(edited for grammer)
[+] [-] Kiro|13 years ago|reply
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.