50

Should I show some sort of "this site is secure" puffery (e.g. lock image, or some brief "this site is secure" boilerplate) on my credit card payment screen? If so, what should it look like? If not, why not?

I do want my customers to feel confident (as well as actually be safe) if they choose to enter their credit card details to pay my clients. I also want them to learn a healthy cynicism. Most of my customers are likely to have a very low level of technical knowledge about internet security and are usually either too trusting, and (in some cases) too suspicious of the wrong things.

I even had a customer call me up saying he wasn't sure if my payment page was secure because it didn't have any "padlock" image within the page. (yes, the page had a valid SSL certificate, the customer had the correct URL, and his version of Chrome was showing it with the green padlock with the "Secure" label at the time - after pointing this out he was happy to proceed).

I just feel it's a bit strange to splash a "this is secure" badge on a page because I know it means nothing, technically - because a phishing page would just as easily show the exact same badge.

Assumption: that my site is actually secure (let's just say I've tried my best and will continue to improve as much as possible).

For reference, here is the page as it currently stands:

Here's a mockup of what I mean:

UPDATE after some modifications:

9
  • 38
    I am a developer, so I have a bit more technical knowledge than your average consumer. Speaking as such, how do I know that you are actually being secure with my credit card number? Sure, your site might use SSL on the transport layer, but how do I know that you're not storing my card number in clear text on your database, or that you're even PCI compliant? An image that you make up isn't going to tell me that; something that the card companies provide to you to display might.
    – Kenneth K.
    Sep 17, 2018 at 20:48
  • 4
    To step back a bit, why are you implementing your own payment gateway?
    – OrangeDog
    Sep 18, 2018 at 13:40
  • 11
    If I were typing in my credit card details I would be happier entering them directly into the PCI-compliant gateway’s form fields.
    – James
    Sep 18, 2018 at 19:07
  • 9
    You should add curtains around the padlock to show it's security theater.
    – Medinoc
    Sep 19, 2018 at 15:52
  • 4
    Beware of training users to rely on theater instead of actual indicators of security. Some people already know better, and some people will never learn; you need only concern yourself with the rest, who are teachable. Sep 19, 2018 at 18:52

7 Answers 7

63

Funny thing, I just did the research on this recently, because we faced the same "issue" in our e-commerce shop.

There is a good Baymard article referencing exactly this:

Visually Reinforce the Credit Card Section

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.

So what we ended up doing, as nonsensical as it sounds, is actually add the word "secure" to the payment headline and a little lock icon near the credit card input field.


Note: This could be perceived as manipulative (referencing your healthy cynicism point), but I would argue it is simply a method to calm the user, since the page itself should already be technically robust.

You could also purchase a trust seal for your site, to give your users something to hold on to when judging the seriousness of your shop. The Baymard article references these too.

Since our shop is already quite known here and trusted we didn't feel the need for one in our case.


Edit: As Jeffrey noted in the comments, the seal itself might not add much security either.
What really can help though, are user reviews. Like in this example, where you can click on the seal icon and open the site with the actual reviews.

8
  • 12
    "In our 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." Sep 17, 2018 at 8:19
  • 4
    "This page is secure"
    – pipe
    Sep 17, 2018 at 11:18
  • 19
    From anecdotal evidence I also experienced the expectation of users: Many users don't want to enter credit-card information into "normal looking" fields. Maybe because they want to know these fields are treated specially and stored extra securely? - I think a robust box and other color emphasizes the message to the user We know this is sensitive information and we will treat it with extra care
    – Falco
    Sep 17, 2018 at 12:16
  • 17
    Funny enough, seeing something like "this page is secure", raises red flags for me even after I see that the site is using https because I know it's fluff. It's almost a catch 22; but I guess you'll get more users that will respond well to the fluff.
    – zero298
    Sep 17, 2018 at 15:29
  • 9
    Reading this answer makes me realize that's probably exactly the same reason why if you go to "moneygram.com" it redirects you to "secure.moneygram.com" -- just adding the word secure makes people believe it is, even though it's just the name of the page.
    – Davy M
    Sep 17, 2018 at 17:07
14

How about, possibly in addition to logos, adding a link entitled something like "Security of your information" or "Security details". When the user clicks the link, a paragraph of security details is revealed (or opens in a new tab). This both reassures and possibly educates the user, depending on what you decide to put in the paragraph. As a user, whether I'm technical or not I would appreciate a blurb like "all information is encrypted and sent directly to blahblahblah. Encryption ensures that it cannot be read by any third party. It is never saved on our computers." Or whatever the case may be.

2
  • 1
    This is an excellent addition to the other answers. Users that don't care can ignore it, users that slightly care will be happy just to see the button without even clicking, and those who really care have a place where they can get more information.
    – Pedro A
    Sep 19, 2018 at 0:55
  • 3
    And I'll just add a plug: if you do this, please educate your users on how to verify the parts they can verify themselves (like the fact that the site is https using a verified certificate). Make it that much harder for phishers.
    – Wildcard
    Sep 19, 2018 at 2:39
7

I would suggest to make the bar on top of the page - in a different color - with an arrow pointing up to URL line and text saying something like "If you see small green lock in the URL line, then you know, that THIS page is secure."

So that is for increasing awareness about what is REALLY important.

And if you think so, this bar could have all those nice big colorful lock icons on both sides and any other graphical elements and eye candy you think would make your custommers more happy and feeling more secure.

