Why the Email Confirmation Field Must Die

by on 10/03/17 at 10:20 am

The email address is one of the most corrected form fields. It’s easy to mistype because the input contains a long string of various characters. This can lead to users submitting an incorrect email address.

Email Confirmation Problems

Designers believe they can prevent this by adding an email confirmation field. This may prevent some incorrect submissions, but not all, and at a cost.

email-confirmation-field

Many users tend to copy and paste their email field input into the confirmation field. This defeats the purpose of the confirmation field because users can end up pasting an incorrect email. The confirmation field does nothing to prevent them from mistyping their email.

One research study discovered that “60% of the test subjects consistently copy/pasted their e-mail when they retyped it in a confirmation field”. Users copy and paste their email often because retyping it is too much work. The users also didn’t believe that they would mistype their email but were surprised when they did.

The email confirmation field does not solve the incorrect submission problem. Not only that, but it forces users to do more work than they’d rather do. Users can end up making typing errors in both fields. This will cause them to spend more time correcting their input which can frustrate them.

Redesigning the Email Field

If you want to increase correct email submissions, you need to redesign your email field. You’ll need to change your email field’s placement, sizing and labeling.

Place the Email Field First

Filling out forms is a mundane task. Users tend to rush through them because they want to move on to their next task. But when users rush they’re more likely to make typing errors.

Placing the email field first can prevent this. This is because it’s the start of the form and they don’t feel the need to rush. Placing the email field in the middle or at the end of your form is not ideal because that’s when users get tired of typing and are most eager to finish.

email-field-first

Increase the Size of the Field Input

The email field is the most mistyped field on sign up forms. One study illustrates this in their data table at the bottom. It’s important to increase the size of the email field to help users notice their typing errors.

Many forms use too small of a font size for their email field input. If users make a typing error, it’s harder to notice. When the font size of your field input is larger, users are able to identify specific characters easier. This will help them spot typing errors at a glance when they check their input.

You can make your email field larger than the others but that may give your fields inconsistent styling. Instead, you should make the email field expand when the user selects it. The font size of the input should also appear larger. When the user unselects the email field it should return to its normal size.

Here’s an example of what this looks like.

email-field-input

Emphasize Input Accuracy in the Field Label

Most designers label their email field “Email”. While this is short and straightforward, it doesn’t emphasize the importance of input accuracy. If you want users to double check their input, your field label should stress that.

A field label such as “Email (make sure it’s correct)” reminds users to check their input after they type it. This is important to emphasize because most users don’t believe they’ll mistype their email, so they don’t bother checking their input.

email-field-label

All You Need Is Clarity

Not all form data have the same level of complexity. The email field deserves special treatment because its input is more complex than other fields. It contains alphanumeric characters and symbols that make it easier to mistype.

It’s time to take a new approach on how you design the email field. The solution is not another field to fill out, but to give clarity to the existing field. Prominent placement, larger input size and a specific label are what you need. Make this change and kill the email confirmation field once and for all.

___

If you liked this article, please visit our sponsor for the month.


Our Products

Light Resume Light Freelancer Wireframe Sheets Wireframe Patterns Flow Patterns

Affiliates

Elegant Themes UX T-Shirts

Author and founder of UX Movement. Founded this site to help you learn user experience design for a more user-friendly world.

