Are there existing/approved studies proving that one is better in readability than the other in these 2 layouts? Which one offers more chance to be read completely?


download bmml source – Wireframes created with Balsamiq Mockups


2 Answers 2


I assume you're speaking about which of your layouts is faster to perceive by the user. This depends on what you want to achieve with your layout.

If you want to tell that there are 3 equally weighed points the users should know on the page, the second example is the way to go. If you want to say: "Here are some interesting things", page one gets the bonus.

Reading on the web

The thing about reading on the web is: You cannot make the user read. You can lead him to read more by following for example these Guidelines by Nielsen, but if you read further, you will find out that users do not read that much and scan the page (most likely in an F-shaped pattern for text that interests them

That means, hey, if you're still reading this, my answer must interest you.

So, both of your answers will get read if they meet the user's expectation on what he will find on this page. The layout to the left may ooze a little bit more creativity than the layout to the right, which has more of a factual appearance.

At last, help is on the way

Therefore I will just tell you on an easy to perceive list what I thought when I saw the two layouts:


  • With nice images, this would look nice

  • Maybe if all the images where to the left, and all the texts would be on the right side (still left-aligned), the actual typographic readability would be improved (text is harder to read if it begins at another point than paragraphs before)

  • Looks a bit like the apple feature pages in my mind (forgive me that one)

  • Text could be nice and big and easy to read

  • Generally good layout for advertising purposes


  • A bit boring

  • I would not read that text

  • Maybe asking too much if the user is not really interested

So I would use the linear layout if you want to sell something (an idea, a product, etc) and the right if you have to deliver some facts the user wants to know.

  • Great thoughts!
    – user15161
    Jul 11, 2012 at 18:28
  • I agree. My initial thoughts were that the one to the left would help grab and keep the attention of a casual scanner (i.e. a casual web user) by introducing breaks in their scans to regain attention. Conversely the one to the right seems more useful when needing to convey large amounts of data -- and the user is expecting it (i.e. a business user that needs to read through all of the information). Both are right depending on the appropriate setting.
    – Ben
    Jul 11, 2012 at 19:10

I am not aware of any studies but people usually like grids. Grid allows users finding content in in the same location. For example, in your mockup on the right the description is always displayed right under the block. On the left, the description is sometimes on the left and sometimes on the right; so users' eyes will have to jump all over the screen versus scanning left to right. In the left example, it is also less clear which block the text corresponds to: the one on bottom/top or on the right/left? In the right example it is very clear since the the text appears much closer to the corresponding block (Gestalt psychology)

  • I've added visual indicators (dividers) for your last point. It's been years designers are using column layouts (derived from magazines/wallpapers) but I'm actually not sure if it's the best readable approach.
    – user15161
    Jul 11, 2012 at 18:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.