15 Tips To Make a Better Login Page
UI UX Design / 13-May-2016 / minute read

15 Tips To Make a Better Login Page

Login page is one of the most important screen in a website or an app and designer should always think about creative ideas to design creative login page.

Author

Login page is a part and parcel of user experience. It is actually the starting point, right from logging in to our computer to logging in to our pet social media site; the place where we embark upon our journey and explore more as a user. It is such a fundamental feature these days that it is not less than a surprise to see a poor login page and process of a website losing out to the conversion game. Even if you have killer features for your website, but the login process is a pain to deal with its poor experience, your website is a big failure. And that’s not about it, after such a terrible login experience, users will never consider coming back again, which means no recommendations or repeated sales. Yes, you are bound to be doomed. So, gear up and buckle down to get a user-centric login page that doesn’t pose any problem to users and equate to positive experience. Here are some tips to guide you in designing a highly usable login page and process-

1. Clear Login Area

Make-Clean-Login-Page
If the visitors are using a website or an app to which they already have an account then it is important to make the login area starkly visible for them. Instead of using ‘login’ or ‘sign in’ terms, prefer creating input fields so that the customers can straightaway login from the page. If logging in is a crucial element in the site then, without doubt, it should be prominent on the page and capture users’ eyes immediately. Don’t make users waste time finding login on the homepage of the site.

2. Separate Login And Registration

Separate_Login_And_Registration
It is seen that the input fields of login are pretty similar to the input fields of registration. So, make sure you distinguish them in order to avoid confusion on the part of users accidentally trying to login through registration form. This can be achieved by asking the users to enter their password twice while registration or show only one form at one time. Never show both the forms together in one page as it will create chaos and misguide the user to wrong call-to-action.

3. Email Address Over Username

How-To-Make-Good-Login-Page
There are websites that ask users to login with a username instead of their email address. Now, this particular feature really pulls usability down. As usernames have to be different and if the favored one is already accepted then the users have to choose a new username altogether to log in. Now, generally, there are so many usernames that the users forget most of them and don’t remember at the time of signing in. If you site has the option of usernames, then you must also include a choice of entry through email address.

4. External Account Login

External-account-login-option
Make things as flexible for the users as possible and you are all in gains. Now, there is no need to pressurize the users to burden their brains and remember another set of login particulars as they are also open to the option of easy login through external accounts such as Facebook, Google or LinkedIn. However, there will be a set of audience who will not find this option preferable, but understand that the sole purpose of external account login is to give them the ease of logging in with an account they are pretty used to all the time.

5. Allow Long Passwords

Allow-Long-Passwords
Nowadays, we are always asked to select passwords that are secure. The rule of thumb is to use long passwords with more special characters in it. Through password remembering plugins, the average length of password fields have increased by a great extent and with time will get longer even to numbers like 64, 128 or even 256. Following this trend, days are not far when eight-character passwords will completely vanish. Yes, the acceptance towards long passwords has started happening, but it will take time to fully get there. Make sure to test long passwords so as to not face any problem with the match of the text field to that of the relative database.

Also, it is advised that you inform the user during the registration process regarding the minimum and maximum password length which the system permits. This can be done by using a text message corresponding to the field in question. Users will only know about such details when you will take the charge of informing them clearly.

6. Choice Of Visible Passwords

Choice-Of-Visible-Passwords
A problem which is generally witnessed during logins is the error in password. A small mistyping can halt the process especially due to the masked field. A useful way is to permit the users visibility of the password, which they have entered, by giving them a show password checkbox. Such check-box must be unchecked by default; as it is the password is masked by default only. This is a competent feature for mobile login pages as one is likely to press wrong keys on the small touch-pad of mobile while trying to fiddle with it.

7. Warn For Caps Lock On

Caps-Lock-On-In-Password
Caps Lock is another mistake user encounters while entering a password. Add a feature which informs the user if the Caps Lock button is on while entering the password to keep errors at bay.

8. Have Ajax Validation

