skyoo61

导航

统计

Heatmap,热图的应用和相关技术

Heatmap热图,可以非常直观的呈现一些原本不易理解或表达的数据,比如密度、频率、温度等,改用区域和颜色这种更容易被人理解的方式来呈现。热图实际上是三维可视化的俯瞰效果。(颜色代表一个维度)。

我们对热图并不陌生,教科书里、天气预报里的气温地图是最典型的案例。

在用户体验制胜的微创新时代,热图在互联网用户行为分析上的应用也越来越被重视。常见的应用有:

鼠标点击热图:

演示地址 http://js.clicki.cn/#/clicki/heatmap   热图应用

屏幕滚动热图(scroll map):

眼动/注意力热图(Attention heatmap):

用户地区热图

热图的优缺点:

优点:

1. 与实景结合,数据表达更直观

原始数据:在一个1024*800的网页上的点击数据:{x:420,y:302}的信息可读性,跟下图相比显然不可同日而语。

2. 用形状和色彩传递信息,更易理解

人对事物的认知是感性的基于某种基模的,人对形、色、声、味、温度、压力…等可直接感知内容的理解要比数字容易的多,热图之所以为“热图”是用人们熟知的火焰色彩传达温度感,借助形、色和温度三种基模传递原本难以理解的数量信息,非常之给力。

3. 柔化视觉效果更好,对非精确信息表达更合理

摄影爱好者一定知道柔光摄影技巧,照出来的照片更漂亮。

柔化之所以更舒服是因为较为平滑的色彩过渡让人感觉更柔和。

有时候我们更希望得到数据的平均值或近似值,而不是精确值,比如我们点击网页上的内容时并不是精确到某一像素,而是一个区域。因此模糊处理后可以更合理的解释用户比较喜欢点击的区域。

 

缺点:

1. 柔化效果,对精确信息表达不准确

优点在某些时候也是缺点,当我们分析作弊时,精确点更具说服力:

看上面两张图,第一张图并不明显,第二张图就可以看出问题了,428个点击,平均分布在10个位置,偏移量不超过5像素,显然不是人干的。

 

2. 色彩传递感性化信息,不容易分辨具体值

还是这幅图,单从热图上看,只有9个圆点,而实际上有却有1400次点击。从热图上无法分辨出每个圆点涵盖了多少次点击,点击数等量增减,热图完全一样。

 

任何一种可视化手段都不是完美的,更不是万能的,所以我们在利用可视化技术时,应该根据具体需求做取舍。

热图的实际应用:

国外的热图产品比较有代表性的:

CrazyEgg:http://www.crazyegg.com

是我所知道最早的公开使用热图工具,有热图、点图、链接点击图。点图用flash实现,功能强大支持各种条件筛选过滤,而且非常好用。可惜是收费的,最低每月9美金,只支持10000pv和10个页面。

 

ClickTale:http://www.clicktale.com

Clicktale是我所知道最早实现用户鼠标轨迹监测的产品。除点击热图外,clicktale还支持鼠标轨迹重现、鼠标移动热图、scrollmap、表单分析等等深度用户行为分析功能。也是收费的,最低收费99美元/月。

 

国内也有很多产品支持热图:

Clicki:http://www.clicki.cn

Clicki是我所知道最早放出热图功能的产品,早在2007年就已经有案例,但是当时服务并不稳定,用的人不多。去年Clicki重新改版,热图功能非常给力,使用canvas实现,支持全站热图,热图实时更新,支持多条件过滤。目前功能免费,但需要邀请码才能注册。

 

百度统计:tongji.baidu.com

百度统计去年上线了热图功能,热图用flash实现,支持区域框选和条件过滤。功能免费,需要预先指定要统计的页面,数据延迟一天。

 

Cnzz也在今年放出热图功能,功能跟百度基本一致。

量子统计:http://lz.taobao.com/

量子统计的热图功能针对性更强,主要针对淘宝店铺,量子在淘宝上是收费的,我没有开通,不太了解具体功能。

热图的技术原理:

火丁笔记这篇文章非常清楚的解释了热图的技术原理:http://huoding.com/2011/01/04/39

Oldj这篇文章讲解了热图渲染的原理:http://oldj.net/article/page-heat-map/

综合这两篇文章,基本上能够实现一个简单的热图功能了。但要实现数据关联和动态更新,还需要更多的工作。

 

热图的开源工具:

Clickheat是我最早了解到的点击统计开源项目,是一个php的开源代码,用php渲染图片,呈现热图,热点太小,呈现效果一般,可以自己改一下,实现更好的效果。

 

phpHeatmap是2006年我做Clicki的热图时,实现的一套基于php的热图代码,当时看到Crazyegg,查了一些资料后自己尝试实现的,后来博客挂了一直没再更新。这次整理资料重新放到网上,有兴趣的同学可以参考。

 

Heatmapjs是一个基于js+html5的热图开源项目,Clicki的热图就是基于这个项目。功能完善,使用简单。

 

HeatCanvas是国人开发的一款基于js+canvas的热图项目。

 

热图技术的更多应用:

 

了解了热图的原理和优点,我们可以大胆应用,我举几个例子,抛砖引玉:

 

足球比赛中,可以用来呈现队员在场上的活动热图:

超市或商店里呈现顾客的移动和驻足的热图,用来优化商品和货架布局。

统计房屋租金价格,与地图结合看租房热度:

 

统计程序中的字幕频度,用键盘和热图呈现,来看不同编程语言的常用字符:

posted on 2012-03-20 14:34 skyoo61 阅读(...) 评论(...) 编辑 收藏