Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Move filter UI into a toggle-able panel to improve experience on narrow viewports/containers #60696

Closed
jameskoster opened this issue Apr 12, 2024 · 6 comments · Fixed by #63203
Assignees
Labels
[Feature] DataViews Work surrounding upgrading and evolving views in the site editor and beyond Needs Dev Ready for, and needs developer efforts [Status] In Progress Tracking issues with work in progress [Type] Enhancement A suggestion for improvement.

Comments

@jameskoster
Copy link
Contributor

jameskoster commented Apr 12, 2024

Filter panel

Instead of permanently displaying filter controls and selections, we can place them in a toggle-able panel. This will allow users to selectively tidy up the interface which will prove particularly useful on narrow viewports (mobile) and containers (list layout).

We can be smart about when to show/hide the panel:

  • Hidden by default across all layouts when no filters are applied
  • Visible on load when the container is larger than X (Table / Grid layout), and filters are applied
  • Hidden on load when the container is smaller than X (List layout), even if filters are applied
Original issueIn https://github.com//issues/59696 the display of individual chips can be finessed.

But we still need to figure out the display of many filters in narrow containers / viewports. It's not a huge problem right now because the existing data views only have <=2 filters.

However, things like Posts or Media (#55238) can have many filter options, and this experience isn't ideal:

Screenshot 2024-04-12 at 10 12 11

Let's explore how to better display many chips in the filter UI.

@jameskoster jameskoster added [Type] Enhancement A suggestion for improvement. Needs Design Needs design efforts. [Feature] DataViews Work surrounding upgrading and evolving views in the site editor and beyond labels Apr 12, 2024
@jameskoster
Copy link
Contributor Author

The simplest thing to try here would be horizontal scrolling with a slightly different button appearance / layout:

horizontal.mp4
  • Add filter and Reset buttons fixed in position on the right
  • Add filter and Reset become icon buttons
  • Filter chips scroll horizontally

Some other things we might try to save space:

  • Remove the inline x buttons
  • Reduce chip size and internal padding

There are usability trade-offs to this though, so perhaps worth looking at separately.

@jameskoster jameskoster added Needs Design Feedback Needs general design feedback. and removed Needs Design Needs design efforts. labels Apr 12, 2024
@jameskoster
Copy link
Contributor Author

Another option would be to restrict display to X number of chips, and hide the others behind a + x more link:

Screenshot 2024-04-12 at 13 54 59

@jasmussen
Copy link
Contributor

The horizontal scrolling is a common practice on mobile devices and scales well. If paired with the scrollbar mixin, it could work well and potentially be simple to implement, at least as a starting point.

@SaxonF
Copy link
Contributor

SaxonF commented Apr 19, 2024

Something else we tried early on is if on mobile or list view, condense filters down into dropdown. We'd have an indicator "1" on filter icon. Relates a little to previous discussions about hiding view filters by default.

image

@SaxonF
Copy link
Contributor

SaxonF commented Apr 19, 2024

Horizontal scrolling is also nice though and an improvement over what we have.

@talldan talldan moved this from 📥 Todo to 🏈 Punted to 6.7 in WordPress 6.6 Editor Tasks Jun 24, 2024
@jameskoster
Copy link
Contributor Author

Containing all the filters in a single menu turned out to be a dead-end in terms of accessibility, but a similar approach might be to place filters in a dedicated panel, accessed by a toggle button.

Filter panel

We can be smart about when to show/hide the panel:

  • Hidden by default across all layouts when no filters are applied
  • Visible on load when the container is larger than X (Table / Grid layout), and filters are applied
  • Hidden when the container is smaller than X (List layout), even if filters are applied

@jasmussen jasmussen moved this to Now in Design priorities Jul 3, 2024
@jameskoster jameskoster added Needs Dev Ready for, and needs developer efforts and removed Needs Design Feedback Needs general design feedback. labels Jul 5, 2024
@jameskoster jameskoster changed the title Improve filter chip display in narrow containers / viewports Move filter UI into a toggle-able panel to improve experience on narrow viewports/containers Jul 5, 2024
@jorgefilipecosta jorgefilipecosta self-assigned this Jul 5, 2024
@github-actions github-actions bot added the [Status] In Progress Tracking issues with work in progress label Jul 5, 2024
@jasmussen jasmussen moved this from Now to In Dev in Design priorities Jul 31, 2024
@github-project-automation github-project-automation bot moved this from In Dev to Done in Design priorities Aug 5, 2024
@github-project-automation github-project-automation bot moved this from 🏈 Punted to 6.7 to ✅ Done in WordPress 6.6 Editor Tasks Aug 5, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] DataViews Work surrounding upgrading and evolving views in the site editor and beyond Needs Dev Ready for, and needs developer efforts [Status] In Progress Tracking issues with work in progress [Type] Enhancement A suggestion for improvement.
Projects
Status: Done
Status: Done
4 participants