沪ICP备06058754号-1
面向注意力维持的慕课平台用户界面设计研究

殷鑫琪 王军锋 王文军 史忠超

2019-06-18

用户体验 文集

2018年学术论文欣赏

本文段落精选

 

随着互联网产品的的不断发展,人们也逐渐通过互联网的视频方式进行在线学习。目前的在线教育网站的界面风格各色各样,设计师仅仅只是停留在视觉上的美观程度。

 

通过眼动仪对15名测试者进行观测,比较,最终确定了EDX为最佳方案,在页面布局和色彩方面帮助用户的视觉注意力集中。

 

加强视觉元素在在线教育网站中视觉注意力的影响,将大大提高消费者对于产品的认可度,增加用户的体验效果,增加市场竞争力。UI设计师不仅仅是为了好看,美观为最终目的,美观好看的背后应该考虑到使用者的使用环境,

 

 

 

面向注意力维持的慕课平台用户界面设计研究

 

殷鑫琪 王军锋 王文军 史忠超

西南科技大学

 

 

摘要:

 

本文旨在探究国内外典型在线教育网站中的不同的视觉元素的搭配,对用户注意力的影响,以用户的视觉注意力出发,基于眼动仪原理,采用视觉试验方法,观察研究慕课平台用户界面,以中国大学、MOOC、学堂在线、和EDX为主的用户界面设计要素。比较,得到用户的最佳视觉注意,并提取出该方案的视觉元素。分析出现有在线教育网站中页面存在的影响注意力的因素,给出设计改进策略。从而减少了UI设计师在进行在线教育网站中思维设计过程中的障碍,提高了慕课平台的市场竞争力,增强用户体验,提高用户对在线教育网站的认可度。

 

关键词:在线教育网站  视觉元素  注意力维持  眼动仪

 

 

 

一 引言

 

正文随着互联网产品的的不断发展,人们对于互联网的需求越来越大,人们也逐渐通过互联网的方式进行在线学习,而在线网站中又多以视频学习为主。如何通过网站中视觉元素的运用,提高用户在线教育网站中的视觉注意力,从而提高学习效率。是UI设计师进行产品界面设计的一个重要思想。[1]而目前的在线教育网站的界面风格各色各样,大多没有进行关于视觉元素对于在线教育网站中用户的视觉注意力的影响的科学研究,设计师仅仅只是停留在视觉上的美观程度,不能进行科学的专业的分析在线学习网站中页面中的视觉元素哪些是能够帮助用户集中注意力?哪些元素又是会在用户观看视频时分散用户注意力?一个良好的在线教育网站,不仅是对课程内容的优化,而且也应从考虑怎么样的一个界面才会帮助用户的注意力更加集中?因此加强视觉元素在在线教育网站中视觉注意力的影响,将大大提高消费者对于产品的认可度,增加用户的体验效果,增加市场竞争力。

 

二 用户界面

 

用户界面(简称UI)是人机交互过程中图形化表达的表达方式,能够把电脑端的数据转换为用户能够接受的表达形式,是用户和机器硬件之间双向施加影响和双向作用的软件区域,是用户和人机交互的各种信息交流以及控制活动在此区域进行。文字,图片,色彩都是组成用户界面的基本元素,当我们进行网页设计时,UI设计师需要从从各方面考虑如何让用户最大程度的接收网页上所传达的信息,这就需要UI设计师从科学的视觉元素基础出发,设计出内容传达准确、界面整体和谐且美观,并且有一定设计感的网站页面。[2]这样才可以使用户在一个平和的状态中浏览网页上给用户的一个视觉信息,并且加强用户对网页的视觉印象,从而提高用户认可度。

 

2.1 图像的编排与处理

 

图像在网页中起到点缀装饰作用。设计者可以使用不同样式,但又与文字相符合的图像对网页进行辅助装饰,不仅可以提升网页的设计感,而且可以帮助用户对网站内容的理解,使用户更快的接收到网站想要传达得内容,提高用户的识别效率。当然图像的大小、比例、分辨率。风格也影响着用户对这个网站的认可度。在进行网页的编排中需要我们不仅要考虑到图文一致,而且在风格的把控中也要统一。

 

