Registration is a crucial initial step that most online businesses have to impose on people along their journeys. Registration is necessary to check people’s authenticity and start meaningful conversations with them based on the provided details. Capturing people’s details correctly is paramount since storing, for example, an incorrect email address opens the door for trouble down the line. With an incorrect email in the database, not only does the business lose the opportunity to reach out to its customers, but the business’s bottom line may suffer. For example, I have heard about cancelled orders due to mistyped email addresses.

It is no wonder then that registration forms try to make sure details are captured correctly. But how to do it while still preserving a positive user experience? Registration forms basically represent a barrier for people to be overcome before they can do what they actually want to do – finally use the website!

Here is how others have tried to handle this (with varying success):

Confirming entry

I frequently see a registration form that has duplicated Email or Password fields. Now, this is a little bit annoying, especially if both Email and Password need to be confirmed (as below).

In the above example, the person’s interaction flow is significantly interrupted by having to answer two identical questions. As per Don Norman’s model of 7 Stages of Action, answering each single question on a form is a small diverting action on the person’s journey towards accomplishing her goal.

Disabling copy & paste

Harry Brignull wrote about a registration form that does not allow pasting into the ‘Confirm email’ field. Quite creative, but I agree with Harry that it could feel patronising, especially for the more tech-savvy people (who know how to copy-paste). On the other hand, it prevents people (hopefully) from simply replicating a typo made in the first field. And typos are arguably one of the commonest kinds of incorrectly entered details. Now let me ask, why do most websites actually use the wording ‘Confirm your email’? Let’s use ‘Re-type your email’ instead, and it might not be necessary to awkwardly disable standard system interactions like pasting.

Repeating key details before submit

A more elegant solution is not to display the second confirmation field at all. But how can businesses eliminate the eventual errors on forms then? I quite like concept prototypes created by Jonathan Knoll and Russ Unger, that repeat the entered email just before submitting. Jonathan and Russ have produced multiple variants, but variant 5 (picture below) is my personal favourite. It puts the entered email within the person’s locus of attention which is at that point in time on the Submit button.

Unmasking passwords

What about passwords, that are by default masked on most forms (even at registration)? First of all, I believe masking a password does not bring any value in most usage scenarios. Nielsen calls for the death of masked passwords, and I am happy to agree with him. However, as opposed to offering a checkbox to mask the password, as he is suggesting, I think the way to go is actually offering a checkbox to unmask the password. After all, in most contexts security is more important than interaction efficiency.  MailChimp is doing this already, and based on a recent live demo of FontDeck, it seems like we will be seeing this pattern more often.

A pattern for unmasking passwords is also frequently used on mobile devices. This is due to the lack of tactile feedback provided by touchscreen keyboards when inputting a password. Moreover, people also cannot rely on their motor memory (remembering the finger movements like in touch-typing, as opposed to the actual password characters). People often utilize the motor memory to enter passwords with little conscious effort, and this does not translate so easily to touchscreen keyboards as visual identification of keys is needed.

Most mobile interfaces support people by revealing the last character entered for a short time and then masking it, thus giving people the necessary feedback. I am not aware of any website doing the same, but it might be a solution for standard monitor-keyboard setup too. On the other hand, the utility of this short-time revealing is debatable since most people type so fast that revealing the last character and masking it with a time delay is very difficult to implement seamlessly.  Try it for yourself - here is an example of automasking.

Inline validation

Another powerful weapon against incorrect entries is inline validation. Validation can only catch a small proportion of specific errors, but it is generally a good approach since people are notified something is not quite right before they hit the Submit button. Therefore it eliminates the need for the dreadful error messages. “Fatal error - you have not filled in all the details!”. “Oh my god, fatal error - someone actually died!” screams the user in horror.

There are multiple ways of implementing inline validation. Luckily for us, Luke Wroblewski put a few validation variants to the test. Based on his study, validation ‘after’ (after the person indicated that she was done answering a question by moving on to the next one) is the winning option - both in terms of efficiency and satisfaction.

So what?

Incorrectly entered details in online forms are a frequent problem that can cause a lot of hassle down the line. However, when designing forms, make sure you use a sensitive approach to minimising those errors and do not make the people do all the hard work for you.

I would love to hear about your tips for minimising errors in forms.