I have a form for uploading attachments (PDFs). After uploading them, there is a section (as seen in the image below) allowing you to rename the attachment, view it, or delete it.

The edit icons seem to have usability issues. They are hard to notice due to the high contrast nature of the view button, delete icon, and attachment name.

What I am wondering is if it is better to place the edit icon directly next to that which it edits, or next to the delete icon (to create an actionable area)?

And what objective reasoning is there to support that choice?

enter image description here

4 Answers 4


There are a couple of areas within the layout that is probably causing some issues.

  1. You have both edit and delete actions laid out in different fashions
  2. Your edit button is very faint and difficult to spot

To fix this, I would recommend implementing an actions area which would clearly show what possible actions can be done for each attachment line item like so.

enter image description here

To support this choice -

  • The actions area is much clearer now with titling as well as familiar icons to support this.
  • The colour of the icon is a lot stronger and much more readable to the user

Hope that helps.


I don't agree with the others about the edit and the delete needing to be closer. The edit,as I understood, is for the attachment name only. The delete is for the entire attachment. There is no option to edit the entire attachment. So - the delete action refer to the entire item and it shouldn't look like the item's name edit action. I suggest merely making the edit icon darker, and that's it. The best way is to try both kind of solutions together in A/B testing, and simply see which edit will be clicked more. In high number of users the percentage of "edits" should be distributed evenly if the A/B testing is random.


The view and edit functions should be closer together. The attachment button takes up a lot of real estate.The disclaimer can be by itself. The trashcan icon is more explicit.

cleaner layout


Change the color of the pencil so it contrasts more. The blue is okay, just darken it a bit so it has similar visual weight to the X.

Move the pencil much closer to the cross. Right now your buttons are all over the place; one left, middle, right. By moving the edit next to delete you create sort of a modification bar.

I'd also make the view/detail button (the V) wider, the whole title text or even the entire bar, to make it a larger button.

(Edit) basically what straddled said while I was distracted.

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.