3

I have been trying, unsuccessfully, to find any research into the best way to layout pages in a way that suits a typical reader's flow. That is, how they naturally look at a page, where their eyes flow by default, etc.

I am looking for authoritative research, not just an online blog or similar (unless the person writing it is a recognised expert in this field).

[EDIT]

I would be most interested in the differences (if any) between various channels. E.g. Would it be different for a book as opposed to a website?

Also useful would be the differences for different language groups. E.g. If research shows one way is preferred for left-to-right reading language groups, would reversing it be the best approach for right-to-left reading languages?

3
  • 2
    Norman and Nielsen's blog nngroup.com is an excellent start. They, along with Tognazzini, are recognized experts in the field. Even if you disagree with them you should be aware of what they say.
    – Mayo
    Apr 15 '16 at 13:25
  • 2
    Google "Guttenberg Reading Gravity" - Lots of stuff from reputable sources. Apr 15 '16 at 13:34
  • 1
    Good question! It's always worth updating ourselves on what is and isn't best practice, especially since technology moves so fast. Until the mid-late 90s page layout was always about hard copy books/magazines/newspapers/etc. Then came the web. And now the meteoric rise of smartphones/tablets means page layout must be reconsidered again - not just for web, but also app design. Anyway, in case you're interested, I have just posted a similar question about interactive docs: ux.stackexchange.com/questions/92866/…
    – Monomeeth
    Apr 16 '16 at 8:44
3

There's no single way people look at a page. What you're asking is kind of like "what is the best car". It depends. If you're looking for a specific case, try finding some eye tracking heatmaps related to that situation.

However, there are a few things that will affect users, and can be used as rough guidelines.

What is the most noticeable?

There's a reason all the headers are bigger and bolder. They create larger blocks and more contrast. This draws the eye. Along the same lines; an image will stand out from text (and vice versa) because it is a different kind of visual. And of course a bit of color in a sea of gray will also draw the eye. It's all about that contrast!

And if something moves, we'll notice it much faster. You never know if it's a popup telling you the download has finished, or if it's secretly a tiger in your monitor wanting to kill you. Probably the latter, so stay alert!

Examples:

WCAG contrast guidelines based on ISO and ANSI norms.

Many pieces on Gestalt theory such as this one.


Quick! Focus!

If someone shows us an object we'll look at it straight on, to get as much of the object in focus as quickly as possible. Then we let our eyes dart around to gather more information about the object. An object can be a sheet of paper, a screen, a window on that screen, or even a smaller object (like a popup) within that screen. Basically, anything that's presented as new draws our attention.

Examples: none that I can think of right now. So this one is arguably pulled out of my butt. But consider the logic; we can only see sharp in the middle of our vision, and we need to see what's what before we can decide what to do with the new object.


We have been trained to look in certain patterns.

In (almost?) all western societies we read text from top left to bottom right. So given a page of text, we'll follow that direction. If you're reading in a right to left society/language, such as Arabic, you'll of course start reading at the top.

Examples:

Norman Nielsen: F-Shaped Pattern For Reading Web Content

Norman Nielsen: Horizontal attention leans left


Can we recognize it?

If an image is recognizable, such as a face, we'll dart around key points that we've learned are important and tell us something about what we're looking at. For a face that means looking at eyes, mouth, nose, ears. For a car, grille (because those kind of resemble a face), wheels, etcetera.

So this works for broad item categories on a site, like 'hammer, screwdriver, screws', but not so much for things that look the same such as '25mm screw, 30mm screw' and such.

Examples:

https://www.youtube.com/watch?v=faMmrU6dyX0

https://www.youtube.com/watch?v=1rAl9BiCtKQ


What am I currently looking at?

Even though two things might be just as noticeable in terms of contrast and animation, doesn't mean they are the same in the eye of the beholder. If a list (say, related questions bar) refreshes, I might not notice it, because my attention is on the current question I'm reading. But if I hover my mouse over a menu, and it expands... damn straight my eyes look at that! It's new stuff close to and probably related to what I'm currently interested in!

Example: https://www.youtube.com/watch?v=vJG698U2Mvo

2
  • This is very useful stuff. Are you aware of any sources I can use to back it up? I've also updated my question to clarify my interest in different channels and language groups. Apr 15 '16 at 23:40
  • @LittleEden I've added some links, but most of these are just in my head. I don'keep a detailed record of what I've read. I read something and based on the sources credibility it goes in the "ah I understand" or the "interested skepticism" piles of knowledge. Apr 16 '16 at 4:12
3

The reason you have been unsuccessful is probably because the research that is out there indicates that there is no universal flow. People's eyes jump all over the page. It all depends upon what catches their eyes first.

Most research from the likes of the Nielsen Norman Group points to an F-Shape flow but this was research from the early 2000's so heavily influenced by the main layout of the day which had the majority of functional layout in the top left followed by titles of the main articles.

This is also heavily influenced by where the users will start reading. In the west this is traditionally the top left, but there are language groups that will start at the top right. Be aware of your audience and their cultural bias.

1
  • Thanks. I've updated my question to include different channels and languages in its scope. Apr 15 '16 at 23:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.