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:

1. Something you know (username, password, secret question, etc)
2. Something you have (physical token, card, dongle, phone, etc)
3. 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.

Your user has logged out (Signed Off, Logged Off, Signed Out, etc). What happens next?

Many online experiences end there. I believe that to be a missed opportunity. The page that gets displayed to the user as a result of logging out is an integral part of the online experience that your site provides.

Why has the user logged out?
A few reasons spring to mind:
1. they want to switch accounts
2. they’ve been inactive for too long and the system logged them out
3. they have finished using the site and they use a shared computer

These are just three possible reasons, but they are probably enough to draw some quick conclusions about what a good log out page may contain.

What should the logged out page be?
Regardless of the reason why the log out took place, the user should be shown a confirmation message. They need to know that their wish was granted, or that they have been logged out for some other reasons (such as their inactivity).

Facebook invites the user to “stay connected”

Twitter asks the user to get the apps

Reasons 1 and 2 above virtually require that a log in form be present on the page.

Reasons 2 and 3 can be regarded as an opportunity for reaching out to the user with an invitation to continue their interaction with your site through a more personal channel, a channel that is secure and omnipresent: the user’s mobile device!

Why not remind the user about your mobile app, or your mobile website. Tell them to take you with them by installing your app. Better still: make the most of features such as Continuity to allow the user to continue their session on their mobile device.

The rest of the content that should go on this logged out page is not so obvious. It’s not just a matter of taste, it’s also a matter of personality. You can consider the user disengaged and show them an ad. Or you may take this opportunity to strengthen your brand. You may even go all melodramatic and put a “sorry to see you go; please come back soon” message.

Whatever you decide to do, just try and think of this page as an integral part of your product. Don’t think of it as the end of the line and you may end up building an avenue for increasing engagement and retention.