Solving the “Repeat Email Address” Form Issue. Maybe.

Written by Russ on September 9, 2009 – 10:37 pm

One of the mailing lists that I’m on had a question posed today about using “Repeat Email Address” in form validation.

I actually cringed as I typed that just now–that particular part of form validation is pretty annoying (to me, at least). I find it amusing that shift-tab, copy, tab, paste as a method for handling doesn’t cross anyone’s mind when creating these types of “validations” in forms.

There were a number of responses to the thread, but Steve Krug (yeah, that Steve Krug) put out the notion that he suspects most of the email address typos may originate in hasty typing, and they end up getting submitted because the user doesn’t realize that they’ve made a mistake.  Krug identifies that it’s possible, from his perspective, that the font used in many forms is fairly small and that makes it so that errors don’t actually jump out at the users.

Krug also suggested that it may be possible to help users catch the errors by displaying the email address in larger, clear monospaced font–possibly next to the or below the field where the typing occurs.

This stuck with me, but I wasn’t quite sold.

I pinged my friend Jonathan “Yoni” Knoll to see if he’d loan me about 15 minutes of his time to prototype something.  Lucky me, he had just that much time to spare.

We (and by we, I mean Yoni) put together a really quick prototype form–it’s important to note that we didn’t put much more than 15-20 minutes into this, and this is only to see how the form “feels”.  It can grow a number of different ways, styles and placements of elements can certainly be shifted around to your heart’s content.

The form looks pretty, uh, form-y:

Note at the bottom of the form the tiny little text letting you know that you should check your email address. In reality, I’m pretty sure most of us wouldn’t read it.

Also note that there was no “Repeat Email Address” text field in the form.

Instead, once you fill out your email address and tab away from it…

Notice that now my email address appears right before the Submit button.  Krug initially suggested that the re-display of the email address might work best in a larger font next to the field where you entered in your email address.

The way this placement works now, in the prototype version that Yoni and I worked-up, the last thing you see before you submit is your own email address.  I think this works particularly well in longer forms–it gives you the opportunity to re-check the most important piece of information in the form (to marketers, at least) right before you hit submit.  The little “edit” link jumps you back to the field where you can make edits quickly and continue on with the submit action.

See this live in action here: http://infinityplusone.com/form-test.html

Remember: this is a prototype.  One of the reasons that the edit link is to the left of the email address is because, after a couple attempts at placing it, this made the most sense to Yoni since email addresses are variable and that could cause the placement of the link to not always be in the exact same place.  Your mileage may vary; something may work better for you.

The important piece of this prototype is seeing how it works in action, and how it potentially solves for having the “Repeat Email Address” field in your forms.

Tinker with it–and let us know what you think!

Posted in User Experience, User Experience Design | 66 Comments »