The filter in the apps. Concepts, UX patterns, and design guidelines

• Lev Manovich, The Language of new media.

Finding information has always been difficult; even today, each of us devotes a lot of time to this activity, on our smartphones or computers. Yet, on the Internet, an infinite amount of information is available to us, apparently so easy to reach: but there are too many.

And then we filter them. The filter metaphor accompanies us on e-commerce apps and sites: it is a widespread need for the user, a widespread function on various platforms.

The filter in the world of interface design is considered a pattern, or a generalizable solution to a recurring problem. We can, therefore, say that the designer community has identified a standard, accepted, consolidated to design the filters, at least in a context like the mobile apps’? Absolutely not.

Very little is needed to verify how homogeneous the solutions at the level of user experience (UX) and user interface (UI) are. Why?

We decided to break it down to analyze it. We closely observed and classified the most frequent patterns and best practices; we have analyzed strengths and weaknesses, noting how different solutions actually seem to respond to different problems. The filter metaphor, apparently unifying and clarifying, hides the complexity of different objectives.

The articulation of the filter concept, based on Norman’s 7-stage model, has allowed us to analyze the phases of interaction between the user and the system in detail and therefore of the filtering operation: at each stage, we associate best practices. By analyzing the micropatterns hidden inside the “filter” pattern, we tried to identify guidelines that adhere to the specific objectives of the people rather than reproduce the filtering function uncritically and standardized.

We are surrounded by information, and we are constantly having to select a portion of it: our processing capacity is limited. This selection is often guided by attentional processes, which allow us to shift our attention to some information present in the environment rather than to others; this happens on various perceptive and sensorial levels: we filter visual, auditory information, etc.

Typically, this process is represented with the filter metaphor: like an intelligent filter, it lets only the relevant stimuli pass. It is apparently a “passive” process, a neurophysiological reaction of the brain to external or internal sensory stimuli, influenced by the number of cognitive resources available.

The filter metaphor is also widely used in digital interfaces, where there is a need to represent, above all visually, abstract concepts or functions. When we apply the filter metaphor to an interface, however, we are not referring to the same cognitive process described above. The situation is a bit different for a number of aspects:

• The amount of information on the web that can be accessed is potentially unlimited;
• The type of information accessible is different from an ecological context and constrained by the way it is presented (for example, visually, tactilely, etc.).

These variables (quantity and type of information) condition the way in which we must filter information in the physical world or on a digital interface: these are very different cognitive efforts.Filtering information in a digital environment allows you to selectively and consciously choose the type of information or its salience, based on our interests. At least, we like to think that way.

On the contrary, in an ecological context, this selection is often guided by decisions that are not entirely conscious.
But how do we choose to filter and re-filter information? What logic does the user rely on to do an advanced search?

There can be three ways that a filter can work, and to represent them, we can rely on the Boolean logic. From a strictly rational point of view, it is possible to filter information based on the union of two or more criteria (OR), based on the intersection of two or more conditions (AND) or on the basis of the logical operator NOT, or the denial of the conditions (see Figure 1. Logical operators).

Fig. 1 Logical operators

It is good to take into consideration that even if the logical operators appear clear, often in everyday life, the user does not dwell on the difference between the OR and AND approach in linking the filters.

If on an e-commerce site I apply the “dress” – “blue” – “size 48” filters, I expect to find only the blue dresses of size 48. But if I apply the filters “news” – “sport” , will I only find the sports news? Or the double list of news and sports? Is it correct to call it a “filter”?

The standardization of the actions or functions offered to the user contributes to usability, learning, and memorability. The concept of the pattern was devised by Christopher Alexander to symbolize a solution to a recurring problem: a door is a pattern because it can be the solution to the problem of getting out of a building [1]. Similarly, the term pattern has become widespread in the world of interface design, for which the libraries of UX and UI patterns proliferate online. They are not only design guidelines but also the tools to accelerate design decisions based on “what others do.”

