home

User sign up and email confirmation, a UX boilerplate

13 Aug 2013

Sign up, confirm your email address, login. The three steps that almost all web apps share.

It isn't hard to get this process right but it does take some planning. I've had to implement this a lot so I finally decided to document it. This is my boilerplate for a user sign up process. The interaction flow that I use as the starting point for sign-ups in my apps. Along the way I'll point out some key UX (User eXperience) tips. I hope this saves you some time on your next project.

The UI mockups are just that. Mockups. This post isn't about the UI of your pages but rather the flow and functionality. The mockups are intended to communicate features, not a specific design or layout.

Login

The login is so obvious that it is hardly worth mentioning.

Login mockup

You should never provide a password recovery link because you should NEVER be able to recover their password. How should you store passwords?

Sign Up

The sign up process is arguably the most important part of your app. This is the gateway through which all users must pass. Every failure means lost users.

I'm going to simplify the sign up process to the absolute bare essentials.

Sign Up mockup

If you collect an email address during sign up then consider adding logic to suggest corrections to commonly misspelled domains. For example, if the user enters "user@gnail.com" you can ask, "Did you mean: user@gmail.com?".

You can read more about this or skip straight to the jQuery plugin, Mailcheck.

Confirmation email

I'm going to assume your app requires a valid email address. Most do. If yours doesn't then your job just got a lot easier!

After signing up, the next page your users see is:

Confirmation sent mockup

The confirmation email they receive:

Confirmation email mockup

Ideally you should send the email with both a plain text and HTML body. This ensures that the user gets the best experience possible for their mail client. Read up on MIME multipart/alternative for more information.

They didn't see the email

There is always the chance that the user will not receive the confirmation email or that they will simply ignore it. We need to plan for this.

If they try to continue without confirming their address:

Confirmation needed page mockup

Resending the confirmation

Maybe the user's mail server was offline. Maybe they deleted your message without reading it. Maybe it got trapped by an over zealous spam filter. There are any number of ways the message might get lost. The ability to have it re-sent is a great UX booster that might just save you an otherwise lost user.

Confirmation message sent mockup

Changing their email

This is another little detail that can make a big difference. Maybe the user entered the wrong email. Maybe they just can't get that account to work and want to try another address. At this point there is little reason not to let them simply enter a different address. Let me explain:

Change email mockup

The confirmation should be sent to the new address and a friendly message shown once again.

All previously sent confirmation links should be disabled at this point for security. You wouldn't want the wrong address to be confirmed, you only want the new one.

Email changed mockup

That's all folks

That is my boilerplate. I believe it covers the requirements that nearly all sign up forms share and will keep at least this dude from having to rethink the process in the future.

In the end all is simple but we have a few guiding principles:

Feel free to use and tweak the Balsamiq mockups that I created for this post. You can download them here.

blog comments powered by Disqus