3

In the design draft pictured below, you can see a number of events in a list. Users reviewing this list want to be able to add events to other lists: a watchlist or send list -- or both. They also want to be able to reverse their actions, so items no longer show up on the list they added events to in the first place.

What is the best design pattern to use to toggle these actions?

FYI: this is not a form, so it is important that these actions can be performed in real time, without pressing 'Submit' first.

Image shows four list entries, each with four buttons

3 Answers 3

4

I would consider making "Add to watchlist" and "Add to send list" a togglable button:

  • Add to watchlist => Remove from watchlist
  • Add to send list => Remove from send list

This way you are providing the user with a way to undo their action, while keeping clearly distinguished CTAs.

Then the list could be updated after page refresh.

Additional considerations:

  • Add icons like "+" and "x", have a different color for negative state (e.g., red)
  • Try to avoid "wiggle/shaking" of UI elements caused by change in button's label length; a shorter "Remove" may work just fine.
1
  • 2
    This. But I think the "remove" button should be out, otherwise users removing items by mistake won't be able to recover it, not to mention elements position will change.
    – Devin
    Nov 7, 2023 at 18:03
3

Instead of a Button, you can give the Add to Watchlist and Add to Send list as Checkboxes so that they don't have to use a separate button for removing, just unchecking the options will remove it from them. Also, providing a toast message when adding and removing the events list will improve the user experience as well.

1
  1. You can pack activities into a kebab menu
  2. You can use clickable chips to place them in a particular list. And delete using either a cross or a button
1
  • can you expand a bit on your answer?
    – Devin
    Nov 7, 2023 at 17:59

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.