The Actionable Login Form

Most sites contain a login form. Commonly, after logging in, the site is tailored to the user’s preferences. The login form is of utmost importance, because it is the gateway to the product or service you are offering. A login form should have three basic things: labels, input fields, and actions. 1 It should contain fields to enter your username or email, password, and links to recover a forgotten password or username.

Having a good sign in process is crucial to accumulating new users. It is so important that it can cost companies hundreds of thousands of dollars in capital: According to Luke Wroblewski’s Web Form Design: Filling in the Blanks “…it turns out this form was preventing customers from purchasing products from a major e-commerce site, to the tune of $300,000,000 a year. What was even worse: The designers of the site had no clue there was even a problem.”1Social media sites represent the top number of logins on the web daily. According to Facebook’s financial statement, since the second quarter there are on average 829 million active users and from each user Facebook receives $4.24 per user account.2
What Makes a Good Login Experience?
While a sign in form takes on many different designs, the three most common are: saving the username and password, staying connected with one open ID, or automatic login. The login form should be pretty simple, with fields for username, password, enter button, sign up, and forgot password links, because the average user will not spend minutes on the page, rather scan the page and move on to the next.
An example of a straightforward form that gets the job done:

Username vs. Email

Most login forms will either asks you to enter your username or email. Having just the email will be much easier for the user, because most users will remember their email address. MailChimp discovered in their analytics, that there were 340,591 failed login attempts. It was the total number of times that a user could not remember their username and/or password. From that total number, 38,137 had to get a reminder about their username.3 According to consumer research survey of more than 600 U.S consumers conducted by Janrain, 92% have left websites when they have forgotten their username. 4
Naming the Labels and Form
It is essential to have the title above the sign up form to show users exactly where they are and what is expected of them. Form fields need labels to direct the user as they engages with the site or app. The labels on the forms should be simple and easy to understand. For example, if you are asking the user to enter his or her email address, the label should be as simple and direct as “Enter your email.” By making the language on the form direct, you are again accommodating the user through a simplified user experience.
Naming Your Buttons

Similar to labeling the fields, the text on the button should be as easy to understand. Depending upon the purpose and function of the form, the button text should change. There is a difference between the words “Submit” and “Enter.” For example, if a user is signing up for the first time, they are submitting his/her information to the site to obtain a login or be considered a member of your site, so calling the button “Submit” is appropriate. On the other hand, if the person coming to your site is an existing user and signing in, then having the button state “Enter” is sufficient because they are simply entering the site, rather than completing a lengthy form and submitting information.
Also do not ignore the “Enter”/”Return” key on the keyboard. It should be used in a functional manner. If the Enter key is pressed once the last field is complete, the form should be able to be submitted. Implementing this shortcut is much easier and faster for the user, and once again, enhances his or her experience of your site.
Position of the Labels
The position of the labels on the page depends on the design and what you want to achieve. The labels of the fields in the sign up form should be located in the top or bottom and be left aligned. The labels should be near the fields, so that the user does not need to expend any effort to find them. This approach should be applied to all labels and fields, including the password field.

Labels that are top aligned have a higher success rate because the user can see the label and see the field at the same time, which doesn’t require much effort. 5 The button position should be directly underneath the last field. “The general rule of thumb to is to align your form button to where the user’s visual path ends.”6 Pressing on the button or Enter key should be the last step. The user shouldn’t require any additional effort to complete the form.
Label Within a Field
Today, it is common that, login/sign up forms include the label within the field (known as “placeholder text”). This practice is used when space is limited near the form. However, now it is used as a stylistic technique, rather than a purely functional one, because it gives the form a very clean and sleek look. Although this technique is popular, there are both pros and cons.
Pros: It’s a clean option and reduces the space around the form. Popular sites, such as iCloud, Facebook, and Twitter, use this method. Since it limits the amount of space used, this is ideal on an app. On the web, you could have a form with enough room for labels and fields, but on the app, because of the screen size, there will not be enough space to accommodate the labels. Therefore, it makes the most sense to use the labels within the fields so that the web and app forms are uniform.

Cons: As soon as you begin to enter text into the field, the field label will disappear. According to Nielsen Norman Group, studies have shown that users get confused when placeholder text is used.
“Placeholder text within a form field makes it difficult for people to remember what information belongs in a field, and to check for and fix errors. It also poses additional burdens for users with visual and cognitive impairments,” said Katie Sherwin of the Nielsen Norman Group.
Users will have a hard time remembering what is being asked of them if there are more fields with placeholder text. For example, if you are entering information for a job application, there will be many fields to complete. As soon as the user puts the cursor on the field, he or she might have forgotten what the field was asking. It is best to avoid including placeholder text for creating a new profile, billing/shipping information, and other critical information.
Remember the Password
It is important to offer a password-saving feature to decrease login friction. Most of the time, the option to save the password is provided via a check box, which the user can either check or uncheck. “Remember the password” implies that the password will be remembered forever or at least until the user clears his or her caches/cookies on the browser or app. Some forms will have a limited time that the password will be saved. For example, a form might say ”remember the password for two weeks” and, when the user clicks on this, the password will be stored for two weeks and then forgotten by the site. Depending on what type of product or service that you are selling, including a “Remember password” choice is a good option. However, if the service needs more security, the session should be expired immediately and the password should not be saved. This ensures the user’s information is kept safe and provides peace of mind to the user.
Retrieving a Forgotten Password

