Filtering: Interface & Layout

Question 1

What issue arises with long lists of filter options in a user interface?

Answer 1

Long lists of filter options push other available filter types out of view, making it harder for users to get an overview of what filters are available.

Question 2

How should filter options be handled if there are more than 4-8 options?

Answer 2

Truncate the filter options if there are more than 4-8. Ensure that the “View More” link is easy to discern and shows the number of truncated options in the truncation link. Avoid both inline scrollable areas and untruncated lists with 8+ filter options.

Question 3

What problems arise when the list of filter types extends across multiple viewports?

Answer 3

When the list of filter types (e.g., “Color,” “Brand,” “Material”) extends across multiple viewports, users have much more difficulty establishing an overview of which filter types are available. This increases the likelihood that they’ll miss out on potentially ideal filters that are pushed too far down the page.

Question 4

What issues arise when filter options are displayed in inline scrollable areas?

Answer 4

When filter options are displayed in inline scrollable areas, it’s impossible to get an overview of all options because only a small part of the list is viewable at any given time. This makes it difficult to compare filter options that are not positioned closely together. For example, if there are 15 formulations of eyeliner available but only 5 are visible at once within an inline scrollable area, users will have to scroll down and up within the list to form an overview of the available options.

Question 5

What is the recommended approach for displaying more than 4-8 filter options?

Answer 5

Truncate filter options where there are more than 4-8. Truncation has been proven to perform better in testing for displaying more than 4-8 filter options compared to displaying all options untruncated or using inline scrollable areas.

Question 6

What are the 3 implementation details for truncating filter options?

Answer 6

1. Never truncate a single option
2. Include the number of hidden filter options in the truncation link
3. Ensure appropriate visibility of the truncation link

Question 7

Why should you include the number of hidden filter options in the truncation link?

Answer 7

It helps users to know how many additional filters they can expect by including the number of hidden filter options in the truncation link (e.g., “Show More (9)”). For example, if users can’t see a suitable option visible by default, knowing that there are 9 more to pick from could encourage them to click the truncation link — clarifying to them that there aren’t just 2 or 3 more.

Question 8

What happens when the number of matches for filtering options isn’t shown?

Answer 8

When the number of matches for filtering options isn’t shown, users won’t know the effect of applying the filters.

Question 9

How should the number of matches for each filtering option be displayed and updated?

Answer 9

Show the number of matches for each filtering option, and live update the numbers as filters are applied or deselected.

Question 10

What issues were observed during testing on sites that didn’t show the number of matches for each filter option?

Answer 10

Participants either wasted time applying filters that didn’t narrow the product list enough or ran into dead ends when the application of filters led to too few items being shown in the list.

Question 11

What is the consequence of users not knowing how many items match each filter option?

Answer 11

If users don’t know how many items match each filter option, they won’t be able to pick the options that will significantly reduce the length of the list.

For example, if a user in a product list with 8,000 items starts applying filters to reduce it to a manageable size and there is no indication of the matches for each filtering option, there is no way for them to know if selecting a specific option will reduce the list by 10 items or 1,000.

Question 12

Why is it important to show the number of matches for each filter option?

Answer 12

Showing the number of matches for each filter option gives users confidence that they will be able to tailor the product list to one that has suitable items and contains neither too many nor too few items.

Question 13

What factors determine whether a product list is considered “too many” or “too few” items?

Answer 13

What constitutes “too many” or “too few” depends both on users’ needs and the context. Some users may want a large list, such as those who don’t know exactly what they want and prefer to view an extensive list of items. Others might have more specific needs, like a brand of shoe in a certain color and size, and may favor a shorter list. Others still might have no preference. It’s important to display the number of matches for the subset of users who will find this information helpful.

Question 14

How should the numbers of matches for filter options be updated when filters are chosen?

Answer 14

The numbers of matches for filter options should be updated each time a filter is chosen. Once a filter option is selected, the numbers of matching items for all other filter options should update to reflect that selection. This is especially important when selecting multiple filters.

Question 15

Why is it important to update matching values immediately after a filter is chosen?

Answer 15

Unless matching values are updated as soon as a filter is chosen, there is no point in showing the numbers at all after users have selected a filter. Users are concerned about the total size of the resulting product list.

Question 16

