Breaking down Amazon's mega dropdown

http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown

by df07 • 13 years ago

1734 191 13 years ago

robotmay• 13 years ago

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.

bbx2• 13 years ago

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.

sazpaz• 13 years ago

And then you have more time to focus on your shopping instead of distracting over the awful submenus.

mhp• 13 years ago

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).

masklinn3• 13 years ago

Other commenters note MacOS has been doing this since System 7.

artursapek• 13 years ago

I 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• 13 years ago

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?

hackerboos• 13 years ago

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

rkuykendall-com• 13 years ago

Bootstrap 3 will actually be dropping submenu support:

http://blog.getbootstrap.com/2013/02/07/bootstrap-2-3-releas...

( Bootstrap 3 update > "Dropping submenu support." )

radio4fan2• 13 years ago

They're back in, due to popular demand:

https://github.com/twitter/bootstrap/commit/6ccf588a8e08a9f9...

ssharp• 13 years ago

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.

tyw• 13 years ago

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.

namenotrequired2• 13 years ago

You'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• 13 years ago

You can also tell it doesn't seem to do it when you move the mouse back to the original menu item.

lectrick• 13 years ago

There is a small delay, so they don't use the Amazon technique.

sneak• 13 years ago

It was like this in System 7.0 at least, perhaps 6.x.

trhaynes• 13 years ago

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

simias• 13 years ago

That'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.

LukeShu3• 13 years ago

GTK3 does (verified with emacs-gtk3 and gnome-system-manager).

LukeShu3• 13 years ago

For 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

masklinn3• 13 years ago

Cocoa 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• 13 years 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

mpyne• 13 years ago

Unfortunately I don't think Qt 4 does anything. Submenus are one of the annoying misfeature of the toolkit.

LukeShu3• 13 years ago

I 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.

ssp• 13 years ago

- GTK3 uses the triangle technique

GTK+ uses the triangle technique along with a delay of 225 ms. When the pointer is inside the triangle, the delay is 1500 ms.

Firefox subscribes to the misguided "fake the look and feel of the default toolkit" idea, so on Linux it has a 225 ms delay, but without the triangle. Unfortunately 225 ms is way too short when there is no triangle.

pserwylo• 13 years ago

Thanks for the list. We were quite literally discussing this at work only yesterday, because the IntelliJ interface doesn't do anything. They use the Java Swing toolkit, which doesn't have any special treatement of sub-menu's.

I was still dissapointed, not because Swing doesn't support it (I can't stand the default Swing Look and Feel), but because everything about their custom Look and Feel is awesome compared to default Swing, so I was hoping that they had added this feature too.

I'm hoping that the open source community edition includes the source for their Look and Feel, but I'll have to wait until I've finished checking out the 1GB of source from github and then start trawling through it.

sanderversluys• 13 years ago

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

MatthewPhillips• 13 years ago

This is why I read HN.

mryall• 13 years ago

This is why upvotes exist.

czr80• 13 years ago

Tog wrote about implementing this in MacOS: http://www.asktog.com/readerMail/2000-07ReaderMail.html#Anch...

thomaspark• 13 years ago

Here's a post about Mac Classic vs. OSX vs. Ubuntu I wrote (with figures): http://thomaspark.me/2011/10/making-menus-escapable/

Glad to see this solution for the web.

radio4fan2• 13 years ago

Thanks 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• 13 years ago

I think perfect and mediocre are both enemies of good.

"It complies with the spec... ship it."

karl_nerd• 13 years ago

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!

marvwhere• 13 years ago

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

UnoriginalGuy2• 13 years ago

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.

Bjartr• 13 years ago

I didn't know there was a windows native auto-complete implementation? I thought it was up to individual devs to implement that functionality?

UnoriginalGuy2• 13 years ago

Windows does: http://msdn.microsoft.com/en-us/library/windows/desktop/bb77...

jimbobimbo• 13 years ago

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.

alipang• 13 years ago

It 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.

clauretano• 13 years ago

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.

SonicSoul• 13 years ago

just tested it on Win7 and it appears they fixed this. pressing windows key and typing reveals a list with the first item selected every time.. unless the mouse moves

bbx2• 13 years ago

The exact same happens with GMail.

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.

slig3• 13 years ago

Really 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• 13 years ago

I just happen to have this open in another tab, but only helpful if you are a Mac user: https://gist.github.com/dergachev/4627207

slig3• 13 years ago

Thank 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

moron4hire4• 13 years ago

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.

