23

I need to set area on site with most downloaded books and I'm facing the following problem:

  • Book covers can have different width and height ratio, meaning not all books have proportional edges.
  • There is grid system in place, and I'm limited to display 3 books per row

At first I have hard cropped thumbnails to same dimensions (for example 400x300), but thats also not good idea since book covers can have important data on them like actors face, title etc etc..

Narrowing down, I have created 3 different scenarios but I'm not sure which one is the most usable to end user.

Question: In your opinion which one should work the best and do you perhaps have another solution?

layout

5
  • 2
    Have you looked at how other, sites, handle, this? Seems like most favor same height as opposed to same width thumbnails. Commented May 25, 2017 at 20:53
  • @maxathousand yes, but due the grid factor (all columns have same width) I'm limited to width factor.
    – RhymeGuy
    Commented May 25, 2017 at 21:09
  • 5
    Well, just because all columns have the same width factor doesn't mean the images themselves have to have the same width. :) Although I suppose finding that sweet spot for a height that suits all images will be difficult too.
    – Monomeeth
    Commented May 25, 2017 at 21:27
  • 1
    put them in a virtual book shelf!
    – colmcq
    Commented May 26, 2017 at 9:55
  • (@Monomeeth) taking into account unusual formats either fixed width or fixed height may lead to trouble. Books I know of, checked via amazon, have height/width ranging from 0.67 to 2.1. Amazon seems to fix the width wide enough for the vast majority of covers but allows the height to grow really quite tall where they put they image of a single book on an item page; it would be less good in a grid.
    – Chris H
    Commented May 26, 2017 at 15:04

2 Answers 2

51

By the usability point of view, the optimal choice would probably be #2, since it leaves no doubt about the binding between the book title and its cover (see the Gestalt's Proximity Principle).

An example from www.barnesandnoble.com : demo screenshot

However, you should pick a vertical ratio limit in order to avoid too high rows: if a cover is too tall, you should fix its height to a certain value and leave some empty space on its sides.

enter image description here

1
  • 14
    Also, this reminds me of a shelve in a store. All items are lying on the same line with the price/description on the bottom.
    – the_lotus
    Commented May 26, 2017 at 12:15
1

You could use centering, with the letterbox or pillarbox drawn in a color taken from the image, so it naturally fills it out.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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