My very first post on this blog was entitled Remember Me? and dealt with a frustrating web site login panel that inserted a new control in between other controls that had been in place for years, and I had become accustomed to a certain key sequence for logging into the web site. It’s time to revisit that panel.


Figure 1. American Express®
LOG IN Panel from October 2010

PREVIOUS LOGIN PANEL

Great news: the form has been redesigned! One of my readers mentioned that the web site owners must have read my blog post and took my advice. I doubt it. Nevertheless, I’m still very pleased with the change. In the original article I never named the web site, but I will now. Figure 1 is a portion of a screen shot of the previous login panel for American Express®. This screen shot was taken in October 2010. The frustration detailed in the original Remember Me? post was that I had become accustomed to the sequence of the panel over many years of use, but the new Remember Me control had recently been inserted between the User ID and Password controls, so the [Tab] key no longer took the focus directly from one to the other.


Figure 2. Current American Express® LOG IN Panel

CURRENT LOGIN PANEL

Figure 2 is a screen shot of a portion of the current login panel for the American Express® web site, americanexpress.com®. This screen shot was taken in July 2011. Notice that the Remember Me checkbox is no longer in between User ID and Password, either visually or in the [Tab] order. That leads to the return to the key sequence that most users expect when logging in: <username> [Tab] <password> [Enter].

Thank you! (Enter minor celebration here.)

There is now a new control that allows the users to select which area to log into (Cards – Check and Pay Bill, etc.). Both this control and the Remember Me control are still in the [Tab] order before the LOG IN button for quick access. But the fact that the [Tab] key now takes the focus directly from User ID to Password, and the [Enter] key immediately attempts to login the user means extra keystrokes are no longer required. This is the right way to implement this panel.

Figure 3 is a different version of the American Express login panel.

Figure 3. American Express® LOG IN Panel
Displayed After Logout

After logging out from americanexpress.com, this is the panel that is displayed. I’m not sure why the panel is different from the initial panel shown in Figure 2, but it does behave the same way with regard to logging in with a predictable key sequence.


SUMMARY

Well done! Thank you for fixing this (whether you got the idea from this blog or not).

One thought on “Remember Me (Revisited) — GUI Design”

Leave a Reply

Your email address will not be published. Required fields are marked *