Visual Search

Soussan Djamasbi; Adrienne Hall-Phillips    Worcester Polytechnic Institute, Worcester, MA, USA

Introduction

Paying attention to how users look for information on websites is becoming increasingly important in designing positive user experiences. Users are no longer impressed with the basic utility of a website and are now more demanding for websites that have superb user experiences.

More and more research shows that paying attention to how users visually search web pages can be very helpful in designing satisfying user experiences. Eye tracking is an invaluable tool for studying how people search web pages because it allows us to “see” exactly what users look for on web pages.

In this chapter, we look at eye-tracking studies that examine how people visually search sites for information. We will discuss research that examines why and when people turn a blind eye to information that looks like advertisements. Finally, we provide a list of take away points for designing positive visual search experiences.

How do we visually search for information on web pages?

Paying attention to how users view web pages can provide a wealth of information for designing successful websites. Better yet, understanding why people inspect web pages the way they do can help predict users’ reactions to particular web page designs. For example, the theory of visual hierarchy (Faraday, 2000) helps us predict a user’s fixation behavior by explaining that users search a web page through a two-phase cognitive process. During the first phase, or scanning phase, a user skims through the page to find an entry point to the page. Once an entry point is found, the user starts the second phase or inspection phase, during which the user looks around the entry point for information. Essentially, a user inspects a page by going through a chain of entry points, each of which, like an anchor, allows the user to scan for information (Figure 2.1).

Both of these phases are influenced by the characteristics of the objects on the web page. Whether an object on a page can act as an effective entry point depends on a number of characteristics, such as location, size, color, text style, and type (e.g., whether it is textual or image based). By manipulating these characteristics, we can entice users to pay special attention to an object. For example, increasing the size of an object on a web page is a good way to convey to a user that this object is important and therefore encourages the user to pay attention to that object before (or more often than) other smaller objects on the same page.

The location of an object can impact the order in which a user views it. In most cultures, top locations typically cue importance, and top left locations are typically attended to because that is typically where reading begins (Faraday, 2000). We are accustomed to reading from top to bottom and from left to right, so we tend to view objects on top left locations on a page before or more frequently than other objects located on the right side of the page or in lower locations.

As with the scanning phase, the inspecting phase (the second phase, which starts right after an entry point is found) is also influenced by the characteristics of the objects. The way objects are arranged on a page is an important factor in this phase. We tend to limit our visual search in this phase to the area that encloses the entry point and items that seem to be related to it. For example, we tend to perceive items around the entry point with the same background as being related to each other.

Proximity is also important—items that are close to each other signal that they have a relationship. Eye tracking shows that fixations in this phase, which is limited to the area around an entry point, follow a left to right, top to bottom reading order for text and bulleted points. We do not use the left-right, top-bottom pattern of fixations when we are looking at images or links around the entry points (Faraday, 2001).

What does visual search look like?

When we search a web page, we can only pay attention to one object at a time. This means that our search behavior naturally creates a hierarchy or sequence. Eye tracking is a helpful tool to show this behavior.

When users look at web pages, they have a tendency to look at the top and left portions of the page (Faraday, 2000). This pattern of visual search has also been called the golden triangle or F-shaped pattern of viewing. The frequently reported F-shaped pattern (Buscher et al., 2009; Nielsen, 2006) tells us that when we scan a website, we tend to miss some very important information that is placed on the right portion of the page (Figure 2.2).

Users are also less likely to look at information that is “below the fold” of a web page, which requires scrolling. Eye-tracking research shows that fixations on a web page decrease as users scroll down a page (for further reading, see Djamasbi et al., 2010, 2011a; Granka et al., 2004; Shrestha & Owens, 2008).

However, favoring the top rather than the bottom of the page seems to be more pronounced in younger users. For example, in one study, when comparing the fixation behavior of professional employees of a company, Generation Y participants (ages 18–34) paid far less attention to areas below the fold, compared to their Baby Boomer colleagues (ages 47–65; Djamasbi et al., 2011a). In that same study, cluttered pages were less appealing to both generations, but the younger users had significantly less tolerance for clutter (Figure 2.3). Clutter often results in a “flat” visual design, where there seems to be little or no difference in relative importance of objects on a page. Clutter makes it harder for users to find entry points on a page. The viewing behavior of the two generations is quite similar for pages that are not cluttered. Uncluttered pages entice both generations to view them thoroughly (Figure 2.4).

The tendency of users to favor only a portion of the page coupled with the fact that web pages have limited screen real estate makes it quite challenging to design an effective communication experience. A good design encourages users to look at the entire page, not just the top left portion that they typically favor. This means that as user experience designers, we have to find out what type of design could possibly change the natural viewing bias of users. For example, would the natural viewing bias change if a website uses an image-based design rather than a text-based design? What about the arrangement of textual information—would it change the way we search for information on a web page?

The answer to both...