3
  • 13
    Unfortunately Browser Makers are dropping the green locks and instead are defaulting to warning if insecure and only showing a visual mark for OV/EV certs. Sep 17, 2018 at 14:12
  • @HomoTechsual: That makes it a bit more technically difficult to match the browser/version, but you could still give such advice. After all, if someone IS looking at your page through a MITM attack, a GIF of a rotating padlock is lulling them into a false belief.. Sep 18, 2018 at 6:49
  • 3
    The green padlock (or HTTPS) isn't enough to know whether a site is secure or not. The domain also has to be the one you expect. For instance, google.com with HTTPS can be considered secure, but googl.com with HTTPS might be a website owned by an attacker pretending to be Google. So you have to check the domain as well to protect yourself from phishing.
    – Flimm
    Sep 18, 2018 at 12:02
4

There is clearly a divergence of thought on this question, here's what I would do:


I usually look at other peoples stuff first:

Let's take my most recent online purchases:

Norwegian Air Shuttle:

No indications of security. No padlock.

This is a recognisable, trustworthy brand. They have aeroplanes, they have 'bricks and mortar', so it's a bit different to an e-commerce site in terms of base trust. I would observe that the design is clean and competent. Visible competence inspires trust.

H&M:

enter image description here

Subtle and true. Padlock. Recognisable logos, while not there for "this is secure" reasons, enhance legitamcy. Again, this is a trusted well known brand.

213kg (some random sports shop):

enter image description here

This is a better fit for "unknown e-commerce store". It's a bit less subtle about it's "secure-ness".

Coming back to css being important. I find he sloppy positioning of the secure box bothers me, but not much.

When using this site I noticed user reviews that were easily visible on the products. I find that my first fear of having a bad experience with this site, including money and security problems, kicked in when browsing the product rather than as late as the payment screen.


Having done that here's my opinion of what makes a normal trustworthy payment page:

I get the impression that some kind of subtle indication, of the encrypted-ness of this connection, is a good idea. Combin this with user reviews on the products (hopefully of other people having a positive experience buying from your website).

Padlocks are nice. Use one. I think websites and browsers have conditioned people to expect padlocks. So you might as well just go along with it.

...But that's just like my opinion man.

I would quantify what we're interested in. Then measure and test

Probably conversion through this page? Measure it.

I would take the sensible starting point like I outlined above and see how it converts (things like google analytics can be setup to measure this).

Then I might try more aggressive displays of security (like colmcq's maybe) and test that to see if it changes anything. If you can somehow split test your website that would be ideal, but testing different ideas at different times is also fine.

UX is sufficiently complex that it's always best to measure for your situation and audience than follow canonical definitive answers.


Re Kenneth K.'s comment on the question Kenneth is correct, this is mostly just theatre. You don't know from UX whether a site is secure. However, for normal people, theatre is important. Feeling safe and being safe are both important. Make people feel safe via your UX and, at the same time, write your code to keep them safe. I don't think the special nerdy things you can provide to make super-technical people feel safe will actually make you many sales and I wouldn't bother with them to start with.

2

The example given, at least, is rather poor. It's not clear that "secure" is meant to be an adjective rather than verb, and it's saying that the payments are secure when it appears that merely the transmission is secure. And theoretically, you could get into trouble for using VISA/MC/AmEx trademarks. I would suggest something along the lines of usul's answer: put something like "Your information is secured with https" and then a link that says "earn more". Have the the link explain https and how to check that certificates are valid, etc.

2
1

yeah, I blogged about this very thing and the pattern I went for mentioned the secure reassurance in line with where it was most needed: the point of payment.

enter image description here

(hindsight: maybe styling is a bit OTT these days)

https://colmcqux.wordpress.com/single-vs-multi-step-checkout/

6
  • 13
    I instantly lost trust in that "Money Back Guarantee"/"Why Buy?" block. Looks like an advertisement; I don't trust it. I'm probably not the target audience but my point is: you can over do it.
    – Odalrick
    Sep 18, 2018 at 14:46
  • 3
    I agree with @Odalrick, this seems to be overdoing it. Kind of like a merchant saying "buy here, it's REALLY secure, no tricks here, I promise it's NO RISK". You start to wonder why this person tries to convey security so much, and ironically start losing trust.
    – Big_Chair
    Sep 18, 2018 at 15:14
  • 8
    Also, things perceived as spelling errors, grammar errors etc turn me off to pages like this. For example, it says "Your purchase with safe and fast" in the bottom right, which would probably make me at least think twice about putting in my details. Sep 18, 2018 at 19:19
  • it is OTT for sure and the spelling mistake wasn't mine; these days it would be much much more toned down. And proof read.
    – colmcq
    Sep 19, 2018 at 12:09
  • 1
    Argh! That "reassuring ad" over on the right (or whatever it's supposed to be) would scare me away from this site. It looks like scammerware. And what on earth does "Over 110,797 Satisfied" mean? You filled 110,798 orders? You asked 110,798 customers if they were satisfied? There were 110,798 customers who didn't complain? Sorry, but a site that features that ad is not getting my credit card number, little green padlocks notwithstanding. Sep 20, 2018 at 19:52
1

You absolutely should. Just because you know it's meaningless doesn't make it so for your users. Especially since you're targeting a demographic of people who may "have a very low level of technical knowledge about internet security."

There's a great section in "Evil By Design" about this. In it, Petco conducted A/B testing and found that the more obnoxious they made a security certification the more their sales climbed.

1
  • 1
    Thanks for the link. I found the following list useful: "...four elements to website credibility. They are presumed credibility (assumptions made by the user), surface credibility (first impressions of the site), reputed credibility (third-party endorsements), and earned credibility (built over time)." Sep 21, 2018 at 2:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.