19 Responses to “Why the Email Confirmation Field Must Die”

  1. Brett

    Oct 4th, 2017

    I agree fully with this article. I believe you can add another point though:
    If the user is going to make the mistake of typing their email incorrectly in the first field, then they’re just as likely to make that exact same mistake again when they type it again in the second field. This will be due to the muscle-memory of the fingers repeating the exact same movements as they did just a second ago.

  2. Clément Jacquelin

    Oct 6th, 2017

    The label “Email (make sure it’s correct)” look like a “Hey stupid, type it correctly this time”.
    I don’t think it’s usefull…

    • Vicente

      Oct 9th, 2017

      I agree on this… +1

    • Sulfatus

      Oct 16th, 2017

      It depends on the person and mood, some might take it offensively, some not.. worth a research and then argument

    • anthony

      Oct 16th, 2017

      If you want to make an omelette, you have to crack a few eggs. Don’t focus on the cracked eggs, focus on the delicious omelette.

  3. Jorge

    Oct 7th, 2017

    I agree with you, It’s not necesary create double field email.
    I could add one tips, for example if I typing errors the input should change the bacground red (alert) this change means that there area error of typing

    • Rebecca

      Oct 9th, 2017

      What you write about adding an alert presumes that you know that the user is making errors–which is impossible in majority of cases (misspelled name, transposed digits, etc.–no way for a system to “know” this and alert user to it).

  4. Craig Brown

    Oct 8th, 2017

    I concur, horribly annoying, but even worse is when you can’t copy and paste from your Password Manager of choice and have to retype your credentials, thus opening the door further for possible keystroke logging malware intrusion.

  5. Vinish

    Oct 8th, 2017

    Well, the post makes sense for a sign up form.

    However there are times when we need to use *Confirm Email* field. For example when we allow a logged in user to change their account email in their account settings.

    Now a wrong email ID there (a typo) means that the process for new email is never started. There will be no confirmation email to the new ID, and when users notices it in the inbox of current/old email, it is a useless exercise for him to do it again. No?

  6. Marek

    Oct 11th, 2017

    Most of the websites don’t allow you to use copy/paste of your email adress in to the second validation field.. it’s annoying, but it’s working.. i noticed this many times..

    • Eduardo Weidman Barijan

      Oct 23rd, 2017

      One of the sites we developed uses this technique. We do not allow the copy/paste feature in both fields and for a while even the Chrome’s email saving feature was not working as well as intended, but it seems it is now. We have a strong point though to not disturb the user’s browser but our client insisted on making this feature. It turns out it worked. Again, the approach here is valid. My opinion is that if you need a confirmation of the email field, then send a confirmation email. There is no way a user can receive the confirmation if their email was incorrect in the first place.

      • anthony

        Oct 23rd, 2017

        Agreed. If you want absolute email confirmation, send a confirmation email.

        Disabling copy/paste is a terrible experience for the user that will only increase their frustration. Being forced to type their email twice is frustration number one. That’s why they try to copy/paste it in the first place.

        Then they try to copy/paste it but it doesn’t work. Now frustration number 2 sets in. But this one is exceptionally frustrating because there is no error message that tells them they can’t copy/paste. So confused users are selecting input and copy/pasting it into the field and wondering why it’s not showing up. After a few tries they realize that copy/paste isn’t going to work.

        Frustration 3 is now the concern of whether the problem is with their computer or the website. Some users may copy and paste random text just to check that the function actually works and that it isn’t a computer issue.

        Disabling copy/paste is user-unfriendly. It not only frustrates users but wastes their time. Opt for the methods in the article that allow you to get the correct email the first time.

  7. Jonas

    Oct 15th, 2017

    Would it make sense to ask for only email, send the “e-mail address confirmation” email, and once you click the link in there, you fill in more details such as password, username, etc? The idea being that if you need to confirm the email do it as early as possible.

    • Cyrus

      Oct 16th, 2017

      I really like this idea. By simplifying the most important part of the sign up process, you’re going to limit mistakes.

    • bunam

      Oct 21st, 2017

      you right !
      Also you don’t have to check for the form of the email, it’s clearly impossible to to do the right job there.
      I have emails with emoji as domain 😉

  8. Phil Houghton

    Oct 19th, 2017

    For me, putting the email field so close to the top would cause me worry: “do these guys just want to harvest my email?”.

    I agree on not asking the user to re-type the email field but maybe echoing it back with JavaScript next to the submit button would be less condescending than “make sure it’s correct”?

  9. Marta

    Oct 19th, 2017

    In some cases you could add a dialog box before proceeding to he next step asking the user if the email provided is correct. In this case the user will be forced to read the email and check its correctness. It adds another step but it is easy and quickly enough.

  10. Dan McNulty

    Oct 20th, 2017

    Nice, I’m always interested in people spinning the ‘done thing’ on it’s head.

    I wonder whether it’d help to break up the e-mail box into two inputs; first is the section before the @, then a label with an ‘@’ in the middle and the host after that in a second input.

  11. Ricardo Zea

    Oct 21st, 2017

    Certainly something worth to try.

    A couple of notes:

    1. In your CodePen demo the Email label is missing your recommended text “(make sure it’s correct)”. Your demo should reflect your recommendation. Just sayin’.

    2. To enhance the experience when clicking the email field, add transition: .3s; to the input class, that will make the field grow and shrink in a more comfortable way.

Leave a Reply to Ricardo Zea