The Design Of Amazon: Happy 10th Anniversary!

On the tenth anniversary of Amazon being an online retailer (well, the actual date is July 16th but what the hell) I thought it might be fun to take a look at why they’re so successful in design terms.

Lets be honest. For most designers, Amazon ain’t too pretty. In fact it looks grim in places. The code is also an unsemantic mess of nested tables and inappropriate code choices. These two things alone are enough to make any standards based designer grit his or her teeth. It also won’t validate, makes no effort to be accessible and makes lots of schoolboy coding errors.

But it works brilliantly. Its the embodiment of usability and a role model for how effective Information Architecture can be when researched and used well. The design elements it does use are used well, its fast loading and a joy to navigate.

So lets have a look at a typical Amazon product page (warning: 162kb image) at some of the things Amazon does right.Firstly there’s the overall layout of the page. Everything is structured in order of importance _to the user_ from top to bottom (most important at top, least at bottom).

Most importantly of all we have our main navigation area. The (clickable, of course) logo is left aligned in the traditional manner – the area that studies indicate users look first – thus ensuring the user knows exactly where they are and who they’re dealing with. These things add to the users comfort level. Next to the logo is the main site overview personal options – your account, your wish list, your basket, how you get help – which again reassures the user that _they_ are at the centre of the process.

Next is the site navigation. The cream bar is top level section areas and the blue bar is secondary level drill-down options. Note the second cream bar under the blue bar which carries Search options but carries on the ‘navigation’ colours of cream and blue (blue of course being a good choice as it mirrors the colour a user traditionally associates with progress and action – the blue of an unstyled hyperlink).

Underneath that we have one of things that Amazon does so well – internal advertising. Bright red to reflect the traditional colours of a UK Sale and note that the word ‘sale’ is the biggest typeface on the whole page. There’s no way you can miss that. Especially as its incorporated well with the rest of the page rather than floating about as an ineffectual banner.

Next is the hub of this page template – the product detail area. Everything about this area reeks of highly effective information architecture and copy writing. Look how _sparse_ the details are. Not a thing is wasted and yet not a significant details is overlooked. In that relatively small area you get price, terms and conditions, availability, the option to purchase a second hand copy, release date, the number of items associated with the product, the label, ASIN and catalogue numbers, the option to add the product to your shopping basket and/or wish list, any associated special offers, how Amazon customers rate the product, the opportunity to rate the product in order to hone your personal recommendations (Amazon appreciates latent semantics as much as Google!) and , oh yeah, a picture of the product itself.

Immediately below this area Amazon offer a textbook definition of the idea of user goals supporting business goals. Of course Amazon want you to spend more money so they offer a great way to get you to part with more cash but in a way thats so damn useful you don’t really mind – the famous ‘Customers who like this may also like’ areas. The first, interestingly, are links to offsite selling areas (Ticketmaster and Yahoo in this example page) but underneath the Track Listing (note that these two areas buttress the all-important Track Listing which is something most people want to see and thus they get these two areas in their viewing area too) is the ‘customers who bough this also bought’ which is a genius piece of viral marketing – allowing your customers to dictate the fashion will always bring more sales than dictating fashion _to_ the customer.

Next up we have customer reviews. Something of a double edged sword I’d guess Amazon keep these as they enhance their reputation as transparent and actively _useful_ to customers. Thats worth more than any one negative review can potentially lose them in revenue. A brand associated with implicit trust _and_ usefullness is worth its weight in gold.

After this is sectional bottom nav for long pages like these thus preventing users the necessity of scrolling back up and maybe getting bored in the process.

Last on the page is the stuff that Amazon correctly judges its users will need least often. Its not trying to hide the process of returning things if you need to but Amazon realise that such an eventuality will be a relative rarity for any one customer and so they place that information where its fairly easy to find but doesn’t impinge on the essential page activities of reading about and buying product.

All thats said I do find it disappointing that Amazon’s site isn’t particularly accessible and that they use non-validating, non-semantic code. These are things that elevate great sites into superlative sites. Amazon would save money on bandwidth, have even better download times and have a perfect base for any future re branding – why stop with the job only 50% done Amazon? Why not start the next ten years with a substantial under-the-bonnet change and reap the benefits enjoyed by your equally large contemporaries like Multimap, Yahoo and MSN?