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.

  • 1
    Maybe it's a flip - if users want to find a particular horse by its parent or grandparent, you could show a view of those horses, which the user can click on to see the descendants.
    – Izquierdo
    Commented Aug 29, 2023 at 16:57

3 Answers 3


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

enter image description here


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


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.

Simple family tree for horses

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.

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.