2

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:

mockup

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:

mockup

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?

4 Answers 4

3

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

mockup

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. enter image description here

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

1
  • I found it interesting that not making any distinction between primary and secondary actions actually performed better. It really shows the importance of tests.
    – Alvin
    May 2, 2012 at 10:23
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.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

1

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.

-1

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.

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.