2.2 色彩

当用户打开网页时,网页首先让用户第一感知到的元素就是色彩。[3]用户对这个网站的印象如何,首先就是该网站对色彩的搭配与运用有关。颜色的不同给人传递的情感也不同。UI设计师在进行网页设计的时候,不仅用色应该合理,科学,而且要展示出展现出网站自身的特点。

 

2.3 文字

 

在网页设计的方向来说,文字作为传播信息的主要媒介,会让用户通过网页上的文字这个中介接受网站所要表达的内容。文字设计表现的好坏直接影响着整个网页设计的成功与否。就网页中文字的主要功能来说,要想准确有效的传达信息,就必须考虑文字编排的整体视觉传达效果,是否能给受众简洁明了的视觉印象,提高页面的诉求力。[4]

 

 

 

三 眼动仪原理

 

眼动仪是一种记录人眼动轨迹变化的精密仪器,它能捕捉并记录下诸如跳、注视、瞳孔大小、视觉轨迹等人眼的任何一个细小动作。在用户体验与交互研究基础实验中,眼动追踪可提供能够揭示可用性问题的用户行为数据,这是一种非常客观和直接的研究方法,主要通过眼动热点图和眼动轨迹图两种形式呈现即可。[5]

 

 

四 实验

4.1 实验目的

 

基于眼动仪实验,观察记录用户对学堂在线、中国大学MOOC、Coursera和EDX这四个典型的在线教育网站中视觉注意力的改变轨迹,再将结果进行对比,探究不同在线教育网站中的视觉元素中那些元素会对对用户注意力产生影响。

 

4.2 实验对象

4.2.1 观察实验的道具与实验材料

 

本次实验的道具采用外接电脑屏幕,型号为SAMSUNG S27D360,屏幕大小为27寸, 分辨率为1366x768,刷新频率为60HZ记录被试的判断和评价。

本次实验以学堂在线、中国大学MOOC、Coursera和EDX这四个典型的在线教育网站为实验材料。根据实验设计,考虑到视频内容作为一个较大的干扰项目,会影响实验对象的视觉注意,在实验前,在微信上随机抽选了10名测试者,对网站中的视频内容进行预测试(实验内容),将测试分为五个层次,删除所有高分和低分视频内容,使实验材料中使用的视频内容保持主体兴趣平衡。

 

4.2.2 测试对象

 

测试人员与电脑屏幕的视觉距离在40厘米至50厘米之间。实验分为四组。每完成 1 个小组实验,管理者给予被测试者1分钟的眼部休息时间。

测试者人数为15人,分别为7男8女,年龄20 -25周岁,身体健康,矫正视力正常,无色盲色弱患者。

 

4.2.3 实验原理

 

通过眼动仪这个仪器进行使用者浏览的追踪,在检测的同时记录使用者在打开在线学习网站的视频页面时的视觉改变轨迹,通过视觉改变轨迹以及频率,来判断视觉元素中哪些因素会影响用户的视觉注意力,实验分为四组,通过对学堂在线、中国大学MOOC、Coursera和EDX这四个典型的慕课网站中视频播放的页面的定位测试素材。并且将这四个测试素材进行不同区域的划分如图1、图2、图3、图4所示,通过区域的划分使用眼动仪进行瞳孔的轨迹追逐,为保证实验效果,视频页面中的视频内容设置在同一课程内容,并且规定测试时间,再进行测试。得到测试结果后,进行结果分析然后判定不同的网页在不同的视觉元素构成时对用户视觉注意力的影响。

 

图1 Coursera

 

图2 中国大学MOOC

 

图3 学堂在线

 

图4 EDX

 

4.2.4 测试靶材

 

(1)测试目标页面区域的选择

由于本次实验采用的道具为27寸的外接电脑屏幕,当我们的用户正在观看课程的一个界面,除去浏览器的导航菜单栏,所呈现在用户眼前的界面只有3175*306mm的大小。在这样的大小区间将页面进行素材块状分布,每个区域里面都是有不同的页面素材,列如颜色,字体大小,排版等。

