Broken Filters Are One Of The Most Aggravating Design Patterns

Designing For The Comfortable Range # (website builder)

As customers, we employ filters to narrow down a vast number of choices to a more manageable and relevant range. Perhaps a few dozens rather than thousands of payment slips, or a few blouses rather than the full collection. (website builder)

We have specific characteristics of interest, as well as a specific goal, that we need to communicate to the interface in some way. We accomplish this by dividing down our goal into a set of characteristics. The design should reduce the time it takes consumers to move from the default state to the final state, whether that intent is very specific or very generic (when all filters are successfully applied).

Filtering’s Complicated Nature # (website builder)

Filtering may not appear to be a particularly difficult task at first glance. Of course, we can argue for hours about which form elements are best for which types of filters — autocomplete, radios, toggles, select-dropdowns, sliders, and buttons, to name a few — but, in the end, they’re all just basic input, right?

As a result of this link, filters and matching results are frequently asynchronous, as the latter is dependent on how quickly the UI registers an input and how much time it takes to process it correctly.

Now, while addressing all of the fine subtleties of each of these concerns is nothing short of tremendous work, some issues are slightly more aggravating than others, making the whole experience uncomfortable and annoying and, as a result, resulting in high abandonment and bounce rates. Let’s take a look at a few of the most important.

Avoid Tiny Scrollable Panes # After only a few usability sessions with customers who try to use filters on their own device, it’s easy to notice some common annoyances. Longer filter sections with dozens of options are one of the most irritating patterns. They frequently stash away these options in a small scrollable pane that only shows 3–4 options at a time and requires vertical scrolling to navigate.

Customers are frequently prompted to scroll vertically, slowly and precisely, with extreme focus and precision, in these portions. On mobile, they accidentally activated some filters, causing the client to become even more concentrated. The “Brands” filter is a classic example of this pattern, with hundreds of possibilities organised by popularity or alphabetically.

For Sliders, Always Provide Text Input Fallback #

We’ll almost certainly utilise a slider whenever customers may set a big range of values, whether it’s a pricing range in a retail store, the maximum duration of a train trip, or the minimum and maximum coverage for an insurance plan. All sliders have one thing in common: they’re great for encouraging customers to quickly explore a variety of alternatives, but they’re a pain to use when the user has something specific in mind and needs to be a little more precise.

Consider how aggravating it is to raise the price a few dollars, from $200 to $215, or to extend the duration of a flight by an hour. It’s tough to do so with a slider because it necessitates extreme precision, which always leads to blunders and frustration.

It’s not the first time you’ve been there. Perhaps you rush to the store, clicking on all the correct category links, swiping left and right through sub-navigation, and peering eagle eye into that one gleaming new laptop you’re finally ready to commit to.Take a look at the following example. Can you figure out what’s going on?

Never Freeze The User Interface On A Single Input #

When we freeze the user interface on a single input, we intentionally slow down our customers’ ability to articulate their intent. We actually make it more difficult for people to specify what they’re looking for by putting the display of results ahead of the input.

Of course, we don’t know when the user has completed typing, but it’s only fair to ensure that the client never has to wait for an interface to respond during their contact with filters. Now, if we examine the three situations above more closely, we’ll see one similarity. Upon selection, they all apply every filter automatically, blocking any further selection until the new results page appears.

Always display results in a synchronous manner #

We already mentioned that filters and matching results are frequently simultaneous. However, we could split the UI into two pieces and render them both asynchronously. In such situation, they might update matched results asynchronously on each filter input, while the filters remained available and in the same place. The user would see a flash of new content flooding in with each new filter input.

Unless you have a floating “Apply” button close to the filters area, we’ve discovered that this is an anticipated behaviour for many consumers.

Filter Input Layout Shifts Should Be Avoided #

Customers expect to be able to specify a number of filters one after another as long as the interface does not block input. However, depending on where they positioned the filters, they may experience unintentional layout adjustments, in which case they must reorient themselves on the page, scroll up and down to discover where they left off, and then proceed with the next input.

For the second issue, rather than automatically hiding filters that are no longer available, we can disable them and explain why they disabled it (a polite hint might help) and how to re-enable them. Then, they can add the option to “Hide all unavailable alternatives”.

Finally, they may need reconsider the position of applied filters above the filters area. However, there aren’t many places they may live, and a better alternative appears to be the area above the filtering results.

Source: website builder