Articles Comments

GUI Journal » Controls, GUI Design, Mistakes » GUI Design: Password Protected

GUI Design: Password Protected

Password:

[  ] The concept of controlling access via username and password has been around for a long time and will likely continue for a long time to come. Before users became accustomed to the idea of passwords, many poor choices were made both in the chosen password itself and the method of remembering it, ultimately leading to poor security. Inexperienced users would often use a familiar name or date for a password, and/or write the password down in an easily-accessible and non-secure location.

These days, most browser applications attempt to make things easier by offering to remember passwords for specific URLs and entering them automatically at each future session. This feature can be appropriate depending on a security of the computer being used and the importance of the data being accessed. In many situations, however, users simply remember and retype their password each time it is required, especially to log in to a frequently-used computer.

PASSWORD ERRORS

A friend of mine handles internal web server data for a company of several thousand employees. A few years ago my friend decided to try out a feature that would send an e-mail message to his phone each time a login attempt failed on a company web server. Within seconds of the feature being activated, his phone began buzzing with each new message informing him of each failed attempt. He was frantic to turn off the feature as soon as possible, because his phone was being flooded by the messages.

I believe most of us don’t really notice how often we mistype a password and then are required to try again, unless we are logging in to systems that seem to overreact to login errors.

OVERREACTING

Figure 1. Original Login Panel

Figure 1 is a screen shot of typical login panel for a web site. (I have used this panel in the past as an example of a great Remember Me design). The problem with this panel is the way it handles an incorrect password.

Figure 2. Updated Panel Resulting from an Incorrect Password

Figure 2 shows a screen shot of the updated panel after an incorrect password has been entered. Notice that the entire panel is rewritten, looking absolutely nothing like the original. The top of the panel has explanations about the username or password perhaps being the source of the login error, followed by a message about a possible locked account, and then details for reseting the password. Not only that, but the layout of the login controls is now completely changed: the title is different, there are labels on fields where there were none before, and the labels for other controls are all changed. There are also new buttons for Clear All and Continue (which, after inspection, one may conclude is the same as the previous Sign in button). This panel results in a total loss of context for the user. Wow. That’s a serious overreaction to what might have just been a simple typo. This is not a good design. Please just let your poor user try again.

Another overreaction, but not nearly so distressing is the idea that the user must be required to click something before they can try again. Half the time that I type the wrong password, I realize my mistake at the same time I’m hitting the [Enter] key. Sometimes I’m just typing too quickly. It happens. Please don’t make me dismiss an error message before I can try again. Figure 3 shows the panel displayed by pandora.com® when an incorrect password has been entered.

Figure 3. Pandora® Panel Requiring OK to be Selected Before Attempting to Login Again

There are a couple of good things about this screen. First, the error message is simple and second, the panel returns to the original login screen after OK is selected, so it’s familiar to the user. Figure 4 is a portion of a screen shot from Windows® 7 when an incorrect password has been entered.

Figure 4. Windows® 7 Requiring OK to be Selected Before Attempting to Login Again

Like Pandora, Windows® 7 requires OK to be selected before continuing, but it also has the good features of a simple, clear message and the display returning to the original panel for the next attempt.

TOO MUCH INFORMATION

For security reasons, it is a generally accepted practice to not specify whether the problem was with the username or with the password, but rather, that the combination was not recognized. Figures 3 and 4 (above) are great examples of doing this the correct way.

Figure 5 shows two screen shots of WordPress® error messages. When the Invalid username message is shown, the username and password are cleared from the form. Only the password is cleared from the form when the Incorrect password message is shown.

Figure 5. WordPress® Error Messages for Invalid Username and Incorrect Password

These messages make it clear whether the problem was with the username or with the password. That’s too much information. Hackers should not be told that the username they are attempting to use is valid.

MISLEADING INFORMATION

Figure 6. American Express® Login Error Handling

