A while ago during a project we were asked to implement autofocus on the generic search field that every page in the application has. At a first glance a pretty straightforward task, from a technical perspective that is. Not from a user perspective, as indicated by a colleague mentioning his dislike of such autofocus fields “because they prevent backspace going to the previous page”. In this post I will outline some usability considerations and conclude with a jQuery plugin that will take away some of the possible hindrance of autofocusing a field.
There are some things to consider to determine if such automatic focusing of a search field is actually helpful to the user navigating to the page. Who is the user?
As I was discussing this case with an interaction designer friend (dutch) of mine, he brought up the idea of mimicking the browser’s backspace behaviour, and discussing it further we concluded that this might be useful in some cases but is definitely not a ‘one size fits all’ solution.
Different users will probably have different goals when navigating to a page. On the google page or a login screen the majority of the users’ goal is to type something in the first input field. On a lot of other pages this won’t be so obvious. Question then is: Will focusing a search field, if not help, instead hinder the user? For example: A user might have navigated to a page by accident. In that case not being able to go to the previous page by pressing ‘backspace’ might indeed hinder the user.
Not every user navigates to the previous page by using ‘backspace’, some might not even be aware of that possibility. Not every user expects text entered to automatically appear in an input field. Some users might have enabled the option to directly find text in a page when typing text and find this functionality suddenly broken.
Dive into HTML5 has some other nice examples of how autofocus might not be helpful.
What size fits all?
As mentioned before, there is no ‘one size fits all’ solution. Questions that need to be asked include:
- How many users might be helped by adding autofocus to a common search field?
- How many users might instead be hindered by autofocus?
- Are there pages where autofocus on more specific fields (like the main form) is needed which will break consistency throughout the site?
This means studying your site, the target audience, their goals and expectations and based on that finding a balance.
Restoring the backspace: jQuery autofocusBackspace plugin
As not all browsers support the autofocus attribute yet, and we wanted to preserve the browser’s backspace functionality, I created a jQuery plugin that does just that:
- It focuses the first matching element
- It responds to ‘backspace’ by navigating to the previous page.
- Only until a user has entered text
- Only until the element loses focus
Refer to GitHub for the jQuery plugin autospaceBackspace.
Feel free to report problems or ideas for improvement.