2

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:

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.

elements

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).

4
  • A simple mockup will help post an answer
    – Danielillo
    Jun 3, 2023 at 13:35
  • @Danielillo I added an image of the layout.
    – Arkellys
    Jun 3, 2023 at 13:47
  • what kind of information do the cards have? I mean, are the new items important for the user (or the stakeholder, or the expectations for the system) or are they just informative (like a blog post or a new product?)
    – Devin
    Jun 3, 2023 at 21:20
  • @Devin I edited my question to add more context.
    – Arkellys
    Jun 4, 2023 at 7:59

3 Answers 3

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.

1
  • Thank you for analyzing this. I can absolutely not separate the new elements from the others and I think it's important for the user to see them, as they may want to access them immediately. I decided to reset the filters/sorting when a new element is added (or re-added) to the list and I'm notifying the user about it with a toast/snackbar (only when there were active filters).
    – Arkellys
    Jun 7, 2023 at 6:33
2

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

  • New items added
  • Filtered items

enter image description here

1
  • Thank you for the suggestion but I can't do that.
    – Arkellys
    Jun 3, 2023 at 15:16
2

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

redesign of original poster's image

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.

redesign with toaster popup redesign of OP's design with popup

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.
3
  • 1
    The problem is that if I don't reset the filters, the new elements may not appear in the list at all. Adding a confirmation message on create is not a bad idea thought, but I'm not sure it's enough to avoid confusing the user if the new element doesn't appear.
    – Arkellys
    Jun 4, 2023 at 8:02
  • @Arkellys No trust me it's enough, especially if you add a loader for anticipation. The user will know, my items are in. Though I can see why this can still be confusing, you are told that your items are in but you can't see them. You can add a button on the popup with the caption "Click here to see them" that resets the filter. This way you give the user the choice to see them. Let me update my answer Jun 4, 2023 at 16:30
  • @Arkellys I've updated my answer, hope it's helpful. Also remember that the button/toaster clickable area shouldn't be "in the user's face", this isn't an action you users to do frequently. But now that raises the question, how likely is it, that a user will want to create a new entity and also be filtering 🤔 Jun 4, 2023 at 16:40

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.