Login failed. Retry? (Y/N)

Website authentication and UX

Enter username:

Enter username:

Prefer email addresses over of usernames for sign-up.

  • Easier to remember: Most users only have one
  • If your site offers user names as well,
    allow both for login
  • Allow users to change both, username and email

Enter email:

Confirm email:

What do many people do? Copy & paste.

Usability special-specialist at work

Right-click/copy & paste blocker in JavaScript.


Never, not under any circumstances, disable or overwrite functions of the user’s computer or make them behave any differently.

Email address validation is
only of limited use.

Validation with Regular Expression

foo@bar.baz is still considered valid

Ask Domain Name Server (DNS)

  • Only tells you if the domain has a mail server.
  • Did you really mean username@google.com or username@gmail.com?

Assisting the user

mailcheck makes suggestions for possible mistakes:

user@hotnail.con  =>  user@hotmail.com
user@tonline.de   =>  user@t-online.de
user@gxm.de       =>  user@gmx.de

At this point we’re still not sure,
if the email address exist.

The only reliable way to check an
email address is sending a mail.

Enter password:

Passwords suck.

Passwords suck.

Most common passwords (2014):

123456          password          qwerty
abc123          111111            iloveyou
123123          admin             letmein
monkey          password1

Your password must be between 8 and 14 characters. It should contain one uppercase and lowercase letter, one number, one special character (§$%&/_-) except (@#+), …

Confirm password:

  • The password entered before is not shown
    (for good reasons)
  • High potential for typos/spelling mistakes

If your password rules are too complicated, some people will decide to go somewhere else at this point.

Improving the password situation

  • Offer a password strength indicator
  • Offer guidance to create strong, memorable passwords

Secure passwords don't
have to be cryptic

"wood cabin magpie folly" (88 bit entropy)

"8%9B>a3y" (36 bit entropy)

Sources: XKCD #936Diceware Passphrase GeneratorStrength Test

"Securitry" questions

"Security" questions

  • “What was your first car?”
  • “Where did you go to school?”
  • “What’s your pet’s name?”

Those questions don’t increase security and highly questionable.

Further ideas for authentication

One Time Passwords (OTP)

  • Generate a secure authentication token and mail it to the user.
  • User clicks link in email, token keeps him signed in with the website.
  • If you allow the user to sign in with multiple devices, show a list of registered devices and allow deactivation (see Dropbox for example).

One Time Passwords (OTP)


  • Verified email address for a user
  • No password to remember
  • Works great for mobile devices


  • Leads the user away from the website at first (may impact conversion rate)
  • Security issue on shared devices or public spaces (Internet café)

OAuth aka. "social login"


  • Delegation of login and authentication mechanisms
  • Wide range of services exist (Twitter, Facebook, GitHub, Google, Yahoo!, etc.)


  • Delegate login and authentication mechanisms (dependency on third party service, may collect data about your users)
  • Multiple services may confuse the user:
    »Which service did I use to sign in?«
  • What happens if a user switches the OAuth provider?

Two factor authentication

Using SMS or key generator app

Two factor authentication


  • Highly increased security
  • Great for services requiring sensitive user information (bank account, credit cards)


  • Additional step, sign-in takes longer
  • Requires a second device (e.g. mobile phone, tablet)
  • Requires mobile/Internet connection
  • Very unhandy using the same mobile device to log in
    (Copy/pasting security code from SMS app, etc.)


Gather metrics

  • How many user start/complete your sign-up process? (Especially on multi-step processes)
  • Page reloads during sign-up step
  • Successful logins
  • Page reloads on login page (= failed logins)

Summing it up:

  • Break with bad UX habits
  • Make sign-up as easy and comfortable as possible
  • Make using your website as secure as possible
  • Authentication methods should match your business

That's all folks!

Frederic Hemberger