Breaking down Amazon's mega dropdown
bjk5.com
bjk5.com
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
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.
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.
I really wish every website would set their primary search input's tabindex to 1.
Spoken like a true hacker.
Too often a site discussed on HN is criticized for a design decision that is easily changeable on the client. Anything that is slightly inconvenient for one specific workflow is a "misfeature", ignoring entirely that many people like it that way. A site designer cannot please everyone.
Most non-hackers do not even notice this stuff. Go find a normal person and ask them to list the sites they visit and whether or not they auto-focus the search box. They do not notice. We are the weird ones.
If it annoys you, change it. You have the power. Most of the time what you want can be accomplished with a simple extension, no coding required.
If not, you can write your own extension, or write a script for an extension, or "use" browsers like uzbl and luakit, or write your own browser. Then you can put your solution on the web, so other people can benefit.
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.
Steady on, soldier. I just asked a question.
Judging from the up-votes it seems this resonates with a lot of people.
To me you haven't made any case at all why others should have to suffer so you can have auto-focus on Amazon when your needs are already met elsewhere.
"!amazon thingamabob" (or just "!a thingamabob").
Way more convenient than going to the homepage and worrying about search auto-focus.
"a foo" to search on amazon, "g foo" google, "i foo" imdb, "m foo" google maps, "w foo" wikipedia, "u foo" urbandictionary, etc... I have more but they are not public sites.
Sounds like the two could complement each other, like aliases and completion in a shell.
I have "w" for wikipedia, "y" for youtube, "gm" for google maps, etc...
This is THE feature of Chrome that I use constantly every day. It saves 5-10 seconds on each search you do every day. It adds up.
Isn't a better strategy to optimize for the common use-case?
I don't think it makes sense on Amazon. A typical amazon user may browse around and explore outside of search. Maybe most of the time they will search, but there are no doubt other use cases like using the fancy nav. It's even possible that they want to encourage user's the browse around a bit instead of finding what they want and leaving right away.
The kind of user who likes to browse will probably browse using a mouse, not a keyboard like us nerds. So the position of the cursor doesn't matter to them.
I hardly ever go to Amazon and not directly search for something (except maybe during Black Friday deals when I just click on the banner). I'd bet Amazon loses money by making me do an extra mouse click into the search box every time.
Unless there's a sizeable proportion of users who go to the homepage and scroll using the keyboard, I don't get it.
Also, if you're a nerd, just search right in the browser. If I want to search Amazon I never actually go Amazon first I just type "a", hit tab and then my search terms. Chrome is smart enough to do the rest and I get right to the SERP on Amazon.
edit: Mouse movement = tracking content with eyes? http://news.ycombinator.com/item?id=5333496
Why do you think they obsess over dropdown menus?
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. :)
It's my first extension, so be gentle if it has issues.
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.
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.
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 (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.)
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?
No, but I usually write complete sentences.
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.
I've always disliked doing this many steps. Please make the Department menu into links such that I can avoid the sub-menus.
Short takeaway - we are all different, us users, and what someone thinks is awesome design, someone else finds unusable. So providing multiple options is a must.
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.
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.
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.
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.
"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.
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.
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.
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.
Web developer especially need to get their sea legs and be comfortable working on unstable ground all the time - it's inherent in the kludge we call web standards. So if you take a list of all the things a web developer needs to know to be effective, let's just agree "high math" isn't going to be near the top of that list.
How often would I use this level of math? I know I use the others on an almost daily basis. Coming up with something I need linear algebra for, though? Few and very far between. Maybe you use linear algebra often, but most of us don't have a need for it.
And if you disagree, then I think you should actually know abstract algebra, number theory, topology, etc., so that when the next problem comes along, you can 'quickly come up with an optimal solution'.
"I have been walking through mazes my whole life with my eyes closed, and I make progress by feeling the walls with my hands. In order to get through each maze I need to remember lots of facts about how the walls in the different mazes feel when I touch them. If I opened my eyes now, it would take too much time, and be too painful to adjust to the light. I never tried to open my eyes, and even though a lot of people keep telling me it's a lot easier to get through mazes with your eyes open, I think they are wrong. Besides, the few and far between times I get stuck, I can always ask one of the people who can see where I should go next. And if you think I need to keep my eyes open, then the next thing you are going to tell me is I should use my sense of hearing and smell too."
If you must reword and put his entire argument into a bad analogy, try this one:
"I've been walking through mazes all my life. This one time, I had to recognize a particular brand of poison flower, but I didn't know my flowers very well because flowers are rare in the maze."
And the answer?
"I asked my friend who was also in the maze: 'Is this flower poisonous?' He said yes. I said okay. We skipped the flower and moved on."
If the majority of someone's engineering involves concepts and tasks that one is 100% knowledgeable about, I'd argue that that person has reached a stale state and shoudl probably seek out other challenges.
Specifically, I'm NOT saying that math is not important.
I'm saying that there's nothing at all wrong with getting by with imperfect knowledge in a domain if the process of "getting by" means expanding your knowledge in that domain.
Everyone learns on the job. I don't see the difference between brushing up on linear algebra from school, and learning that new framework or language or software suite.
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.
def slope(p):
return (p.y-oldMouse.y)/(p.x-oldMouse.x)
isInRange = slope(menuBottom) <= slope(newMouse) <= slope(menuTop)Edit: my guess is divide-by-zero conditions.
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.
"It complies with the spec... ship it."
Personally, I'll agree with Salvador Dali when he said, "Have no fear of perfection - you'll never reach it."
Glad to see this solution for the web.
- 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> - Tk 8.6 does what bootstrap does
Which is?
>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
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.
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.
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|
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.
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.
Even OS X has this issue, so if someone gets a good solution, they can beat Apple at their own game.
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.
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.
- What's the "cross-product magic Amazon uses to detect movement inside the 'blue triangle.'"?
- How did you do those GIFs?
EDIT: Well, cross product would work, too, if you extended the 2D vectors into 3D vectors, coplanar in the screen. The orientation of the cross product into or out of the screen would also tell you the relative orientation of the two vectors. So then, you'd be looking for the two cross products with differing signs on the Z component to tell you if it's "in the triangle".
So basically, for a moving between two mouse points (Ix, Iy) and (Ax, Ay), and a top left menu corner (Bx, By) and bottom left (Cx, Cy), then:
DAx = Ax - Ix
DAy = Ay - Iy
DBx = Bx - Ix
DBy = By - Iy
DCx = Cx - Ix
DCy = Cy - Iy
Z1 = DBx * DAy - DAx * DBy
Z2 = DCx * DAy - DAx * DCy
Then, you know you're headed towards that menu if Z1 < 0 and Z2 > 0.
Could be simplified a little if you assume the X component of the top left corner of the menu will be the same as the X component of the bottom left corner, but the math was clearer to keep them separate.
Actually, you can make the dot product give you that answer, but you would need use the dot product of the mouse vector and two vectors normal to the edge vectors, which is really just a roundabout way of using the cross product.
http://www.reddit.com/r/opensource/comments/17qmek/my_friend...
Section: Determining if a point lies on the interior of a polygon http://paulbourke.net/geometry/polygonmesh/
var prevOffset = prev.x-lowerRight.x;
loc.x < lowerRight.x
&& (loc.y-prev.y)*-prevOffset-(loc.x-prev.x)*(upperRight.y-prev.y) <0
&& (loc.y-lowerRight.y)*prevOffset-(loc.x-lowerRight.x)*(prev.y-lowerRight.y) < 0
I'd prefer the code above though, as there's no icky division by zero.
http://blog.getbootstrap.com/2013/02/07/bootstrap-2-3-releas...
( Bootstrap 3 update > "Dropping submenu support." )
https://github.com/twitter/bootstrap/commit/6ccf588a8e08a9f9...
I never appreciated this, yet it affects me many times a day. Really thoughtful UX design.
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: -$boxSizeI'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.
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)
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.
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
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.
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.
https://raw.github.com/kamens/jQuery-menu-aim/master/amazon....
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.
Are there desktop widget toolkits that implement that behaviour? At a glance it seems GTK at least does not.
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.