Inline scroll areas cause a myriad of usability issues, and should therefore generally be avoided. This article gives a detailed analysis of the question-
What is the best way to deal with long lists of select values within a web page (e.g. a list of 10+ filtering values)?
Truncation And Hidden Content
Truncation is better than the two alternatives of either displaying filtering values in their full length (preventing users from getting an overview of their available filtering types) or using inline scrollables (which suffer from a host of interaction issues). However, truncation really is the lesser of 3 evils, with usability issues of its own.
When designed poorly, truncation can be downright harmful as it may mislead users to think they’re seeing all available options when in fact they are seeing a truncated list. Proper truncation design is therefore critical, although the truncation interface still adds complexity to the page (the user must make distinctions between collapsed/expanded sections and links with different functionalities.
A. DISPLAYING ALL FILTERING VALUES
The problem observed with displaying all filtering values in one long list is that it makes it impossible for the user to get an overview of the different filtering types available.
During testing, users would see, for example, a brand filter with one to three screens of brand filtering values within — making it impossible to get an overview of the additional filter types offered below. The majority of test subjects completely overlooked the additional filter types below the long list of filtering values and were generally overwhelmed by the long filtering sidebar stretching two screens or more. On a positive note, our product list and filtering benchmark shows that only a small fraction (2%) of major e-commerce websites currently use this pattern.
B. USING INLINE SCROLLABLE AREAS
Some lists of filtering values are given their own scrollable area (i.e. the area can be scrolled independently of the rest of the page), causing several interaction problems for the majority of test subjects, as well as conceptual challenges for a smaller group of subjects.
The most significant problems (which are also difficult to solve) are the following:
- Scrolling within scrolling (i.e. nested scrolling panes) turned out to be not a particularly easy concept for users to grasp. The inline scrollable area would be placed within the larger scrollable area of the web page — requiring the user to understand the difference in order to avoid problems.
- Users who wanted to apply a filter could not get an overview of all filtering options because the scrollable area was constrained in height. The usability problem, thus, shifted from not getting an overview of filtering types to not getting an overview of filtering values within each type.
- Inline scrollable areas often caused “scroll-hijacking,” whereby the user would scroll the web page when they wanted to scroll the filtering list or vice versa. The user had to be constantly aware of their mouse cursor’s position whenever they wanted to scroll. In other words, a dominant page-browsing pattern on the web, vertical page scrolling, would be hijacked. (On touch devices, wide inline scrollable areas can trap the user, making it almost impossible to scroll the page instead of the inline scroll area.)
C. TRUNCATING FILTERING VALUES
The last pattern we tested turned out to perform better than the other two. Truncation has the benefit of giving users an overview of the different filtering types. This is important because a lack of one often caused our subjects to make poor filtering selections simply because they were inclined to interact with the filtering values that were first in the very long list of filters. The other main benefit of truncation is that, when users find a filter type of interest, they also have the option of getting a full overview of filtering values within that type (by clicking the truncation link). Truncation, therefore, combines the benefits of the other two methods.
Guidelines For Proper Truncation Designs
The consequence of users mistaking truncated lists for “the full list” are grave, and was the cause of site abandonments during testing, as users were unable to find the filtering values they were looking for. Indeed, overlooking collapsed content is a general problem in web design, and is also observed for tab designs, carousels, accordions, mega drop-down menus, etc., as explored further in UI- Proper Indicators for Hidden Elements.
It’s therefore vital that the risk of overlooking truncation is reduced by utilizing a combination of the 6 above-mentioned guidelines for proper truncation design:
- Display up to 10 values before truncating
- Use an appropriate link style
- Make sure the proximity is right
- Include a visual indicator
- Consider visually fading the last value
- Never truncate just a single value.
During testing, the following 6 design elements of truncation design were therefore observed to have a profound impact on the performance of the truncation design :
1. Display up to 10 values before truncating.
During testing, including at least 6 filtering values before truncating the rest seemed to be the lower limit (displaying less would confuse users, as they didn’t see any logic in truncating such as shortlist and therefore simply assumed the list to be displayed in its entirety). Displaying as many as 10 filtering values before truncation was observed to perform decently, although 15+ options began to cause issues, depending on the number of filtering types available. Generally, if there are fewer filtering types, it’s possible to include a few more filtering values for each without impairing the user’s ability to get an overview of the filtering types.
2. Use an appropriate link style.
The link style of the truncation link is vital in making the user notice that it’s a clickable option and that it carries a different function from the rest of the filtering values. Ideally, the default site-wide link styling is used for the truncation link to indicate it’s clickable, especially if the filtering values don’t use the same link styling, as this will help provide extra contrast and further indicate that the two types of links invoke different functionality.
3. Make sure the proximity is right.
The link should have more padding than the filtering values, to indicate that it’s not just another value. Yet it needs to be positioned in close proximity to the filtering type it belongs to, so users don’t mistake it as either a separate link or a link that belongs to any subsequent filtering type placed below. In short: ensure proper “affiliation by proximity.”
4. Include a visual indicator.
You may tap into the metaphor of a collapsed section of content by using an appropriate visual indicator. The most commonly used visual indicator is a “plus” + or an “arrow” v icon. Using icons or characters further increase the link’s visual distinction from the other filtering values.
5. Consider fading the last filtering value.
Gradually fading out the last value can help further indicate that the list extends beyond the visible options. This way the user can literally see that the list is incomplete (as some of the options are fading). Furthermore, the gradient fade can help draw the user’s attention towards the truncation link.
6. Never truncate a single value.
It simply doesn’t make sense to truncate a single value since showing the truncation link will take up the same space as just showing that value. It’s only when 2+ options are truncated that the desired space efficiencies can be realized (and thus justify the truncation interface). Programmatically this can be achieved by simply offsetting the truncation logic by one so that the threshold is actually 2 items off the list size that invokes a truncation interface.
Currently 30% of e-commerce sites use overly subtle truncation indicators resulting in their users having a difficult time finding (or even altogether overlooking) the additional thumbnails available to them.
While sometimes necessary, truncation designs are fraught with usability pitfalls. This is why solution #1 proved to perform so well during testing – by eliminating the truncation you eliminate its potential pitfalls.
Truncate long lists of filtering values (10+), rather than displaying all values or using inline scrollable areas. To ensure that users notice the truncation, display up to 10 values before triggering the truncation, display default values that users are most likely to recognize (i.e. the most popular), and style the truncation link to set it apart from the filtering values.
Sources: Baymard , Macy, Limeroad , Conversionxl