Why is it important for the numbers of matches for filtering options to update as each option is chosen?

Answer 16

When the numbers of matches for filtering options update as each option is chosen (ideally as a live update), users can feel confident in the number of products that will be displayed in the product list. This helps avoid dead ends with too few items and makes the site feel more responsive to users’ needs. Additionally, live updating the number of matches can help establish a sense of progression for users adding multiple filters because they see the number of matches decrease with each addition (or increase as filters are deselected).

Question 17

Why is it helpful for users to see the total number of products matched by all active filters?

Answer 17

Seeing the total number of products matched by all active filters is helpful to users because it allows them to see the effect of applying a filter on the total number of items in the list.

For example, if a user applied a filter that reduced the number of items too much, they could immediately deselect it and then either choose another filter or browse the list as is.

Question 18

How should the total number of matches be displayed on mobile sites and apps where filters are in a separate interface?

Answer 18

On mobile sites and apps, the total number of matches should be shown within the filter interface. For example, the “apply” button text can be adjusted to “Show 78 Items,” where 78 is the total number of items in the list with the currently active filters.

Question 19

What happens if the total number of matches isn’t shown on mobile sites and apps?

Answer 19

If the total number of matches isn’t shown, users would have to apply the filter(s), go to the product list, view the total number of items, and if necessary return to the filtering interface to adjust the filters as needed — a time-consuming and frustrating process.

Question 20

Why is it important to indicate the number of matches for filtering options on mobile?

Answer 20

For mobile users, showing the total number of matches prevents the need to “apply” and then re-open the filter interface if the results need to be refined further

Question 21

Why is it important to indicate the number of matches for filtering options?

Answer 21

Users can get real-time feedback as they apply filters regarding how many relevant options they will be evaluating

Question 22

What are the 3 issues that were observed which made finding filtering and sorting difficult?

Answer 22

1. Using only an icon to represent the path to filtering or sorting
2. Having overly cluttered interfaces near the paths to filtering or sorting
3. Having an overly subtle path to filtering or sorting

Question 23

How should mutually exclusive options like category links be displayed, and why?

Answer 23

Mutually exclusive options like category links should not use checkboxes, as this suggests the options are combinable. Instead, they should use either plain text or radio buttons to convey that only one option can be selected. During testing, participants mistakenly tried to select multiple categories with checkboxes and were surprised when this wasn’t possible. Using plain text or radio buttons avoids this confusion.

Question 24

How should categories be handled when an initial filter selection will benefit most users?

Answer 24

For categories where an initial filter selection will benefit most users, consider promoting those filtering values above the product list while also keeping them in the normal filtering interface.

Question 25

What was the first action of the majority of participants arriving on product lists during testing?

Answer 25

The first action of the majority of participants arriving on product lists was to look for suitable filters to make the list more manageable and relevant to their needs.

Question 26

What are the most popular filters for apparel and other visually driven products?

Answer 26

The most popular filters for apparel and other visually driven products are price, size, and color.

Question 27

How does promoting helpful filters at the top of product lists benefit users?

Answer 27

When helpful filters are promoted to appear at the top of product lists, such as filters for styles of jeans on, users can quickly narrow down the selection before even viewing the full list or scanning other filter types.

Question 28

What issues arise when important filters are only displayed in the filtering interface?

Answer 28

When important filters are only displayed in the filtering interface, whether on desktop in a sidebar or in the separate filtering interface on mobile, they could be overlooked for several reasons:

1. They could be “lost” among many filter types and values, making their importance less apparent.
2. Users who are not familiar with a particular domain may not know which product attributes are important and may not be able to discern them in the regular filter interface.

Question 29

Why should important filters be promoted to users, and how should the choice of filters be determined?

Answer 29

Promoting important filters to users makes them more highly visible than other filters, ensuring they are not overlooked. The choice of which filters to promote will vary by industry, depending on the type of product and what’s most important to users.

Question 30

Why and how should important filters be promoted to users?

Answer 30

Promoting important filters to users makes them more highly visible than other filters, ensuring they are not overlooked. The choice of which filters to promote will vary by industry, depending on the type of product and what’s most important to users.

Question 31

How does the placement of “Promoted Filters” at the top of product list pages benefit users?

Answer 31

