Question

We tend to position the cursor on the first element of all newly created objects (e.g. name field for user or the email id field on the login page). Does it make sense to auto-focus on the name field for user on User.update, since the user could modify any other field of the User and doing on auto-focus while doing User.update actually marks the entire name field instead of positioning the cursor on the name element. What should be the right behavior?

Answer 1

The purpose of auto-focus behavior on a web page is to save users from moving off the keyboard to make a mouse action for the most common task on that page.

So you need to ask the question: “What is the most common task performed on this page?”

Then ask, “What is the first UI element (field) a user needs to access or edit to accomplish the most common task(s) on this screen?”

Your answer should determine where your auto-focus goes. But be careful – users expect the auto-focus to go on the first field on the page. So only place it elsewhere if you are sure that this is desirable to the users. And also in that case, consider moving that field to the top of the page.

In your case, the “name” element gets entirely marked (selected) because that is how auto-focus works for fields that already contain data. This is the most desirable behavior because it allows the user to replace the contents of the field without doing further work with the cursor and delete keys, and if they only want to edit, they can simply use the Home/End and arrow keys to quickly move the cursor where they need it.

===== Edit / Addendum =====

I forgot to add this in the original answer, but it’s such a huge pet peeve of mine that I have to mention it here.

Please, if you do an auto-focus, make sure it doesn’t fire if the user is already typing! There is NOTHING more annoying than having your cursor moved automatically while you’re in the middle of logging in.

This used to happen on Yahoo! Mail’s login screen all the time. If the page was loading slowly, the login form would render a few seconds before the DOM was ready and the auto-focus only fired when it was ready. So I’d click manually to focus in the login field, and I’d already be halfway through my password when auto-focus would silently move my cursor back to the login field and I’d look up at the screen to find half my password in plain text up in the login field, smashed up against my username.

The fix is so simple; just check if the login field is still blank before focusing there. Otherwise don’t because you then know the user already typed something and the convenience of auto-focus would turn into a frustration. Here’s example code, assuming your field is given an id="username":

function focusIfBlank(){
    username = document.getElementById('username'); 
    if(username.value == "") {
        username.focus();
    }
}

Also consider calling focusIfBlank() inline instead of when the DOM is ready, because you’ll increase the chances of it being useful to the user since it will focus almost instantly after it’s rendered.