• Neil Schwarz
• 03 Dec 2010
• 2 Comments

Have you ever been looking for something only to discover it was right under your nose all along?

We often observe participants in usability tests who are unable to find deliberately positioned content or controls. I recently moderated some tests in which participants were unable to find the functionality they were looking for even though it was available on the page. This seems to happen regularly in testing so what are the root causes?

We ask participants to think aloud during tests to help us understand what they’re expecting and what they’re looking for. In this test, we also used Tobii eye tracking to help see what participants were looking at. To preserve client confidentiality I’ve mocked up a wireframe of the page and superimposed the actual eye tracking data over the top.

The problem

We tasked eleven participants with finding a specific article from a very long list of documents (see annotation A). The list was too long to find a document easily, and participants were unable to find any means of filtering.

Eye tracking shows low attention to the filters

Eye tracking shows low attention to the filters

Participants hadn’t seen the faceted filtering options within the dark block to the right of the list of documents (B). Only 4 of the participants gaze was drawn to the dark block and in each case only fixating on the area for a fraction of a second.

I found this example interesting because participants had used similar functionality on different pages earlier in the test. Despite having used the functionality before, participants did not remember to look to the right to find the filters.

When prompted, some participants blamed themselves for being unable to learn how to use the website. Participants told us they were looking for filters, so why couldn’t they see them?

How psychology can help us understand the problem

First a look at two of the Gestalt Principles of Visual Perception – which describe how people see groups of objects as a whole rather than as a collection of their parts.

Proximity: Elements with close proximity to one another are more likely to be perceived as being related than elements that are farther apart.

The spots are perceived as being in related groups due to their proximity to one another

Recommendation/ so what?: The filter in our client’s example should be placed nearer to the content it is controlling. The documents were listed alphabetically, so the participant’s focus was on the first letter to the left of each document name. Positioning the filter near the focus would make it easier to see.

When a user starts a new task they have a wide locus of attention (this is the area of the screen they’re concentrating on). As users move towards completing their goal, their locus of attention narrows and they’re more likely to miss functionality which is placed outside of this area.

Uniform Connectedness: Elements are perceived as being related if they are connected by a uniform visual property such as colour. In fact, this principle overpowers other Gestalt principles, such as proximity. Elements which share such a visual property appear as chunks, even if they are not next to each other.

The spots with a shared background colour appear more related than the spots with closer proximity

Recommendation/ so what?:In our client’s example, the controls could be made to feel more related to the list of documents through a common property, such as a background colour or border.

What does convention tell us?

Most successful retailers, such as Amazon and eBay place filtering and navigation to the left of the page. Websites that follow such design patterns are often more usable than websites that break with convention because they meet with user’s expectations of how the system will work.

In our example, participants’ expectations and behaviour did not change as they used the system – conventions learned through usage of other websites were more powerful than the memory of actions completed in previous tasks in the test.

A potential solution

The filters have been moved closer to area of focus

I’ve used a wireframe to illustrate how the usability of the design can be improved by moving the filters to the left. I’ve placed the filter in close proximity to the document title, making them feel more related, whilst adhering to convention. I’ve also used a common background colour to create a stronger visual connection between the two elements.

4 Tips for positioning filter controls

You won’t go far wrong if you follow these simple principles for positioning filtering controls

1. Place controls in close proximity to the thing they’re controlling
2. Group related elements with a shared visual treatment
3. Use conventions so users don’t have to learn how to use your website
4. Test your designs with real users