We recently ran a study of a range of live and prototyped finders (pages where you use filters or facets to refine a set of results). The goal was to identify which design patterns were most successful for particular finding tasks on computers, tablets and phones. While the mobile design was a hit on eBay’s finder, we were surprised by a critical failure point in the desktop design. They’d missed an important perceptual cue – and as a result, visitors could miss out on purchases.
An article by Nielsen Norman Group had alerted us that the eBay finder had an interesting tray design in mobile. We decided to have 9 of our 21 participants try the eBay design – some on phones, some on their computers. The phone participants were successful with the tray design, but the computer participants didn’t find all of the cars that were available.
Participants were asked to perform tasks of similar complexity on all of the finders. For eBay, we provided a link where “Audi” was already in the search field to ensure that all participants saw the same set of filters/facets.
The task: “Find all the 2014 Audi cars for sale that have All Wheel Drive (AWD) and are either an A6 or A8 model.”
Try it yourself: eBay.ca Finder
3 of the 5 participants who performed this task on a computer decided incorrectly that only the models and years shown in the short list were available. They didn’t notice the “See All” link associated with the short list. Depending on their previous selections, they would see both models, one or none at all in the short list. “It looks like there are none” said one participant, deciding to shop elsewhere.
In the screen shot below, there are 26 A6 Models for sale, but they’re not displayed in the short list, I had to click “see all” to find them.
Understand perceptual principles to meet design goals
Gestalt principles can help you create cues that drive the eye and brain to perceive groups. In this case, the heading and short list are clearly a group – the principles of proximity and similarity are at play. In contrast, the “see all” link is not similar, and is quite distant. Finally, the principle of continuation works here too – after the visitor’s gaze hit the bottom of the short list, it likely continued downwards, rather than moving up and to the right.
Perceptual cues guide where people may look next on the screen.
Make sure the next step of the task is in that path.
On a different finder, we saw the participants on phones and computers successfully reveal the full list of facets. In that design, the “Show more” link was aligned at the bottom of the short list. The location successfully applies the principles of proximity, continuation and similarity. Our team will be adopting this successful design pattern into our collection.
Perceptual principles drive how people see and use your site.
Ignore them at your peril – apply them for success.
If you are keen to create successful designs, the two most important things to do are:
- Test early and often, and
- Learn more about how perception and attention work together to influence your visitor’s behaviour
- See all the Gestalt principles in this series at Smashing Magazine
- Nielsen Norman Group Article:
Mobile Faceted Search with a Tray: New and Improved Design Pattern
- See how attention and perceptual principles interact in:
Negative Priming – Why Stock Photos Reduce Conversions