November 4, 2013 at 22:24Abundance Control: usability forms of filtration
- Tutorial
- Recovery mode
Most online stores, news portals, and many information sites contain a large amount of content elements in one category. One structuring of the catalog is not enough. You will have to either build a hierarchy of the menu of levels in 5-7 (although this may not solve the problem), or dump dozens of pages of results on the user in the hope that he will figure out what he needs.
It usually looks like in the picture (plus another 10 screens down). Division into pages (paging), of course, does not improve the interaction experience, this is just a way to reduce the load on the system.
The bad news is that an abundance of offers does not help decision making. On the contrary.
At one time, an experiment was conducted in supermarkets of a retail chain. Buyers were invited to taste the jams and buy what they liked.
On one table were exposed 6 types of jam, on the other - 26 types. Only 40% of visitors came to the first table and 60% to the second. So far, the bill is in favor of abundance.
However, from both tables tasters tried 2-3 jams. That is, the volume of supply does not affect the selection process.
Moreover, as a result of the tasting, they bought jam: from the first table 31% of tasters, from the second - 3%tasters.
Such a striking difference in conversion is simply explained: in the second case, it seemed to people that they had tried too few options and they had no good reason to choose.
We conclude: to increase conversion, it is necessary to reduce the number of options in the issue. At the same time, we cannot reduce the total number of offers in the catalog and cannot divide the entire catalog into micro-sections, since this will complicate navigation too much. What to do?
A good solution is catalog filtering forms.
Many (perhaps most) site developers have realized this fact. Or they unconsciously copy filters from each other, in this case it does not matter. These forms usually look like in the picture and traditionally cause user irritation. Let's try to figure out why.
Firstly, we are again offered excessive abundance, now at the level of parameters. Instead of looking at hundreds of offers, I am offered to look at a hundred parameters of these offers and with some (rather high) probability in the end I get the wrong output that I was counting on. And in the clinical case, the message “nothing was found at your request”.
Secondly, with such a page layout, the filter is visually separated from the actual output and placed on the side panel. There, where the navigation, banners and other service elements are located, taking the user out of the context of a specific problem being solved. One of the basic principles of line-up is not respected - the proximity principle, when elements performing similar functions are grouped in a common local area.
Thirdly, here it is necessary to mention such a feature of human perception as the locus of attention. A locus is a place or object that is in the center of our conscious attention.And we can have exactly one at a time. At the level of the cognitive unconscious, we can interact with many objects through many channels, but consciously we can concentrate on only one thing. This is how a person works, and nothing can be done about it. This feature leads to important consequences. You can perceive this as a drawback, but at the same time it gives additional opportunities for design, if you can use it.
In the given examples of forms, the uniqueness of the locus is an obvious limitation. When a person is focused on filtering, his locus is this form, which is infinite in length. In fact, we narrowed the scope of the site as an object of interaction to a narrow long column, turning off the rest of the site’s space from perception. For the user at this moment, the entire useful amount of screen space simply does not exist.
From the foregoing, the following problem is formulated:
As a result, we get a fairly reasonable solution for the location of the filters.
Here we use the uniqueness of the locus for the benefit of the user and ourselves, since we no longer need to dynamically filter output when each filter is installed. We would need it with filters on the side, despite the fact that the output is in the blind zone: we do not have context switching and we need to somehow show the system’s reaction to user actions.
A sketch of this form may look something like this:
In no case do I pretend to be the perfect solution, please take this picture only as an illustration of the approach. I’m sure you can find a dozen ways to improve it, and that's great. The main thing is that it illustrates the essence of the approach to filtering output elements.
I hope it was useful, evidence-based and visual.
It usually looks like in the picture (plus another 10 screens down). Division into pages (paging), of course, does not improve the interaction experience, this is just a way to reduce the load on the system.
Why is abundance evil?
The bad news is that an abundance of offers does not help decision making. On the contrary.
At one time, an experiment was conducted in supermarkets of a retail chain. Buyers were invited to taste the jams and buy what they liked.
On one table were exposed 6 types of jam, on the other - 26 types. Only 40% of visitors came to the first table and 60% to the second. So far, the bill is in favor of abundance.
However, from both tables tasters tried 2-3 jams. That is, the volume of supply does not affect the selection process.
Moreover, as a result of the tasting, they bought jam: from the first table 31% of tasters, from the second - 3%tasters.
Such a striking difference in conversion is simply explained: in the second case, it seemed to people that they had tried too few options and they had no good reason to choose.
We conclude: to increase conversion, it is necessary to reduce the number of options in the issue. At the same time, we cannot reduce the total number of offers in the catalog and cannot divide the entire catalog into micro-sections, since this will complicate navigation too much. What to do?
A good solution is catalog filtering forms.
Appearance of the form, or reasoning on how to do it is not necessary
Many (perhaps most) site developers have realized this fact. Or they unconsciously copy filters from each other, in this case it does not matter. These forms usually look like in the picture and traditionally cause user irritation. Let's try to figure out why.
Firstly, we are again offered excessive abundance, now at the level of parameters. Instead of looking at hundreds of offers, I am offered to look at a hundred parameters of these offers and with some (rather high) probability in the end I get the wrong output that I was counting on. And in the clinical case, the message “nothing was found at your request”.
Secondly, with such a page layout, the filter is visually separated from the actual output and placed on the side panel. There, where the navigation, banners and other service elements are located, taking the user out of the context of a specific problem being solved. One of the basic principles of line-up is not respected - the proximity principle, when elements performing similar functions are grouped in a common local area.
Thirdly, here it is necessary to mention such a feature of human perception as the locus of attention. A locus is a place or object that is in the center of our conscious attention.And we can have exactly one at a time. At the level of the cognitive unconscious, we can interact with many objects through many channels, but consciously we can concentrate on only one thing. This is how a person works, and nothing can be done about it. This feature leads to important consequences. You can perceive this as a drawback, but at the same time it gives additional opportunities for design, if you can use it.
In the given examples of forms, the uniqueness of the locus is an obvious limitation. When a person is focused on filtering, his locus is this form, which is infinite in length. In fact, we narrowed the scope of the site as an object of interaction to a narrow long column, turning off the rest of the site’s space from perception. For the user at this moment, the entire useful amount of screen space simply does not exist.
How to do?
From the foregoing, the following problem is formulated:
- The form of filtration should be made as concise as possible with the additional opportunity to dive into the filtering details if the main filters are not enough.
- The form should be placed as close as possible to the issue itself, creating a common search context on the page.
- • At the time of filtering, it is advisable to use the entire screen space, because the user at this time will still not be able to consciously do anything else.
As a result, we get a fairly reasonable solution for the location of the filters.
- We place the filtering form above the output in short form and the button “more parameters”.
- When you click on the button, we expand the form on most of the screen without saving on signatures, explanations, icons and other visualization tools.
- We give the opportunity to collapse this form at the end of the filtration process, it is at this moment that we form the final issue.
Here we use the uniqueness of the locus for the benefit of the user and ourselves, since we no longer need to dynamically filter output when each filter is installed. We would need it with filters on the side, despite the fact that the output is in the blind zone: we do not have context switching and we need to somehow show the system’s reaction to user actions.
A sketch of this form may look something like this:
In no case do I pretend to be the perfect solution, please take this picture only as an illustration of the approach. I’m sure you can find a dozen ways to improve it, and that's great. The main thing is that it illustrates the essence of the approach to filtering output elements.
I hope it was useful, evidence-based and visual.