Login

This pattern covers the user ID and password screens seen by users as they log in to IBM products. Federated and non-federated authentication are included in this pattern. Error states, forgot username/password, and additional authentication methods will be covered in future iterations of this pattern.

The login page is presented to users in the following scenarios:

Federated users log in with SSO (single sign-on) and non-federated users are required to provide both their user ID and password. Separate the user ID and password fields into different flows to easily accommodate both federated and non-federated users.

IBM uses multi-factor login for products. The user ID should be requested upfront with a “Continue” 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. The system validates the username and provides a field for the password only if required.

From this point, the user will either continue to their company’s SSO login experience or they’ll see a password field and a “Log in” button. The password page should include a way to return to the prior page in case they make a mistake while filling out their user ID and a “Forgot password” button. When users enter their authentication information progressively, the cognitive load is reduced.

The Login page should focus on the main task of accessing one’s account. The point of this page is to get the user into their account quickly without complicating the workflow. It’s not recommended to include anything that will create too much of a distraction from the form.

Simple illustrations can add personality and help differentiate the form from other products, but they should not pull the user’s focus away from logging in. Consider the simplest approach to logging in to an account on mobile and maintain that simplicity on tablet and desktop.

There are two design options for login pages—the single-column layout and the split-screen layout.

Use the single-column login form for a simple entry point for users. Without any distractions on the page, users can focus on their primary goal of signing in to the application or product. Through navigating to the login page, users have already shown intent to log in so additional content about the product isn’t necessary.

The split-screen page is an alternate design that can be used to include some marketing content or other visual treatment related to the product. The login portion of this layout uses the same design and behavior as the single-column layout but is confined to one part of the page.

Any additional content on this page should be minimal and easy to scan. It shouldn’t distract from the login form. The user’s primary goal is logging in and that should be reflected in the visual design and emphasis on the page.

There may be a need to include some marketing content on this page. When including additional content, be sure to keep the marketing and login content separated. Testing has shown that users don’t look outside of the login region to find related actions such as create account or SSO buttons, and often miss those actions if they are embedded in the marketing content.

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. This is especially important if you are using the split-screen layout or have additional content on the page.

Help us improve this pattern by providing feedback, asking questions, and leaving any other comments on GitHub.