3

Is there any reason not to programmatically put the cursor in the search box by deafult instead of forcing the user to click before writing the search? Google for instance does this but not always.

I do it like this

var elem = document.getElementById('searchtext');
setCursor(elem,elem.value.length);

function setCursor(node,pos){

    var node = (typeof node == "string" || node instanceof String) ? document.getElementById(node) : node;

    if(!node){
        return false;
    }else if(node.createTextRange){
        var textRange = node.createTextRange();
        textRange.collapse(true);
        textRange.moveEnd(pos);
        textRange.moveStart(pos);
        textRange.select();
        return true;
    }else if(node.setSelectionRange){
        node.setSelectionRange(pos,pos);
        return true;
    }

    return false;
}

Related: Search Icon vs Search Input Box - Both Require One Click/Touch: Which to use?

3

4 Answers 4

4

forcing focus to search could have negative usability implications towards screen readers and other accessibility tools. I would suggest against it - the only caveat being if a user navigates to the page from another link which is explicitly designed to "take the user to the search page" (like an "advanced search" link - assuming you can not provide the depth of controls [ filters / etc.. ] in the contextual search dialog)- This assumes you have the content volume to warrant a dedicated site search view

4
  • Can you explain what these accessibility issues would be?
    – JonW
    Jun 5, 2013 at 5:57
  • Sure Jon, however I am very much not a pro in terms of ADA compliance, but here goes: users of "technology" are vast and varied. Many brilliant people have trouble with what "you or I" take for granted : using a mouse, using our fingers to interface with a touch screen, and much more - are actually very difficult tasks for many. Without going into every bit of minutia - when a website "takes control" and forces a user's interaction (without the user requesting that automation) it causes additional interactions which are not only unnecessary but also frustrating. Sometimes, the user knows best. Jun 5, 2013 at 6:05
  • @BrandtSolovij I get your reasoning, but I can't see how it applies to the search field being the control in focus, and how that would be cumbersome for a user with accessibility issues than if it was focused somewhere else. Jun 5, 2013 at 7:23
  • @AndroidHustle I rarely use a mouse scrollwheel or a scrollbar to scroll. I navigate with a browser plugin called Gamer's Control. If you autofocus to the search box (or worse yet, jump to the text box when I press the 'S' key) then your page doesn't scroll. It's not an accessibility issue for me, just preference. But there might be some who navigate similarly because of accessibility issues.
    – Gray
    Jun 5, 2013 at 15:13
4

I would like to add to the above some technical reasons:

  • In a form that has multiple fields, the page may for whatever reason load a bit later than when the user started to interact with fields, so when the page finally loads, you force cursor on search field while the user is typing in another field, you can imagine how frustrating that is, especially in login forms where the second field is non other than the password!

  • Browser auto-fills, this one is trouble for login forms only, where browsers remember usernames and passwords, and then the developer of the page decides to focus on the username field, nullifying the browsers input. Bad!

  • keyboard scrolling: now this is my worst nightmare, I go into a page that is long, and I use the bottom arrow key to scroll down, but it isn't working! why? because the search field has got focus. Now if the browser supports auto-complete feature, a drop down will appear with previously typed words... now THAT is frustrating.

So I agree, let the user decides unless its like a Google-like page.

1

The issue is not restricted to search alone. It depends on the context. Many websites with login page will have the cursor automatically positioned in the first (username) field.

This plays well when you have a streamlined experience. You know what the user's next step is going to be and you are making it a smoother, faster and better experience for the user by removing as many obstacles as possible (moving and clicking cursor, in this case).

The flip side being, if there are multiple paths for the user and if you still implement it, then it can act as a hinderance rather than a utility feature.

In google.com's case, there is only one action for the user, search. So, it makes sense for them to put the cursor in place. Previously, bit.ly had a really smooth interaction:

goto bit.ly > (cursor is in the url paste bar) just paste the url and hit enter > url is shortened and the shortened url is pre-selected > you copy the new url 

The automatic placement of the cursor and text selection added the 'delight' factor to the experience.

1

One of the main issues would be for keyboard navigation.

Many users browse websites with keyboard and not a mouse / touch. For such users there is a reasonably common standard in place in websites known as a 'Skip Link'.

Sometimes these links are visible to everyone (such as in the link above) and sometimes they're not displayed until you start tabbing (such as on the bbc.co.uk website - give it a try!).

Skip links are where, on pressing Tab when first arriving at a webpage, a navigation option is selected that will 'skip' the tab order past the navigation and directly into the content of the page. This means that users don't have to repeatedly hit tab-tab-tab whenever they arrive at each page on the site just so they can get to the main content. These skip links are site-wide and not just on the homepage.

If you're primary focus is on the Search field that means you'll be bypassing this skip link, and assuming that the users first point of call is going to be the search field.

Keyboards are used for much more than just typing entries into fields.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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