根据用户视觉感官解决用户体验问题
日期:2012-08-29 10:46:32 来源:脚本之家
一、用户浏览页面的的规律
人们在浏览一些不同设计风格的新闻网站的首页时,研究者们发现了一个共同的眼球运动模式:他们的视线通常首先固定在网页左上角,然后在这个区域逡巡一阵后,开始右移,细读完页面顶部位置的内容后,开始继续往下扫描。
一打开网站页面,醒目的大标题往往首先吸引人的眼球,尤其是当它们在页面的左上方的时候。而在右上方,大多数情况下(但不总是)也都能特别引起人的注意。如果是图片,同人们所认为的刚好相反。
下图是通过对受试者视线跟踪的数据分析得出的区域分布图。整个图片代表一个网站页面,红、黄、绿色三个区域是按照受众关注程度的不同而划分的。左上方的红色区域受关注程度最高,黄色、绿色区域依次之。然而,值得注意的是,这种浏览模式也受到页面元素位于页面具体位置的影响,标题置放,图片,新闻摘要等都是决定其浏览模式的重要因素。比如在靠近主页中央区域处一个放置一个较大的新闻标题,那么它就会首先进入读者的视线。
二、字体越小容易受众悉心品读
小字体能促使人们更集中精力阅读,而相对较大的字体会使人走马观花式的进行“扫描”。一般来讲,读者得花更多的时间来集中精力阅读较小字体的新闻内容,当我们看到主页上的大号字体的新闻标题时,会促使我们进行快速的“扫描”,一带而过,而不像正文中的小字体那样去细读了。(当然值得注意的是我们并不是提倡任意地缩小字体,应该是在保证不影响正常阅读的前提下去适当地选择字体以达到平衡)
粗体的新闻标题文字比同样大小的内容提要的文字更能吸引受众的眼球。当标题字号比内容提要的字体大,并且它们分行显示时,人们往往只会浏览大字标题而忽略内容提要。研究人员认为字体的大小不同形成的对比促使这种阅读模式的形成,当然字体大小本身应该也是其中原因。因为当新闻标题字体比它紧随其后的内容提要的文字字体要大时,它往往就被认为是标题-内容提要这一板块里面更加重要的部分,于是人们就觉得阅读完新闻标题就已经足够了。
三、带下划线的标题有碍读者浏览其下方的内容摘要
文字中的下划线或线条,它们会阻碍人们继续浏览其后面的内容,如新闻标题后紧跟的内容提要。此现象对广告也会产生一定的影响,下文会谈到这方面的内容。现在绝大多数的新闻网站在其新闻标题后面都有对新闻内容起概括作用的内要提要,很少有新闻网站的新闻报道的正文前只采用大字标题。
四、大多数人喜欢浏览新闻标题、内容提要
研究发现当人们的视线转移到新闻标题后的内容提要时,他们一般只会浏览其左边1/3的部分。换句话说,绝大多数人仅仅会读完最前面的几个字,只有当其内容确实让人感兴趣他们才会继续往下读。下面是关于一个内容提要的热度感应地图(Heatmap)。Heatmap是指一个对受众视线固定在某一部分上的总的时间长度分布图。图中的左边的橙色区域是最受关注的,右方蓝色区域是不怎么就不太受关注了。
对于主页上面最新发生的新闻标题列表,人们通常会从列表的左上方开始扫描,然后往下,直到发现有感兴趣的新闻标题内容,一条新闻标题能吸引阅读者注意力的时间平均不足一秒钟。所以要想让新闻标题能吸引受众的眼球,应该在标题的制作上多下功夫,尤其是标题开头的那几个词必须有足够的吸引力,否则很难真正进入受众的视线。对于内容提要或新闻主体的写作就更应该遵循这一原则了,内容提要不仅要尽量的短小精悍,而且其开头部分必须能吸引阅读者的注意力。
五、热点内容能够更大限度的吸引人
研究发现在位于页面下方的区域,尤其是需要滚动页面才能看到的页面部分,受关注程度比较低,似乎这也和人们所预期的差不多。尽管这样,但这并不意味着需要滚动页面才能看到的内容就不能吸引受众的眼球。
人们确实会滚动屏幕页面来浏览所感兴趣的内容,但他们的眼睛往往只会扫描页面上较靠下方的部分来搜寻能吸引其眼球的内容信息。通常他们的视线会固定在某一有趣的新闻标题上或是一个能让人眼前一亮的词语上,而对其它内容视而不见。所以说,高水准的新闻标题制作对于吸引受众的注意力而言是相当重要和必须的。另外,热点模块也是一个不错的注意。
六、网站导航条置顶为佳
网站页面上的站点导航条的位置摆放各个网站都不尽相同,一般不外乎以下几种情况:位于页面顶端(网站标识Logo之下),左边,右边。研究表明,站点导航置于网站页面顶部的效果最好,也就是说,置顶导航条会让受众看到的机率最高,并且人们的视线在上面停留的时间也最长。在被测试的25家有名的新闻网站当中,我们发现有11家站点采用了置顶导航条,其余的14家用的是左栏导航。这当中又有7家站点同时采用了左栏和置顶导航条,但无一采用右栏导航的方式。
七、大幅图片备受青睐
测试中发现绝大多数人不会首先把目光投向页面上的图片,但是这些图片还是很能吸引他们的注意力。图片越大,人们的目光在其上面停留的时间也越长。对于邮票大小的面部图片,有10%的人会注意到,而普通照片大小的图片(约230 x230像素)则有高达70%的人会关注到。研究还发现,半数以上的受测者都会关注到210 x 230像素大小(或更大的)图片,面部看上去干净清爽的肖像图片更能吸引受众的眼球。
八、广告置放有技巧
该研究还对许多新闻网站主页以及其链接页面上各种广告的位置和广告形式进行了测试。测试结果表明人们通常不太怎么关注广告,但这也主要看广告放在页面上具体什么位置。当人们把目光投向一个广告时,往往也只有短短0.5-1.5秒的时间。当然,有利的广告位置再加上新颖的广告表现形式,还是可以延长这一时间的。位于页面顶端以及左边部分的广告最能吸引人的注意力,置于页面右边的广告效果不及左边或顶端广告。同时只有很少一部分的人会注意到位于页面底部的广告。
所有广告类型中,人们对文字类广告的注意力最集中,其持续关注时间平均为7秒左右,而对于表现力最为丰富的图像广告则平均只有1.6秒。同时,受众对广告的关注程度和广告版面的大小也有一定关联。篇幅较大的广告被看到的机率会更高,一般只有1/3的被测者会关注到位于页面右边的小广告,其它的广告他们甚至连看都不会看一眼。在链接的子页面,半页广告受关注程度最高,然而它们也只占到受测者在页面停留时间的38%,绝大多数对此类广告也从不予理睬。安插在新闻主体行文当中的广告最容易进入人们的视野,位于页面最左边或右边的垂直细长的烟囱形广告紧随其后。
您感兴趣的教程
在docker中安装mysql详解
本篇文章主要介绍了在docker中安装mysql详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编...
win10中文输入法仅在桌面显示怎么办?
win10系统使用搜狗,QQ输入法只有在显示桌面的时候才出来,在使用其他程序输入框里面却只能输入字母数字,win10中...
一分钟掌握linux系统目录结构
这篇文章主要介绍了linux系统目录结构,通过结构图和多张表格了解linux系统目录结构,感兴趣的小伙伴们可以参考一...
PHP程序员玩转Linux系列 Linux和Windows安装
这篇文章主要为大家详细介绍了PHP程序员玩转Linux系列文章,Linux和Windows安装nginx教程,具有一定的参考价值,感兴趣...
win10怎么安装杜比音效Doby V4.1 win10安装杜
第四代杜比®家庭影院®技术包含了一整套协同工作的技术,让PC 发出清晰的环绕声同时第四代杜比家庭影院技术...
纯CSS实现iOS风格打开关闭选择框功能
这篇文章主要介绍了纯CSS实现iOS风格打开关闭选择框,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作...
Win7如何给C盘扩容 Win7系统电脑C盘扩容的
Win7给电脑C盘扩容的办法大家知道吗?当系统分区C盘空间不足时,就需要给它扩容了,如果不管,C盘没有足够的空间...
百度推广竞品词的投放策略
SEM是基于关键词搜索的营销活动。作为推广人员,我们所做的工作,就是打理成千上万的关键词,关注它们的质量度...
Visual Studio Code(vscode) git的使用教程
这篇文章主要介绍了详解Visual Studio Code(vscode) git的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。...
七牛云储存创始人分享七牛的创立故事与
这篇文章主要介绍了七牛云储存创始人分享七牛的创立故事与对Go语言的应用,七牛选用Go语言这门新兴的编程语言进行...
Win10预览版Mobile 10547即将发布 9月19日上午
微软副总裁Gabriel Aul的Twitter透露了 Win10 Mobile预览版10536即将发布,他表示该版本已进入内部慢速版阶段,发布时间目...
HTML标签meta总结,HTML5 head meta 属性整理
移动前端开发中添加一些webkit专属的HTML5头部标签,帮助浏览器更好解析HTML代码,更好地将移动web前端页面表现出来...
移动端html5模拟长按事件的实现方法
这篇文章主要介绍了移动端html5模拟长按事件的实现方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家...
HTML常用meta大全(推荐)
这篇文章主要介绍了HTML常用meta大全(推荐),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参...
cdr怎么把图片转换成位图? cdr图片转换为
cdr怎么把图片转换成位图?cdr中插入的图片想要转换成位图,该怎么转换呢?下面我们就来看看cdr图片转换为位图的...
win10系统怎么录屏?win10系统自带录屏详细
当我们是使用win10系统的时候,想要录制电脑上的画面,这时候有人会想到下个第三方软件,其实可以用电脑上的自带...