Evaluating the Usability of Search Forms Using Eyetracking: A Practical Approach

Amazon and eBay

On Amazon.com, in addition to a not-so-great search form design, the presence of the A9 search form distracts users and causes confusion. So, it took a long time—more than 1.6 seconds—for rookies to fully comprehend the search form.

On both Amazon and eBay, there is a drop-down list very near the search input field, which users can use to limit searches to specific categories of items. We found that users always looked at these lists first and for the longest time. Figure 2 is a heat map that shows the amount of time all rookies collectively spent looking at each interface element in the search form on eBay. All users seemed to perceive the list as the most important part of the form—probably because it’s clearly an interactive element that allows a more complex interaction.

When a search form is on a page with a lot of content, as in these cases, a clear and prominent label for the input field helps users to find and recognize the form and reduces the number of repeated fixations they need to reassure themselves that they’re using the correct input field. On eBay, the submit button—which is the element in the search form that is furthest to the right—provides the only label. This obliges users to perform frequent fixations on that area of the screen, then return to the input field, which increases the cognitive workload of performing the task.

Pro users never again looked at either the label or the drop-down list—even though some fixations on this element incremented their cognitive load—but once they had typed the search string, fixated directly on the submit button. Figure 3 is a heat map showing the cumulative time all pros spent looking at each interface element in the search form on Amazon.

Flickr

Though the search form is definitely not a prominent feature on the Flickr Web site, I wanted to check how their search form would perform. I thought this form would perform better than the others, because their search form is very compact, with a label just above a narrow input field and a clearly labeled submit button. Figure 4 shows the time all users spent looking for, then focusing on the elements in the search form on Flickr.

In fact, for all three groups of users, this form performed better than any of the other search forms we evaluated during this round of testing. Because of the compactness of the whole form, it took less than one second to visually navigate it. Plus, in looking at the clearly labeled input field, rookie users were reassured of the form’s purpose.

useit.com

Jakob Nielsen has written a lot about form usability—mainly, but not only, in regard to ecommerce sites. So, I thought it would be interesting to test the search form on his useit.com site—which has no label for its input field.

Neither rookie nor intermediate users noticed the form immediately, so we might conclude that the de facto standard of placing a search form at the upper right on a Web page didn’t work well for those test subjects. Also, as shown in Figure 5, the absence of a label forced the rookie users to double-check the input button on the far right, in order to reassure themselves of the form’s purpose. However, pro users, who are probably the target users for Dr. Nielsen’s site, immediately—at their third fixation on the page—noticed the form and typed their search string.

Guidelines for Search Forms

Though this was not an in-depth study on search form usability, we were able to identify a few interesting design guidelines for search forms:

• Form labels help rookie and intermediate users, who look for such labels when trying to locate a site’s search interface. These users expect input field labels to be at the left of the search form. Pro users don’t need and won’t use these labels, which are simply invisible to them.
• Drop-down lists are very eye catching form elements. You should always consider very carefully whether you should include a drop-down list in a search form. Use a drop-down list only if no alternative element would serve its purpose as well. Maintain adequate distance between the drop-down list and other elements in the search form. In general, if you want to create a simple search form that is easy to use for even novice users, avoid using drop-down lists in the form, because they tend to cognitively overload users.
• Compactness makes search forms easier to peruse. Therefore, make search forms as compact as possible. Most users visually navigate a form broadly before they can understand its scope, so the smaller the area of a page over which they’re forced to navigate, the better. In our tests, the site search form that performed best was that on Flickr. Their search form is very compact, with a label placed over the input field, so users need look at only one place on the page. Thus, our test results suggest that the ideal location for the label of an input field in a search form is left aligned, immediately above the field.
• Consistent placement of search forms in a standard location on Web pages overcomes some of the problems of unlabeled input fields. If you don’t want to label the input field, at least place your search form in a discrete area of the page where it’s simple for users to understand its purpose. If you do so, your form will serve not only pro users, who usually don’t look at the labels, but also rookies, who rely heavily on such labels to perform their tasks.

In this article, I have just begun my investigation of form usability, an important and interesting area for usability evaluation. To complete my evaluation of form usability, I’m preparing to conduct another series of eyetracking tests, during which I’ll test label placement in forms. What is the best position for labels? What is the most usable alignment? How prominent should form labels be? Stay tuned to UXmatters for the next article in my series of articles on eyetracking, which will cover my analysis of the results of these tests!