Over the years, important features that we find in numerous mobile apps or websites have consolidated into a consolidated grammar, in order to help the designer but also the user.

But to what extent is it useful to adhere to these standard solutions? In particular, in the design of a filter system, a recurring problem, does it make sense to identify ad hoc solutions?

In reality, the various UI patterns and the best practices that are spread in the professional community seem to contradict the same spirit of these “collections”: the high number of libraries of patterns suggests a direction opposite to the general solution to a problem. If it is so difficult to define a “right way” to design a filter, probably the problem lies in the definition of the filter concept: which changes according to the type of content and industry.

To clarify the filter function in the world of mobile apps, 29 mobile apps, belonging to different content categories, have been taken into consideration. (see Table 1 – Analyzed apps and classification).

Table 1 – Analyzed apps and classification

For the purpose of our analysis, the filter metaphor has been broken down. Those elements of interaction between the user and the interface that play a role in completing the goal of filtering content have been identified.

1.1 As I access the filter

A first aspect of the problem is the accessibility to the filter functionality. The way in which a function is accessed is the basis of the efficiency of this function. If the user fails to access an important function such as filtering a long list of information, the user experience will be in the minimum, negative and will increase the chances that this user will never return to that app again.

Consequently, the problem of accessibility to the filters can be further broken down.

Figure 2. Various filter representations

1.1.1 Representation of the filter function

One aspect to consider when designing a graphical interface is how to represent a feature. Many guidelines suggest to opt for a combined display or to include icon + label, rather than just the icon or the label alone.

The option to use the icon alone is not advisable: the meaning can be misunderstood. Furthermore, there is a very standard icon for filter functionality, which has achieved popularity with the famous hamburger menu. The most used icons are the funnel (see Booking) or the slider (see Zalando). For example, the slider icon is used by some apps (as in the below example of Cinema Time) to access the settings.

Figure 3 – Cinema Time

1.1.2 Arrangement of access to the filter function

Another aspect to consider when designing a graphical interface is: where should this feature be?

In mobile apps, the filter option is usually on the upper right corner. Over time, users have learned to recognize this behavior and probably expect it in that position: it is located at the top and right in 80% of the analyzed apps.

In other cases, especially for the travel and food apps, it is found on the below part. Typically, apps that place access to the filter feature at the bottom position the filter next to the map. This type of configuration puts the user in a position to filter the information based on their actual geographical location (see Figure 4. TripAdvisor and Open table position the access to the filters at the bottom).

Other apps include the filter in the “search”: when the user performs a search he is asked to fill in or select fields in order to obtain “filtered” results based on the criteria of his interest. Once the user has defined the criteria for his search, he will not be able to access the “filters” again to modify these criteria but will have to start a new search from scratch. In other words, the filter function does not have an autonomous location within the interface but intersects with the search one. This behavior can be found on apps like segugio.it, Immobiliare.it, where a boundless database of options must be tailored to the user’s needs to be “navigable”.

Figure 4. TripAdvisor and Open Table place filter access at the bottom

1.2.1 Displaying filter options

The way the user views filtering options is another aspect to consider. The two most commonly used modes are: by means of a modal window (pop-up) or on a new page.
Most of the analyzed apps (23) opt to display the filters that can be activated on a new page, while the remaining part (6) uses a “pop-up”.

The advantage of using the pop-up is to allow the user to have a simultaneous display between the filtering choices and the feedback on the results. From a cognitive point of view, this choice is considered very appreciable, as the users have direct and punctual feedback between the actions they perform and the effects that these will cause.

The choice of the pop-up, with the consequent co-presence of action and feedback, is particularly frequent in the app of the “shopping” category.

Figure 5. Amazon uses a view with a “modal” window

Figure 6. Skyscanner uses a new screen view

1.2.2 Relationship between “orders” and “filters”

