Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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

share|improve this question
    
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 '12 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 '12 at 15:00
add comment

2 Answers

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.

share|improve this answer
add comment

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.

share|improve this answer
    
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 '12 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 '12 at 8:22
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.