Reset filters or warn the user when a new element is added to a list?

Question

I have a list of elements (displayed as a grid) which can be filtered using various ways : search input, filter by content, sorting... When the user wants to create a new element, it is immediatly added to the list without the page reloading. The problem is that a newly-created element may not match the active filters and so will not appear in the list. The sorting is also a concern: by default new elements are added to the beginning of the list, but if the sorting is configured to display older elements first, then a new element may appear out of the visible part of the page.

I'm not sure what would be the best approach in term of UX to handle this case. Is it better to automatically reset all the filters when a new element is created, or should I warn the user that the element might not appear since some filters are active? I suppose a third solution would be to make the new element ignore the filters and display it at the start of the list.

I should add that the user can configure its settings to set the default filters/sorting, so the list may always be filtered by default.

It's not the actual design, but here is an idea of the layout:

Edit to add more context:

The items of the list are like files (or folders). On the list page, an item displays basic information about an element and can be clicked to go to the element's page. On manage mode (that you can activate with a button), the items of the list can be sorted and bulk edited/deleted. The user can create a new element and filter the list whether the manage mode is activated or not.

And to add even more fun, the "Create" button is not the only way to add element(s) to the list. This can also happen if the user has deleted one or more elements and then undone the action (using Ctrl+Z).

Answer 1

OK, this is a complex issue, so let me first address your concerns from a conceptual point of view.

The problem is that a newly-created element may not match the active filters and so will not appear in the list.

If users have filtered results and some results are excluded due to the filters, then the system is functioning as intended and meeting the users' expectations. Therefore, this is not an issue.

The sorting is also a concern: by default new elements are added to the beginning of the list, but if the sorting is configured to display older elements first, then a new element may appear out of the visible part of the page.

Again, if users have chosen to view older elements first, it implies that they prioritize older information. In that case, the appearance of a new element outside the visible part of the page shouldn't matter to them since they have actively chosen to focus on older elements. Thus, it's important to respect their choice.

However...

Here's why I asked if these elements are important for performing tasks or if they're merely informative. Since it's not clear what the user expectations for the system are, I'll analyze both angles.

First Use Case: User needs to see this information

In this case, despite my previous statements, you'll need to override user settings (filter and sorting) and display the new elements on top. However, it's mportant to clearly indicate why you're overriding their settings. You can achieve this by using small labels or cues as suggested by Kitanga Nday or by Danielillo's proposal of displaying all new items separated from the old ones. If you can't position them at the top, you can simply use a line to visually separate them (easily done using a CSS :after pseudo-element). Please note that both Kitanga's and Danielillo's suggestions are commonly used patterns, so I recommend considering them carefully.

Second Use Case: New items are irrelevant to the user's needs and/or expectations.

In this case, as I mentioned earlier, it's essential to respect the users' decision and display the information according to their selected settings. As long as they can use the system without any issues, everything will be fine.

Third Use Case: Users don't need to see the new items, but you want them to be aware of them.

In this scenario, you can choose either the approach from the first use case or the second use case. The decision depends on the importance you assign to showing the new items. If you believe it's very important, go with the first approach.

If you prefer to be less intrusive, you can go for the second approach, but provide a warning to users indicating the presence of new items and suggesting that they take a look at them. Typically, users pay attention to such warnings to avoid missing out on important information*. However, I advise against being overly invasive because if users notice that their settings are being overridden without a valid reason, they may become desensitized and stop paying attention after a few instances.

*Do not confuse with FOMO or "Fear of Missing Out" dark-pattern, I mean missing out for valid reasons.

Answer 2

I think that the most immediate, understandable and intuitive thing is to have two differentiated fields:

• New items added
• Filtered items

Answer 3

So the idea is to add the new elements to the list of elements with some sort of marker (example below):

But honestly, you don't even need the "new" markers. Just add the items as is, so long as the user can confirm that the item has been added to the list, that's all that matters. Even a little popup would do.

Personally, I'd avoid the markers. They'll complicate the code, trust me. Though, I haven't tried it, so you could give it a shot if you program, will be fun.

Update 4 Jun '23 19:31hrs

As per our discussion, I can see why you might not feel comfortable with the above suggestion. Given that users not seeing the items might still cause confusion.

There are a couple of ways to fix this:

• Make the popup clickable (if you use the first variant, the one with the toaster, the toaster could be clickable). This will then reset the filter and show the new items. Just communicate what clicking on the button/toaster will do properly to the user.
• Separate the filtered list result from the main/complete list of items. This way you can add the new items to it without 'causing too many fun situations (I'm assuming you are using Reactjs for this). But honestly, this might be too much fun for whoever might give this a try. Putting it out there nonetheless, in case you needs it.