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 am working on a small web site which has traditionally presented small (300 x 388)px thumbnails of their event posters, which are linked to the full, tagged PDF.

The majority of their posters are simple portrait-orientation letter pages. I've just been sent a tri-fold brochure which the client would like added to the site in the usual way.

This brought to mind a question I saw on UX several months ago: Is clockwise or counter-clockwise rotated text easier to read?.

My question is related. Given that the tri-fold brochure is the second thumbnail in my examples below, for the sake of consistency, should I:

(A) Rotate the image on its side and present a 300 x 388 thumbnail

mockup

download bmml source – Wireframes created with Balsamiq Mockups

(B) Present the brochure thumbnail as a 300px wide landscape image in its readable orientation:

mockup

download bmml source

In either case, the text is not intended to be legible on the thumbnail. I'm merely curious which case would be more pleasing to the user. I'm leaning toward (B).

share|improve this question
add comment

3 Answers

up vote 10 down vote accepted

I would go with B.

If portrait images are in the clear majority then these need to be displayed as clearly as possible.

Rotating the image to show it on it's side is not a good experience so showing it in the correct orientation is to be preferred. If the user can click on the preview and see the full sized image without going into the full details then there is no real loss of functionality.

share|improve this answer
    
That was basically exactly my thinking. Thanks! –  msanford Mar 14 '12 at 17:43
add comment

We solve the identical problem in our product using option C (you can see actual screenshots —albeit old ones—of our solution here and here):

mockup

download bmml source – Wireframes created with Balsamiq Mockups

We make the thumbnails very small (70px in the largest dimension), and then allocate a 70px square for the thumbnail in the UI (in which the thumbnail is centred). We've found in practice that many users identify the documents they're searching for as much (if not more) by its orientation and shape as by its content. Your option (a) breaks the user's sense of the document's orientation (I'm looking for a landscape document), and your option (b) implies an incorrect scale (the landscape document looks to be a significantly smaller paper size than the portrait document; something like an A5 document versus an A4 one in ISO 216 paper sizes).

I also encourage you to experiment with much smaller thumbnails. Even with office documents that are mostly just text, once you're below about 128px-square (on our regular machines) there's not really an appreciable difference between 96px-square thumbnails and 70px-square thumbnails.

share|improve this answer
1  
+1 Kit, this was actually another idea I had. The design I'm provided with requires a fairly sizeable thumbnail, one that's almost legible. I will keep this in mind for future designs, though! Thanks! –  msanford Mar 15 '12 at 2:54
add comment

Option c) to gain stability and a good rythm: Make "thumbnail" versions of your images to a specific size (see example below)

You’d need to produce these extra images (either by a script or manually) but your grid will be regular.

enter image description here

share|improve this answer
1  
I don't believe this is a good solution for this problem. We also produce software that allows users to select a document from a list of thumbnails. By showing the thumbnail in its actual orientation and in full, users are much quicker at finding the document they're looking for. With small thumbnails, the shape and orientation of a document provides at least as much of a hint (perhaps even more) than the content of the thumbnail itself. –  Kit Grose Mar 14 '12 at 23:43
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.