What Your Visitors are Thinking Right Before They Click “Add to Cart"

There’s a process that we all go through when making purchases online, a set of questions that we’re trying to find answers to. Those questions vary from size and fit to shipping policies, free shipping thresholds and more. Using those questions as a basis, and the "Add to Cart" button as the center of which everything else revolves around, let's redesign product pages in a way that supports quickly finding answers to those critical questions. This article will help you achieve just that.

I recently picked up running again after seven years of promising myself I’ll do it. My sister had convinced me to take part in a couple of adventure races last year and I kind of got tired of being completely wasted after only running for 15 minutes or so.

Naturally, my first step was to buy new gear since I obviously need to look the part before actually doing anything. After Googling “running shirts,” I landed on a couple of merchants selling all kinds of running gear. I clicked through to some nice looking shirts and started investigating.

At first, I couldn’t understand why those “designed for running” shirts cost two or three times more than regular t-shirts. I had the time, so I dug deep. Eventually I found the reason in small font, somewhere towards the bottom of the page, why the “designed for running” t-shirt I was looking at cost more.

After reading through it, it made total sense. These shirts were made with special breathable fabrics, included reflective details, and more. It all made sense.

But what would have happened if I didn’t have the time, or interest, and simply glanced at the product page?

I would have given up, and left without ever learning why it cost more and potentially actually buying it. And obviously, this problem isn’t limited to running gear. There are merchants selling all manner of different products that make the same basic mistake — they hide product details.

A good product page would make the most important product details prominent, and easy to read.Clear product descriptions are only one example of a well-designed product page.

Would-be buyers have a lot of questions that they are desperately trying to answer through the information on your pages. The moment of truth arrives at the very second they are considering clicking on that “Add to Cart” button.

If you’ve done your job right, you’ve just made a successful sale. Mess up at this critical high consideration zone (the area surrounding the button), and you’ve just lost one. Essentially what you’re doing, is designing outward from the “Add to Cart” to answer visitors questions and concerns. Let’s go through those questions/concerns, and explore how you can better support them.

Is This The Right Product For Me?

Image via Memobottle

When the moment of truth — the decision to buy — nears, customers will often look at product descriptions for that final nudge to make sure that the product fulfills their criteria. This means two things:

First, product description placement needs to be such that it’s hard to miss. Memobottle, in the example above, places it’s descriptions next to a giant picture of the product itself. You have to try really hard to miss that one.

And secondly, the descriptions need to be short, clear and easily understandable by anyone. It must anticipate people’s thoughts. Again, Memobottle does just that. Is the material BPA-Free (that’s the nasty stuff in plastics)? Check. What’s the capacity? Check. How big is it? Check. Can it take heat? Check.

All the things that are important in a water bottle are brought out in an easy to understand and visually pleasing way. What are the must know features of your products? Are they present in your product descriptions?

Image via Black Claw

While Memobottle uses a well-designed bulleted list for it’s product description, the one above from Black Claw shows that good descriptions can also be presented as paragraphs of text.

What’s it like to use it? Check. What is it specially good at? Check. Line width? Check. Efficiency? Check.

Black Claw sells tattooing equipment. You would think that for merchandise like that, bringing out features as a bulleted list is the only way to go - not the case.

It’s not so much about what you sell that determines if you should be using bulleted lists or plain text. Both can work. It’s about the creative, the words used and how it plays with the rest of your site.

Additionally, displaying user generated content (UGC) such as reviews and star ratings can act as trust markers plus they can be used to find answers that are otherwise hard to find.

Image via Tree Hut

Do They Have My Size, Will It Fit Me?

Image via Rhone Apparel

After making sure that they have found THE perfect product, the next logical questions is one of size. No matter if it’s a water battle or a t-shirt - is it available in my preferred size or not?

In apparel, having clearly marked and easily understandable sizing information is just the beginning. You should absolutely have sizing information that shows clearly what’s available as well as those that are sold out.

The problem with sizing is that visitors often don’t know what their size is or really should be. Case in point, US footwear retailer Running Warehouse. Of all their returns, a full 65% used to be due to size related issues. Well over half of all returns because of sizing issues. Not good.

This is complicated even more by added complexities of different brands having slightly

different sizing. For that, a precise sizing chart is a crucial, and basic, first step. In the example above, there’s a clear box titled “Find your size” for just that. No question what that is all about.

Typically, sizing charts are a matrix of numbers like this:

Image via Rhone Apparel

Providing a chart similar to the above is a great start, and it’s certainly better than not having one at all.

It gives the visitor exact measurements and even includes comparisons to “typical” sizing used in the US and compares that with the sizing of the product at hand.

This is great when your sizing varies slightly from the norm and it’s vital information when choosing between different sizes.

Sizing charts like the one above have been, and continue to be, the norm, but you can do a better job of helping your visitors find the right size. This is where technology like the one provided by Fits Me comes into play.

Fits Me starts off by asking your height, weight and age via a popup like this:

Image via Rhone Apparel

After that information is inserted, it moves into more specific questions like your chest size for example. Based on only the three measurements and approximates of other measurements, the system is able to provide you with “Your unique fit” - showing off why a certain size works the best and what might be the possible drawbacks of going a size smaller or bigger.

