34 ms·
Breaking down Amazon's mega dropdown
- robotmay 14y agoIt'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.
- bbx 14y agoExactly 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.
- sazpaz 14y agoAnd then you have more time to focus on your shopping instead of distracting over the awful submenus.
- mhp 14y agoMaybe 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).
- masklinn 14y agoOther commenters note MacOS has been doing this since System 7.
- artursapek 14y agoI just tried it in Chrome. View > hover over Encoding. Move mouse down over Developer and onto the Encoding submenu. There's a definite delay, although it's much shorter than Amazon's. Move the mouse over Developer in the other direction (down and to the left), and there's no delay. I never appreciated this, yet it affects me many times a day. Really thoughtful UX design.
- adventured 14y agoMaybe, 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?
- hackerboos 14y agoSo who's going to submit the pull request to Bootstrap?
- rkuykendall-com 14y agoBootstrap 3 will actually be dropping submenu support: http://blog.getbootstrap.com/2013/02/07/bootstrap-2-3-released/ http://blog.getbootstrap.com/2013/02/07/bootstrap-2-3-releas... ( Bootstrap 3 update > "Dropping submenu support." )
- radio4fan 14y agoThey're back in, due to popular demand: https://github.com/twitter/bootstrap/commit/6ccf588a8e08a9f99e6a56f9201a4348eb946cde https://github.com/twitter/bootstrap/commit/6ccf588a8e08a9f9...
- ssharp 14y agoThanks 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.
- tyw 14y agoI 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.
- namenotrequired 14y agoYou're right, mac has been using this technique for a while. Actually trying it out right now, it still does this, but you need to move it fast. If you move it fast enough within the triangle it'll stay, while if you move it at the same speed straight down, the menu goes away immediately.
- bluedino 14y agoYou can also tell it doesn't seem to do it when you move the mouse back to the original menu item.
- lectrick 14y agoThere is a small delay, so they don't use the Amazon technique.
- namenotrequired 14y agoOh yes, you're right. You can tell they use the triangle technique though.
- sneak 14y agoIt was like this in System 7.0 at least, perhaps 6.x.
- trhaynes 14y agoExcellent presentation in this blog post. Perfect use for looped GIFs.
- simias 14y agoThat's quite clever. I've played with the amazon widget quite a bit and it seems to work as intended too. Are there desktop widget toolkits that implement that behaviour? At a glance it seems GTK at least does not.
- LukeShu 14y agoGTK3 does (verified with emacs-gtk3 and gnome-system-manager).
- LukeShu 14y agoFor comparison to native applications: - 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
- masklinn 14y agoCocoa seems to be using the triangle technique + a delay, FWIW: a submenu will close instantly when navigating vertically or to the opposite direction, but there is a lot of leeway when navigating in the triangle towards the submenu (eyeballing it, seems to take more than half a second for the submenu to close). And interestingly, you can also "overshoot" the submenu, it will delay its closing quite a bit when moving around/outside of it. > - Tk 8.6 does what bootstrap does Which is?
- npongratz 14y ago>> - Tk 8.6 does what bootstrap does >Which is? Per TFA: "... 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." http://static.tumblr.com/9hgswys/iU1mj8c6y/bootstrap-bug.gif http://static.tumblr.com/9hgswys/iU1mj8c6y/bootstrap-bug.gif
- masklinn 14y agoAh I'd missed that part, thanks.
- mpyne 14y agoUnfortunately I don't think Qt 4 does anything. Submenus are one of the annoying misfeature of the toolkit.
- LukeShu 14y agoI noticed that Qt programs were less likely to use sub-menus, probably for this reason. It's doing something; doing "nothing" is what Bootstrap does. But Qt 4 actually seems to go out of it's way to be unpredictable. _____ |item1|_______ |item2|item2.1| |item3|item2.2| |item4| If I drag my cursor from item2 to item2.2 through item3 qucikly, there's clearly a delay, as I see item2.2 get highlighted, but then the submenu disappears, and it selects item3. However, if I overshoot and drag the cursor out of the menu altogether, it leaves item2.2 selected. But then I think it does something with the angle it is moving at to make that sometimes not work. The behaviour is complex and unpredictable, which is different than nothing.
- sanderversluys 14y agoWow! Am I stupid or what? Never heard or thought of this technique! Genius! Thanks! :p
- MatthewPhillips 14y agoThis is why I read HN.
- mryall 14y agoThis is why upvotes exist.
- czr80 14y agoTog wrote about implementing this in MacOS: http://www.asktog.com/readerMail/2000-07ReaderMail.html#Anchor6 http://www.asktog.com/readerMail/2000-07ReaderMail.html#Anch...
- thomaspark 14y agoHere's a post about Mac Classic vs. OSX vs. Ubuntu I wrote (with figures): http://thomaspark.me/2011/10/making-menus-escapable/ http://thomaspark.me/2011/10/making-menus-escapable/ Glad to see this solution for the web.
- radio4fan 14y agoThanks for that link. I love what he says about iteration: "I don't know for sure why the Microsoft solution is so clunky. It could be they just didn't do a good job of copying the Mac. More likely, they never tested and iterated. When Eric and I finished our first prototype, it was at least as clunky as Microsoft's solution. We, however, put ours through another four or five rounds of testing and design before we elected to ship it." Sometimes perfect is not the enemy of good.
- MiguelHudnandez 14y agoI think perfect and mediocre are both enemies of good. "It complies with the spec... ship it."
- WiseWeasel 14y agoNot of the same magnitude then. Mediocrity is the nemesis of good, with the sole mission of undermining it at every turn. The drive for perfection, on the other hand, might sometimes be a foe, but overall facilitates good. It's clear which is a more damaging influence. Personally, I'll agree with Salvador Dali when he said, "Have no fear of perfection - you'll never reach it."
- panic 14y agoGentlemen, we are going to relentlessly chase perfection, knowing full well we will not catch it, because nothing is perfect. But we are going to relentlessly chase it, because in the process we will catch excellence. I am not remotely interested in just being good. —Vince Lombardi
- karl_nerd 14y agoThis 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!
- marvwhere 14y agohopefully my current customer, will not read this article :D
- UnoriginalGuy 14y agoThis 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.
- Bjartr 14y agoI didn't know there was a windows native auto-complete implementation? I thought it was up to individual devs to implement that functionality?
- UnoriginalGuy 14y agoWindows does: http://msdn.microsoft.com/en-us/library/windows/desktop/bb776884(v=vs.85).aspx http://msdn.microsoft.com/en-us/library/windows/desktop/bb77...
- jimbobimbo 14y agoI 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.
- alipang 14y agoIt definitely still happens in Visual Studio on Windows 7, not sure about other places. Resharper might change this behaviour, not sure as I don't currently use it. Nothing beats accidentally creating a new class instead of adding an existing one as a reference just because your cursor was in the wrong place, then spending time on wondering why nothing happens.
- 14y ago
- deleted 14y ago[deleted]
- slig 14y agoReally nice! Two questions: - What's the "cross-product magic Amazon uses to detect movement inside the 'blue triangle.'"? - How did you do those GIFs?
- bjterry 14y agoI just happen to have this open in another tab, but only helpful if you are a Mac user: https://gist.github.com/dergachev/4627207 https://gist.github.com/dergachev/4627207
- slig 14y agoThank you! In the gist comments I discovered another nice product that does something very similar using canvas: Phosphor - http://news.ycombinator.com/item?id=5137028 http://news.ycombinator.com/item?id=5137028
- moron4hire 14y agoIt'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. [1] http://en.wikipedia.org/wiki/Cross_product http://en.wikipedia.org/wiki/Cross_product
- Dn_Ab 14y agoAre you sure about that? The dot product gives a measure of the orientation between two vectors, the cross product gives perpendicularity and is vector valued (kind of, the distinction matters more for physics than graphics). It also only makes sense in 3 and 7 dimensions without generalizing the concept of vector.
- moron4hire 14y ago
- Kiro 14y ago"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.
- courtewing 14y agoIf your submenu is extending from a link in the middle of the parent list, you don't want the current submenu to disappear if your mouse tracks across the corner of the link above or below the intended. Consider this: The link A | A sublink of B Some Link B --> | Another sublink of B A link C | And again a sublink of B | Jez, B has a lot of sublinks If the user mouses over "Some Link B" and the submenu expands, without a delay (or other mechanism such as the triangle effect described in the article) the submenu could disappear when the user tries to move from "Some Link B" to "Jez, B has a lot of sublinks" if it happened to cross the plane into "A link C" or out of the navigation list entirely.
- StavrosK 14y agoWow, 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.
- unreal37 14y agoBrilliant break down.
- marban 14y agoThis is what separates boys from men.
- bluetidepro 14y agoOr after the recent sexism HN posts, girls from ladies! :)
- marban 14y agoof course.
- Nycto 14y agoHey all, 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
- null_ptr 14y agoHi, are the blog commenters' lawsuit fears legitimate?
- tjic 14y agoNo one will answer this. If they say "no", they're speaking for Amazon, and saying "we give you a right to infringe our patent". If they say "yes", they're speaking for Amazon, and making the firm look douchey. Mu - unask the question.
- jschuur 14y agoIt's perfectly valid to ask a question, even if you know the other side can't answer it. That doesn't mean we should give the engineers who come to this time a hard time about not answering it. It's just a legitimate thing to ask out loud.
- saraid216 14y agoHm. I'm going to disagree. If you know the engineer can't answer it, it's silly at best to ask it. At worst, it's malicious. See http://rationalwiki.org/wiki/JAQing_off http://rationalwiki.org/wiki/JAQing_off (If you don't know that, then there's no problem and a quick explanation why it's not worth asking should end the thread. It's not something I'd take someone to task for.)
- okamiueru 14y agoHuh? What on earth are you talking about? Nothing you wrote makes sense. Someone asked a question on the merits of a patent, the likelihood of it being upheld if challenged, if it is at all patented, etc. What you are referring to is anti-intellectualism, to ask questions for the effect of the question itself. Hiding behind the hypothetical, and not for the desire to know the answer. The root question here wanted to know an answer, not play any game. "Silly at best to ask it"? Again, what on earth are you talking about? If people have an insight to give, they will give it. "Not something i"d take someone to task for"? Do usually tell people the things you don't feel like doing?
- martinced 14y agoThat 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. 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.
- calhoun137 14y agoThere 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.
- andrewljohnson 14y agoI 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. tl;dr my matrix algebra is fuzzy too.
- calhoun137 14y agoFirst of all, "getting away" with something by relying on someone else to know what you don't know but need to use is hardly a virtue. If someone wants to work like that, to each his own. The problem I have is people telling the next generation that since you can "get away" without math, that it isn't important to take it very seriously as a programmer. Second of all, like you said, you can get the "hack" done without math. I would say the less hacks you have to use in your programs the better, and the best practice is to code at a high enough level of generality that you don't need any hacks at all. Without math, so much time is spent (or wasted) tinkering around, and you don't often end up with the optimal solution. Whereas a strong math background lets you skip all that tinkering, because you are able to properly plan a solution before you even write a single line of code.
- aleem 14y agoAwesome 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. (edited for grammer)
- damoncali 14y agoHow sad is it that the first thing I thought was, "I wonder if they're going to sue him."
- smackfu 14y agoIf 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.
- samatman 14y agoSet up the submenu system so in the event of a single line, it presents an invisible target, which is three lines high, with the submenu in the middle.
- kamens 14y agoAgreed on the small submenu issue. I think this instant behavior makes the most sense when it's always the case that submenu.height() == menu.height(). Was pointed to http://michelf.ca/blog/2005/mac-sub-menus/ http://michelf.ca/blog/2005/mac-sub-menus/ by @gecko this morning, which brings up the opposite (and legit) problem: very, very long submenus. Mega dropdowns w/ equal submenu height are a nice use for this, though.
- busted 14y agoI think part of making this solution intuitive is to make the submenu box a a fixed height that's equal to the first menu. It's what the author changed his menu to look like as well. Amazon got around having too much empty a space by adding pictures, and too many submenu options by adding a second column. If your submenu is so long that even 2 or 3 columns isnt' enough, it would have been too long for a single column anyway.
- BoredAstronaut 14y agoSingle-item submenus and super-long submenus are to be avoided at all costs. They are not user friendly. The former has no reason for being -- put the contents in the parent menu as a sub-section. The latter is generally found in auto-generated lists, like lists of fonts or countries. Usually a menu is a bad UI device for selecting from very long lists. Combo boxes are one alternative. Breaking contents up into chunks and adding another level to menu hierarchy is another possible solution. MS-style hiding rare choices is a third option.
- neilk 14y agoStrange. I re-invented that technique for some drop-down menus years ago. I'm not sure if I observed it elsewhere.
- xradionut 14y agoI remember something similar from game programming years ago...
- bthomas 14y agoThis 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"? 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. Somewhat related: I wonder if they thought about varying the top level list items by user.
- pouzy 14y agoThat's where you understand that attention to detail is pretty darn important. Hats off for pointing this out sir.
- Mahn 14y agoI 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?
- spicyj 14y agoIf you move your mouse straight down within the left side, the submenu should change immediately.
- Mahn 14y agoPretty sure that's possible without tracking the direction of the mouse, by simply not hiding/showing the submenu but changing its contents when the mouse hovers over a different menu element.
- spicyj 14y agoNo, because you can pass through another menu item on the left without meaning to change the submenu on the right: https://raw.github.com/kamens/jQuery-menu-aim/master/amazon.png https://raw.github.com/kamens/jQuery-menu-aim/master/amazon....
- salman89 14y agoThe issue is that when you are hovering over a menu item, and you are aiming to hit a submenu item that is not directly to the right of the menu item. For example, if you are hovering over a menu item and wish to select a a submenu item that is to the right and down the screen, you will take a down-right path UX wise. Normally this would trigger the menu items below (before you make it to the submenu) and thus change the submenu items.
- Mahn 14y ago
- chris092 14y agoGenius! Thanks!
- FiloSottile 14y agoAn example of doing it wrong? The Facebook chat sidebar, on the right (when trying to access a friend's profile from the hover box).
- EGreg 14y agoI remember that this is how Mac menus worked vs Windows menus!
- Encave 14y agoYou can sort of do the same thing in just CSS by adding two small boxes as :after and :before pseudo elements. See: http://i.imgur.com/aSnjEYx.png http://i.imgur.com/aSnjEYx.png Not perfect, but pretty close. Relevant SASS: $boxSize:30px &:hover:after, &:hover:before content: " " display: block position: absolute top: 50% right: -$boxSize height: $boxSize width: $boxSize background-color: transparent z-index: 1000 &:hover:before right: auto left: -$boxSize
- beernutz 14y agoThank you for the write-up on this! Like you, that has been a pet-peeve of mine as well. 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.
- saraid216 14y agoI suspect that being forced to move your mouse to the search box pushes your eyes to scan the page as you do so, which increases the likelihood you'll find something interesting between your cursor and the search box.
- jongraehl 14y agoI 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.
- deleted 14y ago[deleted]
- TommyDANGerous 14y agoThat is what is up! Thanks I am definitely using it.
- BuddhaSource 14y agoSomebody needs to nail sub menu ux in Mobile. I haven't seen anything that is impressive. Facebook menu is good.
- buildnship 14y agoAfter 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 ;)
- kymmx 14y agoA little bit more nerdy here. What about the opposite direction, ie. moving from a sub-menu to its parent menu. I see both Amazon and new Khan Academy menu shows instant opening of another submenu when my cursor moves over another parent menu item. 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.
- bruceboughton 14y agoIt'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.
- deleted 14y ago[deleted]
- sylvainww 14y agoKinda complicated on some parts for me, but neat! Thanks for sharing.
- hef19898 14y agoSmall, 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!
- Achshar 14y agoIs 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 towards the submenu. Not in any specific triangle. If the mouse moves below, above or away form the submenu, the submenu changes.
- ichirotherager 14y agoAmazon 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.