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

Improve this question

2 Answers 2

Reset to default
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.
Improve this answer
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. Commented 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.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.