Problem

The new header simplifies its layout by grouping elements as the viewport goes smaller, but at the same time, it hides the counter label of filters applied when visitors play with the feature.

This element helps users to remember the criteria set to narrow the results, and to convey the filter reset when shifting to a content type that does not match the filter criteria. For this second case, it is crucial to be clear that filters are no longer applied in this new content type.

Due to these two reasons, it becomes necessary to bring back the value and make it consistent in both the filter button and the drawer.

Related issues

The problem was identified by @zackkrida in WordPress/openverse-frontend#1861

Proposal

Desktop flow. lg

Mobile flow. sm

Mockups

Desktop lg	Mobile sm

Description

Now that we can separate the counter from the string, replacing the filter icon with the counter solves the shaking effect of the width change in the header.

The design keeps the 24px box for both filter icon and the counter across all breakpoints. For the filter button, the resting state has dark-charcoal-10 as background color to match the search input, whereas the active state has no background.

In the case of the drawer, both tabs have an icon visible all the time. The “Content type" tab shows the active content while “Filters” works as its desktop version to reach more consistency. Since both tabs show an icon, the label’s text style is label regular to reduce the layout contrast.

In lg breakpoint, the counter has a background just in the icon-size area, while its active state has a background in the button-size area, as shown below.

Since the design proposes to move the counter number into the drawer’s tab, there is no need to show it in the "Clear filters" action. In that vein, we reach consistency with its desktop version by showing the same element.

Feedback

The changes impact the drawer mostly, yet the tweaks make the flow more clear and consistent across breakpoints. What do you think of the idea?

Design assets

• Design presentation
• Mockups in Figma
• Prototype. xs breakpoint