Filter by Tag when clicking on Tag is disorienting

[privatemaker]

Is your feature request related to a problem?

When a new Deck user first clicks on a Tag in a card the filter is applied to all cards on that list.

All other cards seemingly disappear very quickly and the only change to the UI is the Unfiltered icon changes to Filter

Due to the abruptness of this and the fact there is only one very small detail in the UI which changes, is easy to not notice or understand what happened.

This creates a feeling of discomfort and concern that data has been deleted or such.

Describe the solution you'd like

Show a stronger UI presence that filters have been applied to this view.

Perhaps a word next to the icon + a counter, like:

[Icon] No Filters
[Icon] 2 Filters

Describe alternatives you've considered

Visually showing Tag filters (limit 3 or so) with colored background in the topbar, perhaps on the left of the search field.

[juliusknorr]

Thanks for the suggestion. We don't use counters for this anywhere in Nextcloud as far as I'm aware.

Currently we switch the icon depending on if filters are set or not:

• No filter active
• Filter(s) active

However I see that this is not enough and can easily be overseen.

Talk indicates active filters with a primary color button style, so maybe we should do the same:

[fitrahmunir]

Hi @privatemaker @juliushaertl I would love to work on this

[juliusknorr]

Feel free to tackle this. Pull requests are always welcome. If you have any question don't hesitate to reach out :)

[privatemaker]

We don't use counters for this anywhere in Nextcloud as far as I'm aware.

Is there a strong reason for this other than uniformity? In certain cases (like Filters) it's really helpful and a common industry standard to communicate state of things to a user. Take the counters in Github's repo tab bar which are essential UX:

Talk indicates active filters with a primary color button style, so maybe we should do the same:

@juliushaertl I'm not sure what you mean, I don't see any filters in the instance of Talk I use. Maybe post screenshot?

cc: @nextcloud/designers

[juliusknorr]

Is there a strong reason for this other than uniformity? In certain cases (like Filters) it's really helpful and a common industry standard to communicate state of things to a user. Take the counters in Github's repo tab bar which are essential UX

For the active filters I think a bare number does not give any additional information that a clear indication that "some" filters are active wouln't already give.

Talk indicates active filters with a primary color button style, so maybe we should do the same:

@juliushaertl I'm not sure what you mean, I don't see any filters in the instance of Talk I use. Maybe post screenshot?

Sure, I was referring to this button which is what #5299 implements:

[privatemaker]

I think a bare number does not give any additional information that a clear indication that "some" filters are active wouldn't already give.

While I agree that a bare number is not very meaningful, what I suggested after considering what is best is the following:

[Icon] No Filters
[Icon] 2 Filters

Thanks for the screenshot from Talk. That must be a newer version from what I regularly use, given the differences of Talk vs. Deck apps being quite different I don't think it will have same jarring effect I describe.

What I currently see in Deck on my Nextcloud instance:

From the screenshot posted in #5299 it appears to only add a gray circle around the icon. That is not nearly strong enough visual change or communication to address the issue in my opinion.

[nimishavijay]

Agreed that we could use a more prominent indicator when there are filters applied, here's what trello does:

Before filters have been applied:

After filters have been applied:

• The "filter section" is highlighted with a background color
• In the filter section there is an indication of how many cards match the filter (this was super confusing tbh, I kept thinking that this number was the number of filters applied, but for people who are trello power users this may be expected? 🤷)
• In the filter section there is also a "clear all" button
• There is a subline for each column title indicating how many cards match the filter

How about taking some of these features and adapting it to Deck? :)

• highlighting the filter icon in the style of Talk
  • consistent with our style like @juliushaertl mentioned
  • also would make sure that the position of other elements in that row don't shift depending on if filters are applied
• adding a subline to the column title indicating how many cards match the filter
  • "2 cards match filter" so an explicit message like @privatemaker suggested
  • not in the corner of the screen, so users of big screens will have another indication in case the filter button color change is missed

What do you think? :) sort of a combination of both your ideas @juliushaertl @privatemaker :)