Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

Do you guys know any drawback of focusing on a text field on a web page ? It's pretty useful when you know users will use this text field more than others (like on the google homepage), but it's a bit "offensive", so I wondered if there's something bad that could happen (on mobile devices for example)

share|improve this question
1  
Why "offensive"? –  Antony Quinn Dec 13 '10 at 9:32
    
See the comment I wrote on JeromeR's answer –  Julien Dec 13 '10 at 15:04

9 Answers 9

up vote 12 down vote accepted

Normally the Backspace key takes you back a page as it is a keyboard shortcut for the Back button. When an input field is focused, the backspace only works within the input field. For many keyboard users (as in prefer the keyboard and avoid switching between keyboard and mouse) it therefore is a definite drawback when a site auto focuses an input field arbitrarily.

That said, I do not like pages not to auto focus on the first field when the whole purpose of the page is to fill out a form and submit it.

So I guess basically the rule for me would be: auto focus for data-entry forms; do not auto focus when input is a secondary (or even lower) item on a page.

share|improve this answer
    
I hesitated between your answer and Tsuyoshi Ito's, but your is more relevant to my website, as the pages are fast to load, but the user will often need to go back. –  Julien Dec 13 '10 at 15:07
4  
Nice answer. Just FYI, you can use Alt + Left Arrow to go back a page too. I have started using that to go forward & back since so many web pages "auto focus". –  Nikhil Dec 17 '10 at 6:24

Autofocus can sometimes cause problems to plugins like Vivium (which add Vim-like shortcuts to Google Chrome) as it automatically puts Vimium in insert mode, which makes navigation more difficult.

share|improve this answer
    
I'd say this is a problem with the design of the plug-in. Ideally, it would detect that it wasn't the user who put the focus in the text field and respond accordingly. FWIW –  JeromeR Dec 12 '10 at 20:32
    
As the iPhone does for example. But it's the same issue as developing cross browsers website : even if it's IE's design that has problems, we still have to deal with it... Ok so it's an interesting example. Thanks –  Julien Dec 12 '10 at 21:25

Ultimately it's going to depend on what your web site does and the consequences of being focused on this area.

If your site only has the one input field (like Google) and another action is required to act on this input then I can't see a problem. It's what people will (come to) expect and if anything it helps them use the site.

If it's only one of several text fields and could be left blank then it's probably less of a user aide and might tip over to a hindrance for a significant number of users.

If you do something after every keystroke then I could see it as being an annoyance - but that's largely personal preference.

share|improve this answer

The following is not an inherent drawback of setting the keyboard focus, but anyway an undesired effect which was caused by a combination of a focus-setting script and the behavior of certain browsers.

At least in Firefox, setting the keyboard focus can steal the focus even from the UI element belonging to the browser itself such as the address bar. Because of this, I have experienced the following small annoyance:

  1. I visited some page. The page contained an onload script to set the focus to a particular textbox, but naturally I did not know that.
  2. The page took too long to load, so I gave up visiting that page and decided to visit some other page.
  3. I started typing a new URL in the address bar.
  4. Meanwhile the page finished loading and the script inside the page ran.
  5. The latter half of the address I typed ended up in the textbox on the page, which was a slight frustration. :(

(In Firefox 4, it is planned to avoid this behavior by disallowing the page content from retrieving the focus when the browser UI element has the focus (the fix has been partly committed but not completely). If this fix goes in, the situation stated above will not happen with Firefox 4. I hear that Internet Explorer does not have the same problem.)

share|improve this answer
2  
Really good example. –  Julien Dec 12 '10 at 21:32

The idea, as I see it, is to reduce the need for a click when navigating to a page that requires input—from signing in to entering data.

I'm interested in this idea that it's "a bit offensve" to put the focus in a text field. Why do you think it might be offensive?

share|improve this answer
    
I mean, it does an action instead of letting the user doing it, which personally I don't like. I like being in control of my website. When I first thought this could be an issue is when I thought about Safari Mobile (on iPhone) which automatically displays a keyboard when a user selects an input. But the focus() event doesn't trigger the keyboard –  Julien Dec 12 '10 at 21:21
    
I agree that it can be considered 'offensive', but it isn't necessarily. The canonical example is google, which saves me a lot of time by auto-focussing the search box which is, 99.99% of the time, exactly what I want to happen. I think you need to take into account what the most common use case is, and how likely it is. –  Bobby Jack Dec 15 '10 at 11:55
1  
Google is such an edge case, though, as using the search field is really the only reason to visit their home page. And even then, it can be annoying. Firefox, for instance, defaults to google so when you launch a new window/tab and start typing a URL, halfway through the page loads and Google steels my focus. –  DA01 Dec 15 '10 at 19:58

Putting the focus into a text field when the page loads prevents the up/down arrows for scrolling the page, meaning that users have to click on the page to get it to scroll. However, if the page doesn't scroll, or has only one action that requires the text box, it can be very useful.

My online banking site has several text boxes for entering specific characters from my password and pin number. When a key is pressed, the page auto-focuses the next text box. This is good normally because it means you don't have to tab between controls, but is a real pain when you accidentally type the wrong character. In this case, it breaks shift+tab behaviour - pressing shift+tab takes you back a control, but releasing shift takes you forward again meaning that you have to reach for the mouse.

share|improve this answer

There are lots of great answers here already, but no-one has mentioned how to mitigate problems associated with auto-focus. I would advise, as an absolute minimum, that you very clearly style the auto-focussed element so that it's more obvious that it's active. The blinking cursor should be a pretty good indication, but you can be much more obvious with a thick, coloured border or similar.

share|improve this answer

Offensive may not be the right term, but it's definitely rude. I put auto-focus up there with auto-play of music or auto-launching of pop-up windows or auto-resizing of my browser. It takes control away from the user and, IMHO, that is always rude. Not to mention issues already mentioned like usability on mobile devices or accessibility in general.

share|improve this answer

Real life example: Wordpress ruined my login routine with autofocus since wp 2.9 or something.

Before they inserted the autofocus, i'd hit the bookmark, click login with the user/pass stored on the browser and BAM!, i was in.

Now, autofocus clears my browser stored data and i have to write the username, hit tab to get the autocomplete for the password and than enter. A lot more steps.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.