How should I present landscape-orientation page thumbnails in a series of portrait-orientation thumbnails?

Question

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

^{download bmml source – Wireframes created with Balsamiq Mockups}

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

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

Answer 1

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.

Answer 2

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):

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

Answer 3

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.