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?
I'm guessing that the cross product magic was a hit test for a triangle. Here's an explanation:
Breaking down Amazon's mega dropdown
41–50 of 203 posts
Re: Breaking down Amazon's mega dropdown
#42"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.
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
Re: Breaking down Amazon's mega dropdown
#43Hey 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
Re: Breaking down Amazon's mega dropdown
#44This 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 sh…
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.
Re: Breaking down Amazon's mega dropdown
#45Really nice! Two questions: - What's the "cross-product magic Amazon uses to detect movement inside the 'blue triangle.'"? - How did you do those GIFs?
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
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
Re: Breaking down Amazon's mega dropdown
#46Really nice! Two questions: - What's the "cross-product magic Amazon uses to detect movement inside the 'blue triangle.'"? - How did you do those GIFs?
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
Got it, thanks! Should've thought about googling "hit test triangle".
Re: Breaking down Amazon's mega dropdown
#47Earlier quoted context omitted.
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 boundin…
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.
Balls, you are correct, dot product is the correct operation, not cross product. Been a while since graphics ops were on my table.
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".
Re: Breaking down Amazon's mega dropdown
#48Tog wrote about implementing this in MacOS: http://www.asktog.com/readerMail/2000-07ReaderMail.html#Anch...
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.
Re: Breaking down Amazon's mega dropdown
#49This is what separates boys from men.
Or after the recent sexism HN posts, girls from ladies! :)
Re: Breaking down Amazon's mega dropdown
#50This 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 sh…
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.
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.