Figure 6 shows a screen shot of the American Express ® login screen after both an invalid username as well as an incorrect password were entered. The error message is misleading by stating only that the password is invalid. It may in fact actually be valid for the intended username if the username has a typo. Not great, but it’s probably better than stating which entry is bad. Something good about this display, however, is the fact that the error message appears on the same panel and can immediately be corrected without extra clicks or typing.

INCORRECT ASSUMPTIONS

Figure 7. Login Panel that Deletes All Entries

It’s easy to allow wrong assumptions to creep into GUIs, which become evident either by the way the interface responds to certain conditions or by the wording that is used. The WordPress panels shown in Figure 5 use the wording Lost your password? twice in each case. To me that wording implies an assumption that the password was written down or stored someplace besides just the memory of the user. I get annoyed when software makes assumptions about me that I think should never be the case.

Figure 7 is a screen shot of a web site that gives no error message whatsoever when there is a problem with the username and password. Rather, the form simply clears out both entries and waits for the user to make another attempt. The means that a simple typo in the password field results in the requirement that the username also be entered again. That’s not a very good implementation. Why would the assumption be made that a password typo should force the user to re-enter their username?

Figure 8 is a screen shot of the Windows® XP login screen after an incorrect password has been entered.

Figure 8. Windows® XP Forgot Password Message

The more I see the message Did you forget your password?, the more annoyed I get by this assumption. Are they serious? It makes sense, perhaps, on a rarely used web site that an incorrect password is the result of forgetfulness, but certainly not on a daily-use computer. Despite the annoying popup, at least it doesn’t require an extra click. Also, the focus is in the password field and the message goes away after about 10 seconds or as soon as typing begins.

The Pandora message in Figure 3 (I’m sorry, I don’t recognize your username and password.) is much better; it seems to follow the classic service motto that “the customer is always right.” I like web sites that don’t blame me for their problems.

CORRECT IMPLEMENTATION

Many web sites and operating systems actually combine all of the correct features of login screens. Figure 9 shows a portion of a screen shot from chase.com® after an incorrect password has been entered.

Figure 9. Chase® Login Screen after Invalid Password

Figure 10. Gmail Login Error Handling

The Chase® web site gets  little wordy, but otherwise it’s very well done. The basic message, The User ID or Password you entered is not correct, gives the correct information. The username (User ID) is left unchanged, the password is cleared, and the focus is placed in the password field. It also has options for those who really have forgotten the User ID or password, but it does not make that assumption.

The Gmail® login error screen shown in Figure 10 is also well implemented: the error message appears on the same panel, the username is retained, the password is cleared, and focus is in the password area.

Mac® OS X and OpenSuSE ® 11.3 (Figure 11) also have login error handling with the same features as the Chase and Gmail web sites.

Figure 11. OpenSuSE® 11.3 Login Error Handling

Figure 12. Windows 7 Login with Caps Lock Warning

ADDITIONAL HELP: CAPS LOCK

Many operating systems, including Mac® OS X, OpenSuSE, Windows XP, and Windows 7 (Figure 12) have login screens that also give the additional, very helpful information that the Caps Lock is currently on, which could cause the username and/or password to be typed incorrectly. Personally, that feature has saved me more than once because I couldn’t see the characters I was typing for a password.  That type of passive information is much more valuable to a user than overreacting to a common typo.

KEY DESIGN POINTS

  1. Don’t overreact: Leave the username alone, delete the password, and put the focus in the password field.
  2. Don’t make me click OK before I can try again.
  3. Give a “Login Failed” error message on the panel, but for security’s sake, don’t specify which field was wrong … and don’t make an annoying assumption like, “Did you forget?”

GUI Design

GUI Design Guidelines

Graphical User Interface

User Interface

Graphical User Interface Design

Graphical User Interface Design Guidelines

Written by

Carl Andersen currently works for Micro Focus International as a Senior Development Manager. Carl has led teams at NetIQ, Novell, and WordPerfect and been the principal designer of multiple GUIs which have received analyst acclaim.

Filed under: Controls, GUI Design, Mistakes · Tags: , , , , ,

Leave a Reply

*


seven − = 3

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>