As part of the new designs proposed for the Recent Changes page (T142785), users are provided an integrated entry point for filtering. During research we found several issues that affected the fluency of users moving between filtering and the list of results.
Even for users that were able to filter and get the results they were interested in, the following points of friction often appeared:
- Getting into filtering. The search bar represents an input area with some tags that can be added as you type, but it is not clear that users understood it that way. Often users clicked on the search icon instead of the text input area (which was pushed to the right by the initial tags that are selected by default).
- Getting out of filtering. In the current approach the filtering panel takes most of the screen to allow the user to focus on filtering. this made it hard for users to "click outside" to exit.
- Anticipate the effects of filtering. As users applied filters there was some uncertainty on the effect that those were having on the results. This could lead to users not noticing that they already restricted results too much until they close the panel.
The proposed solution is to clarify the entry point for filtering as well as reducing the width of the filtering panel so that users have visibility and access to the list of results.
- Separating the active tags from the filter search helps to provide a more persistent entry point to access the filter panel preventing tags to get in the way. Filters are provided a dedicated action to clear them all since deleting them quickly with the "backspace" keyboard key is no longer possible since they are out of the input element.
- Making the filter panel not to occupy the full width of the screen will help to exit the panel and provide more visibility on what is happening to the results as users filter.
Below you can see the proposed filter area with the panel closed and open:
The mockup below shows an example with highlights, including examples of highlight-only criteria as well as highlight-and-filter (a combination only possible if T147351 is supported):