HOW TO DESIGN THE BEST SIGN IN AND SIGN UP PROCEss

For e-commerce Website

Xiuming Yan

We are tortured by the bad designs everyday. It is so easy to bump into frustrating design of Sign in and Sign up in various websites.

 

Here we use our case to explain how we try to give everyone the smooth Sign in and Sign up process on our client’s website, to save others the troubles we countered elsewhere.

 

For this Sign in and Sign up flow, we use this feature so often in different places, we are the authoritative customers ourselves. It can help to avoid this famous situation .

Odoo text and image block

SECURITY LAYS THE FOUNDATION FOR OUR DESIGN CONCEPT

We use leading encryption technology like HTTPS and TLS to protect customer data transmitted on the website. Whenever a customer creates an account, their password is hashed and stored in the database. For interested readers,here is one article explaining certain good and bad practices of implementing secure salted password hashing

IMPLEMENT PROPER PASSWORD STRENGTH CONTROLS

Password Length

Minimum length of the passwords should be enforced by the application.

   - Passwords shorter than 10 characters are considered to be weak

   - Typical maximum length is 128 characters

 

We allow our users to have least 8 characters.

Password Complexity

Password mechanisms should allow virtually any character the user can type to be part of their password, including the space character. Passwords should, obviously, be case sensitive in order to increase their complexity.

SIGN UP DESIGN

DO NOT BRING INFORMATION OVERLOAD AND FATIGUE TO USERS AT THE VERY BEGINNING

Minimize the input effort for any customer to enter only the most necessary fields like first name and last name, email and password.

 

Other important information which is needed for our client’s specific business needs are separated and required in other scenarios, we give user an easy start at Sign up.

Odoo text and image block

SIGN UP PASSWORD VERIFICATION

We implement signup password without a repeat typing confirmation to save user effort and time, but allowing password input with show/hide (default hide) feature

INCLUDING MARKETING REQUIREMENTS INTO SIGN UP DESIGN

 

For encouraging people to finish the Sign up, we design the right part section to list attracting benefits customers would have, and contact information from our client’s customer service department. These information together will bring more secureness, credibility and trust to customers.

 

For marketing and our client’s events purpose, we include Newsletter subscription in our Sign up screen. By using confirmed opt-in (COI) procedure helps to ensure that a third party is not able to subscribe someone else accidentally, or out of malice. When no action is taken from the e-mail recipient, they will no longer receive any messages.

 

It is equally important to make it clear to customers that it is optional to choose Newsletter when they register account on our website.

 

GIVE CUSTOMER A COMPLETE FLOW

Inside Sign up screen, in case people remember that they did have an account in our website, it is vital to let them quickly navigate to sign in page, we provide this link under the sign up button.

 

Same concept applies to Sign in screen, we provide links to forget password page to help customers recover password, and link to sign up page.

 

In all pages mentioned above (Sign in, Sign up, Password forget), customers can always click company logo to visit the home page.  

PROVIDE NECESSARY HINT MESSAGE AT MOST APPROPRIATE TIME

GIVING HINT WHEN CUSTOMER FORGOT TO FILL IN THE MANDATORY FIELDS

Highlight the mandatory fields that customers forgot to fill in and provide message to tell what to do

Odoo text and image block

PASSWORD HINT

We put the hint message of password strength directly above input box. This triumph over inline hint because it projects information ahead to customer’s mind and they have no stress to think about what was the password strength rules they have to follow.  Of course a equally good design would be the pop up message who appears to remind you both the password strength rules and auto validate your password strength as users are typing. Example from creating a Google Account

Odoo text and image block
Odoo text and image block
Odoo text and image block

INSTANT VALIDATION FOR EMAIL ADDRESS AND PASSWORD

We do use instant validation for email address format, to help users quickly find out that they typed an invalid or wrong email address. Highlight the email address field and notify them.

Odoo text and image block

When password is not adhering to the strength rules, the password field is highlighted along with message to remind customers to input at least 8 characters.

And if the agreement policy is not ticked on when customer submits registration, this part will be highlighted also with hint message. It must be noted that we need to provide customers links to directly read about the agreement and policy they would agree on.  

Odoo text and image block

SIGN IN DESIGN

AUTHENTICATION RESPONSES

For security reasons mentioned at the beginning of this article, we respond customers with a generic error message regardless of whether the user ID or password was incorrect. It should also give no indication to the status of an existing account.  

Example Response:

"Login failed; Invalid userID or password"

Odoo text and image block

We do still validate the empty fields customer forgets to input, highlight the corresponding fields and provide hint message to tell him/her to fill the fields in.

 

To help customers earlier find out possible typo mistakes, we use instant validation to verify the invalid email address format in this screen.

Odoo text and image block

PASSWORD RECOVERY


Nowadays people register accounts everywhere and very often they forgot their password, it is important to give user a smooth and secure password recovery process, to assist users setting up new password quickly and back log in.

 

Our design is to let users fill in their email address which were used when signing in, we then send the reset password link to this email.

Odoo text and image block

When user resets the password thru the link within valid time slot, they can reset their new password and are right back log in to the site.

The design concept to convenient customers of typing with show/hide feature also applies here.

Odoo text and image block

A REPEATING SUMMARY

Always start with simple design to let customers focus on the single task on hand. Remove unnecessary navigations, advertisements, links in the page. At this point, customers already made the decision to either Sign in or Sign up, there is no need to distract user any more. Keep the company logo to enable customers visit the home page when they want to, there they can navigation, browse through pages in every way.

 

A complete flow to enable customers navigate into different situations they need, with necessary hint message to assist customers all the way.

 

A smooth,considerate, fast and secure sign in, sign up process is what everyone wants.