{"id":94,"date":"2013-03-07T08:05:46","date_gmt":"2013-03-07T13:05:46","guid":{"rendered":"http:\/\/www.clarkle.com\/notes\/?p=94"},"modified":"2013-03-07T08:05:46","modified_gmt":"2013-03-07T13:05:46","slug":"the-magic-usability-behind-amazons-massive-dropdown-menu","status":"publish","type":"post","link":"https:\/\/www.clarkle.com\/notes\/the-magic-usability-behind-amazons-massive-dropdown-menu\/","title":{"rendered":"The Magic Usability Behind Amazon&#8217;s Massive Dropdown Menu"},"content":{"rendered":"<p>Not all drop-down menus are created equal.<\/p>\n<p>Your standard drop-down menu isn&#8217;t rocket surgery. It&#8217;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.<\/p>\n<p>I&#8217;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.<\/p>\n<p>But standard implementations of drop-downs are terrible. How often has this happened to you:<\/p>\n<p><a href=\"http:\/\/www.clarkle.com\/notes\/wp-content\/uploads\/2013\/03\/bootstrap-bug.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-95\" alt=\"bootstrap-bug\" src=\"http:\/\/www.clarkle.com\/notes\/wp-content\/uploads\/2013\/03\/bootstrap-bug.gif\" width=\"346\" height=\"248\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>All. The. Time.<\/p>\n<p>Amazon (semi-famous for their <a href=\"http:\/\/www.wired.com\/business\/2012\/04\/ff_abtesting\/\">amazing amount of testing<\/a>) 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.<\/p>\n<p>In this example, if you&#8217;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 &#8211; leaving the Amazon Cloud Drive menu open:<\/p>\n<p><a href=\"http:\/\/www.clarkle.com\/notes\/wp-content\/uploads\/2013\/03\/screen_shot_2013-03-06_at_1.17.35_am.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-96\" alt=\"screen_shot_2013-03-06_at_1.17.35_am\" src=\"http:\/\/www.clarkle.com\/notes\/wp-content\/uploads\/2013\/03\/screen_shot_2013-03-06_at_1.17.35_am.png\" width=\"415\" height=\"398\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>Lucky for all of us (and in true hacker fashion), <a href=\"https:\/\/github.com\/kamens\/jQuery-menu-aim\">someone has created a jQuery plugin<\/a> that makes this simple to implement on your own site.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Not all drop-down menus are created equal. Your standard drop-down menu isn&#8217;t rocket surgery. It&#8217;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&#8217;ve made a hundred drop-down lists in my life. You code it up, you make [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[],"class_list":["post-94","post","type-post","status-publish","format-standard","hentry","category-usability"],"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/www.clarkle.com\/notes\/wp-json\/wp\/v2\/posts\/94","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.clarkle.com\/notes\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.clarkle.com\/notes\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.clarkle.com\/notes\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.clarkle.com\/notes\/wp-json\/wp\/v2\/comments?post=94"}],"version-history":[{"count":0,"href":"https:\/\/www.clarkle.com\/notes\/wp-json\/wp\/v2\/posts\/94\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.clarkle.com\/notes\/wp-json\/wp\/v2\/media?parent=94"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.clarkle.com\/notes\/wp-json\/wp\/v2\/categories?post=94"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.clarkle.com\/notes\/wp-json\/wp\/v2\/tags?post=94"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}