Design View | Articles and opinion on design professionalism, technique and culture by Andy Rutledge

Amazon.com Redux

July 19, 2006

Where to begin? Amazon.com is one of those companies like Google and eBay in that they’re successful today because they were first and best in delivering the goods — product and service. Because of this factor (and others), today Amazon.com exemplifies eCommerce success. But perhaps because they made their bones back when being first and best meant something, they have long ignored many important facets of design. And it will hurt them one day if they don’t remedy this failing.

Some of you might have raised an eyebrow at my observation, “…back when first and best meant something.” True, it still means something today, but these cannot be the only factors contributing to success now. Today, entrepreneurs are busy ferreting out the gaping holes in products, services, applications and the like as offered online, and when they come to market they’re (usually) well designed, too. They have to be, because 4 other guys had the very same idea and they’ll be well designed when they arrive. Otherwise, they flop. Darwin called this tendency survival of the fittest.

Amazon.com is powerful and respectable, but they are no longer fit, in the Darwinian sense of the term. When it comes to certain aspects of their business, they’re lazy and fat and ripe for some enthusiastic and much smarter omnivore to come along and pick off. Others could do what Amazon.com does and seriously challenge them. They need only do it with an eye turned more toward human psychology, perception and reasoning — in other words: advisable design. By making the experience more intuitive, visually enjoyable and easier to navigate and interpret someone will have produced a giant killer. Caveat regis.

The Current Design

Amazon.com is a huge site with many important interfaces, which vary depending on whether or not you’ve signed in or have browsed the site much yet during your current or previous visit. Personalized content is one of the Amazon.com hallmarks. That aside, we’ve got to start somewhere specific in detailing and addressing the design shortcomings these pages exhibit. However, the header area of the page design is certainly not one of these shortcomings.

Amazon.com header configuration

It has been through several iterations over the years, but this current header design works quite well and does so with a relatively small number of elements. Even without the gratuitous (but convenience-enhancing) hover behavior of four of the navigation elements this page–header–cum–search–mechanism is a good bit of design. It is just about the only part of these pages that is well designed, but credit where due.

Here’s the current books page layout and design.

Amazon.com books page

Or go see this page on the Amazon site >

Problems

This page is typical of most Amazon.com pages and it suffers from a few problems of usability and affordance. Some of these maladies are endemic to certain sections, some due to contextual situations (like monitor resolution), while others are site–wide mistakes. I could speculate that some layout issues are created by the site being tied to an outdated CMS, but as I prefer to stick to strictly design-related issues I’ll discount that possibility. Excellence knows no excuses.

The first thing that that one tends to notice on just about any page of the site is the absolute lack of focus or information hierarchy within the content. Most pages seem to want to do 20 things while others seem to want to do 120 things. Yes, content volume is certainly an issue. But even that presents less a problem than does the fact that the entire page is white and there is no significant or communicative structure that indicates where a viewer’s eye should land or travel next.

Amazon.com books content detail

Leading the viewer’s eye into and through a composition is almost always a good idea, for a host of reasons. First, a viewer generally wants to know what “you” believe to be most important, next important, etc… before they decide for themselves what they believe to be most, next, least important. This visual mechanism of design actually sets up a sort of negotiation whereby viewers decide whether or not your page or your company exhibits quality. If your page composition indicates a hierarchy that the viewer agrees with, they’ll like what they see and like what you say far better than if they disagree with your indicated hierarchy (so don’t mess this one up).

Creating a strong and intuitive structural content hierarchy goes a long way toward warding off cognitive dissonance – a sense of discomfort that arises when one’s ideas or preferences conflict (as in, “Oooo, this is nice. Oh, but that’s not too nice. Hmmm, I’m not sure if I like this…”). By the way, this negotiation often takes place in less than a second and once viewers come to their conclusion, cognitive dissonance will interfere with their changing their minds. If, however, you win them over, you’re golden.

