Shopify Conversion Rate Optimization
The Ultimate Ecommerce Guide to Increase Sales from Drive-By Visitors in Shopify
by Joshua Uebergang of Digital Darts
by Joshua Uebergang of Digital Darts
“Wearing a veneer of perfection never did me any good.”Liz Phair, singer-songwriter and guitarist in an Elle interview on women being women
Beauty is the shallow veneer of good web design. Pixel-pushers have no clue about conversion rate optimization; designing for appearance and functionality with only words that “we’ll achieve your business goals”.
Facebook, Google, YouTube, Wikipedia, Amazon, eBay—all these online monsters are aesthetically ugly. Functionally, they are brilliant. These companies test and tweak little elements every week like the addition of an icon on a form, change of navigation text, or introduction of a new element to see the effect on business goals.
Store design does not need to be art. The crux of good ecommerce design is revenue. All else is irrelevant.
The given design ideas and methodology show why certain designs work – and how you can apply the concepts to pluck low-hanging fruit in your store. It is tempting to be hand-held into a high ecommerce conversion rate by straight up doing what worked for another store. Resist and test. What boosted sales for one store may not work for you.
Joel Marsh beautifully labeled a theory to optimally control eye movement on any page with imaginary lines, edges, and blocks in design. Our eyes follow chunks of images, text and other elements until interrupted to reduce intake of information. He calls it the “axis of interaction”:
The implications of axises in design is monumental. Everything on your page either builds an axis or destroys an axis. Groups of centered elements is bad usability unless you want interruption. Centered logos can destroy navigation.
Want an element clicked? Have it follow the axis of interaction. That’s why form submit buttons (you want engagement with) are best placed at interaction points like the “Add To Cart” in the image above.
Notice how the volatile button of “Move to Trash Can” in the Google Analytics property view is nowhere near an axis line. The feature is available for the user seeking it but invisible to others. That is purposeful design.
Common points of optimization for stores are form elements, navigation, and images. Cart and product pages have the most opportunity for Shopify owners.
Full-screen responsive designs are extremely hard to get right because they completely screw over axises. Where are the eyes suppose to go? The navigation for Vapour Eyes and the whole checkout sequence does not control the eyes. Maybe their eyes are too vaporized? (I had to.) You could compensate with a movement of key elements or give worded directions of what the person is to do next, but these bandage weak design that should be intuitive.
SkinnyMe Tea place selection of product quantity beside the “Add to Cart” button. This may alter the interaction of each form element to affect the average order value and frequency a product is added to the cart. Whether it’s better for revenue than a traditional top-down interaction, you should still test it.
Hard data gained from sources like a test or heatmap tool tell you how users engage with a page. VWO has heatmaps for your tests while CrazyEgg, Lucky Orange, and Hotjar provide similar tools without split-testing.
Knowing about the axis of interaction gives you an understanding of interaction data, lets you predict flaws in design, and helps you form a hypothesis to test a design with intent to optimize.
Stop the gray fonts on white background. I’m sick of it. You know the low contrast look I’m talking about. Sure, it looks modern but web pages exist to be read.
Poor contrast is further disastrous for users with poor vision, low-quality monitors, and glare on screens.
Load up a product page on your store then stand back two meters. Pretend you’ve never seen your store before. Can you tell where the navigation, product images, production description, and call-to-actions reside? What are links that can be clicked?
There is no best color for you. Pick colors that match your brand or have a subtle psychological influence. Keep your call-to-action colors distinct and consistent.
Color contrast matters most. Be a contrast rebellion. Call-to-actions need to be clear and look like they can be clicked. Links need to look like links, not white blobs.
A “coming soon” collection is not the key piece to draw attention with red. Consider color as a whole because one element can affect the whole. Color can form an axis of interaction. Grab your users by their eyes and use color to control focus.
What food additive sounds most dangerous: Hnegripitrom or Magnalroxate?
Researchers found people rated the fictional Hnegripitrom as more dangerous. The researchers conclude, “…dangerous food additives were rated as more harmful when their names were difficult to pronounce than when their names were easy to pronounce.”
The effect of simplicity carries over to product purchases. A 2007 study on the “Preference Fluency in Choice” found that our product preference depends on how easy or difficult the legibility of options appear. The researchers discovered that twice as many people wanted to buy a product when its description was in an easy-to-read font. When the option was difficult, people deferred their decision.
The mind has vast cognitive biases towards noise reduction that minimize the amount of work required to interact with the world. Break fluency and you will make people think more than they need to, which leads to indecision and no purchase.
If something does not have a clear purpose, elimination may boost revenue. Ecommerce perfection is the state when whatever you add or take away worsens the results.
Look at the websites your visitors use and how they are designed. These influence what is expected from your store. Also follow this conversion guide to give people what they expect from a store to create a fluent shopping experience. A fluent experience is an intuitive experience.
A carousel is the group of sliding images seen on the front page of most online stores. Carousels are the most over-rated, over-used, and poorly designed element in ecommerce. Most carousels suck because:
If you use carousels:
Buttons and other links greatly impact sales because of their engagement. Every customer adds a product to their cart making the action a valuable touch-point to test.
Visit your home page then proceed to buy a product. Write down every element you click—these are good test options. Another good idea is to repeat this purchase process in blur mode:
The text and design to use on your buttons that maximize your profit does not need to be the same as other stores. Here are call-to-action ideas to consider in your tests:
What do these icons mean?
Systems designer Wayne Pau says the answers are:
You’ve seen the hamburger-like icon in many digital locations. Most ecommerce stores use it as a menu icon for mobile users.
Amy Schade makes a good point that the hamburger menu has a high-interaction cost. Users cannot see what the menu contains, have to press it with their finger, and possibly scroll to locate what they want. Designers make the mistake of jamming the entire desktop menu into the hamburger and fail to consider how else to present core information to a mobile user.
Peep Laja for a scented candles seller found the hamburger menu with a border and “menu” text beat out the plain hamburger to increase revenue 6%. Booking.com shared they found no difference with the use of “menu” near their hamburger.
Reconsider the icon design because of its confusion and influence on the user-experience of 50% of your visitors. The first lesson of the hamburger menu is to taste-test. Well, split-test. The second is to attack assumptions that affect a lot of your users. You may surprise yourself at what you find.
My analysis of client websites show user interaction with categories, or what Shopify calls “collections”, make up 25% of the online shopping experience. The data shows collections are viewed as a middleman to achieve a goal and often have a lower engagement time compared to the rest of the site.
This means a good page design for your collections is likely to let people synthesize the best option for them in the quickest time. Factors to test on collection pages include:
A trust badge is an image that increases a visitor’s confidence to buy from you. Ecommerce stores typically use images that show their authorized SSL certificate provider:
Most studies out there that survey visitors about trust badges to discover “79% of people abandon checkout because they don’t trust you” are questionable because they are funded by companies that issue trust seals. Be weary of that. There are a lot of ways you can use badges to increase sales. Trust badge ideas to test are:
You can also explore where the trust badges are situated. I’ve seen logos take away conversions because they are situated too close to order buttons. iMagnet Mount use a satisfaction guarantee star, refund guarantee star, and the logos of accepted payments on the product page. The best placement of a trust badge either fortifies a statement or addresses a visitor’s concern when it is expected to arise.
Before you go chase your designer to plug every trust badges you can find onto your product pages, footer, and checkout, do it with a test. One study that looked at trust seals in computing tracked eye movements of 60 people and found 38% didn’t see the VeriSign and TRUSTe logos. Researcher discussions with the participants also revealed the tested subjects had “significant misconceptions of their meaning”. Use security images when security is not a concern for your users, and you may make people become concerned about security to complicate their decision.
Make known the brands that trust you. It is a favorite strategy in the software space underutilized in ecommerce. What well-known businesses or individuals have purchased from you? If no large businesses have, who has bought products you sell?
Include a section of logos and messaging on your home page or product page sharing who uses the product. By leveraging another business’ trust in you, you’re subtly suggesting to your customer, “You can also trust us.”
Always respect the privacy of people and businesses by requesting their permission to share their use of your product. Get permission to use any logos. Thirdly, do not confuse people that bought your product from somewhere else that they endorse your store. Be an ethical, law-abiding store owner.
A similar strategy is to list the brands you stock. School Specialty do this at the bottom of their home page.
I rarely recommend you copy a competitor’s design because most stores have no idea what they’re doing. If you do because they seem to follow a lot of the principles in this conversion guide, who cares if your store is not unique. Design is about revenue and your visitors couldn’t care about a unique experience.
The big boys of eBay and Amazon understand conversion optimization. They run copious amounts of split-tests every day so model design ideas off them.
When you complete this guide, you can identify why a store might use a word, image, or design. You become Neo in The Matrix; possessed with a perception to filter ideas for your tests.
Everything seen on your store is design. Surveys, live chat, and forum discussions reveal only so much. The source of massive jumps in conversion rate often come from solving unique problems in your business.
Eliminate usability issues on your store to make purchases a friction-free experience. A user test helps you realize issues you overlook.
Get your test subjects to find one particular product then buy it while talking out loud. Record their screen and audio. Services like UserTesting.com can do it for you.
One test subject is better than none, but elaborate usability studies are a waste of money. Jakob Nielsen with Tom Landauer for the Nielsen Norman Group found, “The best results for usability tests) come from testing no more than 5 users and running as many small tests as you can afford.”
Run user tests every six months to address issues that crop up with site updates and design trends. Follow this simple user-testing plan and you will have accurate scientific data that patches your store’s blind spots.
For one store I tweaked a guarantee to boost sales 50% instantly because the product was inherently risky. The heart of your Shopify store’s CRO problem may not be a simple design change. The biggest growths may initiate from discussions with qualitative testing.
Visual Website Optimizer was always my recommended tool in Shopify to discover what gets you the most sales. Recently I’ve been loving Convert.com because it is the most accurate at tracking revenue for my clients not on Shopify Plus. Don’t even bother with Optimizely as they’ve been very explicit about not supporting Shopify.
Though each of the tools are a visual editor, you need design skills to make advanced changes. Always track revenue. Additional tips I have:
Good job completing the lesson! The following part reveals how to find technical issues and make other technical improvements to boost sales without being an advanced coder: