7 steps to create the perfect registration
Correct registration should be intuitive, fast and secure. I will show you how to do it.
Hello everyone!
My name is Mateusz and I’m a UI/UX designer.
I have worked on registration forms a lot lately. I will try to give you some tips on how to design the perfect registration form below.
Good luck!
Do you remember the last time you registered with the usual form?
We are users who are demanding. We often need to be persuaded to register in new applications. If we see a long and unpleasant registration form, we often give up.
However, we often save ourselves by registering via Google and Facebook.
So registration via Google and Facebook?
While doing some research among my friends, I asked them what they think about this possibility of registration. Most of them do it although they are afraid that Google and Facebook collect data about them and applications and websites have additional data about it. There are also a few people who think that it is good when their application gives them personalized offers.
I would like to give users a choice, and to do this we must design the registration form in the easiest way possible, designing it as we would like to fill it ourselves.
Our goal is to minimize the data that we want from the user during registration.
We can split the form into several slides or ask only for the basic data at first, then ask for more specific information at a later stage while using the application. The Revolut application does a good job with that.
It all depends on the type of application of course, for carpooling we will need a name, surname, email address and eventually a phone number verification.
User Greeting
Say hello to the user before they login or register.
‘Hello, how are you?’, ‘Good morning!’, ‘Let’s start’, ‘I’m glad you’re here’
Let’s show the user that we’re interested in them and that there are people behind the product.
The Carpool application example is unreal, the views are prepared for the example of good registration.
Imagine a situation in which after entering a given value you have to make sure that you have entered it in the correct field? Even when the form is short and simple, we want to make sure that we have typed everything correctly. Sometimes we fill out the form when we are tired and we can simply make a mistake.
Field Labels are deliberately placed above the input field so that the user knows what to enter in the field at any time.
You can also apply a transition of the name from the center of the field to above the field by clicking the field label.
Additionally, it is good to add small hints in the fields.
This link will help you with adding that function.
When designing the registration process make sure to let the user know
if the information they’re entering is correct. It’s good to let them know that something is wrong, that information should be located near the field.
The field border is additionally marked in red — when there is an error and green — when the value is correctly entered. It can be replaced with a cross or a tick sign next to the field.
Remember that such information depends on the type of registration and data you are asking for. You might want to inform the user that a given field cannot be left blank or give a positive message saying that the field has been completed correctly.
In my situation, when the field is not filled in, the ‘next stage’ button does not appear on the phone’s keyboard. However, if we did not add such a button on the keyboard, it is worth adding it above the keyboard. It looks good if the inactive button turns green after filling all the fields.
When everything is entered correctly a green arrow appears, suggesting proceeding to the next stage
When entering the password you can view the entered value. Thanks to this we don’t need a second field of password verification.
Who likes filling in their password twice?
Of course, for an icon to be useful, it must be legible and visible (an open eye suggests showing the password and a crossed out eye means the password is invisible).
If you have guidelines, for example: ‘The password should be longer than 6 characters, have at least one upper case letter and a number’. It would be best if we put that information below the password field, thus saving the user time.
When you request a phone number or other sensitive data, the User may opt-out of registration due to concerns about receiving spam messages or his data being used in an unwanted manner. It is important to provide information about what this data will be used for.
The user should feel safe when providing their data. Otherwise they may opt-out of continuing the registration or will feel threatened and view the product negatively.
After entering the phone number we move on to entering the PIN number. We should add a message on the screen saying ‘Enter the code from the text message. Confirm the phone number’
It will inform the user to expect an incoming text message.
This information should be placed in a visible spot.
I suggest that the PIN enters automatically.
Thus minimizing the steps that the user must take to register.
However that is a developer’s task.
This link will help you with adding that function.
After entering the PIN number, the verification process starts.
Add animations to let the user know what is happening at a given time.
Verification confirmation. Information about the correct verification and an automatic transfer to the next screen saying ‘Thank you for registering’.
The user gets a ‘Thank you for registering’ message and information about the correct registration.
This confirmation screen is user friendly, it’s easy to tell that the registration process went well.
I will show you what the whole process looks like again.
If you’re starting the design process make sure to follow the WCAG guidelines.
Calculators that you will find on Google will help you. If you’re using Figma I highly recommend the A11y- Color Contrast Checker plugin.
These are just 7 steps to make the registration process quick and easy.
This is just an example based on an application like carpooling, but you can use these tips for any other type of applications or internet services
