0

I am working on redesigning the UI of a filter functionality.

The existing filter functionality offers comprehensive features, including:

  1. Create advanced filter and save filter.
  2. Options to edit, update, “save as,” or delete saved filters.
  3. Clear all filter conditions
  4. Filters must be manually applied via a button.

Identified Issues:

  1. The grouping of the existing design is not intuitive. The 'Update', 'Delete' feature applies to the selected Saved filters, but may have confusion that they apply to the filter conditions.
  2. Users may struggle to distinguish between saving, updating, and saving as new filters.
  3. Redundant fields and info noise: if a user does not load the Saved filters, the Saved filters still exist as blank dropdown.

Here is a wireframe to the existing design: Old Design Wireframe

In my new design, I tried to enhance the management of saved filters and differentiate 'Çreating new filter'New design wireframe

I feel like it is difficult to show the details of creating a filter and the Saved filters themselves as it is too much information. What will be a good practice with saved filters? Any suggestion is appreciated!

Improve this question

3 Answers 3

Reset to default
0

Welcome to the site!

I wonder about the two tabs for new vs. "load saved" filter. Usually, I see a filter area (your "where" text to the "add filter" action) plus some actions:

  • load an existing, saved filter
  • save filter
  • :
  • : (the other actions you have)

I'd get rid of the second tab "load", for two reasons:

  • When you add a title "Unsaved Ad-hoc" (or similar) to your "new" tab, you get the exact same design as on your "load" tab.

  • What is/should be shown when the user clicks "load" for the first time? The next action must be the selection of the filter by name, but before the user has done that, what is shown in the filter area? The selection of the filter to load would happen in a dialog (is this mobile/touch or desktop?).

PS: I'd also change some terminology: "Add filter" is not adding a filter, but only adding a condition or criterion to the existing filter.

EDIT: Regarding your question about changing available actions when saved or unsaved filter is shown: Yes, the actions would need to differ. And no, I don't see this as a problem - actually, many tables show a similar behavior: Regardless of selection, "Create" is active. When only a single row is selected, "Copy" is active. When at least one row is selected, "Delete" is active.

Improve this answer
2
  • Thank you for the feedback! I have an follow-up question of deleting tabs. For instance, in the case of "Load Saved Filters," there are two additional actions—"Delete" and "Update Filter"—that don’t apply to new filters. If I simplify the design by removing tabs, the action buttons displayed when the "Filter Name" field is set to "Unsaved Ad-hoc" versus "Any Existing Saved Filter" would differ. I’m wondering if it’s common to have action buttons change based on the selection in a dropdown field. Does this approach make sense, or is there a better way to organize these actions? Commented Nov 24, 2024 at 0:46
  • @CiCi1009 Please see my edit above. Commented Nov 28, 2024 at 14:30
0

I see two problems:

  1. The actions that are intended for the filter and/or its content are confusing, as a user I wouldn't know which action is for the options of a filter and which for the entire filter
  2. The abuse of buttons with actions

I would aim for a practical solution that tries to solve both problems, reducing the buttons to a minimum.

In the example below:

  • A single button Apply
  • The rest of the options in tool panels divided into two
  • A panel for the "filter content" options: edit, clear, add, delete
  • A second panel with the "filter" options: update, save or save as and delete
  • The only change in the panels is the absence of the "edit" tool in the "New filter" tab

tools panel

Improve this answer
0

Using Danielillo's idea I think you can simplify even more that option, where the buttons on top of the box perform the following actions: Edit, Clear Filter, Copy (that could be used instead of Saved as), Delete and finally Save.

Filter Box

Also, those buttons will be shown only for Load Saved Filter, because for a New Filter you can have Clear, Delete, and Save.

New Filter Box

Improve this answer

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.