In preparation for one of our client’s upcoming redesigns, we performed an analysis of over 30 different product pages.
Our goal was to identify persuasive design patterns common across product pages boasting high conversion rates, then incorporate those patterns into our redesign.
I’ve opted to leave out better-known practices, like using a responsive design, in favor of focusing on three of the more interesting, possibly less obvious aspects of a good product page design.
Good Pages Respect the User’s Intent
When a user clicks on a link or a button, they have an explicit intent in mind. Although it can be tempting to add visual polish in the form of animations and transitions, pages with excessive animations feel sluggish and unresponsive. If I’m forced to wait for an image to fade in every time I click a gallery thumbnail, I’m spending more time waiting and less time gathering information to help me make a purchase decision—I’m losing momentum. It might not look as good, but pages that respond instantly feel better, which counts for much more than looks.
Another way pages can respect the user’s intent is to only support explicit interaction. That means fewer events triggered on ambiguous events, like when the mouse hovers over an element. A mouse click is has intentionality behind it—a hover does not. It is easy to become disoriented if, as you scroll, the site is changing in unpredictable or unexpected ways due to mouse hover events. Designing for mouse clicks has the added benefit of being completely mobile-friendly, unlike mouse hover events.
For an excellent example of a page that respects the user’s intent, see the product gallery on Walmart’s product pages.
The gallery on Walmart’s product pages responds instantly, changing the displayed image without any animation downtime. While they do change the product image on hover, the gallery requires an explicit click for it to continue displaying the new product view after the user has hovered out. In this instance, use of hover makes the page feel more responsive than it otherwise would.
Good Pages are Highly Parseable
Being able to quickly scan a page and know what it’s all about is important to users with 20 tabs open and a hundred things to do. Parsability means key elements call attention to themselves through vibrant colors, distinct borders, or excellent use of typography. Pages should, without exception, call attention to key action items like “add to cart” buttons and configurable product options.
Sections that contain technical details, product descriptions, and reviews should generally be discoverable via headers with large font sizes. The content of these sections can afford to be less emphasized—if a user is interested in the section based on the more parseable header text, they’ll dive in.
Warby Parker’s product page is, by far, the best example of great parsability on a product page we found—pay particular attention to their treatment of typography.
Warby Parker’s attention to typography is fantastic. All the text is left-aligned for easy reading, there is good spacing so you can scan each item quickly. Most interestingly, the “Frame Description” title is less emphasized than the description itself—counter-intuitive perhaps, but when your description is just a sentence long you can get away with it.
Good Pages are Focused
The best product pages focus on the core elements of the buying experience and leave it at that. At the very least, the top part of the best product pages are highly focused on the purchasing experience. All focused designs are the result of many hard decisions made behind the scenes. There are always more ideas than there are spaces to fit them in. The trick is figuring out which ideas will have the biggest impact on your key performance indicators. In the end, if the design team is unwilling to make hard decisions, the work of determining what is important is offset onto your users, and you’ve just lost an opportunity to guide them at a critical point in their journey.
In addition to focusing the end-user on the important actions, they can take, focused designs confer benefits during the design and development process. With fewer elements to consider, design and development teams can afford to spend more time refining each element, leading to a more polished end product.
The Indochino product pages is a great example of focus—a massive product image paired with some short, snippy copy and, of course, the add to cart button. This blend of focused elements might not be perfect for every brand, but it works for Indochino.
A Note About BranchLabs
We love eCommerce projects that blend strategy, design, and development. If you are in charge of an eCommerce site and have a project in mind or are curious as to what could be improved, get in touch with us—let’s find out what we can achieve together.