Live data from Hacker News

Breaking down Amazon's mega dropdown

bjk5.com

51–60 of 203 posts

Re: Breaking down Amazon's mega dropdown

#51
post #23

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: http://www.blackpawn.com/texts/pointinpoly/default.html

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/

Re: Breaking down Amazon's mega dropdown

#52
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.

Re: Breaking down Amazon's mega dropdown

#53
post #38

Earlier quoted context omitted.

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 pr…

Right and excellent explanation. I was more disagreeing with your definition than saying it could not be done with "cross products" (although it's still bad terminology, biased to people that already know the concepts). That's why I couldn't say you were wrong. Intuitively, a measure of how parallel two vectors of arbitrary dimensions are, is a better default when talking about orientation of vectors.

Re: Breaking down Amazon's mega dropdown

#54
post #43

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

Hi, are the blog commenters' lawsuit fears legitimate?

Re: Breaking down Amazon's mega dropdown

#55
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.

Re: Breaking down Amazon's mega dropdown

#56
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)

Re: Breaking down Amazon's mega dropdown

#57
post #18

Tog 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 el…

I think perfect and mediocre are both enemies of good.

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

Re: Breaking down Amazon's mega dropdown

#59
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.

Re: Breaking down Amazon's mega dropdown

#60
post #23

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?

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.
Post reply on HN