4

screenshot

I'm creating this page to display books I've read/reviewed, but I'm not sure how to handle the different amounts of information that each card has. Most cards will not have a review so there ends up being a lot of white space, but I'd also like to show some of the review in each card that has one.

I've thought about trying to fill the cards that have no reviews with lines, like the first window on this page, but that feels like it might be weird or noisy?

The easy thing here would be to make a single column list of books in a different style, but I like how this feels more browsable.

Also, the sidebar is very much a work in progress, and the minimal styling is generally in line with the rest of my website.

enter image description here Here's another example with none of the filler. It feels too empty to me, but what do you think?

2
  • Do the cards even need to be of the same size/height? Use a column layout instead of a table layout.
    – Bergi
    Feb 23 at 14:00
  • Not necessarily, but in a column layout the books are sorted column wise. Meaning, sorting the books by title could have all the A's in the first column, all the B's in the second column and so on. Of course I would want to have all the A's at the top and not in the left-most column.
    – Jacob
    Feb 23 at 17:55

2 Answers 2

18

In these cases, although the excess white area exists, the perceiver tends to place the vision in the center of those framed empty spaces, which further accentuates the lack of content:

enter image description here

To counteract this effect you should try to direct perception towards the edges, for example by using a more balanced distribution of elements: enter image description here

Or force perception towards elements with content, opaque the voids, in other words, "dirtying" the empty area with a slightly darker color or a subtle background texture:

enter image description here

0
0

Consistency is an important UX heuristic, and it helps lend visual harmony to a set of similar objects.

It's helpful to ask: What's the job each of these cards? It seems like you want to be able to quickly browse what you've read, find a particular book, and remember what you thought about it.

As you're finding out - trying to put the entire review on a card is leading to wildly inconsistent visuals.

But without content, some of your cards are looking too blank. How do you solve giant discrepancies in content amount?

Well, I think showing a picture of each book's cover will speed up the task of finding a book, because we don't always remember exactly what a book was called, but we usually remember the book as a visual product. I know you're aiming for minimalism, but you can still achieve clean layouts with consistent book cover visuals and lightly-designed cards.

Under the picture of the book, you can add the title, star rating, and a brief, truncated intro of the review. To read the whole review, simply tap the book, and open the side panel you're working on.

Here's a nice example by designer Davide Galbiati:

Example of book reviews with covers

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.