I am currently working on an interface for administrators to edit user profiles. Due to space constraints, I am unsure as to what's the best way to position the "Change Picture" and "Delete Picture" buttons. Currently, due to space, I have changed the delete button to just an "x" icon as below:
download bmml source – Wireframes created with Balsamiq Mockups
I can see a few problems with this approach:
- It is easy to accidentally click the x button to delete the picture. While there will be a modal to confirm the action, accidentally triggering it is still annoying.
- The "x" is not explicit about what it does. We could have a tooltip on mouseover, but that is not very discoverable.
I have also considered having the "delete" button to be a text button and place it under the "change picture" button:
However, the issues are:
- There is still a possibility of accidental clicks.
- Delete is not something that is done often, so it should not be on the same level as the primary action.
Can anyone suggest ways to deal with this problem?