Tell me more ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.
up vote 5 down vote favorite

I want to add a bit to the flow of users, by making the first form field auto focus on page load.

Initially the auto focus scares me a bit (sometimes called offensive). But as said in that Q&A, pages with the form as the single purpose of that page are a very good candidate.

I was wondering if there is some way it can be done right. For example I'm thinking of not doing it when the user already has put focus on some field itself. Are there more ways I can make sure the auto focus is not 'offensive'?

Update

I'm looking for a bit more the whole picture. What are all the measures one should take to make this work well? Including ux, technical, visual, etc. For example, what to do when the field(s) are pre-filled by the browsers password manager?

share|improve this question
1  
Few things are more frustrating than when I begin filling out a form on a slow-loading page and then my focus is taken away from me when the page is done loading. So if you're going with a javascript solution, add some logic to see whether the user has already started typing. If so, do nothing. – jessegavin Jun 7 '11 at 16:53

6 Answers

up vote 4 down vote

To "do it right" you should use the new HTML5 form field attribute "autofocus" (which will work in all browsers supporting HTML5) and use a JS-based shim to progressively add backwards compatibility support to older browsers.

See https://github.com/miketaylr/autofocus for a jQuery snippet that will do the basic job perfectly, and a working demo.

You could alter this if you wanted to attempt to handle special cases, like password managers, but I recommend leaving the code untouched so that only default HTML5-compatible browser functionality is emulated, nothing more, so that the end user experience is consistent across the web - the developers of password managers will accommodate field autofocus if their users require it, you shouldn't waste your time anticipating such edge cases.

A similar approach can/should be taken with HTML5 field placeholders (hint text) using https://github.com/mathiasbynens/Placeholder-jQuery-Plugin

share|improve this answer
1  
And of course it's not necessarily the first field that should/could have autofocus, it depends on the circumstance. On many pages there's a search box in the header, so that's the first field, but you wouldn't want to give it focus every time the user navigates to a new page! – MarcusTucker Jun 7 '11 at 15:30
True that this does the technical part right, not the user experience in my view. That is left to the current browsers default (which has not seen that much design iterations as it isn't used that much yet). I'm looking for all the user experience details one should take into account. – Lode Jun 7 '11 at 16:23
up vote 0 down vote

Keep in mind that "tabbing through" pages (focussing on all the links / anchors / fields) is common behavior for expert users. Autofocusing on a form field halfway the page will seriously damage their experience.

share|improve this answer
up vote 0 down vote

Autofocus is quite helpful to the user when the main purpose of the web page is to collect data with a form. If you want to use it, make sure that the first field is located above the fold... Having a page scroll to the first field confuses users immensely. Sometimes autofocus is called for and sometimes not. If you have a login page that serves only to login, by all means focus the first field (user name). On a home page that includes a login function, say at the top right, you would not want to autofocus there.

I also happen to like the key accelerator function which allows you to use an ALT-letter combination to go straight to that field. Liberal use of these in a long form can be a godsend.

Use the autofocus function on the body tag as a main way to focus: <body onload="document.myformname.myfieldname.focus();">

share|improve this answer
up vote 1 down vote

I would only do the auto-focus if using the form is the main purpose of the page. Auto-populating a search box or sign-in form on a site home page might be confusing, especially if users accidentally hit the enter key on their keyboard.

As far as browsers auto-populating the fields, this shouldn't be an issue. Auto-focus would allow the user to just hit enter to submit the populated form, or allow them to tab through and change a couple things if needed.

The only thing I would check for is to see if any of the form items already have focus. It's really annoying to be part way through filling out a form and have the focus jump back up to the first box.

share|improve this answer
up vote 2 down vote

Autofocus is used on the LinkedIn Sign-in page, and this is what it looks like:

enter image description here

I think it's quite clear, and wouldn't go to any special lengths beyond that. Maybe color the background, but that's sometimes used as a required field indication.

Btw, I disagree with @Coldnorth - there's no real danger of "the user being surprised when the cursor isn't where they expect it", because usually when a webpage is loaded, there is no focus anywhere on the screen. The focus appears either on autofocus, or if the user himself had placed it somewhere - which overrides your autofocus in any case.

share|improve this answer
2  
Doesn't your image just show how Chrome highlights the focused field? – Mike Daniels Apr 3 '11 at 20:42
1  
I suppose it can be overriden, but essentially yes. I don't think anything is necessary beyond the default highlight. – Vitaly Mijiritsky Apr 4 '11 at 4:12
Indeed, it's usually not a good idea to fight the default focus highlight in any application, for accessibility reasons. – scottishwildcat Apr 27 '11 at 15:21
up vote 4 down vote

I would say that if you're going to autofocus, you should also do some kind of clear visual 'notification' that the focus has moved there - change color, fade in a box, flash in an arrow, whatever.

This way, the user isn't surprised when the cursor isn't where they expect it; rather, you show them where it should be, and they find it there.

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.