Articles Comments

GUI Journal » Automatic Features, GUI Design, Mistakes » GUI Design: Time Out!

GUI Design: Time Out!

Any website that includes the ability to log in should have an automatic timeout feature. If logging in is needed, then obviously there must be private data which should be protected.

In the past I have blogged about the problems with applications that perform functions automatically (GUI Design: Auto Outlines), but this is one case where the automatic functionality is definitely needed. There are at least two situations when I am grateful for the automatic timeouts when I forget to close an application:

  1. When I’m using a shared computer at home where others know the password.
  2. When I walk away from my desk at the office without remembering to lock the screen.

It is rare for me to use a computer that is not mine, so I am very careful in those situations. But for others, using a public computer (or some other computer that is not their own) could be a huge reason for needing an automatic timeout.

 

BAD: NO TIMEOUT

Gmail® by Google® is infamous (in my book) for breaking rules of good GUI design. This is no exception. I admit that email is one application where constant interaction is not the norm and users commonly will leave the application open for long periods of time. But a reasonable timeout should be expected and it should be configurable. I use other Google features that are all tied to the same login/logout and so the lack of timeout can be a little disconcerting for me.

One of these is Google Chat. Whenever I forget to log out of Gmail before leaving the office for the evening and don’t happen to log in at home, then friends can see me logged in and initiate a chat that I might never see until the next time I return to that computer. Even if I log in at home I won’t see what was previously sent to the Google Chat session on the other computer unless I go looking for it. Not awesome.

I also use Google Docs. I am quite unhappy with the fact that individual documents cannot be password protected and therefore they are constantly accessible whenever I’m logged in to Gmail. (You thought you already knew everything about Google apps that made me unhappy, didn’t you? No. Not even close. :) ) Well, at least there would be some small consolation for me if there was an automatic timeout.

 

A LITTLE BETTER: TIMEOUT WITHOUT HIDING DATA

The American Express® website found at americanexpress.com has an automatic timeout feature. Figure 1 is a portion of a screen shot of the web panel describing the timeout. (Note that the far right portion of the green message area was wrapped and overlaid here for readability.)

Figure 1. American Express Web Panel Describing Automatic Logout

This is a great message for several reasons:

  1. It gives the reason that something happened: “For your safety”
  2. It tells what happened: “we logged you out”
  3. It explains the criterion that made it happen: “10 minutes of inactivity”
  4. It instructs what to do next: “Please log in again.”

Fantastic! What a great message. Well done.

Unfortunately there is something very bad about this particular implementation. Although the website does indeed log out the user after 10 minutes of activity, one would never know it from the screen. Though logged out, the screen does not update. It still shows all the data was that visible at the time of the last activity. Even more, any of the functionality of the panel that does not require a redraw is still operative. Individual data items on the screen can be expanded and additional data found. Wow! Not good.

It’s actually not evident that a log out has taken place until something is selected that requires a redraw of the panel, at which time the panel shown in Figure 1 appears. American Express really needs to fix this.

 

MUCH BETTER: TIMEOUT THAT HIDES DATA

The customer account website for Best Buy® has an automatic timeout feature that redraws the panel, hiding all private data. Figure 2 is a portion of a screen shot of the resulting panel.

Figure 2. Best Buy® Website after Automatic Timeout

It’s great that the application used by the Best Buy website hides the private data by redrawing the screen. This is a much better implementation of the timeout feature. What could be better is the information on the panel. Looking at this panel after the fact, the user will not know if the Sign Off option was selected or if an automatic timeout resulted in being Signed Off. That can be confusing.

 

BEST: TIMEOUT WITH CLUES

Whenever anything happens automatically, the user really needs to be warned ahead of time, informed after the fact, or both. The Chase® bank website found at chase.com displays a popup window with a warning before the timeout actually takes place. Figure 3 is a portion of a screen shot of the warning window.

Figure 3. Chase® Popup Window with Timeout Warning

Inactivity does not always mean “not in use.” Sometimes a user is reading/using the information on the panel while not necessarily interacting with it. A warning allows the apparently “inactive” users a chance to let the application know that they are still there. This is great.

Figure 4 is a portion of a screen shot of the panel that is displayed after the automatic timeout.

Figure 4. Chase Display Following the Automatic Timeout

Unfortunately, his panel is the same panel for any scenario that results in being logged off, whether the user selected Log Off from the panel, selected Log Off from the warning popup in Figure 3, or if the timeout was allowed to happen without any interaction with the warning popup window. The warning is great, but information after the fact should also be displayed in case the user did not see the warning.

The Home Depot® website at homedepot.com does not display a warning about an impending automatic timeout, but it does give some helpful information afterward. Figure 5 is a portion of a screen shot of the Home Depot panel following an automatic timeout.

Figure 6. The Home Depot® Website Display Following an Automatic Timeout

Similar to the description displayed in Figure 1, the Home Depot website also provides details about what happened and why. It even provides additional information about what could happen that is beyond the application’s control.

 

KEY DESIGN POINTS

  1. Always have an automatic timeout on any site that gives the option to log in.
  2. Give a warning before automatically logging out and give the user a chance to delay it.
  3. Display helpful information following the automatic timeout.

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: Automatic Features, GUI Design, Mistakes · Tags: , , , , ,

Leave a Reply

*


− 3 = one

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>