2

I have a sidebar which shows all links that users saved. Since it's just a sidebar, I want to keep it as simple/clean as possible. Thus I use the cross icon next to the link for deletion.

Option 1

pros: easy to know which link to delete

cons: delete buttons not align

Option 1

Option 2

pros: easy to know which link to delete, delete buttons align

cons: it seems weird to put the delete button at the beginning

Option 2

Option 3

pros: delete buttons align, also align with the collapse icon, which looks good.

cons: delete buttons are far away from the link and may cause the wrong deletion. (Add a border around the row or separate each row using different color can mitigate this problem but the sidebar looks messy)

Option 3

Overall I prefer option 3 but how to ensure users click the right delete icon?

==============================================================

Updated:

Thanks for all your suggestions, my final design is as below: enter image description here

2

You could put a strikethrough over the link if someone is hovering over its corresponding delete button. You could also highlight it in some other way which makes it obvious that that is the one they are deleting. For some HTML/JS/CSS information on how to do this, see here. In general, this website (w3schools) is a great reference place for HTML/JS/CSS.

  • The strikethrough is a good tip, but what option do you recommend? I'm not sure you covered in your answer the issue with the best placement of the buttons. – Madalina Taina Aug 16 at 2:01
  • 1
    @MadalinaTaina - I thought the OP's question was "how to ensure users click the right delete icon?" That's what I was answering. This applies to Option 3, which, by the way, is the best option (IMO)... – Voldemort's Wrath Aug 16 at 12:38
1

Test the designs ;)

I think Option 3 is closest to the best answer. By keeping the icon away from the information, accidental deletes should be lower. The one change I would make is I would NOT have the text extend as it is shown. The delete icon should always be fixed in the upper right of the first row. This places it in a common region for all elements.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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