Page MenuHomePhabricator

Design a way to better discover and navigating between filtering and results
Closed, ResolvedPublic

Description

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.

The problem

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.

Proposed solution

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:

Filter-navigation-initial.png (768×1 px, 278 KB)

Filter-navigation-open.png (768×1 px, 220 KB)

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):

Filter-navigation-highlight.png (768×1 px, 283 KB)

Related Objects

StatusSubtypeAssignedTask
DuplicateQgil
ResolvedQgil
ResolvedQgil
OpenNone
ResolvedJohan
ResolvedTrizek-WMF
Resolved jmatazzoni
Resolved DannyH
Resolved DannyH
Resolved jmatazzoni
Resolved jmatazzoni
ResolvedMooeypoo
ResolvedMooeypoo
ResolvedSBisson
ResolvedMooeypoo
ResolvedMooeypoo
ResolvedMooeypoo
ResolvedMooeypoo
ResolvedMooeypoo
Resolved Mattflaschen-WMF
ResolvedSBisson
Resolved jmatazzoni
ResolvedMooeypoo
ResolvedMooeypoo
ResolvedMooeypoo
Resolved jmatazzoni
ResolvedMooeypoo
Resolved jmatazzoni
ResolvedSBisson
ResolvedMooeypoo
ResolvedMooeypoo
ResolvedMooeypoo
ResolvedPginer-WMF
Resolved jmatazzoni
Resolved jmatazzoni
OpenNone
ResolvedMooeypoo
Resolved jmatazzoni
ResolvedMooeypoo
ResolvedMooeypoo
DeclinedNone
ResolvedMooeypoo
ResolvedMooeypoo
Resolved Mattflaschen-WMF
Resolved Mattflaschen-WMF
Resolved jmatazzoni
ResolvedNone
InvalidNone
ResolvedSBisson
ResolvedMooeypoo
Resolved jmatazzoni
ResolvedSBisson
ResolvedCatrope
Resolved jmatazzoni
ResolvedTrizek-WMF
ResolvedTrizek-WMF
ResolvedTrizek-WMF
ResolvedTrizek-WMF
ResolvedTrizek-WMF
ResolvedTrizek-WMF
ResolvedTrizek-WMF
Resolved jmatazzoni
ResolvedCatrope
ResolvedCatrope
ResolvedSBisson
ResolvedHalfak
ResolvedTrizek-WMF
Resolved jmatazzoni
Resolved jmatazzoni
Resolved jmatazzoni
ResolvedTrizek-WMF
ResolvedCatrope
ResolvedPginer-WMF
Resolved jmatazzoni
DuplicateNone
ResolvedPginer-WMF
Resolved jmatazzoni
ResolvedPginer-WMF
ResolvedPginer-WMF