The placement of “Promoted Filters” at the top of product list pages allows sites to add imagery that both attracts attention and depicts the differences between the options shown. This helps users quickly understand and choose between the most important filters.

Question 32

What should be kept in mind when promoting a limited and select number of filtering values?

Answer 32

It should be kept in mind that promoting a limited and select number of filtering values only makes sense if the vast majority of users will have interest in or get significant benefits from applying them.

Question 33

When should filters be promoted at the top of the product list?

Answer 33

Filters should only be promoted when the product list is so large that the vast majority of users are better off applying a filter before devoting any attention to the actual product list.

Question 34

Why are “Promoted Filters” especially helpful to mobile users?

Answer 34

“Promoted Filters” are especially helpful to mobile users because most filters on mobile are hidden until users access the filter interface. This means it may not be immediately clear how to begin to narrow the scope of the list or what filters have already been applied when landing on a product list. Promoting important filters helps users quickly start refining their search.

Question 35

How can “Promoted Filters” reduce the time and effort needed for mobile users to apply filters?

Answer 35

Because filters are typically in a separate interface on mobile, users may need to make multiple trips back and forth between the product list and the filtering interface to tailor the list to their needs, especially if filters are auto-applied once selected. Suitable “Promoted Filters” can reduce the time and effort needed to apply the first filter, helping users quickly begin the process of narrowing down the list.

Question 36

What issue arises when each filter choice is auto-submitted, and how does it affect users?

Answer 36

During testing, it was observed that for a significant subset of participants, the process of applying filters was more troublesome when each filter choice was auto-submitted. When each filter choice is immediately applied and users are returned to the product list, they will have to make an additional trip to the filtering interface for every additional filter they need. This makes some users more reluctant to fully explore their filter options.

Question 37

What risk is associated with a time-consuming and arduous filter application process?

Answer 37

If the process of applying multiple filters is too arduous and time-consuming, users might settle for a product list that contains irrelevant items, thereby slowing down the product-finding process.

Question 38

What issue did test participants encounter with the “Apply” button, and what was the consequence?

Answer 38

Test participants preferred to apply their filter choices with an “Apply” button. However, on some sites, many participants unintentionally left the interface without applying their choices due to issues with the “Apply” button. As a result, they returned to the product list to find it unexpectedly unfiltered.

Question 39

How can the issue of users unintentionally leaving the filter interface without applying their choices be avoided?

Answer 39

To avoid the issue of users unintentionally leaving the filter interface without applying their choices, two key implementation details are important:

1. The “Apply” button should be sticky, ensuring it remains visible as users scroll through filter options.
2. There should be a prominent “Apply” button, not a link, to make it clear and easy for users to apply their selected filters.

Question 40

Why should mobile sites have a sticky “Apply” button in the filtering interface?

Answer 40

1. For large filter lists, users may not be able to see the “Apply” button if it is further down in the interface viewport
2. Autosubmitting filter choices as they are selected is by comparison a cumbersome “pogo-sticking” process
3. Having a sticky element also encourages the use of an always-accessible “Reset” or “Clear All” option for convenience

Question 41

Which filter types had the longest lists of options during testing?

Answer 41

During testing, the longest lists of filter options, which could take up from 8 to 10 viewports, were observed to be in the “Brand” and “Manufacturer” filter types.

Question 42

How can the issue of long lists of filter options be addressed?

Answer 42

To avoid the issue of long lists of filter options, enable users to search within filter types. During testing, participants were able to quickly find filter options when a search feature was available. For example, in a list of over 70 brands, participants only had to type 2 characters for an autocomplete list to appear, allowing them to select the desired brand quickly.

Question 43

How can users quickly scan and find specific filter options in long lists?

Answer 43

To enable users to quickly scan lists of filter options, order the options alphabetically (or numerically). This way, users will know where to look for specific options based on their names. For example, users looking for the “Sennheiser” brand of electronics will know to look towards the end of the list, while those looking for “Bose” will see it towards the top. Alphabetical ordering saves users time, allows them to tailor product lists without unnecessary delay, and eliminates the need to understand the ordering method. Even if popular filter options aren’t at the top, their predictable location in an alphabetized list ensures they can still be found quickly.

Question 44

On a mobile site, what should you do when there are more than 20 options within a single filter type?

Answer 44

Sort the options alphabetically by default, and include a search box