“People have lost everything you know, so I always check a 100 times before I purchase anything”, one of our test subject explained as she meticulously entered her credit card information. Indeed, during our past 7 years worth of large-scale checkout usability testing, we have observed that users continue to feel uneasy about sharing their payment information with e-commerce sites.
In fact, our new Checkout Usability study reveals that 17% of users have abandoned a checkout flow during the last 3 months because they “didn’t trust the site with their credit card information” (4,560 respondents, average US adult internet population, 2020). Throughout all of our testing of checkout processes, we’ve consistently observed 2 important user behaviors relating to security:
In this article we’ll dive deeper into how visual security is best established, how users perceive security in a checkout flow, and we’ll provide new updated results for our “Which Site Seal do People Trust the Most?” study (incl. testing a fake seal).
Already back in 2009 we observed that a large proportion of users perceive some parts of a checkout page to be more secure than other parts of the same page. This was re-verified in 2012. And now again in our latest large-scale checkout usability testing.
What we consistently observe is that any parts of a checkout page with trust badges, reassuring microcopy and a general visual “robustness” are often perceived as being “more secure”, while parts without these visual clues inspire less confidence – despite the fact that these fields are all part of the same form on the same page. Now, from a technical perspective, this of course doesn’t make any sense, as all the form fields on an HTTPS-page are equally encrypted. However, the majority of normal web-users do not have this level of technical insight, and are likely to perceive some parts of the checkout page as more secure than others, whether it’s technically true or not.
There’s two additional observations on users’ perceived security that are important to underscore:
Let’s take a look at some design tactics that have performed particularly well during our usability testing when it comes to reinforcing the user’s perceived level of security.
One method we consistently observe to perform well for increasing users’ perceived security of sensitive fields is to visually encapsulate them. This can be achieved simply by using borders, background colors, shading, and other visual styling that will make one part of the form seem more robust than the rest. Remember: this is about perceived security of the fields, not their actual technical security.
It’s important to note that the visual reinforcement must be distinct and unique for the credit card fields. If you use a similar style elsewhere during your checkout form for less sensitive information, it will likely be considered generic styling and not yield the desired increase in user confidence. Again, this is about tapping into the user’s perception of the fields, making the user feel that this highly sensitive information will be treated more securely than the fields that contain less sensitive information (like an address or name).
Another visual clue that during testing also proved effective at increasing the perceived level of security (and adding robustness to the encapsulation) is the use of “site seals”, such as trust badges, SSL seals, and similar symbols suggesting trustworthiness.
Now there is a broad range of site seals, each with different meanings:
Generally, we see during testing that adding any visual icon will help increase the user’s general level of perceived security. However, we wanted to look a little deeper into which seals and icons inspire the highest level of confidence in users, and we’ve therefore conducted several quantitative studies testing various site seals. We ran the first study in 2013 a second in 2016, a third in 2019, and a fourth study in 2020, each asking the same question: “Which badge gives you the best sense of trust when paying online?”
The 2020 test results tell largely the same story as our 2019, 2016, and 2013 results. The SSL seal from Norton dominates as the seal that establishes the best sense of trust, followed by three trust seals, with several of the SSL seals performing rather low. Looking at the results, it’s very interesting to note that the seals from well-known consumer-facing brands, like Norton and Google, perform very well (even though Google no longer uses the ‘Trusted Store’ seal). This suggests that it’s at least to some extent possible for e-commerce sites to leverage the recognizability of these brands.
Similar to the previous study results, it’s interesting to see that the majority of the most trusted seals are “trust seals”, not SSL seals. This is noteworthy because SSL seals suggest actual technical security of the payment form (preventing man-in-the-middle attacks and network eavesdropping), whereas the trust seals indicate little to no actual technical security. Again, this just re-emphasizes that actual technical security is beyond most users’ understanding, and that users will go with what makes them feel most secure.
.. the homemade seal performed significantly better than the SSL seals issued by established vendors ..
In our 2020, 2019, and 2016 tests we also included a completely “homemade / fake” seal not issued by a 3rd party, with no meaning whatsoever beyond the icon itself. Note how the homemade seal performed significantly better than the SSL seals issued by established vendors except Norton. This suggests that beyond strong brand reconizability, it doesn’t matter too much which actual seal is chosen. Rather what’s most important is making sure there’s some kind of visual seal or icon present to indicate the robustness of the credit card fields.
When it comes to placement of the seals and icons, we observe that placing 1-2 icons within the encapsulated area performs well to help the perceived reinforcement of the sensitive fields.
While users’ general lack of deep technical knowledge means we can strengthen the perceived security of the credit card fields through visual cues, even entirely made-up ones, we also observe in testing that this lack of technical understanding can cause unrelated layout quirks to completely erode all sense of security.
During testing we observe how seemingly innocent layout bugs and quirky interactive features cause the test subjects to doubt the security of the site. In fact, some subjects even believed the site had been hacked or wasn’t currently working properly, causing them to abandon their purchase due to a lack of trust in the site. In these instance even the strongest of brands can suffer since the user no longer trusts that the business has control over the site, and indeed we’ve seen subjects abandon sites such as Amazon and Walmart due to layout quirks during their checkout processes.
It’s therefore crucial to scrutinize your checkout flow for even the smallest layout quirks – preferably across a wide range of browsers and devices, every single time there’s code changes to the checkout flow. Even sites with just moderate traffic levels will likely find such efforts worthwhile.
While fixing layout quirks and technical bugs should be almost needless to say, our experience with benchmarking and auditing leading e-commerce sites for 7 years indicate otherwise – something we examine in-depth in: How Layout Bugs Keep Haunting E-Commerce Sites – It’s Time to Fix This.
Our 2012 checkout usability benchmark revealed that 89% of sites didn’t visually emphasize the security of their credit card fields, whereas our 2016 checkout usability benchmark shows that it’s now only 66% of the major US ecommerce sites that lack visual emphasis. (It’s worth noting that this significant improvement is despite these being major e-commerce brands which have the lowest need to increase their perceived security.)
In essence our research findings may be boiled down to these two points:
This article presents the research findings from just 1 of the 850+ UX guidelines in Baymard Premium – get full access to learn how to create a “State of the Art” cart and checkout user experience.
Join 22,000+ readers and get Baymard’s research articles by RSS feed or
Topics include user experience, web design, and e-commerce
Articles are always delivered ad-free and in their full length
1-click unsubscribe at any time
Layout Quirks Erode User Trust.
Another lovely little nugget of evidence to help sell the benefits of user testing to clients. Thanks!
Great article as usual.
Did you present McAfee as a trust seal in your survey?
Small hint: the images are not clickable, so the reader actually can’t see and understand the samples (unless you right click and open in new tab). Thank god it’s not a payment page here ;-)
Hi Silver, thanks for letting us know. We had a dev. backlog with other pending items to deal with first, but it’s fixed now and images are zoomable.
Christian, wow in-depth article! Any thoughts on how to identify which of these potential reasons for checkout abandonment to test 1st? Especially if you have a smaller size audience pool? Would you focus on split testing the visually reinforced credit card vs current version or trust symbols next to the credit card — basically how would you identify which of those to test first? thanks again!
Wow such useful information thanks a lot, but I almost didn’t comment cause the lack of trust the comment widget generates in me haha ! I’m learning fast!
Hi there, I am interested in the data regarding “Reasons for abandonements during checkout”. The graph shows it is from 2016. Is that data still relevant or is there an updated version?
© 2021 Baymard Institute US: +1 (415) 315-9567 EU: +45 3696 9567 email@example.com