March 10, 2013 - 2 min read
I’ve been a fan of Amazon for a while. As a non-American, I’m actually using Amazon a lot. Living in the Netherlands has one disadvantage; there is no Amazon.nl, which makes me default back to Amazon.de for old school hardcover books and Amazon.com for new school Kindle ebooks. Ahh, the awesome Kindle (now there’s a blog post for the future).
Reading Ben Kamens’ Breaking Down Amazon’s Mega Dropdown I realized that is another reason why I keep coming back to an online retailer that doesn’t properly target my home country; their user interface is awesome, snappy and filled with little gems. Ben details an effect I’ve subconsciously noticed; the way Amazon’s dropdown menu works is smartified with some intelligent Javascript to decide which submenu contents are displayed. I realized I’ve encountered (nerd sniped) such intelligent code in Amazon before, in the category view.
When we’re building webshops for our clients (over at elgentos ecommerce solutions) we try to incorporate AJAX in the category views, allowing users to navigate the category pages without refreshing the entire page but just the part that needs updating. I’ve noticed that Amazon’s ‘next page’ navigation is especially snappy. What Amazon does is pretty simple, and smart.
Amazon by default shows 24 items on a category overview page. When you click ‘Next page’ at the bottom of a category overview, it’ll show the next 24 items. But it will show the top row instantly! On Page 1, Amazon actually loads 27 items and puts 3 in a hidden div. When you click on ‘Next page’, it’ll show that div and load in the next 24 items. When those are loaded, 21 are appended to the current page and 3 are again placed in a hidden div. I love that!
Try it out yourself here; Amazon.com - Toys - Radio & Remote Control.
Written by Peter Jaap Blaakmeer @PeterJaap