nl-kat-coordination icon indicating copy to clipboard operation
nl-kat-coordination copied to clipboard

Design for (applied) filters, deleting & saving.

Open RomijnHumanoids opened this issue 1 year ago • 6 comments

Design a way for (applied) filters to be shown on pages with a lot of actionable content like the 'all reports' tab.

  • Based on existing design with tags
  • Clear to the user
  • (re)think the option to delete and favourite applied filters and how to incorporate it into the design.
  • Prevent button/action overload.
  • ensure it is flexible enough to work with designs that have less actions as well
  • What happens when you can only select 1 option? How do we distinguish those from other applied filters?

RomijnHumanoids avatar Feb 07 '24 14:02 RomijnHumanoids

Would these filters not look the same as the design we already made for the object list filters?

underdarknl avatar Feb 07 '24 16:02 underdarknl

@underdarknl In theory, yes, but when we added the existing filter design to the reports page, we realised it doesn't really work with the elements that are already on the page. Therefore we decided we need to reconsider some elements of the filter design to ensure it works with more complex layouts, such as the one on the reports page.

NoemiOverdijk avatar Feb 12 '24 09:02 NoemiOverdijk

FOR REVIEW: https://www.figma.com/file/QRL8085Z827bNdO0bIDdFL/KAT-%7C-For-review?type=design&node-id=3522%3A42502&mode=design&t=3DiR5ZjGXLWfmW9f-1

RomijnHumanoids avatar Mar 25 '24 10:03 RomijnHumanoids

New design with advanced filter (query) possibilities integrated: https://www.figma.com/file/QRL8085Z827bNdO0bIDdFL/KAT-%7C-For-review?type=design&node-id=3697%3A41290&mode=design&t=uTUicIghqWljwhMW-1

RomijnHumanoids avatar Apr 04 '24 09:04 RomijnHumanoids

After presenting this in the stakeholder meeting and discussing it further there is an updated full (advanced) filter flow: https://www.figma.com/file/EmUOOLqoFVB50syfDjSX9u/%E2%9C%8D%F0%9F%8F%BC-KAT-%7C-For-Review-%7C-Filters-%26-Query?type=design&node-id=2303%3A221755&mode=design&t=Ki1ix9UD47uunQxB-1

RomijnHumanoids avatar Apr 17 '24 11:04 RomijnHumanoids

In progress: feedback verwerken en wat andere layout uitproberen.

RomijnHumanoids avatar Apr 23 '24 08:04 RomijnHumanoids

After multiple reviews this is the overview of the new filters, advanced filters, and the flow of adding presets. https://www.figma.com/design/EmUOOLqoFVB50syfDjSX9u/%E2%9C%8D%F0%9F%8F%BC-KAT-%7C-For-Review-%7C-Filters-%26-Query?node-id=2392-92490&t=BpjZs6GASvoCMjf4-1

RomijnHumanoids avatar Jun 05 '24 13:06 RomijnHumanoids

Implementation ticket: https://github.com/orgs/minvws/projects/7/views/1?filterQuery=implementation&pane=issue&itemId=66406268

RomijnHumanoids avatar Jun 06 '24 14:06 RomijnHumanoids