In a previous post I was talking about the log out experience, and the contents and functionality that I think should be included on the Logged Out page. Today I will tackle the Log In page (if you really must have one).
If you must enforce the use of an account then this should happen as painlessly as possible. Both you and the user are probably in agreement that this step is required only because we haven’t yet come up with a simpler way to establish this trust relationship. Further down, you can find a few suggestions on what may become, one day, a more seamless authentication pattern.
The authentication & authorisation topic is large. In a nutshell, identity verification takes into account three factors:
- Something you know (username, password, secret question, etc)
- Something you have (physical token, card, dongle, phone, etc)
- Something you are (fingerprint, retina scan, voice recognition, etc)
In this post I will only discuss the first point above. Even when I include items from points 2 and 3, I will do so with the intention of making point 1 simpler, rather than to increase the security of the authentication mechanism. In this post I’d like to stick to making things easier, rather than more secure.
Ingredients
The Log In page must have a few basic ingredients:
- Credentials form. The focus should already be given to the first field (i.e. user id). Avoid captchas at all costs.
- Password recovery link. Usually the “Forgot your password” prompt will also follow a predefined number of failed log in attempts. Care must be taken around “leaking” valid email addresses.
- Sign Up option.
On top of the the above items, there are a few more ingredients that can help make the log in experience more painless:
- Language switcher. If you’re site is localised, then this is a must have. Always include the current UI language in the list of available languages (so that the user always knows that they can switch back to it).
- Password privacy toggle. Some passwords can be quite complex. If the user is in the privacy of their own home they may prefer to see what they’re typing.
- Remember me. I’m not a huge fan of this option. I feel like this toggle is better placed in a global settings area of your site.
Recipe
Twitter’s Log In page is minimalistic
Mix all the must have ingredients above, add your preferred nice to have items and you should get a pretty decent log in form. Rather than me drawing up a log in form, I chose to complete the picture and include the log in forms for the sites I mentioned in the Log Out post.
Facebook is not confused; it’s on a mission
Notice how Facebook almost gives more priority to the Sign Up process. That is probably tied into their drive to get more users onto the platform (warning: pure speculation). The other very interesting thing about Facebook’s Log In page is just how similar it is to their Logged Out page. Can you spot the difference?
For some inspiration, have a look at this set of Mobile Log In pages.
One day
Here are a few suggestions on how authentication could, one day, be simpler.
Trust my location
If I Log In from the a certain location (IP / WiFi / etc), there are no other people using the site, I always use the same browser, etc then maybe you can “assume” it’s me. Maybe you can prompt me to allow you to make that assumption?
Delegate the identity check
To my phone. If my mobile device has just started using the same public IP, or is in the proximity of the device that I am trying to Log In from, you can probably “assume” it’s me. If you want to be sure, maybe you can build support for Handoff / Continuity in your site and trust my mobile device to do the authentication.
Voice sign in
What if there was an app on my computer that I could start and I could say: “log me in to Facebook”? This app could check my voice, unlock my keychain, extract the credentials, start a browser/tab and fill in the form for me.