Effective Screen Layout: It’s about “where”, not “what”.

For years I’ve been repeating the idea that users read a screen much differently than a physical item, like a book.

For the book (in English), they read left-to-right; top-to-bottom, consuming most of the text.

For a screen (computer, tablet, phone, etc) they read down the middle with very little attention to the edges and they consume very little of the actual text.

The good folks at Neilsen did a study that validates this belief and refines it a bit.

Have a look at the heat maps below. The redder areas indicate where the user looked at that part of the screen longer:

f_reading_pattern_eyetracking

The first screen is an “About” section, so in other words, a text blob. Note the meme “tl/dnr” (Too Long. Did Not Read) is very true in this case. Anything after the top 2-3 inches may as well be my grandma’s recipe for chicken and dumplings.

The second screen is an e-commerce site, like Amazon. In this case, the user studied the picture, the cost, the brief description and then the first word in each of the remaining bullet points. The further away they got from the picture the less likely the description would be read.

The final screen is Google results. This one is easy to interpret: the lower you are the less you matter. The first hit is studied in depth as is the second, the third gets less attention as do all the ones below. By the time you get to the bottom you are only reading the title.

What does this tell us?

  1. If at all possible, avoid posting a text blob that extends past the page break UNLESS the purpose of the site is a journal or some other design where long articles are the primary product.
  2. Images are important. If there is a picture, graph, diagram or any other non-textual communication on a page the eye will immediately snap to it and study it in depth. Make them count.
  3. The upper-left area is the most likely part of the screen to garner attention. Conversely, the lower-right is the “dead zone”. Anything in this area may as well not exist.

Another lesson, not related to screen design, is that Search Engine Optimization (SEO) is still key. If you aren’t in the top 3, you don’t exist. Focus on your message and find your niche.

-J

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s