How to design a Login experience?

Users need to access their private or confidential information. This information needs to be secured behind locked doors. This virtual locked doors can be accessed through a combination of email address and a password. Users might not find it easy to remember their email address/username and password. That’s why it’s important to design a smooth login experience.

Here’s a detailed breakdown of how a login with email or password experience should look and feel like.

View all Onboarding UX Patterns

Login: Userflow

1. Login Page

1

Back Button

A "back" button is provided in the login screens whenever the login is not the first screen the user visits. This is especially critical if the login is not "required" to be able to use the app/website.
2

Required Symbol

The asterisk (*) symbol indicates that the filed is required. It's critical to display to the use that the email and password fields are "required". Optionally you can add the text "Required" next to the field name, depending on your user.
3

View Password Icon

Add an eye icon in the password field, to allow the user to toggle and view the password they typed. This helps prevents errors related to wrong password.
4

Login Button

The login button should be the primary button on this screen. All other buttons or actions should be used as text link to avoid confusing the user or diverting their attention to other secondary actions.
5

Signup Link

Let the users easily find the signup button. Incase the user might have accidentally landed on the login page. Let the user have a chance to switch to the signup page instead.

1.1 Login Error Page(s)

1

Text Field Icon

At this point the user has already typed in their email address. Incase they entered the wrong email address, the "X" icon allows the user to quickly erase the contents of the email field.
2

Error Message

Provide the user with clear message showing them why they are not able to proceed with the login. Additionally give the user a text link to be able to solve this issue.

Required Elements

It’s easy to forget and miss out small details. When designing screens for a login with email address/username & password experience you’ll need to design these elements.

Icons
  • Eye Icon
  • Close or Cancel Icon
Buttons
  • Primary Button Default
  • Primary Button Hover
  • Primary Button Pressed
  • Secondary Button Default
  • Secondary Button Hover
  • Primary Button Pressed
Actions
  • Link Text
Input Fields
  • Default Input Field
  • Focused Input Field
  • Typing Input Field
  • Filled Input Field
  • Error/Validation Input Field
Password Fields
  • Default Password Field
  • Focused Password Field
  • Typing Password Field
  • Error/Validation Password Field

More Onboarding Patterns

Login — Social Account

Login — Social Account

Login — Email and Password

Login — Email and Password