Leading the eye into and through the composition brings other benefits, too. It provides the perfect opportunity to teach your visitors a thing or two about your site’s visual conventions. This brief guided tour lays down the fundaments for how you’re going to visually stimulate them and capture their attention in other areas of the site – which they’ll now be adequately prepared to respond to appropriately, if you’ve done your job right.

It’s also relevant to address this whole issue of content volume and these pages trying to be all things to all people all of the time in all cases under all circumstances with all of the all alling all over the place. This page is the allest all that ever alled. Please, stop it all-ready.

Think for a moment about touring a large government building. If you’re dropped off in the foyer and left to fend for yourself, you quickly become bored because what you see pretty much amounts to: a hallway, another hallway, a big room, a smaller room, more small rooms, another hallway, etc... If, however, you’ve got a guide, you’re informed of not only the names and functions of the various rooms and arteries through the building, but also of relevant and interesting facts about them. You’re told of their history and their place in the agency that helps govern your society. What was colorless and boring is suddenly interesting and dynamic. Being guided makes a world of difference in all sorts of endeavors.

Oh yeah, the Amazon.com thing… (sorry, the preceding was what we writers call premise)

So, back to Amazon’s books page. As there is not even the slightest hint of a content hierarchy, shoppers are left to flounder for a moment while they get their bearings. Shoppers hate that. Strike one.

The center area is obviously the largest and has the most pictures, so it must be the most important. But even it lacks any sort of intuitive structure. As you scroll down the seemingly endless page it’s hard to tell where one thingy stops and another thingy starts – no visual delineations or even suggestions, vertical or horizontal. The section headings are hard to pick up and the endless field of white tends to make one’s mind numb. Boring and confusing. Strike two.

So what’s with the two sidebars guarding the center content like a couple of drab, third-grade hall monitors in white leisure suits? Is that stuff important? If so, why are the two columns split so far apart from one another? It’s enough to give a guy Marty Feldman eyes. Shoppers actually have to read to determine what’s important and what’s not. Shoppers hate reading. Strike three.

You’re out.

Actually, there’s more. This page fails more the higher you set your monitor’s resolution. The higher your resolution the farther apart elements move from each other, the more disparate and disassociated the content elements seem, and the longer and more difficult to read the lines of text get. Since the vast majority of Amazon’s customers are not designers and developers on Macs with their browser sized to just the right window size floating with other windows on the monitor screen, this poses a significant problem. Most are looking at the page with Internet Explorer at a resolution of 960 or higher, fully maximized on the screen. Ug–ly. This factor results in a diminished shopping experience for nearly all shoppers here. Strike, er …four.

Going for the all-time strike record

It’s also relevant to address this whole issue of content volume and these pages trying to be all things to all people all of the time in all cases under all circumstances with all of the all alling all over the place. This page is the allest all that ever alled. Please, stop it all-ready.

Seriously, too many of the pages in this site are simply too crammed with content upon content. Aside from making the pages tedious after just a couple of forays, this sort of thing exacerbates the complete lack of focus on the pages. When you’re not sure of what you’re trying to say, saying too much is no remedy. These pages need to become more focused and exercise an economy of service. They should serve up a far more concise menu of content and let enhanced focus improve the page’s performance.

What’s more, the lower section of most pages degenerates into a horrible mishmash of content with poor architecture and sometimes awful color choices. This needn’t be the case and though it’s far down the page this chaos hurts the pages’ performance.

So let’s do something about it.

Amazon.com Redux

A quick glance at the redesigned page may not reveal much in the way of design revelation. But the changes are relevant and effective. A revised design for the books page (and by extrapolation, all pages) needs to address the current shortcomings and enhance the overall shopping experience. True, a real redesign should take into account loads of information I’m not privy to, but I can address the obvious, general issues examined thus far.

