Riddle of the Amazon dropdown list
Ben Komens discovered that the hover effect in the drop-down list of Shop by Department on the Amazon website happens very quickly, absolutely without any delay. Thus, there is a violation of the old rule worked out in the 90s of the last century: before displaying a submenu item, a so-called hysteresis, lag is necessary.
The delay is necessary not only to save the user's machine resources, but also for usability reasons: if you do not add a delay, it will be inconvenient to move the mouse cursor to the dropped submenu, you have to drive it horizontally first in the menu without touching other items, and only after select the desired sub.
')
An example of a problem in Mac OS. Due to the lack of delay, the green path does not work in NEXTSTEP and the widgets inherited from it.
This delay is present in almost all the menus with drop-down items, such as, for example, on the Khan Academy website.
Ben thought deeply about how this problem was solved at Amazon; the question introduced him into a stupor, as if a physicist is crossing the road - a seemingly useless task of calculating the resistance between two points of an infinite grid of mono-resistors in the Nerd Sniping comic. After all, if there was no delay, when a new item was touched, a new element would fall out, and it would be impossible to get into what was already seen, which happens, for example, in Twitter's Bootstrap.
What made with the site "Amazon"? Ben found out that here the cursor path is defined in a special way.
For each cursor position, a triangle with vertices in the upper and lower corners of the list and the cursor is calculated (highlighted in blue in the figure). If the cursor falls on the area of another element in the blue triangle, the already open submenu will change, but with a delay that will allow the user to drag the cursor to the submenu area. It makes no sense to change the submenu on the Appstore for Android immediately when you hit the cursor on it - maybe the user is hovering over the item Learn more about Cloud Drive. If the cursor is outside the triangle, the submenu switches immediately, without delay.
This, in fact, small detail, once invented, forgotten and rediscovered, forced Ben to write a small jQuery-menu-aim plugin for jQuery, which implements the same principle of functioning of the drop-down submenus. It is already used on the Khan Academy website.
The delay is necessary not only to save the user's machine resources, but also for usability reasons: if you do not add a delay, it will be inconvenient to move the mouse cursor to the dropped submenu, you have to drive it horizontally first in the menu without touching other items, and only after select the desired sub.
')
An example of a problem in Mac OS. Due to the lack of delay, the green path does not work in NEXTSTEP and the widgets inherited from it.
This delay is present in almost all the menus with drop-down items, such as, for example, on the Khan Academy website.
Ben thought deeply about how this problem was solved at Amazon; the question introduced him into a stupor, as if a physicist is crossing the road - a seemingly useless task of calculating the resistance between two points of an infinite grid of mono-resistors in the Nerd Sniping comic. After all, if there was no delay, when a new item was touched, a new element would fall out, and it would be impossible to get into what was already seen, which happens, for example, in Twitter's Bootstrap.
What made with the site "Amazon"? Ben found out that here the cursor path is defined in a special way.
For each cursor position, a triangle with vertices in the upper and lower corners of the list and the cursor is calculated (highlighted in blue in the figure). If the cursor falls on the area of another element in the blue triangle, the already open submenu will change, but with a delay that will allow the user to drag the cursor to the submenu area. It makes no sense to change the submenu on the Appstore for Android immediately when you hit the cursor on it - maybe the user is hovering over the item Learn more about Cloud Drive. If the cursor is outside the triangle, the submenu switches immediately, without delay.
This, in fact, small detail, once invented, forgotten and rediscovered, forced Ben to write a small jQuery-menu-aim plugin for jQuery, which implements the same principle of functioning of the drop-down submenus. It is already used on the Khan Academy website.
Source: https://habr.com/ru/post/171905/
All Articles