用眼动研究提升网站可用性(图像)
人们浏览网页时,经常会忽略图像,而且通常他们注视图像的时间只持续零点几秒。
1 什么样的图像能吸引注意,什么样的不能
2 如同障碍物的图像
普通的图像看似能让用户的视觉从繁重的文字阅读中得到休息,但是由于人们会尽量避开那些没有用的图像,因此实际上这是加重了人们的认知负荷。
人们不会浪费时间去仔细辨别低对比度图像中显示的对象,他们只会对其视而不见。
删除用于填充页面空白的图像。我们的建议是:什么都不放。就让它空着。还有一种方式是缩短页面的长度或者加大页面其他部分文字的默认尺寸。
3 吸引人们注意力的图像的特征
(1)对比度,质量和细节
图像主题与背景之间是否具有较高的对比度也许是决定人们是否关注这幅图像的主要因素。用户更愿意注视通过周围视觉感知就能理解的图像。
对比度低、与内容没有关联的图片很难引起人们的注意。人们也很少注意哪些很难让人快速理解它所表达的意思(即使看了这些图片也无法立刻理解其中的含义),所占空间狭小细节又太多的图片。
此外,动机和期望有助于不佳的图像得到注视。
图标化的图像都有清晰的线条,较高的对比度,传达的信息都通俗易懂。如果某个图像让用户哪怕是稍加思索才能明白它所表达的意思,那么这个图像就不是图标化的图像。如果图标化的图像不能让人迅速明白它所表达的意思,那它就不会得到人们的注视。
相比于背景复杂的图像,人们更愿意注视具有简单背景的图像。此外,包含较多对象的图像得到的注视比较少。
(2)创新性
有85%的时间人们会忽视模板图像。网页设计人员可以考虑采用更合适的图像(有创新,能够吸引注意力)或其他更有用的内容来代替他们。
(3)与内容的关联
人们对页面上与文字内容高度相关的图像的关注要远远高于与内容无关的图像。
(4)有吸引力的元素
很多有吸引力的图像都有一些吸引用户注意力的共同属性,例如简洁明晰,尺寸恰当(相对于细节内容),对比度强烈,而且与上下文的文字高度相关等。当然,这也取决于用户当时的动机和期望。
面部
微笑。人们会对近距离微笑的脸庞感到亲切。
面对镜头。用户会对注视镜头或者至少面向镜头的人物图像给予更多的关注。
真实可信。人们会对虽然不完美但看上去很真实的人物图像的注视要多于对模板类型的图像或过于精致的脸庞的注视。
处于简单的背景中。人们更可能注视处于普通北京或者简单背景中的人脸的图像。
人物
单人照片中的细节通常比多人照片中的少。随着图像中细节的增加,对比度会减弱,人们对它的注视也可能减少。
如果人们觉得照片有帮助,他们可能就会仔细察看照片中的人物。
如果多人照片与页面的主题或者用户的任务关系不大,人们注视它的时间就会减少很多,但这并不能说明那张照片没有用处。例如,人物照片有时会用于展示一个机构或网站的“面貌”。
吸引人且看上去真实的人物
注视人物图像时的性别差异
女性可能会更多地关注手头的任务,而且只查看和任务相关的选项,而男性的实现在完成任务期间会稍微偏离任务。
人体及人体的性征部位
当在网页上质性任务时,男性用户比女性用户更趋向于注视人体的性特征部位,但这并不会影响他们完成任务的成功率和完成时间。
动物的身体
非性征身体部位
人们也会被人体和动物身上其他引人注意的部位所吸引,例如皮肤和血液。
对物体的关注
在关注网页上的图像时,人们经常被那些有魅力的人以及他们所关注的对象所吸引。可以用这样一张图片来吸引人们去关注某个对象:一个有魅力的人微笑着面对镜头,注视着那个你想让用户关注的对象。
看上去美味的食物
(5)承载信息的图像
人们一般会注视传递信息或展示流程的图像。
说明性的图像不应让用户感到困惑
地图
要确保地图具有良好的对比度和清晰的标注。人们会注视能清晰传递信息的地图,而忽视让人觉得困惑的地图。
(6)类似广告的图像
人们会厌烦或忽视像广告一样的图像,我们把这种现象称为”对图像的错误忽视“。
一下几种情况可能会让用户们把图像误当成广告:(1)图像的颜色和风格与页面上其他地方的差异过大;(2)图像所处的位置和外形与广告类似,例如位于页面顶部的水平横幅内,或者位于页面右侧的长方形区域;(3)图像是单色背景;(4)图像显示的文本过于格式化,或者文字和图像位于同一个内容框架里;(5)图像以动画的形式展示。
(7)卡通和插图
通常,网站上源于现实生活的真实图像比那些认为绘制的图像更吸引人。然而,人们一旦注视页面上的插图,就会比照片注视得更长久和更专注。因为插图比照片更常用于演示某个过程或给出使用说明。但卡通类型的插图却一点也不受瞩目。
如果某些插图能够吸引用户的注意力,用户很可能会持续注视这些插图。因此,要让这些插图与用户所关注的内容相关,并让用户觉得值得注视,差异的细节要准确和容易理解。而照片则不同,要确保用户能在很短的时间和几个注视点内就明白照片所要传达的信息,这也是网站上绝大多数照片所追求的目标。
(8)电子商务网站上的图像
(9)运动的图像
动态进度条
进度条是动画在网页上的一个非常好的应用,它能告诉用户系统正在根据他们的命令运行。在进度条中包含简短的说明性文字对用户非常有帮助。
风格迥异的进度条
当设计人员网页面上添加与内容无关、冗长且并非用户所期望的多媒体元素时,他们无疑是在冒险。
干扰注意力的动画
动画控件
人们上网时的控制欲很强。对页面上动画的操控则最能彰显他们的这一行为特性。人们期望动画可以以他们认为合适的方式开始、暂停和退出。
电视和电影
不断进步的网络用户
1 什么样的图像能吸引注意,什么样的不能
2 如同障碍物的图像
普通的图像看似能让用户的视觉从繁重的文字阅读中得到休息,但是由于人们会尽量避开那些没有用的图像,因此实际上这是加重了人们的认知负荷。
人们不会浪费时间去仔细辨别低对比度图像中显示的对象,他们只会对其视而不见。
删除用于填充页面空白的图像。我们的建议是:什么都不放。就让它空着。还有一种方式是缩短页面的长度或者加大页面其他部分文字的默认尺寸。
3 吸引人们注意力的图像的特征
(1)对比度,质量和细节
图像主题与背景之间是否具有较高的对比度也许是决定人们是否关注这幅图像的主要因素。用户更愿意注视通过周围视觉感知就能理解的图像。
对比度低、与内容没有关联的图片很难引起人们的注意。人们也很少注意哪些很难让人快速理解它所表达的意思(即使看了这些图片也无法立刻理解其中的含义),所占空间狭小细节又太多的图片。
此外,动机和期望有助于不佳的图像得到注视。
图标化的图像都有清晰的线条,较高的对比度,传达的信息都通俗易懂。如果某个图像让用户哪怕是稍加思索才能明白它所表达的意思,那么这个图像就不是图标化的图像。如果图标化的图像不能让人迅速明白它所表达的意思,那它就不会得到人们的注视。
相比于背景复杂的图像,人们更愿意注视具有简单背景的图像。此外,包含较多对象的图像得到的注视比较少。
(2)创新性
有85%的时间人们会忽视模板图像。网页设计人员可以考虑采用更合适的图像(有创新,能够吸引注意力)或其他更有用的内容来代替他们。
(3)与内容的关联
人们对页面上与文字内容高度相关的图像的关注要远远高于与内容无关的图像。
(4)有吸引力的元素
很多有吸引力的图像都有一些吸引用户注意力的共同属性,例如简洁明晰,尺寸恰当(相对于细节内容),对比度强烈,而且与上下文的文字高度相关等。当然,这也取决于用户当时的动机和期望。
面部
微笑。人们会对近距离微笑的脸庞感到亲切。
面对镜头。用户会对注视镜头或者至少面向镜头的人物图像给予更多的关注。
真实可信。人们会对虽然不完美但看上去很真实的人物图像的注视要多于对模板类型的图像或过于精致的脸庞的注视。
处于简单的背景中。人们更可能注视处于普通北京或者简单背景中的人脸的图像。
人物
单人照片中的细节通常比多人照片中的少。随着图像中细节的增加,对比度会减弱,人们对它的注视也可能减少。
如果人们觉得照片有帮助,他们可能就会仔细察看照片中的人物。
如果多人照片与页面的主题或者用户的任务关系不大,人们注视它的时间就会减少很多,但这并不能说明那张照片没有用处。例如,人物照片有时会用于展示一个机构或网站的“面貌”。
吸引人且看上去真实的人物
注视人物图像时的性别差异
女性可能会更多地关注手头的任务,而且只查看和任务相关的选项,而男性的实现在完成任务期间会稍微偏离任务。
人体及人体的性征部位
当在网页上质性任务时,男性用户比女性用户更趋向于注视人体的性特征部位,但这并不会影响他们完成任务的成功率和完成时间。
动物的身体
非性征身体部位
人们也会被人体和动物身上其他引人注意的部位所吸引,例如皮肤和血液。
对物体的关注
在关注网页上的图像时,人们经常被那些有魅力的人以及他们所关注的对象所吸引。可以用这样一张图片来吸引人们去关注某个对象:一个有魅力的人微笑着面对镜头,注视着那个你想让用户关注的对象。
看上去美味的食物
(5)承载信息的图像
人们一般会注视传递信息或展示流程的图像。
说明性的图像不应让用户感到困惑
地图
要确保地图具有良好的对比度和清晰的标注。人们会注视能清晰传递信息的地图,而忽视让人觉得困惑的地图。
(6)类似广告的图像
人们会厌烦或忽视像广告一样的图像,我们把这种现象称为”对图像的错误忽视“。
一下几种情况可能会让用户们把图像误当成广告:(1)图像的颜色和风格与页面上其他地方的差异过大;(2)图像所处的位置和外形与广告类似,例如位于页面顶部的水平横幅内,或者位于页面右侧的长方形区域;(3)图像是单色背景;(4)图像显示的文本过于格式化,或者文字和图像位于同一个内容框架里;(5)图像以动画的形式展示。
(7)卡通和插图
通常,网站上源于现实生活的真实图像比那些认为绘制的图像更吸引人。然而,人们一旦注视页面上的插图,就会比照片注视得更长久和更专注。因为插图比照片更常用于演示某个过程或给出使用说明。但卡通类型的插图却一点也不受瞩目。
如果某些插图能够吸引用户的注意力,用户很可能会持续注视这些插图。因此,要让这些插图与用户所关注的内容相关,并让用户觉得值得注视,差异的细节要准确和容易理解。而照片则不同,要确保用户能在很短的时间和几个注视点内就明白照片所要传达的信息,这也是网站上绝大多数照片所追求的目标。
(8)电子商务网站上的图像
(9)运动的图像
动态进度条
进度条是动画在网页上的一个非常好的应用,它能告诉用户系统正在根据他们的命令运行。在进度条中包含简短的说明性文字对用户非常有帮助。
风格迥异的进度条
当设计人员网页面上添加与内容无关、冗长且并非用户所期望的多媒体元素时,他们无疑是在冒险。
干扰注意力的动画
动画控件
人们上网时的控制欲很强。对页面上动画的操控则最能彰显他们的这一行为特性。人们期望动画可以以他们认为合适的方式开始、暂停和退出。
电视和电影
不断进步的网络用户