Affordance for small image/icon removal

Question

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

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:

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?

Answer 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.

^{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.