You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
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?
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.
lgFilter.counter.XL.mp4
Mobile flow.
smFilter.counter.SM.mp4
Mockups
lgsmDescription
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
24pxbox for both filter icon and the counter across all breakpoints. For the filter button, the resting state hasdark-charcoal-10as 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 regularto reduce the layout contrast.In
lgbreakpoint, 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
xsbreakpoint