2

I'm making a gallery of images in a grid and I have a few concerns. The user is able to see metadata when hover over a picture and also select multiple images.

Hovering over an image

enter image description here

Selecting an image

enter image description here

My concerns

For the most part this works. However there are a few things bugging me a bit:

  1. The checkmark appears where the delete icon was. Is this placement ok, or is it going to annoy a user?
  2. What would be the ideal way to hint a user that the image they hover over is selectable?
  3. What would the ideal placement of the checkmark be? I put it where it is for 3 main reasons; (1) it "blocks" the delete button that earlier was there, (2) on the left side it would be hiding the metadata when hovering, (3) it seems reasonable to keep it on the top to be more noticeable.
  4. The border colour looks greenish for certain images. Is there a safe colour in this case that is not perceived differently depending on the image? Currently I gave it the colour that is used in forms on other places of the website for consistency.
  5. The user can still hover over selected images to get the metadata. Is this a good idea?

Open to any other tips and comments.

Improve this question

2 Answers 2

Reset to default
3
  1. That's fine.
  2. See image below. Words always work (I also rearranged your metadata into something that seemed more readable - and aligned with the delete icon).
  3. Checkmark placement is fine.
  4. To "offset" the border a little, and make it more perceptible to the eye, you could add a small inner border of white or the background grey (see image). You'll never find a colour that is good for all images.
  5. Yes.

Have you reviewed other image libraries and how they handle this type of interaction

enter image description here enter image description here

Improve this answer
1

It's a good thought and function of showing meta data on hover when you are dealing with photos.

My observations on understaing the flow of your requirement, Since meta data is shown on hover, there is no need of close icon to close the meta data display, user has to just take a cursor away. taking into account of displaying the select feature and showing the selected ones is a very good visual method of selection.

I made something that might help you. Check. Do check the interaction here.

Made it for Selection and meta data display Also these shots.

Hover

Selected

Improve this answer
2
  • Actually the "close" icon is for deleting the image. Might be a bit dangerous to have it there now on afterthought.
    – Pithikos
    May 28, 2020 at 8:56
  • Oh, okay. That case if the delete is to be shown, probably you should take out for cases like Multiples photos selected, it is a not a good practice to show delete on individual photos. So, 1 You can have delete icon not on photos but sepearately. - bcz use can always select on photo and click delete and also can select multiple photos click delete. Easy to use and understood by user. Just a thought and a suggestion. it may work out well.
    – Ashwin Kulkarni
    May 28, 2020 at 9:31

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.