According to what I know and can assume about the needs and aims of this site, a new design should: be flexible enough to handle different volumes of content, describe a clear content hierarchy, allow for ads and highlighted specials, show plenty of options, maintain the sense of there being a huge volume of merchandise available, and be inviting and stimulating while not causing undue visual stress.

In any event, here is my suggestion for one way to address these issues in the design:

Amazon.com redux comp

Here is the full-sized mockup >

What was done and why

First of all, I left the header mechanism just as it actually is on the current site. It works, it’s fine, and my aim is not to muck with what already works. Sure, I could have redefined the aesthetics, but for no good reason. We’re not talking about aesthetics for their own sake here.

The Layout
I pulled the ol’ switcheroo and moved the left column over toward the right and this constitutes the bulk of the layout changes. Doing so was not an arbitrary decision, but was done to help establish a content hierarchy and associate the relevant navigation with the main content, which I’ll explain in the subsequent section.

The only other layout change I made was to eliminate the fluid layout configuration in favor of a fixed width layout. For half of you reading this, let me now say, mea culpa, mea culpa, mea maxima culpa. Then let me reiterate that Amazon’s site has significant problems tied to the loosy–goosy layout as it relates to content configuration, information architecture and screen resolution. Many of these issues can be fixed and/or addressed by adopting a fixed layout. I believe that the greater good is served by this move.

Here’s how resolution affects the current layout and content association.

Compare how resolution affects layout

Information Architecture
The more significant changes were made to enhance the information architecture and its associated content hierarchy. For reasons mentioned earlier, this is important work that must be done right in order to reap the most benefit for both the company (more sales and profit) and the shopper (better shopping experience). See how those two things go together like bananas and peanut butter?

Gone is the nearly indiscernible distinction between specials/ads and featured product. The specials are now housed in a prominent, distinct section that works nicely with the rest of the page and the main products area. This section can be reconfigured as necessary to accommodate whatever special is offered up.

Let me remind readers that the purpose of this exercise was not to show off the über design for an eCommerce site, but rather it was a vehicle for addressing specific design shortcomings in a specific or general context. Improvement and examination, not ultimate solution, was the point.

The main content (featured categories) and the related book navigation are now more closely associated – by color. They’ve both got white backgrounds and are clearly adjacent to one another. Furthermore, the special promo area at the top actually helps to create the association between the main content and the “browse” navigation vertical section. Look at it for a few seconds and see if you can tell how.

The “featured categories” are now more clearly delineated, which mitigates the stress of trying to figure out how those elements are defined and associated. Further down the page, the “new and notable,” “books on a budget,” and the last-ditch feature item are also more clearly delineated by section background color and actual lines. This makes for a more obvious structure and segment separation. Because of this, the section titles are now more obvious and carry more weight.

The far right sidebar is de-emphasized with complimentary color shading. Its position on the page, away from the main content, also communicates its place in the content hierarchy. It is by no means removed from the “shopping experience,” but is now more appropriately positioned to allow it to work well with the rest of the content rather than distract from it.

The lower horizontal section that includes some helpful links and the bottom-of-page search mechanism is now made more distinct from the rest of the content and quite a bit more aesthetically pleasing (pleasure counts!). The same is done for the “recent history” section and the look/feel and color palette kept consistent. These, too, are important considerations.

Conclusion

Aesthetic choices aside, the redesigned page should work far better than the current one for all of the reasons cited above. Now, instead of pieces of content merely occupying space on a featureless field, each piece works with other pieces to describe a hierarchy and create a more intuitive experience. This sort of economy of mechanism is important in design and should be a baseline of design quality for all layout and design projects.

Let me remind readers that the purpose of this exercise was not to show off the über design for an eCommerce site, but rather it was a vehicle for addressing specific design shortcomings in a specific or general context. Improvement and examination, not ultimate solution, was the point. I hope that the issues discussed in this exercise prove useful in your future efforts at Web page design and I appreciate your reading my over-long article.

Archives

Archive

Practice