I was just tasked by my boss to make a certain SSN field to appear more secure. We currently are masking the first 5 numbers but he wants a greater feel of security behind the input.

He was thinking a background with lines through it, but left most of the creative work to me. I am wondering:

  1. Is it bad UX to place a greater emphasis on the security of a field?
  2. Are there any examples I can view that can show such an idea?
  • Personally I'd put a * mark and note something like "we don't store/we encrypt/this is only used for verification purposes"
    – Ben Brocka
    Jan 20, 2014 at 19:52

2 Answers 2


This blog post is about making credit card fields appear more secure, but I think the same principles can be applied in your situation. Things that help: Adding a padlock graphic, citing your encryption protocol and/or third-party certificate authority (if applicable) and calling out the security of sensitive fields with a different background color:
Image from baymard.com blog post

And, though it is written with a view towards password entry during signup and login processes, I also think this post talks a lot of sense about masking, especially unmasking on focus:

Image from smashingmagazine.com blog post

I believe the practices above provide a sense of security to users who want or need it without cluttering the page too much. As for myself, I look at things like that little ess in “https://”, site certificates and maybe even a peek at how the form is coded (if I care enough to check, which I usually don't).

  • I like this answer a lot! I like the locked icon and the obvious separation from secure/non-secure fields
    – Phil
    Jan 20, 2014 at 20:16
  • 1
    Don't unmask the password field when it has focus, if I have someone sitting next to me he will be able to read my password! Jan 21, 2014 at 8:18
  • 1
    @Vincent That blog also covers the use of a checkbox for unmasking, which I think is best for passwords. I'm recommending the method above for SSN, for which I think it's appropriate. Plenty of webforms offer no masking whatsoever on SSN and I feel the method above would be a nice addition to the visual cues from the other blog given the OP's situation. Jan 21, 2014 at 16:19

Since, I believe, SSN is one of the most common ways of citizen identification in the US, it would be a good idea not to show it at all, unless explicitly asks for it.

If we are speaking of a website or an application, anything interactive - because I'm not sure whether we are - I personally recommend Microsoft's idea of masking password that they used in their Windows Mobile OS. What they do is they mask (substitute with a bullet or a star) every character in a short time after it's been entered, so the user can seamlessly observe entered input, but without exposing full input value. Also, a checkbox (unchecked, by default) letting user "show full SSN" should be somewhere around the input.

Hopefully this helps, Greg

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.