Having a link to recover the password near the password field is important. A new way for alerting the user to an incorrect password would be to include the link within the password field or an “?” icon. While the user types in the password, if it’s incorrect, the icon or the text could change color. When the user clicks on the field “?”, a call out would appear to retrieve the password.
Pros: It does not use any space and will let the user know immediately if the wrong password was typed. When the user have forgotten the password, the user can click on the “?” and a hidden field will appear to reset the password.
Cons: This is not a familiar approach for retrieving a forgotten password. The user might be confused or will be looking for a forgot password link. Since the retrieving the password information is hidden, users might give up or get frustrated.
New Users
If users like what they see and want to learn more about your site or app, they will sign up. Similar to the login process, the sign up protocol should be easy and hassle-free. When the user is willing to sign up, try not to ask too many questions at first. Keep it simple and ask for the information that is relevant for that moment.
If the user must sign up before using the site or app, just ask for their email, password, and name. Depending on the product and service more information may be relevant. Otherwise, any other information won’t be relevant at this point. They are testing the waters, so asking too much information all at once might scare them a bit and encourage them to seek out other sites/apps that do not ask for invasive information.
Using an Open ID
One of the ways to make the sign up process quicker is to use an Open ID, also known as a web single sign on. “Open ID allows you to use an existing account to sign in to multiple websites, without needing to create new passwords.” 7
Web single sign on is supposed to help users with “password fatigue”: “Web users face the burden of managing this increasing number of accounts and passwords, which leads to ‘password fatigue.’” 8 Most designers are aware of Open ID and include it in sign up forms. Users can sign up using their social media (usually Facebook, Twitter, or Google) login information. When a site says, “Log in with Facebook” it is a clear indication of the use of Open ID.

There is some debate over Open ID in regard to securing the user’s privacy. When you sign up with your Facebook information, the site will have some access to your basic information. If your Facebook profile has personal details, that site will have access to them, including contact information and pictures. According to a study done in University British Columbia, users are hesitant to release their profile information. The findings of this study “suggest that web users value the concept of single sign-on, but require a usable, secure, and privacy-preserving experience.” 8
Open ID will eliminate the “I forgot my username or password” problem. There will be less things to type on the form, since basic information will be automatically taken from the social media site used to sign onto the site. The site/app can also be customized depending on the person’s likes and stated preferences, thereby offering a more personalized experience with your products.
Auto Fill
By using auto fill to enter some of the text on forms, it can help the user finish the process faster. If the user is entering a city or country, for instance, a drop down list should appear displaying all the cities starting with the letter entered.

Most of the time the shipping and billing information are the same. So include a check box near the billing information that says something like “Same as shipping” so that it can auto fill the billing information, reducing the amount of information the user has to type. This will make the user thankful for your smart UX design element implementation.
Modal Window
Rather than taking the user on to a different window, have the login window appear on the same window by using a modal. Popular sites such has Squarespace and Airbnb use this method and it is an effective way for users to login, so that they will not lose the page they were on. Users will know that they are in a modal window, when there is “X” on the login window or they could see the current page that they were on in the background.

According to Smashing Magazine, a modal window acts as a roadblock on the current page and “opens up at the center of the window, putting the focus entirely on the login form.“ 9
Form Validation for Login
While the user types in the email and/or password, you can automatically tell if the fields have been inputted correctly. Telling the user they are typing it incorrectly, while they are typing could avoid a bit of hassle. According to Luke Wroblewski’s article on “Inline Validation in Web Forms,” “Real-time inline validation can help people complete web forms more quickly and with less effort, fewer errors, and (surprise!) more satisfaction.” 11Forms are not fun to fill out and making the process short and painless will garner a positive reaction from the user. Buy Me a Drink First: The Benefits of Gradual Engagement

Luke Wroblewski talks about a theory called “gradual engagement.” It’s a process that allows the user to experience your site, without having to sign up immediately. “Through gradual engagement, we can communicate what Web services do and why people should care by allowing them to actually interact with the application in gradual ways.”11 Eventually, the site requires you to sign up to obtain more functionality.
Gradual engagement allows the user to experience the site without having to login, but the site will have a login option available for enhanced/increased functionality of the site. For example, if we look at pandora.com, they ask you immediately to enter an artist or song and it will take you to the station. I can dislike/like songs, skip songs as if I am already a user on their website—without having to create a login to fully experience the site.
Login/sign up is a small task on your site/app: it’s basically a few text fields and a button, but the process of doing it correctly is very critical to keeping users actively engaged with your product. If the process is difficult or overly cumbersome, there is a chance the user will go somewhere else. Always think about the user first when designing the experience of a form.