May 2nd, 2005

Why Setting Initial Focus To Input Boxes Isn’t Always a Good Thing

by Joshua Porter  |   5 Comments

Update: I contacted Andrew Baio over at Upcoming.org and he has since removed the initial focus behavior on the site. Good news! By the way, Andrew’s concern highlights a definite trend of the new, cool Web 2.0 sites like the two I mention below: they actually care enough to listen to their users. They won’t always be swayed, but they’ll listen. Refreshing, huh?

Most people like it when they go to Google and their cursor is automatically put into the Search input box. When Google sets the initial focus in this way, users are saved a small but necessary step in their task of entering a search query. Otherwise, they would either need to press “Tab” until the focus went to the input box or they would have to click in the input box with their mouse pointer after moving it there. Since Google serves up millions of pages per day and the vast majority of those folks are there to perform a Search, this works well. It is a helpful interface design element.

Setting initial focus is not always a good thing, though. Two sites that I’ve been visiting lately, upcoming.org and 43things.com, have examples, I think, of initial focus gone wrong. Upcoming.org is an event-tracking site that allows people to find out about (and let others know about) events happening in their area. 43Things.com is a site built on the idea that if you write down a life goal, as opposed to just speaking or thinking it, you’re much more likely to make it happen.

On upcoming.org, the focus is initially set in the sign-in box that resides on the right hand side of most pages. This was done, presumably, to help those users who are registered to log in immediately, the moment they come to the site. On the 43Things home page, the initial focus is set to the “What do you want to do with your life?” input box, on the top left side of the page. This was done, presumably, to get visitors immediately starting to make their list of things to do.

However, though this was done with only good intentions, setting initial focus in these two cases is not the right way to go. There are a couple reasons for this:

Setting Initial Focus Breaks Keyboard Shortcuts

First, setting initial focus breaks keyboard shortcuts for everything, including two very important functions: going “Back” (Command Left-Arrow on the Mac and Alt Left-Arrow on Win) and “Page Down” (spacebar on Mac & Win). For casual users with desktops this may not be an issue, because they’re probably using a mouse with a scrollwheel and so might not bother with learning these keyboard shortcuts. For many experienced users with laptops, however, this is an issue because they may have migrated over to keyboard shortcuts as the result of not having a mouse handy (some may even have learned that way).

Thus, setting the initial focus is much more of a shortcut for mouse users, so they don’t have to move the cursor all the way to the input box and click. Keyboard users will probably know to just press “Tab” to move the cursor there. Pressing one key (even more than once) is much easier, and takes much less time, than moving and clicking the mouse. Both the upcoming.org and the 43things.com interfaces break keyboard shortcut functionality.

Cookies Handle Login Better than Initial Focus

Second, login can be handled very well with cookies, like it is on Amazon, del.icio.us, and Yahoo. On all these sites I’m automatically logged into my account each time I visit. Amazon and Yahoo take this one step further, if I’m going to enter a more secure part of the site, say, checkout, then I’m asked for my password at that point, but not the moment that I first enter the site.

So, if the site uses cookies to keep people logged in (which is easy to do and most sites do this), then there is no need to set the initial focus in the login input box because most registered users simply won’t need it: they’ll already be logged in. And those other users who want to view page contents won’t need to reset the focus to do anything useful with the page, like scrolling to see what’s on it. By the way, this got incredibly frustrating about the 10th or 11th time that I had to do it.

[ Ed. Note: I have since registered for upcoming.org, and as a registered user (being logged in with cookies) the login box is completely removed from the page, so indeed there was no good reason to have the focus set to the login input box. ]

If There’s a Choice, Let Me Make It

In answer to the 43Things question of “What do you want to do with your life?” I answer: I don’t want to answer a question until I choose to. Though I like the idea of getting new users started right away with the service, I really don’t like having to unfocus something as a regular user just to view the site. I’ve already created an account, I’m already logged in, and want to view the home page. Is it to add an entry? Maybe, but probably not. That said, if there was a page called “Add an Entry” (hint, hint) then automatically setting the focus to the input box there might make sense, but I don’t think it works on the home page of the site.

Finally, I think this situation highlights a larger, more important point about interface design. When we see a site like Google do something that is obviously useful we should still exercise restraint when considering it for our sites, for our sites have different content, different users, and different functionality. In this case, upcoming.org and 43things had things on the page other than what they were setting the focus to. Google, on the other hand, has little else: living and dying with the text entered in their query box.

Grab the RSS Feed