(2)测试目标的内容选择

由于我们的测试对象是不同的网站,但是学科里面的分类是统一的,我们这次的测试素材是定位在人文社科类的中国古代诗词分析与讲解内容,学习语言为中文。

 

 

4.3 实验准备

 

在以封闭且安静的空间保证测试空间只有测试者和被测试者两人,光线保持不刺激双眼,被测者的座位位置保持与显示屏的距离55cm上下,并让被测者随时注意自己的坐姿如图5所示。

眼动校准:保证被测者的眼睛在眼动仪的视觉捕捉范围内。

图5 实验现场

 

4.4 开始试验

 

本着严谨,真实的实验原则,本次实验全程追踪,实时监测,实验涉及到参与实验的人员与相应器械,器械为电脑和眼动仪监测设备,全程分析用户在实验过程中对于画面的不同区域块和色块的关注点和热度。在网站中实验页面分为中国MOOC、EDX、Coursera.学堂在线这四个慕课网站,以第一名测试者的测试结果为例(表1)得到视觉焦点图,将测试的焦点图与轨迹图中用户的瞳孔在中间视频区域中的得分为0-2分,在导航栏的区域中为3-5分,在网站LOGO中得分6-7分,在网站中其他区域中停留为8-10分。分数越高则越不利于用户注意力的集中。

表1 某单个实验对象的实验数据

网站

视频区域

导航栏

LOGO

其它

Coursera

2

5

7

9

MOOC

2

5

7

10

EDX

1

3

6

8

学堂在线

1

4

6

9

 

 

上图为某测试者的实验结果,剩下的14名参与实验的被测者也同样以这样的测试形式来进行实验并进行记录。为保证实验的精确度以及准确性将20名被测者的数据进行整理以及计算分析,取之间的平均数将平均值记录并整理得到相应的实验结果。为方便观看将图三的数据整理成一个折线图如(图6)所示:

 

图6 某被测试者的实验结果

 

将测试结果依照每个时间段里面的注视区域进行数据处理。为得到实验数据的准确性,以之前单个的测试结构与分析结构为例子,将剩下的14个被测试者进行相同实验方法和记录分析方法,对20个被测者进行平均数的分析,从而得到一个最终的数据如表(2)所示。

 

表2 20名测试者的平均测试结果

网站

视频区域

导航栏

LOGO

其它

Coursera

1.75

4.77

6.87

9.95

MOOC

1.86

3.92

6.38

9.87

EDX

1.15

2.67

5.27

9.12

学堂在线

1.35

3.85

5.54

9.23

 

 

 

在得出平均测试结构后也同样是依照之前的单个测试者的数据分析方法将20名的被测者的实验数据进行数据处理得出直观的折线图如图7所示,在不同的时间段用户注意的区域快,当数据波动越大,数值越高则用户的视觉注意力越不集中。

 

图7 20人测试结果折线图

 

根据实验数据结果得到,EDX的波动最为平缓且分值也最低,从而对EDX的界面进行用户界面分析,分析出实验中,用户视觉注意力转移在哪个模块?这个模块中的是哪些界面元素?分析研究模块中的元素,在慕课网站中怎么样的色彩,布局字体大小能够为更好的帮助用户进行视觉的注意度的集中,为慕课界面的安排提供建议。

 

4.5 实验结果

 

通过本次实验,通过眼动仪的使用,系统的对用户页面不同区域和不同色彩的专注度有了系统的了解。通过实验发现EDX用户注意力的影响因素主要是右侧“提词板”,提词板的内容也与课程内容有关。整体来看,重点部分都能引起用户的注意。Coursera用户在看视频时会被浮动导航栏吸引,大部分的目光会被吸引在导航栏上。Mooc色块比较明显,但过分突出也影响了用户整体的注意力。[7]在学堂在线上,用户注意力基本上被导航栏和视频详细信息吸引。综合来看,其他的几个页面虽说有明显的色块,一些点很能吸引用户,但过度的色块布置让整体画面太显突兀,总体上来看EDX页面布局最好,通过眼动仪的观测,比较,最终确定了EDX为最佳方案。

 

五 讨论

