Login failed. Retry? (Y/N)
Website authentication and UX
Signing up to a website can be an adventure on it's own.
So tonight, I want you to join me on that trip.
Because many websites still make it too complicated.
So I hope I can give you some ideas.
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
Confirm email:
What do many people do? Copy & paste.
~~~PAUSE~~~
People don't understand why they have to enter it twice.
This doesn’t help at all to see if the address is valid.
Usability special-specialist at work
Right-click/copy & paste blocker in JavaScript.
Seriously?
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
It only gives feedback about the general structure of the input (e.g. contains “@”), but doesn’t tell anything about the existence of a mail address.
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 ?
Domain Name Server (DNS) = Maps your domain name to to the actual servers
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.
Passwords suck.
Most common passwords (2014):
123456 password qwerty
abc123 111111 iloveyou
123123 admin letmein
monkey password1
We’ve now been preaching for decades to use safe passwords.
So we spoon-feed our users to use safer passwords
Your password must be between 8 and 14 characters. It should contain one uppercase and lowercase letter, one number, one special character (§$%&/_-) except (@#+), …
This is incredibly frustrating for users.
Hint: Maximum length might be a good indicator that passwords are stored in plain text
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
"Security" questions
“What was your first car?”
“Where did you go to school?”
“What’s your pet’s name?”
Some questions are ambiguous: Manufacturer? Model?
Others can be solved easily with a few minutes of googeling or using your social media profile
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)
Pro:
Verified email address for a user
No password to remember
Works great for mobile devices
Contra:
Leads the user away from the website at first (may impact conversion rate)
Security issue on shared devices or public spaces (Internet café)
Allow the user a wide range of freedom on your site using anonymous sessions (e.g. to put items in cart), creates incentive to log in later
OAuth aka. "social login"
Pro:
Delegation of login and authentication mechanisms
Wide range of services exist (Twitter, Facebook, GitHub, Google, Yahoo!, etc.)
Contra:
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
Pro:
Highly increased security
Great for services requiring sensitive user information (bank account, credit cards)
Contra:
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