[1] http://en.wikipedia.org/wiki/Cross_product

Dn_Ab2• 13 years ago

Are 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.

bazzargh2• 13 years ago

I'm guessing that the cross product magic was a hit test for a triangle. Here's an explanation:

http://www.blackpawn.com/texts/pointinpoly/default.html

slig3• 13 years ago

Got it, thanks! Should've thought about googling "hit test triangle".

jamesmiller5• 13 years ago

Here are a few different solutions to determine if a point is in a polygon with code examples. I think solution 3 might be applicable and faster.

Section: Determining if a point lies on the interior of a polygon http://paulbourke.net/geometry/polygonmesh/

glomph• 13 years ago

https://code.google.com/p/sharex/ makes those types of gifs very easy on windows. It can also do a load of other cool stuff.

jchavannes• 13 years ago

Off topic, but the Reddit post about Neox Screen using the ShareX source code and asking for donations is quite disheartening. Not that anything illegal occurred, just the level of deceitfulness.

http://www.reddit.com/r/opensource/comments/17qmek/my_friend...

kamens2• 13 years ago

Since others answered the harder question: camtasia+gifbrewery

Kiro• 13 years 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• 13 years ago

If 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• 13 years ago

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.

unreal37• 13 years ago

Brilliant break down.

marban2• 13 years ago

This is what separates boys from men.

bluetidepro• 13 years ago

Or after the recent sexism HN posts, girls from ladies! :)

marban2• 13 years ago

of course.

Nycto• 13 years ago

Hey 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• 13 years ago

Hi, are the blog commenters' lawsuit fears legitimate?

tjic• 13 years ago

No 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.

jordw• 13 years ago

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.

revorad4• 13 years ago

Off-topic, but can't miss this opportunity:

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.

jonknee3• 13 years ago

If I had to guess it would be that it doesn't test as well. Similarly to a physical store wanting you to browse, I can imagine Amazon wants you to look at the suggested items. If you wanted to search you will still search, but you might also get distracted and purchase something you were interested in.

kemayo• 13 years ago

Plausibly it tests out that people who expect the arrow keys / space to scroll the page get more annoyed by having to click out of a search box than people who want to search right away get annoyed by having to click into a search box.

mistercow• 13 years ago

One of my favorite features of Chrome is that if you start to type "amazon.com" in the URL bar, and then hit Tab when it autocompletes, it switches the URL bar to an amazon.com search bar. I don't think I've typed anything in the actual search field of amazon.com in years.

cowpewter• 13 years ago

/rant

I loathe online store sites that auto-focus the search box. Worst are the ones that do it on every single page, including item detail pages. I use the space bar to scroll webpages down, especially on my laptop, which has a very small screen so that I almost always have to scroll down to get past header crap and get to the meat of the page. And no mouse, just a mediocre touchpad.

I can maybe accept auto-focusing search on the homepage, but there is no excuse for an item detail page. Even if I got here through a search engine, I probably want to see if this item is the item I wanted before I go searching the rest of your store, and that's going to require scrolling.

Definitely make the search box the first input in the tab-order though. Then if I do want to go straight to search, I can tap tab and then start typing. Otherwise, I usually want to scroll first and nothing is more frustrating than nothing happening when you hit space, only to realize that some tiny obscure search input buried in the corner of the page header that you didn't even realize was there is filled with spaces.

/less ranty

The best of both worlds would be to only auto-focus the search input if the user starts typing letters, and ignore space/arrow keys. We do this on Grooveshark actually.

pydave• 13 years ago

I don't want this as much as making / jump to the search box. I wish everything did this (I think only gmail and vim do). Although, that might interfere with Firefox (at one point it had an option to open the find dropdown when you type /).

ww5202• 13 years ago

Please DO NOT listen to this guy. This auto-focus to the search box misfeature absolutely ruins any page viewing navigation.

For people who use up/down arrow or pgup/pgdown keys to scroll down the page (which is pretty much all laptop users), this focus stealing misfeature would frustrate them to no end.

I won't go back to any site that does this.

b-ryan• 13 years ago

This has always bugged me. As a result, I decided to try my hand at a Chrome extension to fix it. If it's any interest to you, get it here https://chrome.google.com/webstore/detail/amazon-search-auto....

It's my first extension, so be gentle if it has issues.

dwoldrich• 13 years ago

I think any forcible redirection of focus makes your page inaccessible to users with screen readers. Just setting explicit tabindex on tags really screws things up; its best for accessibility to let the natural tab order rule. Many sites actually make the first tabbable element a "skip link" that jumps past the page's header and left nav content and jumps to the first <h1>.

