Need a way to position a "change" and "delete" button

Question

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:

^{download bmml source}

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?

Answer 1

Make the delete button a textual link style action (maybe underline on hover rather than always) and keep the primary action as a button.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Twitter for example, does exactly this, but also uses some extra information to physically distance the delete link from the primary action.

This is a recognised ui pattern for primary and secondary actions - for more info:

Luke Wroblewski - Primary & Secondary Actions in Web Forms

Patternry - Primary and Secondary Buttons

Answer 2

You could also move the X button to the picture, which provides a fairly standard Delete item interface, especially if there's a modal confirmation. Care would be needed to make it accessible, though.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 3

You want the edit action to be large and easy to find, while the delete button is somewhat removed, but still easy to find. My recommendation is to make the entire image the 'Edit' button.

On hover change the cursor to a paintbrush, or crop tool, or something representative of your most common editing task. Place an overlay on the image with the words 'Click to Edit'. Keep the delete button where it is, below. If you are targeting Mac users, then an X should be sufficient; that is the standard UI for them. If not, then Delete is probably more appropriate.

I do agree that this solution may not be discoverable however. I personally think that it would be highly unlikely for a user to not find the action as they mouse around the screen, but user testing is needed to confirm that everyone quickly finds the edit action and understands it. Once they discover it, I believe the combination of cursor change, highlight, and the size of the click target makes it a very understandable and usable transition.

Answer 4

The other way around can be using "hover" property. The idea is to get - Change Picture, Delete actions when the user hovers the image area.