« Is the Washington Post wasting money on the bottom half of their homepage? | Main | A busy week... »

February 28, 2005

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.

New: Vote for the next design to be eyetracked by Eyetools

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 homepag. You can see people start to read and then stop.

Posted by Greg Edwards on February 28, 2005 |

TrackBack

TrackBack URL for this entry:
http://www.typepad.com/services/trackback/6a00d834202a2053ef00d834580b7569e2

Listed below are links to weblogs that reference CSS Zen Garden -- an Eyetools eyetracking analysis:

» Eye tracking del CSS Zen Garden from Duopixel Weblog
En Eyetools tienen una buena comparativa de la lectura entre la página original del CSS Zen Garden y la propuesta #145. Muy interesante cómo el cambio de diseño puede afectar nuestros cambios de lectura, aún teniendo el mismo contendio. Ver... [Read More]

Tracked on March 01, 2005 at 06:22 AM

» http://www.fiftyfoureleven.com/resources/design/design-matters from
[Read More]

Tracked on March 03, 2005 at 08:23 AM

» CSS Zen Garden -- an Eyetools eyetracking analysis from Georg Berg's Notizen
Design decisions affect what people read. [Read More]

Tracked on March 03, 2005 at 03:31 PM

» Eyetracking from tectorum
Eyetools Research: CSS Zen Garden -- an Eyetools eyetracking analysis People spend more time reading narrower columns, and read them more thoroughly.... [Read More]

Tracked on March 03, 2005 at 03:46 PM

» Zen Garden Eyetracking from Zenful Blog
This some interesting analysis.... a study from Greg Edwards of Eyetools.com. For those unfamilar with Eyetools, the company specialises in website usability studies based on direct, real-time tracking of a user's eyeball movements as they interact... [Read More]

Tracked on March 03, 2005 at 08:06 PM

» Eyetrack and Zen Garden from steve.coldfusionjournal.com
Eyetools Research is running an eyetracking analysis on CSS Zen Garden. Their eyetracking analysis shows where users actually look on a web page. CSS Zen Garden shows the same content (indeed, the same HTML) with multiple designs.The nice thing abo [Read More]

Tracked on March 08, 2005 at 06:20 AM

» Maybe Fixed With is Better? from Waterfall Web
Another fixed-width vs fluid-width argumant... [Read More]

Tracked on March 10, 2005 at 03:38 PM

» Eyetrack and Zen Garden from steve.coldfusionjournal.com
Eyetools Research is running an eyetracking analysis on CSS Zen Garden. Their eyetracking analysis shows where users actually look on a web page. CSS Zen Garden shows the same content (indeed, the same HTML) with multiple designs.The nice thing abo [Read More]

Tracked on March 11, 2005 at 06:05 AM

» Eyetrack experiment on CSS Zen Garden from The Dead Parrot Society
The CSS Zen Garden is perfect source material for Greg Edwards at the Eyetools Research blog; it lets him take the exact same content and see how different design treatments affect people's reading habits. He's compared two of the Zen Garden designs so... [Read More]

Tracked on March 13, 2005 at 07:07 PM

» Eyetools Research: CSS Zen Garden -- an Eyetools eyetracking analysis from WNAS
Eyetools Research: CSS Zen Garden -- an Eyetools eyetracking analysis a nice example how the design of a site influences the readability. So much for the design doesn't matter, content rules. It is and always be about a combination of the two, conten... [Read More]

Tracked on March 22, 2005 at 01:50 AM

» CSS Zen Garden -- an Eyetools eyetracking analysis from einfach-persoenlich Sideblog
Das Design hat Einfluß auf die visuelle Wahrnehmung des Besuchers. Eine Eyetools Eyetrack Analyse des CSS Zen Garden visualisiert sehr anschaulich die Aufmerksamkeit der Besucher bei gleichem Content. [Read More]

Tracked on March 25, 2005 at 04:11 AM

Comments

Verify your Comment

Previewing your Comment

Posted by:  | 

This is only a preview. Your comment has not yet been posted.

Working...
Your comment could not be posted. Error type:
Your comment has been saved. Comments are moderated and will not appear until approved by the author. Post another comment

The letters and numbers you entered did not match the image. Please try again.

As a final step before posting your comment, enter the letters and numbers you see in the image below. This prevents automated programs from posting comments.

Having trouble reading this image? View an alternate.

Working...

Post a comment

Comments are moderated, and will not appear until the author has approved them.