2

I want to incorporate a delete button/option on an accordion (I don't want the delete button to be hidden to users since it's important for the function of my design.)

Currently, I'm not sure of a good place to put it without bloating the accordion.

In the screenshot:

enter image description here

Option 1 has the delete embedded in the "more options" kebab, but I'm not sure if users will find it obvious to delete.

Option 2 places the delete, next to the dropdown, but then it's unclear where to put a duplicate option.

Option 3 places all the icons on the accordion, but I'm weary it might look too bloated.

Option 4 places the delete on the left side, but my concern is that this design isn't as conventional.

What are your thoughts? Maybe there's a possibility of embedding delete or duplicate options within the expanded accordion?

Improve this question
2
  • @maxathousand yes~
    – turtlefish12
    Aug 4, 2020 at 22:30
  • 1
    My vote is option 1. Not sure you are going to have many people struggle with that, who wouldn't also struggle with the other options anyway. Also, nobody want's accidental deletes!
    – musefan
    Aug 5, 2020 at 7:47

2 Answers 2

Reset to default
1

Asking your users how they make decisions on an entity will give you an answer....

Option 1: Separates view manipulation (expand/collapse) from CRUD actions (duplicate + delete).

Using option 1 hides functionality, but makes it less likely for users to trigger an action due to slips of the cursor. This can prevent errors, but assumes they know enough without expanding the pane to act on it.

Option 5: Embedding actions within the accordion content pane This option comes down to what users need to know before deleting or duplicating.

  • Does the title of a collapsed accordion give them enough info to know if they should take action?
  • or, do they need to examine the contents of an object to understand if it's actionable?
Improve this answer
1

There are multiple ways to solve this, and the solution largely depends on the context & which action the user will use frequently. To create a more flexible layout for accordion will be to move the chevron(^) to the left along with the name. Free-up the space for other actions on the right. If delete is the primary action, keep the icon outside & the other actions be it duplicate or anything else can be inside the kebab menu.

Additional tips:

  1. Use different states for expanded & collapsed accordion.
  2. Use trash icon instead of "x". People sometimes confuse "x" with close
  3. If Delete is the primary action, make sure you get a confirmation from the user before it gets deleted.

For fun you can read https://www.nngroup.com/articles/accordions-complex-content/ to get more insights :)

Improve this answer

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.