Many sites or mobile apps tend to include sorting functionality within the filter functionality. It is not a particularly correct solution from a logical point of view, as ordering and filtering information are two distinct actions that produce a different result. Ordering means having all the elements of a whole according to a certain criterion. There can be numerous ways of ordering: in alphabetical order, by increasing price, etc.

On the other hand, filtering means displaying only certain elements of a given set. In this case, too, there can be multiple criteria according to which to filter: for example, see all the red clothing items.

Despite this, the inclusion of the order functionality within the filter function is very frequent, and many believe that this mode is appreciated by the user because it would consider the two associated functions. We suggest integrating the two functions, especially when the semantic category on which to filter coincides with the sorting criterion: filtering for a certain price range, it may make sense to sort the results by price.

The analysis performed on the 29 apps showed that:

• 10 apps include the sorting feature under the filter functionality
• 12 apps do not include the sorting feature under the filter functionality
• 7 apps do not have the sorting functionality

Figure 7. Zalando keeps the two features separate

Figure 8. Yoox includes the sort function inside the filter function

1.2.3 Organization of filters in order of importance

Filtering information means choosing some, discarding others. For this reason, the way in which the criteria for choosing this information should follow a hierarchy, that is, it is a good practice to organize them according to the importance and priority they could have for the search. To achieve this hierarchy, it is advisable to place the most important filtering criteria in the first place, so that more attention will be paid to them by the user.

But how to establish the importance of the filter criteria? This decision can be made from two sources: from the designer of the service/app or from the user. Whoever designed the service can define a hierarchy that will then influence the way the user applies the filters, considering that more attention will be paid to the initial parameters, rather than those placed among the last positions. But at the same time, it is true that the users know what they want to filter based on what they need. So the other option is to propose a hierarchy based on the mental model of the users.

In this second approach, the label used for this criterion is very important.
Most apps present a “static” list of categories to filter on, which means that for any search the user will do, they will always have to filter by pre-established categories. E-commerce apps like Amazon and eBay adapt the filtering categories and the relative label based on the actions carried out by the user so far, dynamically reconstructing the filter structure according to the position in the navigation process.

Figure 9. Amazon – different filter depending on the search made

1.2.4 Promote important filters

It is considered the best practice to highlight and facilitate access to the most important filters. This is particularly true in the case where the filter functionality allows information to be filtered according to many criteria. The choice of filtering criteria to be promoted must be based on both business and user objectives. The way in which the most important filters can be emphasized are many: they can be displayed separately from the other filters, placed in the highest positions, identified by a different color.

Figure 10. Foursquare- adopts the best practice of promote important filter

1.2.5 Displaying the filters that can be activated

To visualize the activatable filters, we recall the concept of “affordance” (Gibson, 1979) [2]. With the term affordance, Gibson wanted to emphasize that the physical characteristics of the objects invite an action, such as a stone invites to be grasped or a panic bar invites being pushed [3].

Equally the concept of affordance can also be applied to the characteristics of the elements present in an interface: the way in which a key is represented can invite the user to perform an action, like a click.

In our case, a list of criteria on which to filter must call and invite the user to take actions. The filtering criteria can be displayed in a more opaque color (example: just eat), as if they were disabled, and then call up the tap action to enable them; a switch invites the user to move it (example: TripAdvisor), a button invites the user to press, the slider invites the user to select a range (as in the case of Zalando).

Figure 11. Just eat – selection

Figure 12. Tripadvisor -switch

Figure 13. Zalando – button and slider

1.3 I have filtered. And now? The feedback, and any subsequent actions

Applying a filter implies a change in the display of the contents. Consequently, the users will expect to see a change or expect to view only the information and elements that interest them.

All the analyzed apps satisfy this assumption and this confirms the functioning and efficiency of the filter function.
1.3.1 Displaying active filters (is the feedback clear?)

When filters are applied to our search, it is not enough to display only the information we request: we also need to know constantly what kind of information we have filtered. In other words, an interface should always return feedback as a result of the action performed by the user, even more like this, when what you are viewing is only part of a larger whole.

