Categories
Usability

The Magic Usability Behind Amazon’s Massive Dropdown Menu

Not all drop-down menus are created equal.

Your standard drop-down menu isn’t rocket surgery. It’s usually a little bit of Javascript (or HTML5) that changes some text within an element when you hover over a certain area of a website.

I’ve made a hundred drop-down lists in my life. You code it up, you make sure it works, you commit it to Git and you move on.

But standard implementations of drop-downs are terrible. How often has this happened to you:

bootstrap-bug

 

All. The. Time.

Amazon (semi-famous for their amazing amount of testing) finally took action and created a smarter dropdown menu. By adding a slight delay, and a little smarter code, their dropdowns act like everyone would expect them to act.

In this example, if you’re on the Amazon Cloud Drive item and you move your mouse anywhere in the blue triangle, the extended menu will delay for a small amount of time – leaving the Amazon Cloud Drive menu open:

screen_shot_2013-03-06_at_1.17.35_am

 

Lucky for all of us (and in true hacker fashion), someone has created a jQuery plugin that makes this simple to implement on your own site.