Articles Comments

GUI Journal » Controls, GUI Design, Mistakes » GUI Design: Don’t Forget to Focus

GUI Design: Don’t Forget to Focus

Web sites that mainly provide information do not necessarily need to be concerned with focus, but pages that are expressly for searching or logging in to an account should always set the focus appropriately. For this article I first took a look at the web sites of the US’s top ten financial institutions, and then a few other sites of various types. I will only document a handful of them here.

JP MORGAN CHASE®

Figure 1. JP Morgan Chase & Co.® Web Site

JP Morgan Chase® is listed as the biggest financial institution in the US with deposits in excess of a trillion dollars. Figure 1 is a portion of a screen of chase.com, the web site for JP Morgan Chase & Co.

As would be expected for the US’s largest bank, the main page of the web site contains much information and numerous links regarding services provided by the institution. However, to serve their current customers (you know, those who provided the trillion dollars), the log on area is prominent at the upper left of the main panel. And, best of all, the focus is automatically placed in the User ID text field for quick access. Having the focus here does not impede anyone who came to this page looking for information found to right and who may or may not have a Chase account. Using valid values, users can simply type their User ID <Tab> Password <Enter> and be immediately logged in to their account. Very nice.

BANK OF AMERICA®

Bank of America® is second on the list of largest financial institutions. Figure 2 is a portion of a screen shot from their main page found at bankofamerica.com.

Figure 2. Bank of America® Web Site

Like the Chase web site, Bank of America has much information and many links. However, unlike the Chase web site, the focus has not been set. This means that the text field hint “Enter Your Online ID” is visible to help users know where to click, or the user can <Tab> until the focus eventually gets there. In the various browsers I tried with this web site, <Tab> was required anywhere from 14 to 21 times, depending on the browser’s menu and toolbar options. That’s clunky. (Is that why they are number two?)

FIDELITY®

Figure 3. Fidelity® Web Site

Fidelity® is another financial institution. Figure 3 shows a portion of a screen shot of the upper left of the panel displayed at fidelity.com.

As with the first two examples, various information and links are provided, including the ability to Search the web site. This site, however, is another example of the focus being specifically placed. Its design for logging in is identical to the Chase web site where users can type their Username <Tab> Password <Enter> and be immediately logged in to their account.

The first and third examples here show that the design is convenient and user-centered. It’s interesting to note that in each case there are other controls (such as Search) that precede the login area both visually as well as in the <Tab> order, but they are not the most likely place that most users will be focusing. Well done.

IGNORING REQUESTS

It’s one thing to make assumptions (or not) on the main panel of a web site about whether most visitors will want the focus in a log in or other area, but when a user has specifically requested a panel that requires input, then there is no excuse not to put the focus at the required input field.

HSBC Holdings® and Best Buy®

HSBC Holdings®, another financial institution on the list, handles credit card accounts for Best Buy®. When a user browses to bestbuy.com, selects Make a Payment and then Manage Account, a login panel is displayed. Figure 4 is a portion of a screen shot of the Best Buy credit account login panel.

Figure 4. Best Buy® Credit Account Login Panel


There are only two things to be done on this panel: Sign In or Enroll. And even though Manage Account was selected in order to get here, the panel does not put the focus in the User Name text field. There’s no way to manage an account without entering the User Name and Password, so it makes absolutely no sense not to put the focus there. The URL shows that though the user starts at the Best Buy web site, the current panel belongs to HSBC. Their designers should have put a little more thought into the user experience.

Figure 5. The Home Depot® Links for My Account

The Home Depot®

The Home Depot® web site found at homedepot.com has links to Sign in or Register in the upper right corner next to the My Account label for those with Home Depot accounts. Figure 5 is a portion of a screen shot showing the My Account links. When Sign in is selected, the panel shown in Figure 6 is displayed.

Figure 6. The Home Depot® My Account Sign In

This is another case where the user specifically selects an action such as Sign in and yet the focus it not placed where it must be in order to sign in. In fact this panel (depending on the browser) requires <Tab> as many as 33 times before focus is in the required E-mail Address field. Wow.

CONCLUSION

In my research I found a fairly even split between web sites that properly place focus and those that don’t. Every step you save your users will add to their happiness with your GUI. The more often your GUI annoys, the more likely a user will go looking somewhere else next time.

KEY DESIGN POINTS

  1. Every display in your GUI should have the focus specifically set.
  2. Set the focus at the most likely control that will need to be changed, even when it is not the first in the <Tab> order.
  3. If a user specifically selects a particular action, then always put the focus on a control that must be set in order to complete that action.

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

*


7 × = fifty six

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>