I’m sure that at some point in the last two and a half decades you have made a purchase online (whether pizza or something else). And it’s possible that at some point your transaction has been refused because you mistyped your credit card number in an online form.
One of the important heuristics we use in thinking about user experience is whether the system helps the user avoid making mistakes. (Similar to #5 in this list from Nielsen/Norman Group)
I was buying something online a few days ago and came across this credit card entry form:
The designers and developers of this form must have wanted to protect the site’s customers from having their credit card information stolen. Rather than showing the numbers as I entered them, the field for number input is treated as a password field and the entry is obscured by dots. So that’s great, very secure, nobody is going to read that number over my shoulder and steal it.
But let me point out that … I was at home, by myself. If anyone—other than my wife, I suppose—had wanted to steal my credit card number by reading it off the screen, they would have had to break into my apartment and sneak up behind me in order to do it. And my apartment has creaky floors: even the cats can’t sneak up on me.
So the main effect of this particular ‘protection’ was that I could not be sure that I had entered the right numbers after I typed them. Safer from my cats ordering a bunch of cat toys, but at more risk of having my transaction refused and having to re-enter it. Protecting me from one harm exposed me to another.
Thinking about this through a usability lens, I would ask: in what context and environment is the user when entering their credit card number? What are the possible perils, and what is the probability of each? And finally how should we address them?
Given endless resources and no deadline, we might learn about and even interview the actual users of this particular site. Are they going to be in a public space like a busy coffee shop when completing this form? Or at home? How adept are they at reading a string of 16 numbers and keying it in? Is their eyesight or dexterity importantly different from that of a ‘general’ internet user? Are they an enemy of a state with a highly sophisticated intelligence service? (Okay, I’ll stop with that 
)
We might find some cases where the most likely danger is having the number read over the user’s shoulder. But I’ll assert that mostly, this is a problem that doesn’t happen in the great majority of instances of online shopping. I think it more likely that one misreads or miskeys the numbers. I would choose to make it easier for the user to avoid the annoyance of re-entering their credit card information.
The better usability solution is to not obscure the numbers because the more likely problem is that the user will mistype them. Leaving them readable will make it easier for the user to avoid an error. Another mitigation strategy would be to offer a method for the user to view the numbers (an icon of an eye is often used as a switch to reveal the numbers) when they wish to.
Usability and security are not really opposing forces—no cage match needed. If security is needed, there are ways to maintain good usability. But in the case of this form, the security concern was overplayed to the detriment of usability.
What are your thoughts? Have you found examples of usability compromising security or vice versa? Share in the comments!
