Saturday, July 21, 2012

& Thou Shalt Remember Me in Right Order

Thankfully many websites are settling for Facebook, Twitter, Google, Linked In or Live authentication so that the rest of us do not have to go through the pain of remembering infinite number of login credentials.  I still wish there was one but that is for later. 

If you still have a reason to roll your own login controls please honor the tab order that users have grown to expect.  There are way too many sites who do not care about tab order for keyboard savvy users and hence mentioning this felt worthwhile.

There are only five standard controls on most login forms User Name, Password, Sign In, Remember Me and Forgot Password.  Considering that Login forms are among the first interactions of a repeat user with your site it is surprising that many sites do not care enough to leave the tab order of “Forgot Password” before “Sign In” button.  Do note that sub-consciously ample users type in UserName, Password and then hit tab-enter - if this redirects to forgot password then the site is leading users to pure frustration.  At the minimum please check all of your login forms and fix the tab order on your site to make sure “Forgot Password” does not follow the “Password” field.

The next control to care about is the check box for "Remember Me”.  The fundamental question worth asking is Whether to keep “Remember Me” checkbox or remove it all together?

Certainly sites like Linked In (below)

image

and also GitHub have chosen not to and directly use cookies to save the user information for next login.

image

It obviously is a deliberate decision on their part.  So, does your site need that checkbox or can you live without it? Let us ask:

  1. Is the data presented in your site highly sensitive e.g. banking/medical? If yes, clearly you might not want to assume deemed approval from your users.
  2. Are your users super tech savvy (like in case of GitHub)?  If so, then maybe you do not want to bother them with a checkbox, make the UI cleaner esp. if you are ok with the risk of 1 in 1000 people accidentally not hitting logout.
  3. Is your user likely to access the site from shared computers? –Most likely yes.  Considering everyone has their own personal devices, plus Wifi being available at many public places one may say shared computers are going away.  Well they will someday but not yet Smile I just came back from India and there are still cyber cafĂ©’s there, there is one machine per household and every friend and family visiting each other shares the household computer.  Even here in US kids still grab every computer they can find to access internet and there are countless people who access shared computers in libraries, schools, conferences, events, computer stores etc.  If you aspire to have a popular site assume it will be accessed from a shared machine and people will forget to hit logout.
  4. Is browser’s native remember password good enough for you?  These days all browsers allow storing credentials in their credential caches but that is quite different (at least one-two whole clicks different Smile) than not seeing the login screen all together so when it comes to Remember Me checkbox I will assume that browser’s remember password feature will not influence your choice, they are different.

So in nutshell unless you are GitHub who knows their users are tech savvy and are likely using their development machine to access GitHub OR some financial firm who will never offer users the benefit of remaining forever logged in you most likely want the “Remember Me” checkbox.

I am all for not having one more control on the screen if not required and will deliberate this question again on every site but for now the odds are in favor of the “Remember Me” checkbox.

Assuming you want the “Remember Me” checkbox, the next question is whether the default should be checked or not?

Let us say you are a user who would like to Remember yourself but find the checkbox unchecked by default.  You will click “Remember Me” and then will be remembered for a long time till you clear your browser cookies.  You would face one time inconvenience but then you are done.

Now let us say you are user who does not want to be remembered but the checkbox is checked by default. You will now have to uncheck everytime you log in causing you repeated pain.  Also even beyond that pain you will be surprised how many people will forget unchecking this and may not even know how to Log out (for reasonable number of people closing the browser window is still same as logging out).

Just by using these rationales I suggest keeping “Remember Me” unchecked by default.

That is what most of the login providers like Gmail

image

Facebook

image

and Twitter do:

image

So now assuming that we want the “Remember Me” checkbox and want it unchecked by default  the next thought is whether the tab order of “Remember Me” should before or after “Sign In”

Again “Remember Me” hopefully will not have to be used again and again so having it after Sign In feels reasonable.

If you want to go above and beyond then you could even remember the most recently used (MRU) state of the “Remember Me” checkbox in a cookie separate from the actual auth cookie. That way even if the authentication cookie expires after X number of days your choice of last “Remember Me” would persist eternally. Pro users will appreciate you for being thoughtful and it will further reduce the necessity of the “Remember Me” checkbox to be before “Sign In” in tab order. Smile

Also many people land up having tab order independent of visual placement, I think that is wrong coz sub-consciously a user is going from left to right (except cases where the languages reads other way) and then then top to bottom.  Your controls and tab ordering should follow this too(i.e. forgot password does not have to be next to password field Smile).

In most general cases I would recommend following the pattern

UserName, Password, Sign In, Remember Me (unchecked), Forgot Password.

In conclusion, your login screen has to match your application scenario, data and user expectations.  Be deliberate about your choices on every login screen of every app

Technorati Tags: ,
you create and give it the importance it deserves.

/* code awesomely */

@VishalRJoshi

Tuesday, July 17, 2012

2 Minute Magic Videos for WebMatrix 2

We know that most of us are bombarded with infinite amount of information each day and sometimes 2-3 minutes is all we have to check a quick email or learn something new.

In that spirit we have released 2 Minute Magic videos for WebMatrix 2 which you can watch during your tiny power breaks.  Hope you enjoy them!!

Get Started

How to create a site using WebMatrix

How to use the Site Workspace inside of WebMatrix

How to create a site using the ASP.NET Starter Template in WebMatrix

Using the Node Starter Template in WebMatrix

Publish/Remote

How to create and publish a site in WebMatrix in less than 5 minutes

How to edit sites remotely using WebMatrix

Editor

How to use Find and Replace inside of WebMatrix

How to use the Color Picker inside of the WebMatrix CSS editor

Web Trends

Twitter/Facebook and other OAuth Logins with the Node Starter Template in WebMatrix

How to use Less CSS inside of WebMatrix

How to use the Sass editor inside of WebMatrix

How to use Coffee Script inside of WebMatrix

NuGet & WebMatrix Extensions

How to use the NuGet Gallery in WebMatrix

How to use the extension gallery in WebMatrix

Mobile Web

How to add mobile capabilities to your Node.js starter site in WebMatrix

How to use jQuery Mobile in WebMatrix

How to use the Windows Phone emulator inside of WebMatrix

How to use the iPhone simulator in WebMatrix

How to use the iPad simulator in WebMatrix

Databases

How to use the database manager in WebMatrix

 

/*code awesomely*/

Vishal