Adobe Creative Cloud

January 12, 2016 /Web Design /

Onboarding and Designing Login/Registration Pages

Logging into websites is a commonplace daily activity. To help users, simplify form layouts and logins. You want users to sign up for your app or service, so remove any unnecessary friction points and potential onboarding roadblocks. Asking for a name and email or email and password are the simplest ways to start the onboarding process.

Once the user is onboarding, you can prompt the user to provide additional information as part of the customization process and create credentials like a password or email preferences. Use a confirmation email sparingly as many users will forget to acknowledge the confirmation request. Remind users on subsequent logins to add more information and/or confirm their email.

Login vs Registration

Clearly differentiate the login and registration screens. Even experienced users can confuse “sign up” and “sign in” buttons on the Evernote landing page. I know that I have found myself creating another account on occasion when I intended to login via the registration form. An unintended consequences of the ‘sign up/sign in‘ confusion was that I had created three different accounts with three different emails with three different passwords.


To prevent confusion and unwanted account creation, keep login and registration forms on separate pages. From a design perspective, the forms will look similar as login and registration screen have been simplified to email and password fields.

The combination of both forms on the axureShare page illustrates how simplification leads to duplicated layouts that have little visual differentiation, especially when the same form labels are used.

Email Address vs Username

One of the most unique pieces of information users that have is their email address. Don’t make users create unique usernames when registering for services or access. Generally, users have two email addresses – one for work and one for personal use. Once users have logged in, you can allow them to customize their profile and create a welcome message. Customization should allow users to change their email address or add a secondary email address to access their account.

Consider allowing users to login using their phone number for your site or app. Logging in with a unique (mobile) phone* number is quick and easy for user to remember and type in.  Stripe checkout integrates a phone number (and animation) to part of their “remember me” option.

*Phone login is different than the two-step verification used by many services which text a pin code to the user in order to complete a secure login.


Show Progress

A progress bar gives users a feedback loop that helps users accomplish set goals. Provide the user with context so the user can see how much needs to be done and has been done in a multi-step onboarding process. Be transparent in the number of steps the user needs to complete at the start of the progress and their progress through the onboarding. Progress bars are an essential part of progressive disclosure, breaking up the complex tasks of onboarding into smaller, simplified tasks and presentation.


Progress bars also provide users feedback and establish where they are in the onboarding information space.

LinkedIn’s profile strength meter is an example of a profile completion bar that motivates users to complete their profiles or provide additional information.



Use animation to communicate how to fill in the form correctly by highlighting form elements and directing users. Create a flow and engage users to the call to action through animation.

The owl points to each registration field and, on the login page, the owl covers its eyes as you type in your password. The animation adds an engaging twist to filling in a standard web form. Similarly, Shopify uses label animation to show to prompt the user to the next step in the form.

readmeio_login readmeio_register


Third-Party Login

Not every user will opt to connect to your service with their Facebook, LinkedIn or social media credentials, but offering this option gives users a simple way to login and manage their login details. It is an option that allows users to onboard quickly and efficiently without having to remember an additional set of login information.


Show Passwords

Keeping the password field masked can create typing and input errors. Give users the option to see their password as they type.  This is especially important for mobile users as most typing today is done with the thumbs and having to wrestle with auto-correct on mobile devices makes typing and input more difficult.


Make creating a password a simple process. Remove double entry of emails and passwords.

Over 82% of people have forgotten a password used on a site. This stat will only increase as the number of websites, social media sites and apps that people use on a daily basis increases. Provide users with an easy method to retrieve their password and not have them answer a series of non-sequitur questions.

Warn If Caps Lock Is On

Before users start entering in passwords, warn them if the Caps Lock button is on. Providing a textual or visual warning will help avoid multiple input errors, user frustration and potential account lockouts.  Most browsers incorporate a cap locks warning. Make the Caps Lock warning message easy to see and read. Small text or icons may go unnoticed as users are focused on typing their passwords and they can develop “tunnel vision” while trying to complete the task.

caplocks warning

Avoid Anti-Patterns

There are patterns and there are anti-patterns. Patterns guide users to beneficial success. Anti-patterns appear to guide or help users but lead to unwanted results or consequences, for example:

  • Removing inputs/information, especially passwords when submitting with errors.
  • Allowing for users to begin the registration onboarding even if they already have an account.
  • Having labels or visual (form) elements that are not clickable, but look clickable.
  • Limiting character inputs on form or text fields without warning the user or providing a character counter.


Remove CAPTCHA and improve conversion. CAPTCHA is a frustration-wrought barrier for users. On average, over 38% of users fail on the first attempt and 15% of registrations end in total failure where users simply give up after their fifth attempt.


REDDIT removed CAPTCHA from their registration page and saw an 8% increase in registrations. If CAPTCHA is necessary to minimize spam or for other security reasons, opt for reCaptcha, the “I am not a robot” version that asks users to identify a set of images.



Onboarding needs to be frictionless and simple to maximize conversions. Sign up forms should be designed for (mobile) devices first as users no longer sit in front of their desktops. To help users with difficult tasks and to prevent them from feeling overwhelmed, present information through progressive disclosure. Use animation to bring attention to important elements, information and calls to action. CAPTCHA and email verification are difficult to accomplish on devices and are barriers to conversion.

Web Design

Join the discussion

  • By Amal Ayyash - 7:25 PM on February 5, 2016  

    Regarding the owl, are there any statistics to show an increase in sign ups as a result of… i would say, being cheesy? I don’t see the value, but figures would make me have second thoughts

    • By Andrew - 4:17 PM on February 13, 2016  

      The Readme.IO owl animation may not necessarily increase onboarding but adds to the over all user experience by directing the user to specific tasks or steps within the form.

      You can take a look at this case study showing conversion rates using a control and different animation types –