How to fill a list with information without making it messy?

Question

I am working on a website for a horse breeder. I created a page to show an overview of their horses, like this:

The idea is that if you click on a horse, you will see a detailed site with the information about the horse. My client now wants to add an image to every horse on the list that shows the ancestry. Something like this:

As you can see, the ancestry has some rather small text on it, and I find it difficult to arrange the list in a way that does not make it feel messy. My best guess is to put the ancestry in the horse image, but that takes away from the space you have to see the horse. What are your best ideas for this? The list should not become too much longer since there are quite a few horses and I would not like having endless scrolling.

Answer 1

A solution is trying to find a kind of animated transition with interactivity between info and pictures. In this example a cube wipe:

Answer 2

Have you considered handling it the way some companies (e.g. electronic equipment) provide a "compare products" feature?

Put a check-box on each image to allow several horses to be selected. Then when "compare" is invoked, a table is produced with one column for each horse, and a row for each attribute (e.g. could include birth-date, children, other comments, etc.).

Answer 3

You could create another page that shows the ancestry when user clicks on a horse. There isn't enough space on the screen to show all ancestries.

I picked this styling 'cause it's easy to create from a development point of view.

Some concerns though:

1. Mobile designs will be fun
2. What's the likely hood that users will want to see the ancestry immediately on that page

Answering the second point will help you convince the client about why having too much info on one page can cause information overload for your users. It can create visually clutter and make it an uphill battle trying to create proper visual hierarchy.