A couple of days ago, I needed to update my credit card info on a particular website. Finding the right page for this task was easy enough. And the interface looked straightforward, too: just the boxes you’d expect for the card number and expiration date, plus buttons for Save and Cancel.

However, one aspect of the website’s credit card screen puzzled me. The old card number was shown as a bunch of X’s followed by the last few digits of the actual account number, but there was no indication about what happens if you leave that field unchanged. In other words, if you only need to update the expiration date, can you leave the card number alone — X’s and all? Or, do you need to re-type the card number as well?

Although my card number wasn’t changing, I decided to play it safe and re-enter both the card number and the expiration date. This worked fine, but the lack of clarity in the original interface definitely bugged me. The solution is actually very easy to implement from a design point of view. Simply add a bit of text that explains what happens if you leave the field with the X’s alone, e.g. “If your card number is staying the same, leave this field unchanged.” That way, you’ll eliminate the need for customers to re-enter data that was already in place, reduce errors, and make the process of updating a credit card less confusing as a whole.