• The inventors of eyetracking heatmaps, experts in eyetracking analysis

CSS Zen Garden -- an Eyetools Eyetracking Analysis

Design decisions affect what people read. The CSS Zen Garden always has the same content but different visual treatments -- and you can see how this affects reading.

Same content, different visual treatments
Original homepage
(live site)
Version 145
(live site)
CSS Zen Garden version 1 CSS Zen Garden version 145

CSS Zen Garden is a beautiful place -- it demonstrates the power of Cascading Style Sheets (CSS) and the flexibility of design because the content is always the same but the visual treatments are very creative and very different! Here are two examples (stay tuned for more in the future).

Notice that version 145 has great use of sub-heads and increased reading of the paragraphs below them relative to the original homepage.

The navigation bar on Version 145 is viewed and clicked more.

Also the wider column gets less reading across the width of the page on the original homepage. You can see people start to read and then stop.

Written by Greg Edwards

Other articles written by Eyetools

Examples

Common Email Layouts B2C Electronics Template
Eyetracking Circuit Citys Email Template
Branding Effectiveness Sports Illustrated And Footaction
Css Zen Garden An Eyetools Eyetracking Analysis
Is The Washington Post Wasting Money On The Bottom Half Of Their Homepage
The New Washington Post Homepage Design: An Eyetools Eyetracking Analysis
Blog Analysis And Optimization With Eyetracking
Eyetracking a Navigation Bar How Many Elements Are Read? Well, It Depends

Basics of Eyetracking

Understanding Eye Tracking, Part 1:  Misinterpreting Data
Understanding Eye Tracking, Part 2:  What You Can Learn From Eyetracking Data
Understanding Eye Tracking, Part 3:  What Is a Heatmap Really
Understanding Eye Tracking, Part 4:  What Is a Scan Path
Understanding Eye Tracking, Part 5:  Time And Heatmaps

People can't click on what they don't see

Small Decreases In Viewing Can Decrease The Probability Of Being Clicked By More Than 50 Percent
Wasting Money On Content In Visual Dead Zones

Success stories

Eyetools Doubles Conversion Rate for Fortune 100 Client
How Eyetracking Helps Website Redesigns: An Eyetools Case Study

In the Press

Yahoo Search Assist Uses Eyetools Eyetracking To Optimize Design Based On Eyes And Where People Look
Eyetools In Wall Street Journal: Benefits Of Heatmap Testing For Ibm Ogilvy Cisco
Eyetools In Adage About Ogilvy Using Our Eyetracking For Its Email Clients
The 3rd kind of conversion problem: the most exciting one

Eyetools eyetracking and SEO / SEM

Eyetracking Google Search Results Eyetools Research: This One Should Help With Search Engine Optimization SEO/SEM Planning
Eyetracking Google Checkout Button Does Not Increase Viewing Significantly But...
Google Eyetracking Study Of Search Results On Sale
Version 2 Google Golden Triangle Eyetracking Search Report