8

I am currently working on a pretty complex (and convoluted, I'll admit) table in terms of filtering. One of the options for filtering allows the user to filter on an item that is displayed as a column and I'm trying to figure out the least confusing / jarring way to update the table for it.

This is hard to describe in words, I'll be honest so here's a GIF showing the functionality.

enter image description here

I added blocks to hide some data so pay no mind to the floating grey boxes :).

Currently, only the selected items for that filter are shown in the table and the rest are removed. This has the benefits that the user doesn't have to see or think about information that they don't care about, but then they have to re-adjust to what is effectively a "new" table. The other option is to gray out the unselected columns so the information is still there but taken out of focus.

What method from the above, or some other if you have ideas, do you think would confuse the user the least?

5
  • For building, area, task, frequency - how many potential values could you see in each of those selection areas? Oct 19, 2018 at 7:10
  • On average, building will probably have 10 items, area will have 50, task will have 75 and frequency will have 7. Don't worry too much about area / building / task filtering though, we have some enhancements planned like adding a search feature for each of those lists.
    – Murad Khan
    Oct 20, 2018 at 14:11
  • Was not understand why other filter values are getting change when you change your frequency selection.
    – Rishi Shah
    Jul 1, 2022 at 4:50
  • Curious to hear why you think this would confuse the user? Nov 21, 2023 at 11:50
  • Q: Are there only 9 columns in the table (1 Scope of Work, 1 Total FTEs, and 7 frequencies), or do you have more columns that you have obscured from this view?
    – ikartik90
    Apr 24 at 20:32

5 Answers 5

1

If the functionality you are building has a "Save" button, then the user could configure the columns to be displayed and then apply this to the table. The benefit would be that you don't have to refresh it instantly and by doing so the problem you mentioned where the user has to "re-adjust to a new table" after every action is solved.

Other tools I know that do it this way are e.g. Azure DevOps or Jira. There you configure the columns of a table (what to show in which order left-to-right) and apply this configuration afterwards. Then you filter over these columns. If there are no values to display for a column you could show them as e.g. n/a, "no values", ... which could also be an important information to the user. This way you could separte the configuration of the columns for the table from the filtering of the data in the table.

0

Best option is to automatically readjust the table after user has selected filters. Check Outlook's email pane in details view where if you add/remove certain columns, pane gets readjusted with whichever columns are visible.

0

I think that in this case graying out the unselected data is good. You don't need more space, so hiding them is not needed. Additionally as you said if you gray them out, the other columns won't change their location.

Tables usually adjust and show only the columns that user have selected it is helpful in most cases. As I said it's makes space for the remaining columns. The data can be then more readable. However you don't have enough content in your cells to worry about it. The only issue here is that if the user wants to show the table to somebody else the graying out will look unprofessional. I have a feeling that your table filters are for providing info for the user, not a feature for making reports, aren't they?

0

This is the most basic filtering possible... Even if you use checkboxes for the multiple selections, it is the same scenario... It is natural to display just the results for the active query.

0

I suggest you :

1. Don't use skeleton for your refresh (if it takes less than 1s)

it creates a clipping/flashing effect that I personally find disturbing -> use more like soft transparency light gray filter to induce disable effect during loading and add your spinner hover it.


2. Only refresh labels and text not the entire table


3. You should consider stacking your filter on a sidebar to avoid scrolling pain with your filter and have a bigger height table.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.