koolbluez
Šupər♂ - 超人
Most of us, esp web developers, might have heard of web traffic heat maps.
For the uninitiated, this is a briefing.
Web researchers have found out that there appears to be a strong link between our eye and hand movements over the surface of web pages.
Definitive Heat maps allow you to see where people are clicking on your Web page(s). It, thus, is a great way to see where your site visitors click the most. Thus, helping us in optimizing Web pages for both usability and ad traffic.
Web Heat Maps r shown in colored regions indicating the percentage of people who viewed that area, each color for a particular range of viewing activity. For example, areas that are colored red are viewed by between 80% and 100% of the participants.
These colored regions are constructed using the fixation points and reading lines from the individual page view images. This means that a subject will only be counted as having viewed within a region if their eyes stopped (fixated) or if they read within that region. If their eyes traveled through a region without stopping or reading, they are not counted towards the percentage of people who viewed that region.
If an area of the page is colored red it does not indicate that each participant stopped to look at every single point within that region. It simply means that 80-100% of teh people fixated or read somewhere within that region. For example, if the word "digital" appears in a red area, we cannot say that 80-100% of the people fixated or read that particular word.
This legend gives a summary of what the colors mean:
Color Percentage viewed
Red 80-100%
Brown 70-80%
Yellow 60-70%
Green 50-60%
Light Green 40-50%
Blues less than 40%
It might change from different services, but the primary ones r consistent.
.
.
Well, included here is a tip & some sites on heat mapping results
.
.
The tip has been in some tech mags earlier (dont remember them... mayb Digit itself, or my other fav... Chip)
Some eyetracking study on 232 users who looked at thousands of Web pages found that users' main reading behavior was fairly consistent across many different sites and tasks. This dominant reading pattern looks somewhat like an F and has the following three components:
* Users first read in a horizontal movement, usually across the upper part of the content area. This initial element forms the F's top bar.
* Next, users move down the page a bit and then read across in a second horizontal movement that typically covers a shorter area than the previous movement. This additional element forms the F's lower bar.
* Finally, users scan the content's left side in a vertical movement. Sometimes this is a fairly slow and systematic scan that appears as a solid stripe on an eyetracking heatmap. Other times users move faster, creating a spottier heatmap. This last element forms the F's stem.
Obviously, users' scan patterns are not always comprised of exactly three parts. Sometimes users will read across a third part of the content, making the pattern look more like an E than an F. Other times they'll only read across once, making the pattern look like an inverted L (with the crossbar at the top). Generally, however, reading patterns roughly resemble an F, though the distance between the top and lower bar varies.
) where users looked the most are colored red; the yellow areas indicate fewer views, followed by the least-viewed blue areas. Gray areas didn't attract any fixations.
The F pattern's implications for Web design are clear and show the importance of following the guidelines for writing for the Web instead of repurposing print content:
* Users won't read your text thoroughly in a word-by-word manner. Exhaustive reading is rare, especially when prospective customers are conducting their initial research to compile a shortlist of vendors. Yes, some people will read more, but most won't.
* The first two paragraphs must state the most important information. There's some hope that users will actually read this material, though they'll probably read more of the first paragraph than the second.
* Start subheads, paragraphs, and bullet points with information-carrying words that users will notice when scanning down the left side of your content in the final stem of their F-behavior. They'll read the third word on a line much less often than the first two words.
All said & done, lets come back to the purpose of this post.
Heat mapping is an excellent method of checking out our sites viewer density in portions all over the display. It helps us identify hotspots & optimize them to show things we suppose as important for us or the viewer.
The problem (as with most things sweet & famous) is that most site’s that offer this service like clickdensity, CrazyEgg and clicktale are all paid services.
Well, a google search gave me & now... all of us reading this article, a free option!
LabsMedia has created that exact same script that other sites charge you for and have made it available for free (kudos to open source!).
Their product.. the amazing ClickHeat!
For the uninitiated, this is a briefing.
Web researchers have found out that there appears to be a strong link between our eye and hand movements over the surface of web pages.
Definitive Heat maps allow you to see where people are clicking on your Web page(s). It, thus, is a great way to see where your site visitors click the most. Thus, helping us in optimizing Web pages for both usability and ad traffic.
Web Heat Maps r shown in colored regions indicating the percentage of people who viewed that area, each color for a particular range of viewing activity. For example, areas that are colored red are viewed by between 80% and 100% of the participants.
These colored regions are constructed using the fixation points and reading lines from the individual page view images. This means that a subject will only be counted as having viewed within a region if their eyes stopped (fixated) or if they read within that region. If their eyes traveled through a region without stopping or reading, they are not counted towards the percentage of people who viewed that region.
If an area of the page is colored red it does not indicate that each participant stopped to look at every single point within that region. It simply means that 80-100% of teh people fixated or read somewhere within that region. For example, if the word "digital" appears in a red area, we cannot say that 80-100% of the people fixated or read that particular word.
This legend gives a summary of what the colors mean:
Color Percentage viewed
Red 80-100%
Brown 70-80%
Yellow 60-70%
Green 50-60%
Light Green 40-50%
Blues less than 40%
It might change from different services, but the primary ones r consistent.
.
.
Well, included here is a tip & some sites on heat mapping results
.
.
The tip has been in some tech mags earlier (dont remember them... mayb Digit itself, or my other fav... Chip
)Some eyetracking study on 232 users who looked at thousands of Web pages found that users' main reading behavior was fairly consistent across many different sites and tasks. This dominant reading pattern looks somewhat like an F and has the following three components:
* Users first read in a horizontal movement, usually across the upper part of the content area. This initial element forms the F's top bar.
* Next, users move down the page a bit and then read across in a second horizontal movement that typically covers a shorter area than the previous movement. This additional element forms the F's lower bar.
* Finally, users scan the content's left side in a vertical movement. Sometimes this is a fairly slow and systematic scan that appears as a solid stripe on an eyetracking heatmap. Other times users move faster, creating a spottier heatmap. This last element forms the F's stem.
Obviously, users' scan patterns are not always comprised of exactly three parts. Sometimes users will read across a third part of the content, making the pattern look more like an E than an F. Other times they'll only read across once, making the pattern look like an inverted L (with the crossbar at the top). Generally, however, reading patterns roughly resemble an F, though the distance between the top and lower bar varies.
*www.useit.com/alertbox/f_reading_pattern_eyetracking.jpg
The areas (as we already know by now ) where users looked the most are colored red; the yellow areas indicate fewer views, followed by the least-viewed blue areas. Gray areas didn't attract any fixations.The F pattern's implications for Web design are clear and show the importance of following the guidelines for writing for the Web instead of repurposing print content:
* Users won't read your text thoroughly in a word-by-word manner. Exhaustive reading is rare, especially when prospective customers are conducting their initial research to compile a shortlist of vendors. Yes, some people will read more, but most won't.
* The first two paragraphs must state the most important information. There's some hope that users will actually read this material, though they'll probably read more of the first paragraph than the second.
* Start subheads, paragraphs, and bullet points with information-carrying words that users will notice when scanning down the left side of your content in the final stem of their F-behavior. They'll read the third word on a line much less often than the first two words.
All said & done, lets come back to the purpose of this post.
Heat mapping is an excellent method of checking out our sites viewer density in portions all over the display. It helps us identify hotspots & optimize them to show things we suppose as important for us or the viewer.
The problem (as with most things sweet & famous
) is that most site’s that offer this service like clickdensity, CrazyEgg and clicktale are all paid services.Well, a google search gave me & now... all of us reading this article, a free option!
LabsMedia has created that exact same script that other sites charge you for and have made it available for free (kudos to open source!).
Their product.. the amazing ClickHeat!
*farm1.static.flickr.com/152/416213105_a183f3d8e6.jpg
Last edited:
