Web Design Blog

Even you.

Yup, you’re blind and you may not know it. Of course after reading this you’ll understand why you’re blind. To make matters worse you fixate on things and can’t seem to hold your attention on webpage sections for longer than ¼ of a second.

It actually goes back to how your eyes work
When you read a webpage or a newspaper, your eyes don’t just scan smoothly across the page, they actually jump from one chunk of information to the next and fixate on them for an average of .25 seconds. The movement between each fixation is called a saccade. It takes normally about 0.1 seconds to move from chunk to chunk. After a point you pause to comprehend those chunks as a group. The fixation is the pause and focusing on a chunk while the saccade is the path between those fixations.

Fovea or Field of Vision
The fovea is a part of the eye which is responsible for sharp central focusing which is what we use to read. It’s surrounded by the parafovea which is surrounded by the peripheral are which is a low vision area. The peripheral vision area is just outside of the central focus area. Right now pay try to stay centered on this article but actually become aware of what’s around that area without moving your eyes. You’re seeing that outside area but not in focus the way you see this type.

Mapping Your Designs
It all starts with eye tracking research. Poynter Online http://www.poynteronline.org/ has done several eye tracking reports. It’s all about how users actually read online and in print. While we don’t work in “print” we can still apply eye tracking research to our designs.

It all comes down to the fixation points and the saccades or paths between them. It creates a roadmap on your webpage. Fixation points or “anchors” can be anything that catches the peripheral vision. Peripheral vision catches motion and contrast. These are much easier to seen than details. Once the eye jumps to the anchor point it can focus on the details of that area.

It’s your job as a designer to figure out what your visitor wants to do and utilize that information to help them accomplish that task while achieving your goals for them. By combining the 2 goals together, you can determine appropriate chunks of information and activities to put together.

You combine this chunking activity together with peripheral vision attractors like contrast, larger fonts, white space and movement to attract the eyes to important chunks of information. It’s these fixation points that keep the eyes moving from content chunk to content chunk on the page. This creates a map on your website.

Eye Miles
The guys at Stompernet went over what they called “eye miles” in a recent video post. An eye mile is 5200 pixels. They measured eye miles between pages and found that those sites with lower eye mile movements on a page were actually easier on a user. Restful sites had lower eye mileage than other sites. Restful sites are easier for users to find the things they want and to use them.

These guys also discovered during their research that making your site easier in terms of finding what they want to do with page chunking and fixation points actually improves conversion rates. People stay longer on sites that are easier to traverse quickly for information.

Easier is better even when it’s not.
Something else the Stompernet guys mentioned that stuck out to me was his concept of “Cost Calculating”. The idea is that we actually are making mental calculations based on perceived effort and time usage. How long will it take me to click that link and look at that information? Users are making judgments that sometimes don’t really reflect the value of following a link based on their available information. The key is to make available information compelling enough to balance the cost in your favor as well as making it easy to follow the roadmap to where you want your visitors to go.

Tools To Help
As luck would have it, the Stompernet guys created a Foveal Gaze Tool called StomperScrutinizer http://about.stompernet.com/scrutinizer that allows you to view WebPages so that you can see how the foveal field of vision and the peripheral vision are conceptualized on your designs. It’s a good tool that I used on my own site. And yup, I’m in the process of redesigning now. OUCH!

Ok the Foveal Gaze Tool is really useful but when it comes down to it users are real people with real habits. So one more tool I found is RobotReplay http://www.robotreplay.com which actually records how users are moving their mouse across the page. I’m just testing this out myself right now so I don’t have any results. However, if you use it do give us some feedback.

Web Out

Des

If you enjoyed this post, get free updates by subscribing to our full RSS feed!