How to handle users typing without input focus

Question

An issue I repeatedly observe with novice web users is that they will occasionally begin typing without first properly selecting (focusing) an input field. A typical pattern I see is this: the user clicks just outside of the input field, and will start typing in a hunt-and-peck fashion -- they will only learn that their text hasn't been inputted when they return to look at the screen. I guess there are various reasons this problem arises: poor mouse control or poor motor control seem to be the most significant.

I wanted some opinion on what you think the best strategy of dealing with this issue is. Should it simply be ignored, or should the application take a proactive step to deal with it?

Answer 1

Auto focus is less than ideal. It can make sense in some very simple single-task pages, such as a login screen, where the ONLY two fields are username and password.

But on a page that is any more complex than that, it can be a huge accessibility hurdle. If, for example, you have a large complex form on a page with the first field being, say, 'ID' then a person using a screen reader would load the page and hear "Form. Field: ID". Which gives absolutely not context as to what this page is about. Ideally, they'd be able to first read things like the title of the page, introductory content, etc.

Some more reading on this: http://www.brucelawson.co.uk/2009/the-accessibility-of-html-5-autofocus/

As for usability, many people prefer to keep control over their own cursor. So while autofocus might be a usability enhancement for some, it can be a usability problem for others. So another reason to avoid the auto-focus route.

To go back to your question, note that you are dealing with hunt-and-peck computer users. They certainly exist. And we need to accomodate them. But not at the detriment of other users. ;)

What I would suggest is simply create a larger target area for them to focus into. Make the fields bigger.

Instead of the top 'standard', style it like the bottom.

^{download bmml source – Wireframes created with Balsamiq Mockups}

And added bonus is that this makes things a lot easier for those using touch devices.

Answer 2

Best strategy is to place the cursor in the first expected input field as soon as the page loads. Remove the need for selecting the field completely. However, if the user can have more than one alternatives, you should avoid auto selecting since it can lead to confusion.

As for the next fields, use a proper tab-navigation to allow a mouse free typing experience.

eg: Look at facebook and gmail login pages, as soon as the page loads the cursor is already in the username field.

---

If you want to annoy the users who left their speakers on, you can start making error beeps when the user starts mashing keys outside of the input fields. (Problem is, it messes with the browsers keyboard navigation shortcuts)

Answer 3

I would take a proactive approach that does not annoy the user through beeping or auto-focusing.

If users are clicking just outside of the field, it is possible to provide some progressive enhancement to the input fields via JavaScript that might help with this issue. The input field could be surrounded by a < div >, or other element, that provides some clickable white space. When the input field's parent element is clicked, which JavaScript can listen for, then the element's input field child would gain focus.

Statistically, this may not yield worthwhile results, but if you're seeing that same problem a lot, it may be worthwhile because the development shouldn't take too long. I've heard of similar implementations on buttons, where the click area is slightly larger than the visual button itself.

Answer 4

Depending on your page layout and its purpose, auto-focusing a field could help.

Note that if the main point of the page isn't to fill in an input, then it might not be a good idea.

Also, if the field in question isn't near the top of the page, then don't do this. I've found that when auto-focusing a field that isn't at the top, the page loads partially scrolled down (to the input) which is quite odd behavior if you don't understand why.

Another solution (assuming you're working with HTML) could be to wrap the input inside a corresponding label tag. Then with CSS you can pad the label out a bit. That way, clicking in or anywhere near to the input will focus the field. I haven't ever actually tried this method, but it is valid HTML according to W3.

Answer 5

I would agree with rk. A proactive approach seems to be overkill such as beeping on typing outside of text field focus.

Just to echo rk., understanding where the users are most likely to start typing when they launch into your site is crucial to the strategy of auto focus on page load though. If people are used to this, and the wrong field is in focus, it would just be an annoyance and not a large issue. But if you have analytics wired up, you could see how many people focus outside of your auto focused field before performing any other actions on the page to see for sure what people are doing.