Perfecting the Product Filtering Experience Across Mobile E-Commerce Sites & Apps
First things, first — let’s explain the key components of product filtering. Products comprise of “attributes” and “values”.
Attributes are the physical characteristics of a product — it’s size, colour, fabric composition, weight, etc. Values, on the other hand, are the variations of those attributes. Here are some examples:
- Attribute: Size
- Values: 8, 10, 12, 14, 16, etc.
- Attribute: Colour
- Values: Red, Orange, Yellow, Green, Blue, Indigo, Violet, etc.
- Attribute: Fit
- Values: Petite, Tall, Plus Size, etc.
Both attributes, and their values, are assigned to a product, during its initial setup for sale online. This task would normally be carried out by somebody very familiar with the product. In a larger-sized organisation, this may be a member of the Category Team, or a Merchandiser. For example, it would make more sense for a Womenswear Merchandiser, to assign attributes and values to a new range of dresses that have arrived into stock, more so, than say, us, UX professionals. This individual would have in-depth knowledge about the characteristics of the products in question, whereas we would ultimately be doing it blindly.
Product Taxonomy
The process of identifying the range of attributes and values for new products, is part of a much bigger process in defining the overall, product taxonomy (i.e. the classification / organisation of products). This would definitely require the assistance of a UX professional, or more specifically, an Information Architect (IA), who understands the browsing habits of the user, and the way in which they conduct their search for products.
Shaping the product taxonomy is definitely not something to be taken lightly, though. This can easily, and very quickly, escalate from a seemingly straightforward job, to a large-scale project, which needs to be methodically planned and considered, then carried out, with a meticulous eye for detail.
It’s not uncommon for larger-scale organisations to conduct an audit of their product taxonomy, on a relatively frequent basis. Think about the number of products, a company like Argos or Boots have to add to their respective sites and apps, on a weekly basis. Over a 6-month period, that could be hundreds, if not thousands, of new items.
When you’re dealing with such large numbers, chances are, mistakes will have been made when those products were originally assigned attributes and values. An audit may cover a sample of products, or the whole inventory. It can be a tedious and time-consuming task, but if you want users to be able to discover your products, it’s imperative to invest the time and resource, into completing this work. Think of it, as a short-term pain, for a long-term gain.
Common Mistakes that Detrimentally Affect the Product Filtering Experience
Incorrectly Tagged Products
As outlined above, assigning attributes and values to products, is a task that must not be rushed. It requires focus from colleagues who have extensive knowledge of the products, in question.
Failure to do so, may result in products inadvertently being represented in a set of product listings / search results, unrelated to the filter criteria supplied by the user. The risk of making a mistake, is greatly increased, when dealing with the pressures of updating lots of new products.
In one of the worst-cases, I’ve seen firsthand, a sex toy was inadvertently featured in a set of search results, for which the value of, “Children’s Toys”, had been applied, during filtering. Fortunately, the issue was spotted and addressed promptly, before it became known to the public. Again, this points back to the importance of concentrating very carefully on which attributes and values you associate with a product, during its set up.
At this point, it’s worthwhile also mentioning that this is one of the biggest cause for complaint in app reviews. This concern, comes only third, to remarks raised about app crashing and lack of stock availability. Suffice to say, it’s a real bugbear for app users, which can easily be avoided.
Too Many Attributes & Values
Choice can be a great thing to offer users, but equally, too much choice, can have an adverse effect. Give the user too broad a range of attributes and values to consider during product filtering, and they may feel somewhat overwhelmed — bamboozled, with information overload.
In addition, if you allow a user to be too specific in their selections, it increases the likelihood of them subsequently being presented with zero results, and becoming frustrated with the experience, as a result.
Too Few Attributes & Values
Contrary to the above, by offering too narrow, or limited a choice, you run the risk of restricting the level of refinement. In turn, this would mean the user has a lot of noise to sift through (in the results that remain), to find something of interest.
Psychologically, it may also inadvertently appear to the user, as though you have a somewhat a limited product range (compared to what you actually have), because there are so few filter options available.
Must-Have Features for Product Filtering
Ability to Select Multiple Values Across Attributes
Users should be able to select more than one value, across any given attribute, during their product filtering efforts. This is a staple requirement, and one that is expected by the user, given how common it is across other e-commerce sites and apps.
Unfortunately, there are still a small number of retailers, who fail to fulfil this requirement, in turn, only allowing the user to select a single value, for each attribute. This is primarily down to the method in which they’re allowing the user to make that selection — radio button groups.
Radio button groups are intentionally designed, to allow for only one selection to be made, from a group of options. Checkboxes, on the other hand, allow for multiple selections to be made. The simple answer here, is not to use radio button groups, as the method for filtering products. Checkboxes work well — but they’re not the only option.
Fashion retailer, Mango, break the cardinal rule outlined above — and then some. Not only do they use radio buttons to represent the values, belonging to some of their key attributes, they go a step further, in overruling the default behaviour of a radio button group, by allowing for multiple options to be selected. This is bad practice, and should not be copied.
Ability to View the Number of Search Results Matching the Filter Criteria
It’s a good idea, to allow users to find out what the resulting impact of their filter selections would be [on the search results], before they commit to applying those options. As such, there should be a clear indication as to how many results will subsequently be returned, if a user were to select a specific option value.
Likewise, the user should also be informed of the total number of results that will ultimately be returned, for all of the filter option values they currently have selected.
For example, let’s imagine I was using a fashion retailer’s app (in this case, ShopStyle’s iPhone app), and I was looking for a dress, so decide to perform a keyword search, in the app, for “Alice + Olivia Dresses”. I may then decide that I want to refine the list of results, to only show dresses that are both coloured blue, and are available in a size 12.
In this scenario, 992 results are returned. That’s way too many for me to manually browse through. Before selecting any filters, I’d therefore like to know how many results are available, that match each of my requirements.
The ‘Colour’ value of “Blue”, suggests 103 results, whereas, the ‘Size’ value of “12”, suggests 466 results. Upon selecting the “Blue” value, the number of results listed beside the ‘Size’ value of “12”, has now decreased to 54. That’s because there are only 54 dresses that match both the selected criteria of “Blue” and “12”.
As I select the ‘Size’ value of “12”, the summary displayed at the top of the filter panel / area, now confirms that, if I were to apply those two selections, the original list of 450 results, would now be reduced to 54.
This approach offers a benefit, in knowing what the resulting impact of the user’s selections will be, on the number of product results that will subsequently be returned, before committing to applying any of those filters. The user therefore knows upfront, how much additional control they have remaining over the refinement of their product results, before reaching a point, where they’ve narrowed their options down too far, and therefore have too few results, to review and compare.
Ability to View a Summary of Filters that Have Already Been Selected
When selecting multiple values belonging to different attributes, it’s easy for your users to forget, or lose track, of what they have already selected. It’s therefore important to provide some sort of summary, to help remind the user. This may either be listed at the very top of the filter list, or perhaps, alongside / beneath each attribute label — or better still, both.
Ability to Clear Selected Filter Option Values
Calls-to-action should be provided to clear selected filter criteria, at both an individual value level, as well as at an attribute level, where all selected values belonging to that attribute, would be cleared. This allows the user to remove values without necessarily needing to start their product filtering efforts, from scratch again. That said, they still have the option to do so, if they wish to.
Ability to Dismiss the Filter Panel / Area
After looking at the range of filter options available, there may be occasions where the user decides that they now don’t actually want to select any values, and instead, want to return to the unrefined list of results. To cater for this, it’s a good idea to make sure there is a prominent call-to-action, to cancel and dismiss the filter panel / area.
Ways to Further Optimise the Search Filtering Experience
Consider Providing an Adequately-Sized Hit Area, for Selecting Individual Filter Option Values
We all use our devices differently — some one-handed, others with two hands; some right-handed, others left. In turn, we need to cater for users being less-than-precise, in their ability to hit the attribute, or value, of interest — especially those trying to do it one-handed. Therefore, try not to scrimp on size, when it comes to designing how these filter elements are to be interacted with. In doing so, it makes it that little bit easier for the user to correctly select the attribute or value, they intended to tap, rather than inadvertently hitting one, they didn’t mean to.
In their Human Interface Guidelines for iOS, Apple advise giving tappable controls a hit target of about 44 x 44 points. If your image asset is 72ppi (pixels per inch), then one point will equal exactly one pixel.
Contrary to this, Google’s Material Design guidelines for list components, recommend a height of between 40dp and 48dp for lists, specifically. A “dp” (density-independent pixel), is equal to one physical pixel on a screen, with a density of 160.
Further to a point raised earlier about checkboxes, if you do decide to go down the route of using these, don’t expect the user to exactly tap the checkbox to make their selection — especially if it’s an uncomfortable thumb stretch to do so. Instead, consider extending the hit area, to span the width of the viewport, so as to allow the user to tap the label that sits beside the checkbox, for example, which in turn, would have the same effect as tapping the check box.
Consider Allowing for Attributes to Be Collapsed & Expanded
As I eluded to further above, it can be difficult to find that sweet spot between having too few attributes and values, and too many. Due to the limited amount of screen estate available on smartphones, you’re likely to be introducing some element of scroll on these devices, either way. By providing an expandable / collapsible panel for each attribute, you can alleviate this.
One option, may be to load all attribute panels in a collapsed state, to try and ensure they’re visible in the immediate viewport, on first load of the filter panel / area. There’s an element of risk here, in that that you’re hiding content (in the form of the values) from the user. For the most-part, hiding anything from the user, is generally deemed bad practice — not always though.
The other option is to load one, more, or all, attribute panels in an expanded state, by default.
There’s going to be some element of trade-off, whatever approach you choose to follow. Whilst there’s no right or wrong answer, I would advise undertaking research with your users first, to better understand their preferences, to eliminate any such guesswork.
Consider Ordering Attribute Values, Alphabetically
Common-sense suggests that listing values in alphabetical order, will go a long way to helping improve scannability. Users are likely to be, better able to find values of interest, quickly, as they’ll have a good idea as to the approximate position of those values in the list, without having to work their brain too hard.
Ordering attributes, alphabetically, may also be worth consideration. A word of warning though — speaking from experience, business stakeholders can be very precious about this, and may have more of a desire to order these, based on what they believe to make the most sense, commercially.
Whilst there may be some value in debating this further, if push comes to shove, it’s better to accept the latter as a compromise, rather than it risk the possibility of them also forcing commercial ordering of the values too, which would be more of a worry, from a usability-perspective.
Consider Using Swatches to Support Colour Values
Just like pictures, colours also speak louder than words. Rather than just, list each colour value as a literal, text label, why not show a swatch representing that colour, beside the label. In doing so, it can help to avoid any confusion around unfamiliar-sounding colours, like, “Ecru” and “Mink”, for example. Another great way to increase scannability too.
It may also give greater clarity to pattern prints, for example, that may otherwise be too difficult to describe / portray to the user, using a text label, alone.
Consider the Use of Sliders Very Wisely
Sliders often feature in product filter implementations across mobile, enabling the user to define a price range, by dragging a min and max marker to the desired thresholds. Whilst their design allows for a great degree of refinement accuracy, they don’t work particularly well in mobile browsers, like Safari.
Using Safari, as an example, it’s all too easy to inadvertently overswipe across the left or right-hand edge of the page, whilst interacting with the slider. In turn, this behaviour will take the user back, or push them forward, to a previous page in the history stack, which is far from ideal. Given, “Price” is like to be one of the more commonly-used attributes for filtering when shopping, you don’t want to cause any usability issues here, as a result of a poor design.
A feasible workaround would be to provide a min and max input box, allowing the user to type in their preferred threshold values. That way, they still have a great degree of control, over their desired limits — whilst reducing the likelihood of any such frustration, that may come with using a price slider.
Conclusion
The success of the product filtering experience, in part, lies in the design of the filter panel / area, and the functional capabilities that are offered through this.
Ultimately though, it’s the work required behind the scenes (i.e. the definition and setup of a user-centric product taxonomy), that will determine the level of success and satisfaction, in the user being able to find what they were looking for, by refining the original product listings / search results.
Even so, those seemingly minor UX enhancements, can go a long way to improving users’ perception of the product filtering experience, especially across mobile, where distractions, are often beyond our control.
Care and patience is required when assigning attributes and values to new products, with a consideration for what different users may perceive the characteristics of those items to be. As UX professionals, we need to work closely with our Category Teams and Merchandisers, to help educate colleagues about how the decisions they make during product setup, directly influences the way in which users are ultimately able to find those items, through search and product filtering.
Originally written and published to www.uxchap.com on April 28th 2016, by Joe Pendlebury.
One Last Thing…
If you liked this article, please applaud it 👏 and share it with your friends, work colleagues and followers. Remember, you can clap up to 50 times — it makes a big difference for me in helping to focus my writing on what you guys enjoy reading the most.
You’re also welcome to follow me on Medium, on Twitter, or even connect with me on LinkedIn. Thank you for your support! 😊
