How to create a bulletproof Registration and Sign In flow

Have you ever decided to leave a website when you Log In attempt failed? Or have you ever quit during a registration process because it was confusing? I certainly have.

Very few services on the web are unique. And let’s face it: your service (or the website you’re developing right now) probably isn’t either. Even though you may see all kind of unique features, your average user won’t. If your user can’t get started with your website easily, he won’t try very hard. He’ll simply go to a competitor’s site.

You don’t want to lose your prospective customers before they’ve even got started. We have to make your Registration and Sign In flow really fool-proof.

In this post: Flowcharts, screens and principles

This post offers you a couple of flowcharts which cover every step in a typical Registration and Log In process. To make things easy, I have added a set with example screens in html for every case you might encounter. And for those interested, I’m explaining the underlying thoughts.

3 Key principles of a bulletproof process

There are 3 principles that I think are crucial to creating a fool-proof Registration process:

1. Don’t just design the happy scenario
2. Find the explanation behind the error
3. Give clear feedback and instructions

Principle #1: Don’t just design the happy scenario

Often, designers only think about what I call the happy scenario: The user fills in the registration form, gets an activation email, clicks the link in that email and then signs in.

Unforunately, that’s not the only scenario there is. A typical registration process offers your users plenty of opportunities to make a mistake.

To prevent our erring users from getting confused, we should offer a solution for every possible scenario.

Principle #2: Find the explanation behind the error

With a lot of mistakes, it isn’t hard to guess what your user was intending to do. Giving a generic error message might confuse him. But when you keep in mind what your user was trying to do, you can point him in the right direction.

An example

Let’s assume your registration process requires your users to activate their account before they can use it. Now picture a user trying to sign into an account that’s not yet activated.

If your process only checks the activated accounts, it won’t recognize your user’s login information. Thus it will show your user an error like “Unknown username”.

Now try to think of a logical explantion. Why would the user try to sign in, while his account isn’t activated yet? Probably, he simply doesn’t understand he has to activate the account first, or has forgotten to. But the error you gave him will make him think he used the wrong username, or he may think he hasn’t registered yet. So he tries to register with that username, only to have the stupid proces tell him that username has already been taken. Unless you have something very special to offer, you will just have lost a user.

There are quite a few cases like this. If you make your script just a little smarter, it can easily recognize them. In this situation, it can give your user a message explaining he has to activate his account first, and even offer to resend the activation email. And you will have kept your user.

Principle #3: Give clear feedback and instructions

Every user likes to be in control. So at every step in the process, he should know what’s going on. You can do this by making sure 3 things are always clear:

1. What just happened?
2. What is the current state of the process?
3. What should I do next?

Every action can typically fall into three categories of successfullness (if that’s a word). In my example screens, I’m using different visual styles for each category:

• Error: Someting went wrong. You should do something about it.
• Success: All went well. You can proceed.
• Info: Something needs your attention. Nothing went wrong, but you’re not ready yet.

When your new page loads, these messages should always be immediately visible. When a specific field needs attention, don’t just say so in the message at the top of the page, but also right next to the field.

Tone of voice

Most users blame themselves when they’ve made a mistake. When we present the error in a rude way, like “Wrong password!”, we’ll only make that feeling worse. The right tone of voice will depend on (the audience of) your service, but let’s try to to give feedback in a friendly and non-accusatory manner.

Flowcharts

As said, I have created a set of flowcharts that covers the typical Registration and Sign In process: The user submits a registration form, receives an email with an activation link, and can sign in. That, and every funny case you might encounter.

The flowcharts come as 3 pdf’s (opening in a new window): the Registration Flowchart, the Sign In Flowchart and a combined Activation and Send new password Flowchart. I’ve bundled them in a zip file for easy downloading.

Example screens

The flowcharts are completed by a series of example screens in html. There’s an example screen for every case covered.

Simple implementation

In this post, I have deliberately stayed away from possibly scary javascript stuff like ajax validation. This way, you can implement the flow in the backend pretty easily. The flowcharts will help you with that, and the example screens can serve as a starting point for your html.

What do you think?

Is this something you’ll want to implement? Please let me know in the comments.