But why should it be so important to provide feedback following user actions? Shouldn’t the users know what action they took? Despite the great abilities we think we possess, such as keeping in mind a large amount of information or doing more things at the same time, we actually have an innate tendency to overestimate our abilities. In fact, multitasking is particularly tiring, and we can’t even keep in mind a large number of contemporary information.

According to Miller’s famous law, the net of the many variables that can influence, we should refer to a number between 5 and 9 information. Consequently, a user who has selected for example 5 filtering criteria, after viewing and reading the details of at least 3 products, he probably will not remember which filters he had selected a few minutes before. And at that point, you won’t know if you had actually correctly selected the price range or brand of the product you are looking for.

It is, therefore, a good choice to provide clear feedback on what is selected; this will also help to lighten the working memory, as well as creating a situation in which the user feels he has everything under control.

Feedback can be given on two levels: immediate feedback on the filter selection (confirming the action of the selection: for which criteria I chose to filter) and permanent feedback on the page where the contents are present (as a filter reminder applied: for which criteria I filtered).

There are many solutions for communicating immediate feedback to the user on the selection made; some apps include a check next to the selected box (Zara), others include a color change (Kayak).

Even the feedback on the content page can be proposed in different ways: some apps show the number of filters that have been applied, close to the filter access mode, as in the case of Kayak.

Figure 14. Zara

Figure 15. Kayak

Other apps, after selecting the filters, highlight the filter label selected on the results page, as in the case of Vivino. Basically, this is the best way to give feedback to the user, very clear and constantly visible.

Figure 16. Vivino -feedback with label

As already indicated, the choice to show the filters in a modal has an advantage in terms of feedback: the pop-up overlaps a part of the content, and many apps like Amazon, eBay and Zara simultaneously show the change of the underlying content on the base of the filters that the user chooses.

1.3.2 Remove the active filters and select new ones

During an advanced search, the users may need to change their search criteria, either because they made mistakes when selecting them, or because they selected too restrictive parameters that did not satisfy the search, or simply because the users have changed their mind. Consequently, for a good UX, the users should be facilitated in removing old filters and selecting new ones.

Some of the analyzed apps require the user to access the filters section again, deselect the old ones, select new ones and confirm their decision; this series of steps requires a greater number of interactions (intended as the number of clicks or taps) and more time to reach the goal. Other apps show the filters that have been selected, allow the user to remove the filter or select new ones in a more immediate way, with fewer interactions and less time to reach the goal. This is the case of Yoox, which allows you to remove every single filter and select new ones, without necessarily having to go back to the page dedicated to the filters.

Figure 18. Yoox

1.4 Permanent filter and customized filter

“Permanent” or “customized” filters are rarely found and difficult to find in apps, and most of those analyzed do not have these options.

They are two concepts that tend to be associated with each other: a customizable filter should also be permanent (in a variable time interval) and vice versa; the permanence of a filter can be considered as a personalization, as it has remained stable on the basis of the choices made by the user.

For this purpose, in this analysis, the apps that use the results of a structured search as a “permanent/customized filter” have been considered.

In fact, Booking, Airbnb or Trivago store search parameters such as the place, dates, and the number of travelers; this does not happen however when you want to do an advanced search and then use the filter functionality.

Zalando, instead, suggests the user a series of filters that have been applied previously, for that type of search/product, recovering a “memory” of a custom filter.

Figure 19. Booking

Figure 20. Air bnb

Figura 21. Trivago

Facile.it, instead, adopts a different strategy: returned users who re-access the app will see the previous search with all the filters applied.

Figure 22. Zalando

Figure 23. Subito.it

The filter functionality can be broken down and analyzed to guide the design decisions more effectively. Following the 7-stage model proposed by Donald Norman, it is possible to break down the problem in terms of the fulfillment of the actions and the evaluation of the consequences on the system.

Norman 7-stage model to guide the design of a filter system