5.1 页面布局对注意力维持有不同影响度

 

从EDX来看除去浏览器的导航栏部分,网站能给用户的尺寸是479*223,同时视频的尺寸是251*190,右边的题词板是132*190,后面的背景色块是388*205。当用户滑到播放页面时刚好就是视频区域,比例恰当,用户也不用再进行调整也没有与本堂课程不相关的内容出现,从而更加帮助用户的注意力进行维持,交互设计师可以一次为鉴,在进行页面布局时要考虑到鼠标的滚动过程中,我们的视频区域应该放在鼠标滚动频率刚好的位置。在整个视频观看区域中,可以看到EDX给我们的展示的内容除了播放器,还有提词板,提词板的采用对于慕课网站中的作用很大,因为在用户观看外语的视频内容时,可以观看一个实时的翻译,同时,在遗忘视频上几帧讲解的内容时还可以手动进行调节,学习的一个自由度也比较高。

 

5.2 页面色彩对用户的注意力产生不同的影响

 

从EDX来看图(8),整体色调是黑白灰的无色相的的颜色,整个页面中的彩色只是视频的区域,彩色能够吸引用户的注意力,从而用户的注意力不会被非本堂课程的内容所吸引,帮助用户的视觉注意力集中,观察了实验数据以及录屏数据[8],EDX的页面中用户的视觉浏览记录主要是在视频区域还有就是右边的提词板,因为提词板采用了RGB:221,220,220冷蓝色,后面的背景也采用RGB:241,244,241冷灰色。冷色调可以帮助用户心情平静,能够很快地进入学习状态,UI设计师在选择色彩时可以采用冷色系和黑白灰,这样可以帮助用户集中自己的视觉注意力。

图8 EXD的界面

六 结语

 

通过整个实验过程的严谨验证,最终得出EDX界面是最优化的界面设计,通过眼动仪的监测也发现多数时间用户的关注点都在视频内,而且热点图显示也在重点区域,这说明EDX方案是相对而言最成功的方案,值得研究与推广。以期达到更好的页面视觉效果。UI设计师在进行慕课网页设计时,可以采用上面的结果,进行设计,同时团队在进行设计时也可采用一些结果,这样也帮助产品的开发,从设计师的角度来说,UI设计师不仅仅是为了好看,美观为最终目的,美观好看的背后应该考虑到使用者的使用环境,在慕课网站中就应该还要考虑到一个怎么帮助用户集中注意力的一个问题。从用户来说,各大网站资源都大同小异,但是用户最红选择哪个个网站来学习,就是凭借着自身的使用经历以及感受来决定。此实验结果对提高了慕课平台的市场竞争力,增强用户体验,提高用户对慕课平台的认可度也是有一定帮助的。

 

参考文献:

 

【1】托马斯·达文波特.注意力管理[M].王传宏,译.北京:中信出版社,2002.THOMAS H D.The Attention Economy[M].WANG Chuan-hong,translate.Beijing:CITIC Press,2002.

【2】冯冲. 界面中的注意力设计[D].北京:北京交通大学,2012.

【3】张豹,黄赛,候秋霞. 工作记忆表征捕获眼动中的颜色优先性[J]. 心理学报,2014(1):17—26.

【4】白学军,宫准,杨海波,田瑾. 位置和内容对网页广告效果影响的眼动评估[J]. 应用心理学,2008(3):208—212.

【5】徐娟.眼动仪的发展和性能比较[J].中国现代教育装备,2012(23):16-18.

【6】张杰,魏维.基于视觉注意力模型的显著性提取[J].计算机技术与发展,2010,20(11):109-113.

【7】梁晔,刘宏哲.基于视觉注意力机制的图像检索研究[J].北京联合大学学报(自然科学版),2010,24(01):30-35.

【8】辛曼.移动互联 :用户体验设计指南[M].熊子川,李满海,译.北京:清华大学出版社,2013.

 

 

 

 

UXPA中国会员登录

记住我

第三方登录

×

微信登录

×
请使用微信扫描二维码登录 “UXPA中国官网”

下雨的春天

已使用微信登录(更换账号)

×

会员密码找回

×