if you ever felt that the Amazon company didn’t work hard on the user experience, this article might change your mind.

The top left corner of the

Amazon home page has a drop-down menu for merchandise category browsing. When the mouse slips from the menu, the submenu displays very fast. We can take a look at:

 

this display speed is basically synchronized with the mouse movement, but most of the site drop-down menu displays sub menu, there will be some delay, such as:

 

this delayed response is necessary because if not, the submenu disappears when you want to move the mouse from a main menu option to a submenu option. It’s like this:

 

, but the Amazon drop-down menu does not have this delay, and the submenu does not disappear when it is not possible. How does it do this? The answer is to detect the direction and trajectory of the mouse movement.

 

imagines a triangle between the top left corner of the mouse and the left upper corner of the submenu. If the mouse moves within this triangle range, the user is likely to move the mouse from the main menu to the submenu, so don’t update the submenu immediately. However, if the mouse moves beyond this triangle, the submenu can be updated immediately. This is the algorithm behind the Amazon home quick response drop-down menu.

God in the details (God, is, in, the, details). Reveal a front detail, we see not only a subtle algorithm, but a technology giant for product and user experience attitude. How much of the billions of Amazon’s market capitalization has been accumulated from these small, small but obvious product details?

if you want to apply this menu logic to your website, this is the j-query plug-in written by Khan Academy Engineer Ben Kamens.

if you think this is fantastic, really want to do this work, or think this is not what your UX better than this, can be considered to develop the details of the Amazon team (chaddes@amazon.com) cast a resume, because they are looking for.

Leave a Reply

Your email address will not be published. Required fields are marked *