Have-Ajax-Validation
It is common for users to make mistakes in typing their usernames and passwords. But the user will be given access only if the fields match with the entered ones to keep security intact. It will be good if the users are provided warnings of the errors they have made accidentally well in advance before the form is submitted. Here, validation should be done through Ajax ensuring whether the username is correct or unique to make things simpler. Also, in case of extra space in username, as the field will be deemed invalid, it is better to just trim it either on the client side or user side. Incorporate some precision in your form validation and make logical guesses regarding the usernames opted by the users.

9. Place Text Fields Together

Place_Text_Fields_Together
It is important to align the username and password fields together. They should be in close proximity to each other as they are very much related in terms of functionality and information. A dedicated login page always works well for the audience as it is less confusing for them. Not placing the username and password next to each other can create chaos as it is never a great idea to choose the space between username field and password field to place an advertisement. Such a placement can disrupt the user flow. Although a minor problem, but making the visitor find login fields located at different places can lead to negative experience as they will doubt whether they have filled in correct details in the correct field.

10. Process Forgotten Passwords Easily

Login-page-make-tips

Just as people forget normal day-to-day stuff, it is common to forget passwords as well. So, it is essential to have an effective login process that retrieves forgotten passwords easily. For starters, always have ‘forgotten your password’ link alongside password field to support your visitors. If you desire to have a clean login page, then show this link only when a user types wrong password or by focusing on the password field. But it is advised to keep it present always. Never make the users retype their email address on the forgotten password page and restrain from sending the password through email or for that matter even temporary password.

It will be good if you send the reset password link through registered email address and that too as fast as possible, almost instantly because it is irritating for the users to wait for the login due to forgotten password email which is taking ages to arrive. If security is at risk, then ask users some security questions before resetting the password instead of making them use a helpline to reset the password.

11. Sensible Login Labels

When it comes to login process, there are certain tried-and-tested tips that always work well. Same is the case with login label as well. The expected text is generally ‘login’ or ‘sign in’. Be any reformation or variation in the text, these two are the words that are always accepted universally and thus are safe to use. However, there are websites today those who are trying to fit different labels that imply to ‘login’. The worst seen are ‘opportunity’ or ‘new features’, which certainly have nothing to do with logging in. Placing a link instead of login is not a good strategy as this makes the users question as to whether the link is an advert and what is that the link is selling on the login page. Further, placing marketing link with login link can also be a disaster as it can mess up the expectations of the users from the page.

12. Inform Before Locking Accounts

Login-locked-attempts
To keep forced attacks at bay, user accounts are mostly locked out after they cross a set number of failed login attempts. This is to keep security intact, but no matter what, always remember to warn users before their accounts are locked. Inform them about the time after the unsuccessful attempts in which their account will be locked so that they are not surprised by the end of it.

13. Re-login With Saved Details

Users feel good when they are remembered. Make sure to retain the details of the users so that it is saved at the time of re-logins. See that the browsers can pre-populate fields for the users and even keep the account details stored, so that the users are just left with the task of entering the password.

14. Stay Logged in

Nobody uses a computer to access internet these days, so it is always good to have ‘keep me signed in’ option which makes users automatically logged in to a website or an app for a set period without having much hassle of the entry process. Also, there are chances that the computer can be shared so it must be possible to login as a different user if they want so.

15. Useful Error Messages

Error messages are always very frustrating on the web and even in software. Agreed, it is essential to intimate your user when an error has occurred, but there is certainly no need to make a fool with all the overload of technical jargon's. You must not give any unnecessary information in the error message as you never know that the person reading can be a dangerous hacker trying to damage your system. Having said that, there are also cases when sufficient info is not given in error messages. Messages stating submission of wrong email address is not something which will cost you much, so it is any day better to tell that to the user instead of a curt message that leaves them confused.

Takeaway

To enhance the login experience of a user the best trick is to make the entire process easy and enjoyable. Keep it simple. Yes, minimal and self explanatory login pages require lot of design specification, execution and development, but in the end it is all worth it. All the overdrive will definitely guarantee satisfaction to the customers and make them gush with happiness.

Post views: 21220
User image