Image via Rhone Apparel

Technology like Fits Me takes the guesswork out of finding the right size and visually shows customers why something will work or not. As for accuracy, the company claims it’s measurements are within 2.5%. Or, said in other words, it’s accuracy is more than good enough to be reliable for fit information. Awesome.

And the most important questions. Effectiveness. It’s all cool and nice looking, but if it doesn’t move the needle, it doesn’t really matter how nice or cool it looks. The answer for that is yes. Fit tech is able to significantly drop returns related to fit issues. After implementing a similar system, Running Warehouse saw it returns related to fit drop by 23%. So yes, the tech works.

_____

So let’s say your visitor is confident that what they’re about to buy fits them well. But it’s out of stock!

You’ve lost them. Unless...

You include a “Size Unavailable,” “Notify,” or similar text/box/button near the sizing information.

Clicking on it would open a email popup offering to let the customer know as soon as it’s back in stock. This ensures that you’re not missing out on sales simply because the needed size is not available.

Image via Rhone Apparel

Do They Have My Color, How Will It Actually Look Like?

Found the right product and it’s got your needed size in stock? #success! Moving on, color is another important factor for visitors considering your merchandise. Potential customers have to be able to figure out quickly what colors are available and if that color is available in the correct size (this is why we let them choose size first - so that we can display only the colors that we have in the correct size!).

When it comes to displaying the color options, merchants have largely implemented this as either small product images like the Amazon example above or as solid color blocks that visitors can choose from:

Image via BottleKeeper

Either way, the emphasis has to be on clarity - is this merchandise available in black, and in my preferred size/packaging, or not?

Also, when you offer multiple color options, all the variations need to have high quality product images so that visitors can see with their own eyes how the product will actually look like.

This is especially important when you have gone the solid color box route - colors look different in real life, and so having images of real products is needed to avoid customer disappointment down the line.

Take BottleKeeper as an example. They sell insulated stainless steel containers that keep your beer bottle cold. Steel containers like that are notorious for color changes under different lighting conditions.

With high quality product images for all color and size variations, BottleKeeper is able to keep customer disappointment (when color is the problem) to a minimum.

How About Shipping, Is That Free Or..?

Image via Evy’s Tree

The end is near! Our visitors have gone through choosing the right product, the correct size and color. They’ve seen the price and set the quantity. It’s almost the moment of truth, there’s just one lingering question - shipping. Will that be free? Or is there a threshold to qualify for free shipping? Or maybe it’s a flat fee?

Whichever way you have decided to go about shipping, make sure that it’s abundantly clear.

Evy’s Tree starts talking about shipping from the very moment a visitor arrive they are greeted with a message saying “Free shipping on all orders over $125.” Going forward, it’s clear to shoppers what they need to spend in order to get free shipping. Great.

Next, when you go to a product page, Evy’s again reiterates its shipping policy - flat rate and expedited options available.

Now, it’s doesn’t mention free shipping threshold in the product page (which they really should), but at least it gives clear information on shipping (and primes potential customers for shipping fees to be added later):

Image via Evy’s Tree

And finally, when you add a product to the shopping cart, it notifies would-be customers one final time that the price they are seeing excludes shipping (and again neglects to remind of free shipping threshold!):

Image via Evy’s Tree

By adding these kinds of small reminders along the way, merchants can lessen the effects of seeing the additional costs.

Also, if you implement a free shipping threshold, make sure that the amount is displayed throughout critical pages like product pages and shopping carts. At the moment of truth, the moment of clicking on the “Add to Cart” button, seeing that I indeed qualify for free shipping can easily the that final nudge that I needed to carry me over the finish line.

An example of a company that is doing just that, is Death Wish Coffee.

Death Wish Coffee has a reminder for the free shipping threshold ($50) on the shopping cart. Additionally it adds that “Shipping & taxes calculated at checkout.” That serves as reminder that $19.99 will most likely not be the final price.

Image via Death Wish Coffee

To level up from this, merchants can deploy dynamic free shipping threshold reminders. That means instead of just reminding visitors that free shipping is over $50 regardless of what’s in the cart already, it takes into account the cart value and displays something along the lines of “Only $30 to qualify for free shipping!”

Can I Return This if I Don’t Like It?

When dealing with merchandise with high(er) return rates like apparel, it doesn’t hurt to add a notice somewhere clearly visible on product pages about your exchange and returns policy. Rhone does it just below the “Add To Cart” button:

Image via Rhone Apparel

The reason being that it gives shoppers more confidence that even if whatever they are buying doesn’t fit, they know that they can always return it.

Same tactic of giving peace of mind about returns can also be used outside of apparel. Death Wish Coffee has 100% money-back guarantee. Money-back guarantee. For coffee! Brilliant.

Now, if they could only reposition those free shipping over $50 and money-back guarantees just next to or right after the “Buy Now” button so that they’re in the peripheral vision during that all important moment..

Final Thoughts

When making purchases online, there’s a process that we all go through. There are a set of questions that we’re always trying to find answers to.

Designing your product pages and specially the critically important area surrounding the “Add to Cart” button in a way that support quickly finding those answers greatly improves your chances of being successful of getting that sale.