• Ariyh
  • Posts
  • When to use horizontal vs vertical product layouts

When to use horizontal vs vertical product layouts

Horizontal product displays on websites make people choose higher quality, more expensive products. Vertical displays encourage choice of cheaper options.

Topics: Website & App | Ecommerce | Ads
For: B2C, B2B
Research date: May 2022
Universities: Xavier University

New to Ariyh? This is a 3min practical summary of a scientific study 🎓
Subscribe for $0 to get a new science-based marketing insight every week 📈

📝 Intro

When we’re browsing product options on websites we’re typically used to scrolling vertically from top to bottom.

Ever since mobile shopping became a thing this has only accelerated.

But it turns out that there are big benefits to horizontal product displays.

📈 Recommendation

Present products on your website according to what choices you want to encourage.

Show products horizontally to make people more likely to choose products that are higher quality, more expensive, and have strong primary features (e.g. size or resolution of a TV).

Show products vertically to make people more likely to choose lower price products and have them care more about secondary features (e.g. the TV stand or type of remote control).

🎓 Findings

  • Choices people make change based on whether products are presented horizontally or vertically on their screen.

  • Horizontal product displays (left to right or right to left, depending on how people are used to reading) make people more likely to:

    • Choose higher quality options

    • Focus on a product’s primary features (e.g. a hotel’s location) rather than secondary ones (e.g. the hotel’s internet speed)

  • Vertical product displays (up to down) make people more likely to:

    • Choose lower cost options

    • Focus on a product’s secondary features (e.g. a flight’s entertainment system) rather than primary ones (e.g. the flight’s duration)

  • For example, as part of a series of five experiments, when products were presented horizontally rather than vertically, people:

    • Were 25.7% more likely to choose a more expensive, higher quality laptop (among 6 options)

    • Perceived quality (vs price) as being 13.8% more important

    • Were 18.4% more likely to choose a digital camera with better megapixels (primary feature) rather than better screen size (secondary feature)

The horizontal display of products, sometimes used by Amazon, encourages people to choose higher quality, higher priced products

The commonly used vertical display, also used by travel site Booking.com, drives people to choose cheaper options

🧠 Why it works

  • We can be primed to think in two main ways:

    • Abstract, high-level thinking. Which means we think more about a product’s benefits and the “why” we would want it. This tends to be related to product quality.

    • Concrete, practical thinking. Which means we focus on whether it’s achievable and “how”. This tends to be related to product price

  • Horizontal presentations of products encourage us to think in an abstract way, so we focus more on product quality and its high-level main features.

  • Vertical presentations of products make us think in a more practical, detailed way, so we focus more on price and pay more attention to secondary features.

  • This study only tested this explanation, but there may be others too that drive this effect.

💻 Brought to you by Storyblok

Want a faster, more effective way to run your website?

Try Storyblok - the next generation headless CMS:

  • Edit your website as you browse it

  • Launch new landing or product pages in minutes

  • Create content once, publish across all your channels

Try it out yourself for free - no credit card required.


✋ Limitations

  • The research focused on an online, ecommerce-like environment. It did not test whether the effect works in situations such as a shop window, or a restaurant menu.

  • The experiments did not measure actual sales. It asked participants what choices they would make after showing them options. It’s possible that people may be more or less likely to actually choose and buy a product (i.e. convert) when shown horizontal vs vertical presentations, especially on mobile screens.

  • The study did not explore the effect of presenting products in a mix of the formats, such as multiple products per row.

🏢 Companies using this

  • The vertical format is much more common among online sellers, compared to the horizontal format. It’s unclear whether this is to cater to what people are used to or whether this effect is taken into account.

  • Horizontal formats are sometimes used at the bottom of product pages, as recommendations for similar or complementary products.

It’s unclear how the effect applies in the case of fashion retailers such as Everlane, where multiple products are commonly presented per row

⚡ Steps to implement

  • Consider how you want to be perceived.

    • If you want to be perceived as premium, or your products are high-end and expensive, favor a horizontal design

    • If you want to be perceived as budget-friendly and encourage your customers to analyze the details of each product, favor a vertical design

  • Be careful when introducing a horizontal version for mobile. Test it to make sure it doesn’t worsen the user experience and consider using an alternative vertical version for these visitors if you see negative effects.

🔍 Study type

Lab and online experiments.

📖 Research

🏫 Researchers

Remember: This is a new scientific discovery. In the future it will probably be better understood and could even be proven wrong (that’s how science works). It may also not be generalizable to your situation. If it’s a risky change, always test it on a small scale before rolling it out widely.

🎓 Found this insight useful?