Published on | Prototyping: From UX to Front End — Medium Sara Novak

1. Make It Easy to Click/Tap

The banners, promotional tiles, and billboards that populate your site have one purpose — to get a user to click through to a product list or product detail page and to get them one step farther down the purchase funnel. Make it as easy as possible for your customer to do just that. Have a very obvious CTA (call to action) that looks clickable so users know the content is a link. But you can make their lives even easier still. Make the whole banner, tile, or billboard clickable so that they get to where you both want them to go, even if they click the image or offer text instead of the CTA. This is especially helpful for users on mobile devices, where small target areas can be hard to tap, and there are no hover states or cursors to let people know what is or is not clickable.

✓ Do: Each homepage billboard slide on Lancome-us.com includes a clear button, but the whole content area is clickable as well.X Don’t: On MakeupGeek.com only the product image is clickable in their Autumn Glow Bundle callout, and there is no clear CTA. In the three tiles below that, only the buttons are clickable in the tiles.

I Repeat — Make It Easy to Click/Tap

Your site’s product list page is another area where it’s crucial to make sure it’s easy for users to click on a product they like. Make all parts of your product tiles clickable — the product image, the product title, the product description, the price… all of it!. Don’t make your customers (especially your mobile users) play a guessing game to figure out what part of the product tile will take them to the product. All of it should.

✓ Do: On BrassClothing.com every part of a product tile, including the image, product name, price, review summary, and color callout, is clickable/tappable and will take the user to the product’s detail page.X Don’t: On Sugarpill.com, only the product image is clickable on their product list pages. The product name and price are not.

2. Prevent Add to Cart Errors

No one likes error messages, so do everything you possibly can to keep your customer from getting one when they try to add a product to their cart. If your user needs to make certain color, size, feature, or quantity selections before a product can be added, have a default option selected. If there are selections that you don’t feel comfortable pre-selecting, like size perhaps, then make it really visually obvious that users need to make that selection before they continue. Make the empty selection stand out from the other product information and pre-selected options, or disable the Add to Cart button until all necessary selections are made.

✓ Do: On Allbirds.com, a color, size, and quantity are pre-selected when a user lands on a product detail pages.✓ Do: On NYXCosmetics.com, the Add to Bag button is disabled until the user selects a color.X Don’t: On Totokaelo.com, there is no size preselected, even when there is only one size available for a product, unnecessarily forcing the user to select the only available option before clicking Add to Cart.

3. Know What Your Customers Are Looking For

And make sure they are finding it. Search logs are a treasure trove of data that are too often overlooked. Check your most frequently searched terms and take a look at what your customers are seeing as their results. Are common predictable misspellings or alternate spellings like “haircolour” and “lip stick” bringing up results? Make sure you assign them to a result set. Are there commonly searched terms that are yielding no results? Go ahead and match your most relevant products to those terms. Are your customers searching for a competitor’s product on your site? If so, are they getting no results, or are you showing them similar products from your catalog? This situation may also be an opportunity to create custom messaging and content that shows your brand personality or educates your user on why your product is superior. Seek out any search dead-ends your users may be seeing, and give them results or relevant content to guide them.

✓ Do: On GiorgioArmaniBeauty-usa.com, if a user searches “lip stick” they see the same results they would see if they had entered “lipstick.”X Don’t: On EsteeLauder.com, if a user searches “lip stick” they see no results, but are asked if they meant “lipstick.”

4. Let Your Customers Check Out As Guests

You may say, “But making them create an account is for their own good. They can check out faster next time, and it will also help our company offer them a more relevant and personalized site experience. And Amazon requires an account!”

Though these reasons make it really tempting to require an account to check out, by not offering a guest checkout option you are putting a literal barrier in front of customers who don’t have an account yet, those who don’t remember their login and don’t want to retrieve their password, or those who just don’t want to sign in. The user could be on a public or shared device or have any number of other reasons for not wanting to create or log in to an account at that moment. You may be unnecessarily risking a sale because this requirement could make a shopper think, “Oh I’ll do this later. I don’t have time right now.” Plus, you always have the opportunity to ask them to create an account once they’ve completed their purchase, using the information they already entered. In this context, you are presenting account creation as a way to save them time versus a requirement that is taking up their time. Context heavily affects users’ perceptions of tasks, such as account creation. If they feel they are being forced to do something, they may see that task as a burden. If they instead choose to do the same task, they are aware of the benefits and it is an appreciated option.

✓ Do: On KateSpade.com, users are very prominently given the option to check out as a guest.X Don’t: On Everlane.com, the system recognizes an entered email as new or attached to an existing account, which is nice, but then requires new users to create an account before they continue to checkout.

5. Streamline Your Checkout

Your customers don’t just have a need for speed, they have an expectation of it. And missed efficiency opportunities within your checkout forms will be noticed and held against you. One large opportunity for efficiency seems obvious but is sometimes missed — make sure users can signify that their shipping and billing addresses are the same. Another is to remove any optional fields — if it’s not absolutely necessary, get rid of it. Save any requests for demographic or preference information for post-purchase.

Another common opportunity for efficiency that is often missed is the city, state, and zip code fields. The zip code can often be used to accurately determine city and state, so there is little reason to ask for all three. Put the zip code field first, then auto-populate the city and state fields based on the entered information. For the vast majority of users it will be correct. For the fringe cases, give users the opportunity to change the city and state if needed. Finally, speaking of auto-populating, make sure you are auto-populating any information your user may have already entered elsewhere on your site, and make sure your site allows browsers to autofill fields wherever possible.

✓ Do: On JCrew.com, the City, State field is autofilled based on the user’s entered zip code. It does not even appear on the site until a zip code is entered.X Don’t: On DVF.com, most fields are not identified as required or optional, so a user is unaware of what they may skip. The telephone field is required, but gives no explanation as to why. And though the “Use Shipping Address for Billing” checkbox autochecks once a user completes the Shipping Address section all the fields, the fields remain and are auto-populated with the information the user entered in the shipping columns instead of disappearing, so the number of fields remains overwhelming.

Give Your Customers a Smooth Journey

These are a few of the most common barriers we see on ecommerce sites, and a great place to start to improve your site for your customers. At Elevate, we work with our clients to analyze their ecommerce experiences to identify and prioritize ways they can improve their customer journey. This almost always leads to a happier and more loyal customer — and also increases conversions and revenue in the process.

<a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a>

5 Ways to Avoid Common Purchase Barriers on Your Ecommerce Site was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

5 Ways to Avoid Common Purchase Barriers on Your Ecommerce Site

Cool stuff, every week

More Articles