7

I have a list of items to be displayed to the user. The user is able to select an item and configure its properties. The user can also filter the list based on some of those properties. If the user configures an item so that it should no longer be in the list based on the current filter, what is the best way to proceed? I can think of three possibilities.

  1. Remove the item as soon as the user confirms their changes, risking confusion because the item they just edited has vanished.
  2. Leave the item in the list until the user next alters the filter, even though the item no longer conforms to the current filter.
  3. Pop up a warning that the item is about to disappear, forcing the user to click an acknowledgement before the item disappears.

What it the best method from a user experience perspective? Are there better options?

7
  • Hi Morris, would it be possible for you to share a visual to help promote understanding of your question?
    – Johnny UX
    Commented Dec 2, 2020 at 19:45
  • @JohnnyUX Yes, that would have been a good idea. Apologies. Current design in too much of a mess right now.
    – Morris
    Commented Dec 3, 2020 at 10:58
  • Don't remove the item to give users the opportunity to edit their changes. Add a button to let them refresh the filter manually.
    – jazZRo
    Commented Dec 4, 2020 at 10:03
  • @jazZRo: I agree. Do you want to flesh out a full answer, or shall I? Commented Dec 4, 2020 at 15:33
  • @MichaelZuschlag Feel free to add an answer, I had no intention of doing this.
    – jazZRo
    Commented Dec 4, 2020 at 15:42

3 Answers 3

4

A few options, one complex one and two simple ones:

Option 1:

  1. Wait a short time, maybe 800-1000 ms
  2. Filter controls (or filter description if controls are hidden) and Line Item both blink twice with red highlight, with the timing perfectly synced so they're blinking "together".
  3. There's a brief pause where nothing happens
  4. Line item zips to the left (left is important as it implies "backwards")
  5. The list items below the removed item move up to "settle into place"

Steps 2-5 take like 1500 ms in total.

The following story is not consciously recognized by the user, but their subconscious will use this story to make sense of what happened:

  1. pause: just-edited Item is settling into its new state/identity
  2. blinking: Item and Filter are having an "argument"/"conflict"
  3. pause: Item is deciding what to do
  4. zip left: Item runs away
  5. list shifts up: The list "closes ranks" after the offender's been pushed away

The overall story is "After changing, Item had to leave"

Obviously that whole story would be way too dramatic if it were interpreted consciously, but as a series of little animations it provides the intended conscious interpretation: that item was removed from the list because it didn't fit.

Option 2:

Make the edit form for Item aware of the current filter. Highlight any field values as they're editing that cause a filter violation. Just above your Save button put put the message "Heads-up: After save this item won't match the filter and will be hidden". ("hidden" is key word to avoid them thinking it was deleted)

Option 3:

Filter and item blink once together, then item fades out and list closes up.

1
  • All great suggestions. Thanks! Gives me useful inspiration.
    – Morris
    Commented Dec 3, 2020 at 10:59
3

Removing Items is Disruptive and Burdensome

The problem with the item disappearing is that the user may not be done with it. After making the change to the property, the user may want to look at (or change) other things in the item, but now it’s gone, and it can be hard to retrieve (does the user remember the exact ID of the item in order to find it?). What if the user wants to see the effect of changing the property on the item (i.e., it happens to affect other things about it)? What if the user needs to change two properties where either one by itself makes it disappear? If the user accidentally changed the property, it could be a real pain to correct, unless you have a particularly good Undo feature. Disappearing items can be visually disruptive too. If the users are working their way through the list, the disappearance of the item they’re working on can make them lose their place in the list. The users would recognize the item they just changed, but they often won’t notice the identity of the next item in the list.

It may help to highlight the properties that are in the filter criteria, like Luke Griffiths suggests, but (a) unless it’s a binary field, the system can only tell the user that a change might make the item disappear, and (b) in any case, the system is forcing users to work in a certain order. That is, the users have to be sure that editing a certain property is the last thing the users do with the item. That requires thinking, planning, and remembering that imposes a cognitive burden on the users. The system can wait to remove the item until the user saves the changes (if you have an explicit save command), but now the users have to be careful not to save until they’re “done.” You’re still forcing the user into a de facto mode, rather than letting them do whatever they want whenever they want, plus deferring a save could lead to lost work.

Mark Non-fitting Items

Filtering and editing items are often have separate goals. The user filters to select items to work on. Once they’re working on them, they often don’t not care if items continue to fit the filter or not –it’s just a “list of items I’m working on,” not a “list of items with balance due” or whatever.

Nonetheless there will be cases where the user could be confused by items that don’t fit the filter. For example, the users may return from lunch and think an item still has a certain property value since the users remember (or see) the filter setting, but forgot they changed the property. The solution is to mark each item in the list if it fails to match the filtering. As commenter jazZo suggests, the marking itself is also ideally a light-weight button that “applies” the filter to only that item (i.e., removes it), so the users have the option of selectively getting non-fitting items off the screen if they're a nuisance. The users should also have an easy way (say, one or two clicks) to re-apply the filter to all items at once (e.g., a button at the top of the list).

The button is probably best in the left margin of the list. In this case, I’d recommend it only appear for items that don’t fit the filter –to minimize clutter, do not show it for other items, not even in a disabled state. If your users rarely use the app, then the button should be labeled with something like “Refilter” or “Filter Out.” That will probably be enough to signal that the item doesn’t fit the current filter and that clicking the button will get rid of the item. If your users regularly use the app, and there is thus both justification and opportunity to learn about the app, then you can save some space by using an icon to label the button. A standard “Refresh” icon seems to work well:

Circular arrow refresh icon on light button

Same Thing for Sort

BTW, you should do the same thing if changing a property changes where the item is in the sort order. Do not jump the item to its new place in the list. If focus follows the item, then the users have lost their place in the list, and they have to scroll/scan to find the next item they want to work on. If focus doesn’t follow the item, then the users have lost the item, and now have to scroll/scan to try to find it if they want to continue work on it. Window 10 Windows Explorer moves files when you rename them, and I find that behavior especially annoying. Instead, mark the item as not fitting the sort order with a button that moves the item to its new location.

1
  • Thanks! A comprehensive description of the issues at hand, with a good solution suggestion.
    – Morris
    Commented Dec 7, 2020 at 10:09
0

How is the user working? I assume: he sets up a filter, attacks a few entities, makes changes to them, then goes back to the filter or is done.

If that sounds reasonable, I think a good way is to mark all entities which have been edited as "edited". Make them bold, for example. This way the user sees which ones he just edited and can infer himself that the filter may be off with them.

Do not mark just the "non fitting" entities. Than this is an odd case and will suggest there is some error that needs investigation.

1
  • Our users are a diverse group and it is difficult to predict how they will use this feature! However, I think it likely that the majority will use the filter to set up a "to do" list and then work through the list, making edits until the list is "done".
    – Morris
    Commented Dec 7, 2020 at 10:13

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.