Search

Sign In

The sign-in pattern enables user authentication.

When to Use

  • The sign-in pattern typically includes fields for the user to enter their username and password. The user can then click a “Submit” button to complete the process.
  • It ensures that the user is authorized to access critical or sensitive information.
  • Use it when the user:
    • Needs to access a system or application.
    • Has logged out voluntarily.
    • Has been logged out due to inactivity.
      • In this scenario, when the user logs back in, they should be redirected to the last page they were on before being logged out.

Usability Guidance

  • Use distinct input fields for the username (or email address) and password.
  • Provide the user with an option to reveal or hide the password for easier input.
  • Offer a “Remember me” checkbox for returning users.
  • Use a loading indicator to provide the user with visual feedback during loading or processing.

UX Writing

  • Use sentence case for all parts of the sign-in pattern: Only capitalize the first letter and any proper nouns.
  • Provide specific requirements to help the user complete the form fields quicker or when they enter the wrong credentials.
    • Example: “Password must be at least 8 characters with one number”

Accessibility

  • Ensure that the user can tab through the form fields and navigate the page using a keyboard.

Keyboard Interactions

  • Tab (or Shift + Tab) moves focus to the next element or the previous element, navigating among input fields, checkboxes, and action buttons.
  • Enter or Space triggers the action, activating the “Remember me” checkbox, links, or login button.

Related Pages