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.

--

--

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