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?
Answer
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
No comments:
Post a Comment