So this topic made me curious, were does the first tab in the tab chain on Amazon go? I loaded the page in firefox, hit tab, and saw the first tab was http://amazon.com/access

Ok, this is an interesting design choice. That access link goes to a page with minimal styling, probably optimized for screen readers.

Now I'm really curious, and I pop open NVDA to give the page a listen. After the page title was read, the access link was read, which was very helpful: "A different version of this web site containing similar content optimized for screen readers and mobile devices may be found at the web address: www.amazon.com/access". It would have been best if Amazon did the work to make their default site screen reader accessible, but this is a nice alternative to having no accessibility at all.

Amazon needs to do some html/css/script minification on their homepage! Oh, nevermind, they gzipped it. :)

Raphael• 13 years ago

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.

dylangs10302• 13 years ago

You honestly find the demonstration in this link to be too many steps? It takes less than a second to navigate. Literally.

BlindRubyCoder• 13 years ago

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

Serow225• 13 years ago

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? :)

dylangs10302• 13 years ago

No, that used to happen to me almost all the time. My habits only just recently adapted to it.

It's funny how ubiquitous unfeatures are that when we're treated to nice features we unintentionally sabotage them. We have to unlearn the former habits.

oh_sigh• 13 years ago

Slightly offtopic, but why doesn't amazon.com have the caret auto-focus on the search box for typing, like google.com does?

tytung2020• 13 years ago

off topic..but does Amazon hardware department need people? I have a cool phone/tablet design..a convertible 5" phone that can turn into a 7" tablet.

martinced• 13 years ago

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.

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.

calhoun1373• 13 years ago

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.

andrewljohnson2• 13 years ago

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.

tl;dr my matrix algebra is fuzzy too.

calhoun1373• 13 years ago

First 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.

hknozcan• 13 years ago

Absolutely not. Yes, you might be able to hack something with outside help but knowing math it is the mind set that would allow you to build something like this in the first place. You can imagine solutions to problems because you might visualize how they can be solved.

IheartApplesDix• 13 years ago

Two sides of the same coin. Whether you know math or someone on your team does, no good programming is getting done without it.

biot• 13 years ago

When you don't know what you don't know, you end up wasting countless hours trying to rediscover the solution to an already-solved problem. I know I have.

finnh• 13 years ago

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.

d0m• 13 years ago

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.

obviouslygreen• 13 years ago

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.

jules• 13 years ago

In this case the slope method is better and simpler than the cross product method.

    def slope(p):
      return (p.y-oldMouse.y)/(p.x-oldMouse.x)

    isInRange = slope(menuBottom) <= slope(newMouse) <= slope(menuTop)

icambron• 13 years ago

My thought too. What are the supposed advantages of using linear algebra for this problem?

Edit: my guess is divide-by-zero conditions.

smilliken2• 13 years ago

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.

aleem• 13 years ago

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.

(edited for grammer)

damoncali• 13 years ago

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

smackfu• 13 years ago

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.

samatman• 13 years ago

Set 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.

kamens2• 13 years ago

Agreed 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/ 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• 13 years ago

I 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• 13 years ago

Single-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• 13 years ago

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

xradionut• 13 years ago

I remember something similar from game programming years ago...

bthomas• 13 years ago

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"?

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• 13 years ago

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

chris092• 13 years ago

Genius! Thanks!

Mahn3• 13 years ago

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?

spicyj3• 13 years ago

If you move your mouse straight down within the left side, the submenu should change immediately.

Mahn3• 13 years ago

Pretty 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.

salman89• 13 years ago

The 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.

Mahn3• 13 years ago

Ah, I see it now, that makes sense, thanks for the clarification.

FiloSottile• 13 years ago

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).

EGreg• 13 years ago

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

Encave• 13 years ago

You 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 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• 13 years ago

Thank 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.

saraid2164• 13 years ago

I 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• 13 years ago

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.

TommyDANGerous• 13 years ago

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

BuddhaSource• 13 years ago

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

buildnship• 13 years ago

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 ;)

kymmx• 13 years ago

A 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• 13 years ago

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.

sylvainww• 13 years ago

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

hef19898• 13 years ago

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!

Achshar• 13 years ago

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 towards the submenu. Not in any specific triangle. If the mouse moves below, above or away form the submenu, the submenu changes.

ichirotherager• 13 years ago

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.

Breaking down Amazon's mega dropdown

Related Stories