国外著名网站的眼球热力图、眼球跟踪图详解

aiboboxx

现在大家都在谈论网站的用户体验(UE或UX)和界面设计UI等热门话题，techfrom从来对概念本身不是特别关注，更关注实际应用和数据等。去年12月份左右，国外EyeTrackShop通过Mashable发布了一份有关国外几个著名网站和社交网络的用户眼球追踪图或者眼球热力图，尤其是个人信息页面(ProfilePage)被浏览时候的热点分部情况。涉及到的被调查的网站包括：Facebook，Google ，LinkedIn，Flickr，Youtube，Klout，Reddit，Digg，Tumblr，Twitter，StumbleUpon和Pinterest。我们特将呈现过读者，

, }" {1 J: d# C) x# t

2 a* \) ]& C& z3 f# a) r: y9 _                               
登录/注册后可看大图

/ P5 I1 o+ |; ]  e眼球热力图(eyetracking)研究说明：
这项研究使用网络摄像头记录下了30个参与者在浏览各个社交网站个人信息页面时候的眼动情况(进入页面后10秒内的数据)。记录下的数据包括：页面上的哪些内容被重点关照到，以及用户浏览页面各主要区域的先后顺序。
2 A- @0 z# ^" m% D0 d尽管由于采样的数量还不够多，实验结果很难说完美。不过从现有的数据中，研究人员发现：
6 T& Q. n" f( g8 E/ {& [2 C个人信息页面的头像很重要。在Facebook，Klout和StunbleUpon中，头像是该页面最吸引浏览者注意的地方
# D7 R2 S$ _! x, v# A! _你认识的朋友的头像也会获得相当的关注度。浏览者会查看该页面上你朋友的小头像图片。
- k3 G% a% a: T: i+ x7 ?  A内容越靠上，获得的关注度越大。这一点在Pinterest，Digg和Facebook上有很明显的反映。但是在Twitter和Youtube上则稍好一点。
国外各大著名网站的用户眼球跟踪和眼球热力图(eyetracking)：
社交网络Facebook
个人头像和顶端第一条更新的信息获得了最大的关注度。

                               
登录/注册后可看大图

$ [0 n: f9 P3 H, |% t) W& Z2 d6 ?这里显示的是测试者对于不同区域的浏览顺序，通常都是从中间的信息流开始。
* R% L1 k8 n% Q
# ?7 S7 c. n' `% J6 S

# F, H& O0 d- S                               
登录/注册后可看大图

( x0 Z3 }3 b( P6 r社交网络Google
尽管测试者在Google 页面的停留时间比其他社交网站都稍长，但是其个人头像图片却没有收获太大的注意力。

                               
登录/注册后可看大图

测试者在Google 信息流的平均停留时间为5.9秒，比Facebook和LinkedIn都稍长

                               
登录/注册后可看大图

LinkedIn，商务社交网站
在LinkedIn的页面上，网站标志获得了最大的关注
7 d8 f. c; B; i- w! L7 g. z% v

5 I" S- b: Y7 A5 h( x                               
登录/注册后可看大图

) q) O- f2 C4 `' b+ k

                               
登录/注册后可看大图

全球最大的图片网站Flickr
同LinkedIn一样，Flickr的Logo比该页的其他图片更加吸引浏览者的注意
+ ^2 b/ F+ {  a5 l9 M

                               
登录/注册后可看大图

1 Y# \+ @2 F+ i
0 ?( a" I9 _) z; ~2 t* J

                               
登录/注册后可看大图

视频分享网站Youtube
2 X; ], z7 ~: H3 ^: F可以看到有一个视频获得了比其他视频高得多的关注度
/ g1 Z# {  D! k' p- L* h5 ]

                               
登录/注册后可看大图

" e. V3 k/ c6 ?& K) K4 x9 [

                               
登录/注册后可看大图

社交影响力网站Klout
右下的小分数竟然比顶部显眼的大号分数获得了更高的关注度?这是神马情况
我们techfrom在社交影响力Klout,通过Twitter起步进驻Facebook,拥1000万美元融资详解过社交影响力网站Klout。
' k* m1 u, R! G6 M: P/ w$ V

$ q' V$ I' f, u1 u7 T4 ?' y                               
登录/注册后可看大图

9 d+ A& r" p& L, O: `+ O

: M: n' @4 d* L3 c( j                               
登录/注册后可看大图

社交新闻聚合网站Reddit
! }/ I: v9 J6 B/ ^3 w- b  Z0 u4 C$ _Reddit顶部的post明显比底部的要首关注的多
2 G5 `4 d! u. L2 ~$ f/ }

# f$ u* b6 W/ }/ W3 k' {/ _! ]                               
登录/注册后可看大图

3 ]- m9 t. z6 d+ U

% P$ J% y$ m. Q9 a  j7 d" l                               
登录/注册后可看大图

社交新闻网站Digg
# I, C* t( T2 x* {; V% D8 y' QDigg顶部的大盒子并没有如预期那样吸引浏览者的注意力。第一条更新仍然是最热点。

# |4 W; A( l* P9 o0 L; ?: d8 }                               
登录/注册后可看大图

$ s% }! F3 a3 I; C- j" A

                               
登录/注册后可看大图

轻博客服务Tumblr
) X1 x) I3 S! q9 e4 g$ `% j) J' b+ ~只能说帅哥养眼
- `' T& m! u. q8 L
2 `9 K0 Y* L( B6 }

; D: X/ b2 ]4 q! R  T                               
登录/注册后可看大图

8 B6 d9 v# i5 Y! \" U

                               
登录/注册后可看大图

% {0 n7 Z" @& O- b微博客商Twitter
终于到Twitter了。在Twitte的个人页面中，顶部和底部的关注度差距不大。这点优于其他社交网站。

5 u% I9 f3 V* |4 A- y* Q) L                               
登录/注册后可看大图

7 Y+ o$ K/ j: p1 ]. x

                               
登录/注册后可看大图

社交分享服务StumbleUpon
2 D# N/ N7 J) H0 G/ n- R2 c' Y" ]尽管StumbleUpon的个人头像在右侧同大部分社交网站都不一样，但是这并不能阻止它成为该页面的最热点。
2 j7 x' [+ i+ }
) n) w6 h" @9 y

                               
登录/注册后可看大图

1 @! @6 ^; \- v. R+ s6 u$ W

                               
登录/注册后可看大图

图片展示在线书签服务Pinterest
- C8 i" d6 C, k4 Z底部和顶部的关注度差距仍然很大。
/ i( @$ |9 T/ a2 R# K

+ n% m$ l0 c# D/ X% N                               
登录/注册后可看大图

7 V0 Q# N5 o# ~  N7 B8 ]/ c, |
" C8 a/ s3 ?1 J% N9 o

                               
登录/注册后可看大图

(更多详细和深入的数据，大家可以再仔细观察上面的眼球跟踪热度图或者眼球热力图。)
最后，请注意该文非原创，原版英文的作者SarahKessler来自Mashable，via，经过国内设计爱好者NickInteractionDesign译，via，techfrom特呈现。
# {% ^' M& M5 r7 P来源：http://www.techfrom.com/22036.html