In fact, the feedback cycle begins when the users form a purpose, from which they will subsequently form and plan an intention which they will then concretize with the action proper to their own. Once the action is completed, the users will perceive and interpret the state of the world, which will make them able to assess whether they have achieved their initial purpose or not. In view of this feedback cycle, it is possible to consider some of the aspects of the interface previously exposed as necessary for the successful interaction between the users and the system.

So let’s try to associate Norman’s 7-stage model and how this can guide the design of a filter system.

1. Forming a purpose
At this stage, the user will have to focus on the purpose: to perform an advanced search to find exactly what he is looking for, in the shortest time possible. Consequently, he will have to establish the goal of filtering the contents. Already at this preliminary stage, the first problem arises: does the user want to filter content and then do it by relying on the “filter” function or by scrolling and using the “order” function? In fact, these are usually integrated into a single feature.

2. Forming an intention

Once the user has formed a purpose, he proceeds with the formation of an intention, so the user will feel the need to rely on some functionality present in the interface he is facing. To facilitate the formation of the intention, the filter function must be clearly visible and easily accessible to the user; consequently, the way in which the filter is represented is important, where it is located and if there are filters in evidence.

3. Specifying the action

The user will proceed with the planning of the actions he will do to reach his goal: I see the “filter” item at the top right, I click on it, I access the filters, I select those that interest me.

4. Perform the action

The user proceeds with the execution of the actions he had previously planned. Also, in this phase, there are elements of the interface that must be taken into consideration, such as the display of the filters that can be activated and the methods of activating the filtering criteria.

5. Perceiving the state of the world

The user sees that something has changed in his interface, the list of products is different, there are fewer elements, and even some graphics have changed. Providing clear feedback is essential for optimizing the user experience.

6. Interpreting the state of the world

The user, after perceiving that the elements and the contents have changed, will have to understand and interpret whether the selected filters have been applied.
Also, in this case, clear and visible feedback supports the interpretation of the state of the world.

7. Evaluating the result

The evaluation phase is very important because, at this stage, the user will be able to tell if he has achieved his purpose or not and if he is satisfied with it.
If the user has not achieved his initial purpose or is not satisfied with it, or still understands that he must define a new purpose, it is important to remove the activated filters and select new ones. These actions should be simple and quick.

The work that we did was aimed at analyzing and studying the most widespread solutions for the design of the filter systems, to then be able to define the characteristics and the UI patterns possibly applicable to a multiplicity of contexts.

Defining the international model between the user and the system (in our case, the filter function in mobile apps) has allowed us to suggest UI patterns more precisely, centered on the needs of the user.

Trying to generalize some conclusions, we can say that:

• The icon + label combination appears to be the best choice to avoid misunderstandings since a purely graphic representation mode is not consolidated;
• It is likely that the user expects the filters located at the top right;
• Highlighting the most important filters (promote important filters) can facilitate the planning of the filtering actions;
• The logic according to which the filter works (AND, OR, NOT) should be transparent to the user
• The display of the filters within a modal rather than in a new page allows to apply filters simultaneously and to observe a change of the content in the background;
• Affordance is important: each filtering criterion must invite you to perform an action.
• Immediate feedback is important: the user must know that the system has recognized its action, so it is necessary to foresee it in the selection micro-interactions (ticks, color change, slider, etc.);
• It is advisable to show feedback regarding the activated filters, clearly visible in the interface. The most explicit option is a label that identifies the active filter;
• Highlighting the activated filters allows you to select or deselect them, making the interaction more dynamic, easy and immediate.

[1] Alexander, C. (1977). A pattern language: towns, buildings, construction. Oxford University press.
[2] Gibson, J. J. (1977). The theory of affordances. Hilldale, USA, 1, 2.
[3] Tale concetto fu portato all’attenzione della comunità dei designer da Norman, che poi ne ha discusso le criticità, e lo ha tendenzialmente sostituito con quello di signifiers.