Vertical vs. Horizontal Cards: Which Are Better?

The best way to display content

UX Movement

--

Should you use a vertical or horizontal card for your content? Many designers struggle to answer this question because they don’t understand the differences between the two card types beyond layout and orientation.

Eye Fixations and Saccades

The right card choice depends on several factors. If you’re using large images to communicate information, a horizontal card produces a scattered scanning flow because it requires more eye fixations. In other words, the content takes more visual effort to consume.

Conversely, a large image on a vertical card produces a more focused scanning flow. Users use fewer fixations to scan the image and text. The fixations are more concentrated in a single area rather than divided into left and right halves.

Sometimes your text will communicate more information than the images. If this is the case, horizontal cards are the better choice. You can fill them with long text without making it hard to read because users have more whitespace to read each line.

On the other hand, long text on a vertical card has less white space and looks more crowded. As a result, there’s less visual room to read each line. Not only that, but the text also looks more blocky and overwhelming.

Perhaps your card doesn’t contain long text but rather metadata. Metadata on a horizontal card is not ideal because it produces longer eye saccades. Users have to move their eyes across the card in longer sweeps. However, metadata on a vertical card produces shorter eye saccades so users can scan it quicker and easier.

Edge-to-Edge Images

Cards can take up a lot of space when you group many of them together. As such, displaying cards on mobile devices is a common problem. However, there’s a way you can conserve space and make your…

--

--

UX Movement

There’s a good and bad way to design user interfaces. Our publication shows you which way gives the best user experience. https://uxmovement.substack.com