Recently we have worked on projects where the website security functionality was shown to significantly impact the usability of the website. During these initiatives, we gathered some helpful guidelines on how to design usable website login functionality.
Website login functionality includes the use of a login and password to access a secured area of a website, the set up of this information, and the retrieval of this data when it is lost by the user. User experience professionals often find designing this functionality challenging given the complexity of balancing security requirements with user needs.
The Rules of the Road
Often website designers have to adhere to strict security business rules when defining website login functionality, such as:
- Constraints on the format and length of passwords
- Restrictions on the number of login attempts allowed before a user is locked out of a system
- Required information if a computer is not noticed to be associated with the user
- Forced reset of passwords by the system
- Requirements for how to support user login and password resets
- Use of security questions to ensure the user is the correct person
- Measures to prevent computerized hacking of login functionality
Interface designers may find it difficult to outline login functionality that meets the security requirements while being easy to use. However it is crucial for these concerns to be balanced correctly. We have seen first-hand how unusable login functionality will make portions of a website virtually inaccessible to users. Cumbersome login constraints can also make it difficult for users to remember their login information; this can motivate users to manually record their login information and therefore compromise the security of your website.
Keep the Purpose in Mind
Different levels of security are needed depending on the functionality found in a website. When designing website functionality, it is important to have a good understanding of the level of security required by your website and how to make a good user experience given the level of security needed.
Level One: Low Security
Websites that would be in this level include blogs and newspapers. For these websites, users may log in to make comments on a news article or for customization based on user characteristics such as location. Security for these websites should be designed to be minimal and should not limit access to most of the content.
For example, the
New York Times is a low security website. It allows the user to read articles without logging in into the website. However, if a user wants to post a comment on an article or participate in an online discussion, registration and login to the site is required.
Level Two: Medium Security
E-commerce websites are a good example of websites that fall in the medium security level. On these websites, some sensitive financial information (such as credit card information) is collected and possibly stored. Care should be taken to ensure that the design of the login screens supports security, but does not hamper the selection and purchasing of products.
An example of a medium security website is
Amazon where a user is invited to browse and select items to buy before being required to login to purchase a product. Once the user logs into the site, they are prompted to enter shipping and billing information.
Level Three: High Security
Websites that provide access to highly sensitive information are high security websites. This includes websites that provide access to financial information, health insurance information, and credit reports. This also includes websites that provide access to email or documents. While it is necessary to have extra security requirements for these websites, considerations should be made on how to make the design of these requirements usable.
Some high security websites include online banking sites like
Chase. Chase requires extra information from a user when registering with the website and asks a user to answer security questions as part of the lost password retrieval process.
Guidelines for Website Login Functionality
Given the balancing act required when designing usable website functionality, we have developed the following fourteen guidelines to follow when taking on this task. Recommendations on how to apply these guidelines for different security level websites will be given.
ID and Password Creation
1. Support Online Registration
In an effort to support a high level of security, some websites require users to register via the phone or the mail. These requirements do increase the security of the website, but they also serve as a barrier for initial adoption and reuse of the website.
There are many ways online registration can be supported by high security websites that support both usability and security. Because
ING Direct is an online bank, it is crucial for them to support online registration of banking accounts. They have accomplished this by providing extra information during registration and using email to confirm account creation. For example when a new savings account is created on ING Direct, small deposits are made into the account and the user has to confirm the deposit amounts within a time interval to confirm account creation.
2. Make the ID Memorable
Websites usually require users to enter an ID as part of the login step. Depending on the website security level, there are two ways to handle the ID functionality.
For low and medium security level websites, we suggest supporting email addresses for ID’s because email addresses are much easier for users to remember. For example,
Netflix requires its members to use an email address as an ID for its website. This makes it easier for Netflix users to login to their account and, therefore, supports increased use of the website.
For high security level websites, we recommend requiring the user to specify a unique ID. Because of the higher level of security required by these websites, it is important to ensure the user picks an ID that cannot be easily identified with the user. To support memorability, allow the users to pick their own distinct id and place minimal limits on the format of ID’s.
Chase is a good example of a website that ensures customers select a unique ID while allowing users to create their own unique identifier.
3. Be Flexible in Password Constraints
Unless your website has a high security level, do not require your user to put in a password with a specific format. Allow users to choose a password that they will remember and make it easy for users to access the features of your website.
For example,
Amazon allows people to use any kind of password for their website. Users are not given constraints, such as a minimum number of digits, a required letter and number combination, or restrictions on the type of information used in passwords. Because of this openness, users are allowed to choose passwords that they can easily remember.
For high security level websites, we suggest limiting the constraints put on passwords as much as possible. If too many password constraints are required, users may be forced to write down password information as a memory aid or contact customer service in order to find their password. Not only will this increase customer service contacts, the handwritten password notes will make your website less secure.
To support the higher level of security required by these sites, additional functionality can be added (such as the addition of security questions) to ensure security. When some password constraints are necessary, care should be taken to ensure that these limits are clearly communicated to the user. Help text and tooltips can provide the necessary amount of contextual help, so users can understand correct ID and password formats.
4. Use Established Challenge-Response Tests
Medium and high security websites that are prone to hacking may want to verify that a person is entering information and not a computer. Established challenge-response tests (such as Captcha) that ask a person to enter in characters from a graphic containing scrambled text work well for users while providing a sufficient level of security. For those persons who may have difficulty reading the scrambled text, we suggest allowing for users to select an alternate graphic to view.
Ticketmaster, which is prone to computerized ordering of tickets, employs this type of technology on their website. Before being shown a list of available tickets, users are asked to enter two phrases shown in a challenge-response test. Options for selecting another graphic and support for visually impaired users are also provided.
5. Support Easy-to-Answer Security Questions
Requiring users to answer security questions is a great way to verify their identity. When the selection of these questions is part of the website registration process, we recommend allowing users to pick a set of two to four questions from a list of ten to twenty. Users should not be asked to provide their own questions, because they may not provide questions that support an adequate level or security or may not find it easy to create their own questions.
Questions should generally support one word answers that are not likely to change. Questions such as “Who is your favorite author?” are not preferred, because the answer to this question could change over time.
Questions should also be about the person’s life that only they are likely to be able to answer quickly. Questions like “What year were you born?” that could be easily answered from public records should be avoided.
Some questions we like include:
- “What was the name of your high school?”
- “Where did you go on your honeymoon?”
- “What is your mother’s maiden name?”
- “What was the make of your first car?”
- “What street did you grow up on?”
These questions can be tied to the culture, location, and life situation of your users and not every user will be able to provide answers to these questions. For example, non-married individuals will not be able to answer the “Where did you go on your honeymoon?” question and users in more urban areas may not be able to answer the “What was the make of your first car?” question. Providing a sufficient variety of questions that are appropriately tailored to your user population will help address this concern.
6. Prominently Place Help and Contact Information
Even when a website has strived to make the login and registration process as simple as possible, some users may still have questions or face difficulties when attempting to use this functionality. Because of this, clear access to help and customer service contacts should always be provided in the login and website registration areas.
This guideline is even more important for high security websites that have more complex login functionality. On
Fidelity’s website, robust help is provided on the login and registration pages. This content takes into account all of the possible difficulties and directs users to appropriate resolutions.
Logging In
7. Consider Placement in the Process
When a user is required to login to a website, it increases the chance that the person will abandon the website. This is especially true with websites where logging in to the website does not seem to be a necessary step for completing a task. Well-designed websites require users to login into their website only when it’s absolutely necessary.
A good illustration of this login flexibility is the
L.L.Bean website. L.L.Bean does not require a person to register with their website to purchase an item. Customers are invited to create a login for the website only if they desire to. Otherwise customers are asked to use a guest access for purchasing items through the website. This flexibility removes barriers for the user and promotes a sense of trust in the brand.
8. Mask Password Entries
Most websites follow the convention of using asterisk’s (‘*’) to mask what characters are being entered as a password. This has been criticized by Jakob Nielsen (http://www.useit.com/alertbox/passwords.html) as being unnecessary. We feel this is still an important guideline and emphasize its importance.
There are two important reasons for adhering to this guideline. First of all, users need to trust your website and one way to provide a sense of security is by masking password entries. This is a convention most people are used to seeing on the web and may not trust your website if this design is not used.
Furthermore in this age of mobile internet access, many users will be accessing websites in public places from laptops, cell phones, and other devices. With the real possibility of a website being accessed from public places, it is important to use masking techniques for passwords.
9. Support Remember Me
Many websites of all security levels allow the user to save their ID and password on their computer. A simple checkbox in the website login area easily supports this functionality. Most users expect this functionality and view this as a way to easily access the website in the future.
The social bookmarking website
Delicious allows the user to save login information on their computer. This functionality supports ease of use on the site, since the user does not have to log in every time access to bookmarks is desired. In turn, this supports increased use of the website by removing some access hurdles.
This recommendation should be modified for high security websites. In this type of website, only the ID of the account should be remembered on registered computers.
American Express allows its users to save their ID on their computer, but their password is not saved. This requires a person to only enter their password when accessing the site, supporting both ease of use and the security needed by users.
10. Simplify Computer Registration
High level security websites may want to require an extra level of security by ensuring they recognize the computer the user is using. If a computer is new for a user, the user will often be required to enter more information or enter a special code that is sent to their cell phone or email. When this is a security requirement, make sure that the computer registration process can be easily completed by users.
Chase provides a well-designed system for registering a new computer that supports both usability and security. When this site recognizes that a user is logging in from a computer that is not associated with that user, the website prompts the user to select a delivery method (email or text message) for receiving a special code to access the website. When a selection is made, the user is able to retrieve this code immediately and enter it into the Chase.com to access their account. After this point, the computer will now be associated with the user and the user will not have to enter in this special code for this computer again.
11. Minimize System Lockouts
System lockouts, or when a website prevents a user from logging in after a specified number of failed attempts, should only be used by high security websites. In most cases, we caution against locking a user out of the system because it increases the difficulty of the login process.
In those cases where a system lockout is required, care should be taken to make this functionality as easy as possible. Many users have a set of passwords they will try because so many websites have different rules for creating passwords. Users should be given a chance to try their normal set of passwords before being locked out of a system. After a number of attempts, users should be brought to a forgot password page that provides easy password retrieval.
In addition, the number of login attempts should be clearly communicated and access to forgotten password functionality from the login page should be apparent. When someone is prevented from logging into a system, it should be easy for them to understand how to have their website access restored. Customer service email and phone number information should be provided and the user should be allowed to restore access to the system quickly.
12. Allow Easy Retrieval of Passwords
In addition to ID’s, users often forget their password for a website. We have seen many different implementations of password retrieval and we recommend supporting recovery of this information via the use of security questions for low and medium security level websites.
Using security questions for user verification is a great way to allow for secure and easy password retrieval. We suggest you present two security questions for a user to answer from the set of questions they set up during the site registration process. If the user answers these questions correctly, then they can be allowed access to the site and given the opportunity to change their password. An email should also be sent to the user to confirm the password change.
We recommend that higher level security websites use an additional password retrieval tactic. These sites can send login information to another modality, such as an email account, to verify the person is correct. The user can request their password be sent to an email address via an easy to find “Forget password?” link. When a user clicks on this link, a new password is sent to an email address specified by the user. When the user logs into the website using the password and by answering their chosen security questions, they are required to change this password on the website. This solution is a good compromise between ease of use and security.
A high level security website like
ING Direct takes care to provide an extra level of security. If a user forgets their password, they can click on the “Forget your Login PIN” link. When a user clicks on this link, they are brought to a page that asks for part of their social security number, zip code, home phone number, and date of birth. Upon successful completion of this information, a reset login is sent to the email on file. To enter the website, the user is asked to enter the reset login and answer a couple of questions to verify their identity. After entering this information, the user is then required to enter a new login for the website.
13. Support Simple ID Recovery
For websites that do not allow the ID to be an email address, a mechanism should be provided to allow users to retrieve a forgotten ID. Many websites provide functionality that emails a forgotten ID to the user. High security websites may choose to reset a user’s ID to a temporary ID, email the temporary ID to the user, and force the user to change the temporary ID to a more permanent one upon login. Both approaches work well for users while maintaining a needed level of security.
Websites that use a person’s email address as the ID should allow the user to reset their ID if their email has changed.
Amazon provides a “Has your e-mail address changed since your last order?” link that takes the user to a page that asks them to submit their old and new email addresses, current password, and an answer to a challenge-response text before permitting an email address change.
14. Minimize Forced Login Resets
Some websites may require the user to reset their login after a certain time interval (such as three months) or after a number of logins (such as fifty logins) to the website. We caution against using forced login resets, because it may require the user to remember unique login information or may lead a user to write down an id and password.
Despite these concerns, higher level security websites may have the business requirement of requiring a forced login reset. For these websites, we suggest using the largest time interval possible and ensuring the login and password retrieval functionality is easily visible and usable.
Conclusion
The design of website login functionality requires constant consideration of both security and usability. It is challenging to bridge the gap between the security requirements that specify needed entry barriers and the user who wants as few obstacles as possible. We hope you find these tips helpful when performing this balancing act of designing website login functionality.