Get your brand new Wikispaces Classroom now
and do "back to school" in style.
Elements of Visual Design
Pages and Files
Format & Orientation
by Tricia Cusick
Studies on eye movement range from simple to complex, involving eye-tracking software and other high-tech equipment (graphic below courtesy of Eyelink II). Commercial web designers must incorporate research on eye movement into their visual designs or risk creating pages that users do not like or cannot find information on. Designers can get caught up in the design; incorporating eye movement research grounds their efforts and allows them to develop useful, well-designed pages, rather than simply "cool" pages.
Eye Movement and Natural Tasks
, Professor Jeff B. Pelz notes the following about our visual perception through eye movement:
"In order to perceive the world around us, we must move our eyes almost constantly. We typically make about 2 to 4 eye movements every second; over 100,000 every day. These eye movements are necessary because of the design of the human eye. Unlike man-made image sensors, the image sensor at the back of the eye (the retina) is highly anisotropic; the resolution varies by orders of magnitude across the field. High acuity is only available in a small area at the center of the retina, so the eyes are moved to 'point to' objects or regions in the scene that require high acuity. Eye movements are made toward task-relevant targets. These eye movements, made without conscious intervention, can reveal attentional mechanisms and provide a window into cognition."
In other words, the innate physiology of the eye forces the individual to focus in on specific elements within the visual field. Observable trends in how eye movement occurs helps individuals understand how humans perceive their environment.
Scientific Web Design: 23 Actionable Lessons from Eye-tracking Studies
succinctly summarizes three key findings:
Initial eye movement focuses on the upper-left corner of a page. Users scan the page in the shape of an "F" (for Western societies)
We ignore banners on web pages
Fancy formatting and fonts are ignored. They're viewed as advertisements
The illustration to the right displays a heatmap from an eye tracking study. The reddish colors indicate areas that received most of the reader's attention. The yellow areas indicate slightly less attention. The blue, or cooler areas, received minimal attention. The gray areas received no attention.
This screen capture below from Microsoft's website illustrates the "F" concept. Users generally notice the article section rather than the left and right sidebars.
Text attracts attention before graphics
According to substantial research
ext plays a more important role than graphics
. This contrasts with an earlier Poynter study, which found that readers of print newspapers looked first at the lead art element on a newspaper page and then moved their eyes to the biggest headline.
Top of the page vs bottom of the page
A recent study of eye movement by search marketing firms
and eye tracking firm
Listings on the top of a search results page are viewed more than listings on the bottom of the Web page
Being on the top of the editorial results or having a top AdWord placement is better than having a side AdWord placement
A excellent reference book on this topic is
Don't Make Me Think : A Common Sense Approach to the Web by Steve Krug
. An editorial review by Stephen W. Plain (on Amazon.com) discusses what the reader can expect to learn from Plain about how we use the web.
Usability design is one of the most important--yet often least attractive--tasks for a Web developer.
The title of the book is its chief personal design premise. All of the tips, techniques, and examples presented revolve around users being able to surf merrily through a well-designed site with minimal cognitive strain. Readers will quickly come to agree with many of the book's assumptions, such as "We don't read pages--we scan them" and "We don't figure out how things work--we muddle through." Coming to grips with such hard facts sets the stage for Web design that then produces topnotch sites.
Using an attractive mix of full-color screen shots, cartoons, diagrams, and informative sidebars, the book keeps your attention and drives home some crucial points. Much of the content is devoted to proper use of conventions and content layout, and the "before and after" examples are superb. Topics such as the wise use of rollovers and usability testing are
covered using a consistently practical approach.
Topics Covered in the Book Include:
Designing for scanning
Wise use of copy
Home page layout
Modern Applications of Research in Visual Design
the usefulness of eye-tracking for computer applications that attempt to render simulations at interactive rates. Some recent research that uses this technology is presented. While eye tracking has been relatively well-explored for the purposes of accelerating real-time rendering, it has not been very much considered with respect to the actual simulation process.
Some of the
from Nielsen Norman Group's recent usability studies using eye tracking technology.
This video discusses eye movement research done at Kent State University.
Vocabulary for Eye Movement
— of different dimensions along different axes. Usually refers to the measurement of eye responses to motion toward and away from the eye.
— the process our eyes use when we read. Our eyes look at different letters in the same word and then combine the different images through a process known as fusion.
— testing to expand understanding of customer engagement with what they are using.
help on how to format text
Turn off "Getting Started"