We’ve come a long way in how we present products to our customers since the early days of the Internet. Let’s dust off WayBackMachine.org and see what’s changed…
We’ll focus on Zappos.com circa March 2003 (or thereabouts). One of the things that stands out to me is how, arguably, e-commerce product page design has failed to evolve significantly from the basic template of 2003. Of particular note: the layout of the product images relative to the “buy box” (above and to the left), the next and previous image carousel metaphor, the Add to Cart button placement, and position of product descriptions relative to other elements on the page. Many e-commerce sites remain stuck in this paradigm.
Nostalgically, the screen from 2003 reminds me of the struggles web designers (myself included, albeit in B2B space) had in those days, including:
- “Maybe a back button on the page will keep people from hitting Back in the browser too easily and leaving the site!”
- “What if they scroll down and don’t see the Back to Browsing button we added at the top??? Let’s put another one at the bottom!”
- “Internet Explorer 6.0 only supports standard <select> elements, so we have to design the variant pickers using that!”
- “Oh, and the Size picker needs to filter the Color picker to ensure availability, so yes the page has to refresh”
- <table><tr><td>We’re in table-based layout hell</td></tr></table>
Remember thinking this way? I sure do.
Twelve years later the 2015 Zappos.com is aesthetically quite different, though similar in a number of ways.
- We no longer feel the need to cram everything “above the fold”. While Nielsen’s original usability studies were pivotal in guiding our desktop-centric designs in the past, the user experience community (including Nielsen) has acknowledged that scrolling is here to stay due as much to the shift to mobile as anything else.
- Calls to Action, in particular the Add to Cart button, are extremely easy to find and target.
- The new “Tell a Friend” feature is the obligatory social network button bar…and it’s arguably no more effective than the old feature was
- Brand imagery (see “paul green” logo in each example) is less prominent than the more important elements of Price, Customer Reviews/Rating, and Product Recommendations.
- Whereas the 2003 example provided tools (e.g. “Search for a Brand”, “Browse More Styles…”) for finding more products, the 2015 is more proactive and uses the now table-stakes recommendation engine approach to proactively suggest similar items.
- While we have a better handle on the use of white space, we seemingly remain constricted to table- or grid-based layouts.
While Zappos is just a single entry in the vast library of historical product pages that can be referenced, I think it represents an interesting contrast between the past and present that is common in many e-commerce designs.
What, one wonders, are some other comparisons with the past worth making?