5

I'm currently working on a search engine displaying image results. We are currently stuck on choosing the best way to display image thumbnails.

  • On mobile, major search engines (Google, Bing) tend to crop image results to make them be square images (1).
  • On desktop, they make them keep their original ratio and fit in a row-based grid (3).

Which layout is best for the user's experience? Why did Google and Bing make the choice to crop them on mobile?

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Improve this question
2
  • Google probably chose them for uniformity and they might not have thought about doing it the way in which Pinterest does it. Personally as someone who uses img search frequently, I like your #3 the best. I want to see the whole img.
    – mawburn
    Oct 12, 2012 at 21:46
  • Do you have the possibility to ask image uploader users to define themselves the cropped area? When talking about cropping, one recurrent problem is "does my crop can break the picture sense and/or representation?" - chopped head portrait, focusing point out of central square, ... If you can only crop by taking the center part of the picture, and if the nature of this pictures is quite random, this could be a problem.
    – Xavier Portebois
    Oct 13, 2012 at 15:00

2 Answers 2

Reset to default
2

I thought about this on a project some time ago. The conclusion was that, for instances where the images are familiar to the user (e.g. they belong to the user or they have seen them before) we could crop them to a uniform ratio since they still worked perfectly well as an aid to recognition. In other areas where users were browsing images that belonged to other people or which the user had not seen before, we should display the full image in its native ratio. The client was also keen to show the full image in public areas in order to respect the owner's copyright.

One caveat to this is if you need to display supplementary information or actions alongside each image. It becomes difficult to scan this information and interact with the controls if their position is irregular because of varying image shapes and sizes.

Improve this answer
2
  • for additional information and/or actions, check pinterest.com, their way seems quite nice to me: the position of the supplementary details is irregular through an absolute grid, but is always at the same place when you're focusing on one picture. My point there is: the caveat you mention is not necessarily one.
    – Xavier Portebois
    Oct 13, 2012 at 14:57
  • @Xavier Good example. It does though depend on the expected workflow and whether it's the meta data or the image that's most important. Which presentation works best is heavily dependent on context.
    – Matt Obee
    Oct 15, 2012 at 8:22
0

This is a question that has given me headache for years!

I think it depends (as with anything in user experience design). It depends on what type of images your are dealing with. If they are photographs, you wouldn't mind removing the spaces around; but if they are portraits you must avoid cutting the head off the person.

I also depends on the type of user experience that you want to give. Square or fixed sizes images keep a formal and consistent look and feel. Variable sized images are more juvenile and dynamic.

For a search engine, I think is more common to keep 'consistancy', so cropping would be a good option.

Improve this answer

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.