5

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

3 Answers 3

10

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.

0
5

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.

1
  • 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, 2012 at 2:54
2

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

1
  • 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, 2012 at 23:43

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.