When working in web design and development, creativity is of course very important; however, it is more important to follow best practices to insure greater usability, functionality, and ease for the users. Remember, when you are designing and developing a web form, you are doing it for the user, not yourself. Forms are one of the most disliked functions to deal with on the web for users, when they are difficult to understand, or not designed with usability in mind. Therefore, it is very important to use best practices when designing web forms. This article was originally published around 6 years ago. But, I believe that the tips are still very helpful. Hope you find them useful! Enjoy!
Collect only the necessary data
There are a lot of websites that request phone numbers and addresses when they will never use that information through the application. Facebook is a good example to follow which the registration form only have the fields necessary for starting an account. For instance, you do not see state or country fields because they are not necessary at this stage. Also, keep in mind that the more data you request from users, the more suspicious your site looks because people may think that you are going to sell their information.
Enter Key to Next Field
If the user presses enter before the last input element, it should move the focus to the next input element instead of submitting the form.
Proper Width of Inputs
Provide enough length and width of the inputs so the user does not need to scroll inside the element.
Check Account Availability
Let the users know if the email or username is taken before they submit the form. A practical example is to provide a button to check the availability of a certain username or email or even easier for the user to check this field at the moment of blur or on the keypress event. Yahoo sign up form checks if username doesn’t exist as the user start typing. Also, it provide suggestions based on the first and last name in the registration form.
Give online feedback and do not wait until the user submits the whole form to tell where the problems are. Remember that some people do not have a mouse and it is hard for them to go back to the previous inputs. Additionally, inline feedback allows the users to go to the next input element with the confidence that they provided the right information.
Show What Fields are Required
Let the user know what fields are required and what are not. It is very hard to submit a form and come back just to fill some required fields. Also, if the form is validated in the server (as it should be even if you validate in the browser), the fields should be populated with the previous values. Having to refill the whole form just because one mistake is unacceptable.
Validate Password Strength
Provide a RegEx to verify the strength of the password. Yahoo checks for the complexity of your password and let you know if the password is weak, average or strong against hacking.
Why to Sign Up
Show the benefits of registration to your application. This is very important in order to encourage the visitors to go beyond and use the whole potential of your site. Additionally, you should know that if the visitor is taking the time to register is for something worth it. Best buy provides a list of benefits for registered users which will helps to increase the amount of users of the application.
The visitor should sign up with username, email, or phone number
These fields are unique in the database and you should be able to do it easily. Remember that the users have to remember lot of usernames and passwords and most of the time those usernames vary depending on the site. So, if you implement usernames in your application, you should allow users to signup with their email addresses or phone numbers too.
Allow login with OpenID and OAuth accounts
People are tired of writing over and over the same information into different websites. If you use an OpenID account you will encourage the visitors to at least try your application. Accounts from Google, Yahoo, and WordPress are example of Open ID accounts and they could be used to sign in to your site. Another approach would be the use of OAuth which has been used by Google, Twitter, Facebook, and Microsoft as an alternative to OpenID for signing up to third party websites.
The less information the better
Do not provide hints of what went wrong with the user’s account. A simple message of “wrong username or password” is enough for the purpose of letting the user know that the credentials do not match. This is very important because you do not let malicious users to know if there is a username or email within your database or even worse telling him that there is an email but the password does not match.
Do not Reinvent the Wheel
Do not be too creative because people already know what to expect from a login form. I saw a new approach on the topic where the user can type the username and then press the spacebar to type the password which is everything in a single textbox. This will confuse most of the people that are going to login to your site.
Forgot your Password Link
Provide a “forgot my password” option (link) where the users have the ability to reset their password without being logged in. WordPress provides a link under the login form to a new page where you can recover your password.
Remember the Password
Offer the option to remember the password and login credentials to the users. Most of the people have a computer at home and they prefer not to type their password every time they are going enter to your application. Some web sites go even farther and offer the option of keeping the user logged in even if they close their browsers. WordPress uses the option of remember the password in order to avoid the typing and speed up the login process.
Provide Two Steps Authentication
Two steps authentication increases the security of your web application by providing an extra step when users try to sign in. The extra step may be sending a text message to the user cellphone with a code to enter. Another approach is the use of a mobile app that generates or approve a code when signing in. Or another method is the use of a secondary email to send the code that the user must enter. You decide the level of security your application needs and which method is feasible.
Recovery Password Form
No Secret Question
Do not ask a dumb questions like who is your mother or what is the name of your cat. Most of the people that try to hack other people account know the person to hack. If you know the person that you are hacking it is almost obvious that you know the name of the cat because they posted in a social media web site or you know it personally. Now with social media there are people that know almost everything about us and we cannot depend on question about birthday, mother, sister, or favorite movie. It is better to avoid this method.
Recovery By Email
Provide a single field where the user can enter the email and send a request to the email to get a temporary password. This is way better than providing a security question because only the real user has access to his account and there is not guessing about who is trying to recover the password.