Tim Ash | April 1, 2014 | Comments
Your homepage - especially if you have an online catalog site - is basically a glorified street sign. Consumers don't read it so much as glance at it in the hopes that it will tell them how to find what they are looking for. Its job is to get people out of there, onto whatever it is they're looking for. And usually what they're looking for on your site isn't your seasonal promotion, flash sale, or news releases - it's your products.
But what is it that makes a product page successful?
Obviously, focus helps, but why is it that Online Deals's product pages - which break almost all the conventional rules by having dozens of links, a ton of clutter, and pushing useful features buried several screens below the fold - survive years of tests and tuning? Evidently, putting useful information about the product helps, but why is it that large companies like Walmart get away with putting so little information about the product?
Hopes, Fears, and Your Product PageB.J. Fogg, author of Persuasive Technology, might have part of the answer. His research into motivation sheds some light on technology, in this case, the product page. He organizes motivation this way: pleasure and pain, hopes and fears, social acceptance and rejection. Obviously, that's useful for the product page, the last point before the purchase, the point where you convince your visitor to shake on the deal.
Let's start with Amazon. The online giant has tons of usability issues. It's difficult to cite a better example of clutter than more than a dozen pages worth of scrolling on one page, especially when research says that about 80 percent of visitors never see anything below the fold.
And yet Amazon delivers just that. For a Nexus 7 page, the site has 17 pages worth of scrolls.
So is it a bad product page? It certainly deprioritizes useful features like "Customers Who Bought This Item Also Bought," for starters. It also looks like it takes the spaghetti-to-the-wall approach to Web design.
But let's take a look at the elements above the fold:
The higher price is there so the visitor can see the reward of purchasing. It's available, so there's hope of acquiring the item, but you can clearly see (in prominent text) that there are only eight left, so you better act soon. It has social trust elements, it states the reward, and has a prominent, established call to action.
What Amazon is using above the fold is rooted heavily in persuasive design; e-commerce product pages use this to varying degrees of effectiveness.
If you search for a Nexus 7 on HSN or Staples, you'll encounter many of the same elements, although neither one has the entire set.
Rewards, Anchoring, and the Use of FreeAnchoring is prescribed for product pages because we have an irrational brain. We perceive the first thing we're shown and we anchor expectations against that. It's a reflex; we hardly think about doing it. That's very useful when showing price points.
Free items like shipping further capitalize on that work on pleasure and delight.
If you have pleasure and pain taken care of, if you have hopes and fears down, that just leaves social acceptance and rejection on the Fogg model for motivation.
If you've ever taken a look at Walmart's product pages and wondered how it can get away with putting so little information about the product off the bat, this partly explains why. For the same product, here's what Walmart has:
Social ProofNow try and answer these questions: What's the resolution of the screen? How much does it weigh? How powerful is the processor?
If you can't answer any of that with a quick glance, that's an issue. But this is exactly the trade-off Walmart is making. The price, call to action, and store availability get all the focus, and the other elements (except social proof) are de-emphasized.
The examples here, without exception, have serious usability flaws. None of them can answer everything you need about the product at a glance, while working with pleasures and hopes, pain and fears, social acceptance and rejection. But it's a difficult balance to strike.
If you use anchoring, rewards, and scarcity while keeping the high-level information available and the call to action clear, you're that much closer to having a more persuasive - and usable - product page.
Getting It Right