Overview:
If you’ve ever watched an eye tracking enhanced usability study, you know how much influence visual perception and user feedback have on usability.  While in progress, eye tracking visualizations can be extremely entertaining, like watching search and destroy video games, but the visualizations also provide meaningful clues that help to unlock the mystery of why pages succeed and fail in usability.

Despite the best copy writing and most well intended navigational systems on the web… one of the most startling facts of web usage is… people don’t read. Sure, they see words and scan for key words and main points, but they don’t read in the traditional literary sense. Both focused web users on a mission to accomplish a task and casual web surfers, those just browsing freely, are not on a mission to read. Their purpose is more tactical and akin to hunting and gathering than reading.

Our reliance on visual and audio senses for survival and focused execution of tasks in the physical world, are equally important for successful orientation, navigation and consumption on the web.

In the majority of eye tracking usability sessions, you will note that the eye moves in a seemingly chaotic yet highly systematic way. Typically starting at the top left, the user will quickly scan across and down stopping a large and distinct blocks of color, chunky text and other visual punctuations. The same scan is repeated a number of times incrementally slowing and resting on the initial set of visual markers with some variance in sequence and jumps to neighboring content. Actual reading in a literal sense does not happen in the first three to five seconds.

You have roughly three seconds to accomplish the following:

• orient the user
• provide key visual markers
• enhance aesthetic experience
• avoid competing with high priority content and actions

It seems like a relatively simple set of tasks, but in three seconds it’s a relatively challenging task. The relative complexity and levels of difficulty vary depending on the site and content objectives. Fortunately, there are proven methods for optimizing the design for scanning and discovery.

1. be conservative. No matter how tempting, minimize the use of color and attractive design elements unless they directly align with a visual system to support content enhancement, clarity, and information of navigational visual cues.
2. be systematic. Patterns of use are driven by patterns in design. Establish punctuating visual treatments for key information, functions and features. Determine content and feature importance both from marketing, business, and functional aspects as well as from the users’ perspective. Once a clear priority is mapped, apply the appropriate visual emphasis the establish visual weighting and emphasis. You can use placement, size, proportion,spacing, color and graphic treatment to establish you visual hierarchy.
3. be consistent. Users rely on repetition to establish a mental map of your organizational system.
4. keep it simple. Users won’t be impressed with how much information you can get above the fold or on the page or in you navigation. Users are more apt to reward sites with clear, simple, and clean designs with repeat visits if they can consistently find what they’re looking for. Simplicity is the art of eliminating clutter while providing valuable content and contextually relevant visual markers for navigation and related features and functions.
5. have fun. Don’t be so serious… users will stay longer and take time to orient themselves if you can avoid chasing them off your site in boredom. Use informal and playful copy as appropriate, but remember the priority is not to distract, but to avoid banality.

Happy designing! Feel free to share examples of your work or other designs that achieve zen visual design.

-Jon Fukuda