Member-only story

UX Cheat Sheet: Common login patterns

Tess Gadd
UX Collective
Published in
14 min readFeb 10, 2023

Cover image

What ho! What is that on yonder homepage? A returning user? Jimminy cricket! Looks like we have to design a login pattern.

In this article, we will cover the following:

  1. Terminology: Login vs. Log in
  2. Generic login flow
  3. What’s single sign-on (SSO)?
  4. Login screen approaches
  5. Page layout
  6. Feedback
  7. Security
  8. Common login fields
  9. Accessibility
  10. Do you need to redo your current login process?
  11. Closing thoughts
  12. Resources

This article was written in conjunction with UX Cheat Sheet: Common sign-up patterns

1. Terminology: Log in vs Login

I often get this confused, and I have no doubt that I have made this mistake in this article somewhere, but log in, and login are not the same thing

Log in is a verb, e.g., “Please log in to the pet rock collectors website.”

Login in a noun, e.g., “Here is the pet rock collectors’ login page.”

So the elephant in the room; if we use the word sign up, why don’t we use sign in? I’m sure some…

Create an account to read the full story.

The author made this story available to Medium members only.
If you’re new to Medium, create a new account to read this story on us.

Or, continue in mobile web

Already have an account? Sign in

Responses (5)

What are your thoughts?

This article so comprehensive i love the blueprint look foe examples.

Congrats Tess well done! 👏👏👏

This is a really cool breakdown 👏 thanks for sharing it! One thing I'll add is that on login approaches, the stepped log in is also used for SSO purposes. If the system recognises your email uses SSO, you're redirected, if not, it asks for a…