Skip to content

Login

The login page allows a user to gain access to an application by entering their credentials, or by using another method of authentication.

When to use

The login page will be shown when:

  • A user wants to gain access to an application.
  • A user has logged out voluntarily. In this case they will see a confirmation message about the successful logout, and then they will be automatically redirected to the login page.
  • A user is logged out due to inactivity or involuntarily. When this happens, the user will have to log in again. It is recommended that the user is redirected to the last page they were on before being logged out.

Sign in with single input

Sign in with Google Authentication

Design guidelines

Anatomy

  1. App logo
  2. App name
  3. Description (optional)
  4. Title (optional)
  5. Subtitle (optional)
  6. Input field/Button
  7. Language menu
  8. Background image
  9. Feature image (optional)
  10. Feature title (optional)
  11. Feature description (optional)

App name

Located at the top of the card. The name of the application must be accompanied by the icon that represents it.

Description

A short description or a slogan for your app/web service.

Title

For consistency, the title should say: Sign in.

Subtitle (optional)

If it makes for your situation, you can add a subtitle.

Input field / Button

The input field is mandatory. Depending on the product, this field can be replaced by a Google sign-in button.

Some login forms CAN include both authentication methods.

Language menu

Allows choosing the user's preferred language.

Background image

Use this second background option for better contrast.

Feature section

This section is primarily used to inform the user about the main features of the application and the benefits of using it. Additionally, with the use of engaging images, the user gets a quick idea of the tasks they can perform within it and their ultimate purpose.

Position

Placing the card login form on the right side of the screen creates a simple entry point for users. Our users are accustomed to seeing the login form on the right, so this can create a sense of familiarity. Also, users may naturally look toward the right side of the screen after processing content, making it a good spot for this type of action item.

Behavior

Progressive authentication

We recommend progressive authentication by default to log in to the products. This decreases the user’s cognitive load by eliminating non-essential distractions and automatically directing them to the necessary login flow.

The necessary credentials should be requested upfront with a button to move forward. This allows the system to distinguish which path the user needs to take in the background instead of making the user read through options and choose.

Alternative authentication methods

Please refer to brand guidelines when using logos for alternative logins. Examples of brand guidelines for a few commonly used alternative logins include:

Errors and validation

Communicating error messages when logging into an application is important for creating great experiences. Not being able to log in to an application is frustrating and prevents users from performing their tasks.

You should always present error states on the login screen and use inline errors whenever possible. The error state you use depends on whether the validation occurs on the client or on the server.

Accessibility

Ensure that users can tab through the login form and navigate the page using only a keyboard. Use landmark regions to designate the login region and allow screen readers to skip directly to the input fields.

If possible, make the "Enter" key the default submit action after filling the main input field. Some user are accustomed to press this key after filling the main text field, as there aren't any other suggested actions or inputs to fill on the same page.