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.
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.
- 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)
- 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
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.
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:
<input autofocus />
The other easy way to autofocus on a field is using jQuery focus method.