User Experience 101 – Amazon’s Dropdown

Dropdown menu navigation can be tricky especially when unleashing it upon millions of people, you need to take into account intent, not just strict HTML guideline functionality.

The basic problem is maintaining a quick response time while maintaining the correct dropdown menu the user is intent on, this closely borders on programming to read minds.

An example of the problem with a strict dropdown menu. It is very responsive but there is no intent so the user must follow a determined path with their mouse or the dropdown instantly disappears.

An example of the problem with a strict dropdown menu. It is very responsive but there is no intent so the user must follow a determined path with their mouse or the dropdown instantly disappears.

Amazon seemingly solved this with a plugin called jQuery Menu Aim. What this plugin does is triangulate the path a user’s mouse would take from the parent dropdown item, to the child dropdown list itself, thus not switching or removing the open dropdown list if a user quick hovers over another parent item on their way to the children.

Mouse triangulation. Incredible User Experience improvement

Mouse triangulation. Incredible User Experience improvement

Like all good design, this probably goes unnoticed by the user but it sure would be noticable if it didn’t exist.

Credit: Ben Kamens – Khan Academy

Tags: , ,

Leave a Reply