1

I have a stacked collection of images/icons that look similar to the following when placed in a relatively narrow column:

Stacked icons

These can be removed one by one, and currently the way I do this is similar to this (poorly recreated but correctly scaled) image, by darkening the image and overlaying a red cross:

enter image description here

I can't help but think this isn't the best way to go about this, though I'm not really sure of a good alternative.

I'd considered placing crosses underneath each, or perhaps partially overlaid in the top-right corners, but that increases the space taken by each.

Is there an alternative I'm missing, or is the affordance for deletion worth the extra space usage?

1

I always like to see how "the big players" are handling these type of interactions. They usually have had the time and resources to come up with the most perfect solution.

In this instance, I'm thinking about Google with their Photos app. To delete (or perform any other action with the images) you have to select the images by hitting a small circle with check mark. After selecting one or more images, the delete option (among others) appears in the header. This also allows for bulk deletion.

I think this pattern is very applicable to your situation.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Give your images/icons an selected state (by adding a border for example) and show the delete option when selected.

If you're worried about discoverability, if the user will know they can remove the images/icons, you can always reverse it.
Show a "delete images" link or a trash can icon. When clicked, change the state of the images/icons so they look more clickable. You might achieve this by adding a barely visible border and colouring it in (or make it less transparent) when selected.

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.