Uncover Amazon's ultra-fast pull-down menu

　　

 

This article may change your opinion if you think Amazon is not very focused on user experience.

In the upper left corner of the Amazon homepage, there is a drop-down menu for product category browsing. When the mouse slides over the menu option, the sub-menu display speed is extremely fast. Let's take a look:

　　

 

The display speed is basically synchronized with the mouse movement, but the drop-down menu of most websites may have a certain delay when displaying sub-menus, for example:

　　

 

This delayed response is required because, if not, the sub-menu disappears when you want to move the mouse from a main menu option to a sub-menu option. Like this:

　　

 

However, the drop-down menu of Amazon does not have this delay, and the sub-menu does not disappear when it is not appropriate. How does it achieve this? The answer is to detect the direction and trajectory of mouse movement.

　　

 

Imagine drawing a triangle between the current position of the mouse and the upper left and lower left corner of the sub-menu. If the mouse moves within the range of this triangle, you may be moving the mouse from the main menu to the sub-menu, so do not update the sub-menu immediately. However, if you move the mouse outside the triangle, you can update the sub-menu immediately. This is the algorithm behind the ultra-fast pull-down menu on the Amazon homepage.

God is in the details (God is in the details ). Revealing the details of a front-end is not only a subtle algorithm, but a technology giant's attitude towards products and user experience. How much of Amazon's tens of billions of market capitalization has been accumulated from these very small, but obviously very careful product details?

If you want to apply this menu logic to your website, This is the j-query plug-in written by Ben Kamens, an engineer at Khan Emy.

If you think this is amazing, want to do this, or think it is nothing, Your UX design is better than this, you may consider sending a resume to the Amazon Team (chaddes@amazon.com) who developed this detail because they are hiring.