Breaking down Amazon's mega dropdown

#1

Post by df07 » Wed, Mar 06, 2013, 1:20 PM UTC

Breaking down Amazon's mega dropdown
bjk5.com

Re: Breaking down Amazon's mega dropdown

#2

Post by robotmay » Wed, Mar 06, 2013, 1:55 PM UTC

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.

Re: Breaking down Amazon's mega dropdown

#3

Post by mhp » Wed, Mar 06, 2013, 1:57 PM UTC

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

Re: Breaking down Amazon's mega dropdown

#4

Post by hackerboos » Wed, Mar 06, 2013, 1:58 PM UTC

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

Re: Breaking down Amazon's mega dropdown

#5

Post by ssharp » Wed, Mar 06, 2013, 2:00 PM UTC

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.

Re: Breaking down Amazon's mega dropdown

#6

Post by tyw » Wed, Mar 06, 2013, 2:01 PM UTC

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.

Re: Breaking down Amazon's mega dropdown

#7

Post by trhaynes » Wed, Mar 06, 2013, 2:04 PM UTC

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

Re: Breaking down Amazon's mega dropdown

#8

Post by simias » Wed, Mar 06, 2013, 2:04 PM UTC

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.

Re: Breaking down Amazon's mega dropdown

#9

Post by namenotrequired » Wed, Mar 06, 2013, 2:13 PM UTC

tyw wrote: post #6

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.

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.

Re: Breaking down Amazon's mega dropdown

#10

Post by bbx » Wed, Mar 06, 2013, 2:14 PM UTC

robotmay wrote: post #2

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.