Auto Focus

There are two types of user experiences on a webpage, one with Auto Focus on an input field and the other without it. Auto-focus is especially helpful when the primary motive of the user on the webpage is to type something and do something with the input. One example would be Google Search. Here, the user is interested in searching for a particular term and doesn’t care about much else on the page. Another example of when Auto Focus is highly useful is in Web forms i.e., when the user is required to fill out a form on a webpage (a registration/signup/login form). An example of this would be the login page on sites like Gmail, Facebook. The focus is often on the username field.

Facebook Login Autofocus

Facebook Login – Autofocus on Email field

Gmail Login - Autofocus on Email field

Gmail Login – Autofocus on Email field

Google Search - Autofocus on Search Box

Google Search – Autofocus on Search Box

The kind of webpages where auto focus is not desirable is one where the user is interested in consuming content on the webpage rather than entering data. For e.g., Facebook Home Page. In such webpages, there is no point in auto-focusing on a field and if done so, then would result in a very bad experience for the user.

In pages like Amazon homepage or Flipkart homepage where the user could either search for an item or browse through the menu/catalog, it is always ambiguous and the best option would be rely on data from customer behavior on the page, user heatmaps on the page, a/b tests etc and decide based on that.  For e.g., Amazon does not have Autofocus on their search field whereas Flipkart autofocuses on the search box.

Amazon Home Page - No Autofocus on Search Box

Amazon Home Page – No Autofocus on Search Box

Flipkart Home Page - Autofocus on Search Box

Flipkart Home Page – Autofocus on Search Box

 

Pros

  • Easier access to the input field functionality – Reduce the need for a click.
  • Gives user the indication that the field is required to be filled. (In case of form error messages)

Cons

  • Distracts the user from the main purpose of the page (if the
  • It disables some basic keyboard shortcuts on the browser.
    • “Backspace” button to go to the previous page.
    • Up/Down buttons for scrolling.
    • Spacebar for page down.

 

To keep in mind
If the functionality is implemented using JavaScript that waits for the entire page to load before moving the focus to the input field, the user could have taken a different action by that time which is then disturbed and results in a bad user experience.

An example of this would be a user who lands on example.com/login/ page. JavaScript takes time to load and the auto focus does not happen immediately. The user however goes ahead and starts typing out the form. Assuming the user is quick and moves to the third form field by the time the auto focus js load, it would force the user control back to the first form field. One way to fix this would be to NOT autofocus if the user has started interacting with the page already. This can be done by checking for touch, mousedown, mousewheel events and dropping the autofocus if these events are triggered.

While having autofocus on fields often adds to positive user experience on the web, it might not always be the case on the mobile web. When you autofocus on a input field in the mobile browser, it automatically zooms in to the field and opens up the keyboard, which the user would have to hide and zoom out in order to continue using the website.

In case of Apple devices, autofocus is apparently disabled by default.

Implementation

The easiest way of implementing the auto focus option is to use the HTML5 autofocus attribute. It is as simple as either of the following:

The other easy way to autofocus on a field is using jQuery focus method.

Leave a Reply

Your email address will not be published. Required fields are marked *