学研探索
147
交互
摘要：为了研究用户的网页浏览习惯及效率。论文借助眼动实验，并结合问卷调查，将主观评估和客观数据相结合，以高校为例，对用户浏览网页
行为和效率进行研究，获得用户眼动数据及对网页喜好度数据。用户浏览高校网站时第一注视点及最关注的区域在网页中上方；搜索信息效率越低，用户喜好度越低；信息放在打开网站的第一屏时，搜索效率最高。从信息内容、用户服务、网站结构及网页风格四个方面对高校设计提出建议。研究结果为高校网页设计提供参考依据。
关键词：眼动实验  网页设计  高校  浏览习惯  搜索效率中图分类号：TB472                文献标识码：A 文章编号：1003-0069（2021）05-0147-03html网页设计论文
Abstract：
In order to study users' browsing habits and efficiency in web.This paper, with the aid of eye movement experiment as well as questionnaires, combines
subjective evaluation with objective data and takes the official website of universities as an example, to study the behavior and efficiency of users'browsing of web page, and obtain the data of users' eye movement and that of preference degree for web.Users'first focus and the most concerned part is in the middle and upper side of the web. The lower efficiency of users searching information, the lower degree of their preference is. But there is the highest search efficiency when the information is placed on the first screen of the website.This paper will give suggestions to universities'official website design from four aspects: information content, user service, website structure and web style. The results will provide reference for the web design of university official website.
Keywords：
Eye Movement Experiment  Web Design  University Official Website  Browsing Habits  Search Efficiency
西安工程大学服装与艺术设计学院 武晓燕  张阿维
引言
互联网的时代，高校是高校宣传的重要平台与载体，网站设计的好坏直接影响用户使用高校
的积极性，然而对于高校官方网页设计的研究方法多以问卷调查、专家打分等方式进行，评估具有主观随意性。而眼动仪可以实时捕捉用户的行为习惯，通过被试者的眼动轨迹、热点图以及相关数据可对网页的设计情况进行直观、准确地分析评价。本文以国内部分知名高校首页为研究对象，采用眼动实验对被试者浏览高校官方网页过程进行研究，并在实验结束后立即填写调查问卷，获取用户的主观信息，将主观评估和客观数据相结合，对用户浏览高校的习惯及用户的视觉搜索因素进行分析探讨，使结论更加全面具体，为高校的网页设计提供参考依据。
一、眼动实验与高校设计
眼睛是人类获得外界信息的主要途径，视觉是加工处理信息的重要方式，用户浏览网页时主要是通过眼睛获取搜索信息。眼动仪是用来记录处理眼动数据的设备，是心理学研究的重要仪器，眼动测试是内隐测量方法的一种，其实验数据可以直接反映用户行为，近些年
眼动实验在高校网页设计中的应用
APPLICATION OF EYE MOVEMENT EXPERIMENT IN WEB DESIGN OF UNIVERSITY OFFICIAL WEBSITE
被广泛应用于网站的设计与评估中，用于分析用户对网站的视觉浏览习惯。眼动实验能够记录用户在
浏览网页时眼睛的运动数据，包括总注视时间（Total Fixation Time，TFT）、注视次数（Fixation Count，FC）、平均注视时间（Average Fixation Time，AFT）。眼动实验的主观性图表在网页设计研究中被使用最多的是热点图和轨迹图。
近些年，眼动追踪被广泛应用于网页设计研究之中。许鑫等人利用眼动追踪实验研究用户在浏览高校图书馆门户网站主页时的浏览习惯，提出了高校图书馆门户网站网页设计时应考虑的重要因素[1]；王诗傲将眼动分析法引入到工业设计服务网站的界面设计评估上，
通过眼动指标完善工业设计服务网站评价体系内容[2]；
刘玮琳等人通过眼动实验探究网页界面中的分类信息设计对用户认知效果的影响
规律[3]；
吴安波等人对某高校教务网站的可用性进行了分析，在一定程度上为教务网站的设计及改进提供参考[4]
。
由此可见，利用眼动实验对网页设计进行研究已经较为成熟，为高校网页设计的研究提供了理论基础。
高校是依托于高等学府，以服务教育、服务科研、服务师生为目的，肩负对内交流、对外宣传的使命，从事教育资源整合、高
校信息发布、辅助教学管理的综合性网站[5]
。
高校既是学校信息传播的重要载体，也是校内师生管理系统的重要入口。针对高校设计研究方面，李嘉瑜以国内“985”高校为研究对象，以
美学视角为出发点，对高校的版式界面进行了详细的分析[5]
；
万立军等人通过国内外学者对目前高校网站信息服务质量评价相关研
究内容的分析，构建我国高校网站信息服务质量评价指标体系[6]；
孔宁通过询问技术，从用户的主观倾向性出发，对高校门户网站可用性
进行了进一步的探索与研究[7]
；
王传松应用文献分析法、用户访谈和问卷调查法、层次分析法以及模糊综合评判法等方法，构建了基于用
户体验的高校网站评价模型[8]
。
通过对搜索的文献进行整理发现目前针对高校网页设计的研究并不多，眼动实验在这一研究领域中还有待探索。二、实验设计
眼动实验的方法主要有两种，一种是无目标浏览，另一种是典型目标搜索任务。本次实验分为两组（实验A和实验B），实验A：无目标浏览，在规定的时间内被试按照自身习惯对十张刺激材料进行浏览，研究被试在正常情况下浏览高校主页的习惯。实验B：典型目标搜索任务，要求被试以通知公告栏作为搜索目标，在浏览结束后对实验材料进行打分，研究通知公告栏在不同位置的搜索效率。
（一）实验材料
流量是衡量网站是否受欢迎的一个重要指标，本次实验刺激材料采用站长之家根据Alexa排名、百度权重、PR值以及反链数四种因素综合排名的高等院校网站排行榜的前十名高校主页，分别编号为A、B、C、D、E、F、G、H、I、J，十所高校均为双一流高校，查询时间为2020年11月29日。并选取西安工程大学主页作为演示材料进行规则讲解。
（二）实验设备
实验设备为由瑞典公司所生产的Tobii眼动仪，型号为：Tobii X2-
学研探索
148交互
30，采样频率30Hz。实验材料通过分析处理软件Ergolab2.0显示在戴尔电脑显示屏，分辨率为1920*1080，被试眼睛与显示屏的距离保持在60cm左右。
（三）被试
高校的师生是高校吸引的绝大部分访问对象，因此被试为随机招募的西安工程大学在校本科生、研究生及教师，被试的年龄在18~34岁，男女比例1:1，其中本科生16名，研究生12名，教师2名，共3
0名。所有被试身体状况良好，无盲症状，视力或矫正视力均在1.0以上，均有使用电脑上网的经验，能熟练操作计算机。根据实验任务30人随机分为2组，无目标浏览15人，典型目标搜索任务15人。测试完成后每人将会获得一份小礼物。
（四）实验流程
整个实验在采光良好、安静的交互体验与可用性测试实验室进行。实验员向被试简单介绍实验设备、实验流程及注意事项，待被试适应环境后，坐在实验位置上并在实验知情书上签字。
打开软件，输入实验名称，将实验刺激材料导入，设置相应参数；被试坐在距离电脑显示屏60cm左右的位置，调整坐姿，目光保持平行；采用五点校准法对被试进行眼动数据校准；被试浏览指导语；浏览屏幕上的实验刺激材料；参与实验B的被试填写纸质版喜好度问卷；实验结束，整理数据。三、实验结果及问卷分析
（一）热点图分析
热点图是被试浏览网页时图形化表示的数据，用不同颜来表示被试对界面各处的不同关注度，主要通过绿、橙和红三种颜表示。被试在一区域的注视时间越长，注视点越多，颜越深；注视时间短、注视点少则颜浅，可以直观地看到被试视线集中的区域，从而知道最关注和最容易忽略的区域。
通过实验A所得到的热点图（15组数据叠加之后的热点图，随机选择展示，如图1所示）。从图中可以看到，网页中学校logo及导航栏颜多为红，轮播图区域为绿和橙，信息栏中的标题及图片新闻区域多为橙。网页右下角的文章标题链接区域颜为绿，网页右侧区域颜较淡。从热点图中可以看到，被试在浏览的过程中，最关注的区域在上方的位置，也就是学校标识及导航栏；轮播图传达信息更加直观，能够吸引人的眼球；加大加粗的标题比大段文字更吸引用户的注意力；图片比文字更加吸引人的注意力；重要的信息不宜放在网页的最右侧区域。
（二）轨迹图分析
注视轨迹图用于记录被试在浏览网页的注视轨迹，数值1、2、3……代表注视点的顺序，注视停留时间越长，注视点的半径越大。通过注视点轨迹图可知被试首先注视的区域、注视的先后顺序、注视
停留时间的长短以及视觉是否流畅。
通过实验A所得到的注视点轨迹图（随机选择展示，如图2所示）。从轨迹图中可以看到，第一注视点往往在网页的中上区域，即轮播图的位置，第二注视点一般在导航栏，然后根据从上自下的浏览习惯进行浏览，图片右侧偏下的位置几乎没有注视点。通过注视点轨迹图可以看出，注视点的位置多落在导航区、标题以及图片区域。在进行高校网页设计时，好的轮播图能够让人眼前一亮，吸引人的视线，也是对整个网页的第一印象；导航区的设计尤为重要，清晰明了的导航能够准确高效地引
导用户查信息，减少因为盲目寻信息而浪费的时间；信息栏中标题与大段文字之间应形成对比，为用户提供简洁明了的信息层级，让用户以最短的时间到想要的信息；图片比文字更加吸引人，在高校网页设计中合理地加入图片，不仅可以提高用户视觉体验，还可提高信息的获取率。
（三）数据分析在实验B中，采集了总注视时间（TFT）、注视点个数(FC)及平均注视时间(ATF)三种眼动指标数据。TFT是被试对网页所有注视时间的总和，反映了被试在进行搜索任务时注视的时间，是比较不同网页搜索效率的重要指标；FC是被试在浏览网页的过程中产生的注视点的个数，在信息搜索中，注视点个数越多，信息搜索越困难；AFT是每个注视点平均所用的时间。通过眼动实验分析处理软件Ergolab2.0相关数据得出被试完成搜索任务所用的时间TCT，得出搜索任务放在打开网站的第一屏时，搜索效率最高。被试在完成实验后，立即对十所高校网页进行喜好度打分，对喜好度数据进行统计，得出网站喜好度均值PV，数据表明用户更喜爱风格简洁、有条理，并且信息搜索效率高的网站。相关眼动数据、完成搜索任务所用时间及喜好度值如表1所示：
1.将各网页眼动数据与TCT、PV值分别输入SPSSAU进行相关性分析，得到网页眼动数据、PV与TCT的相关性数值，
如表2所示：
图 1 热点图2  轨迹图
编号TFT/s FC/N AFT/s PV TCT/s A
28.6457.170.51
7.91
30.64B    4.18
6.730.668.21  3.84C    3.55  4.710.748.26  3.15D    5.7711.130.50
7.99  6.58E    5.197.5  1.54
8.06  5.43F
9.1521.17
0.487.9611.01
G 14.4334.630.428.0115.57H
5.639.070.678.1
6.53I 8.3619.330.468.178.93J    3.29  6.070.618.03
3.4表 1 眼动数据、PV 及TCT
学研探索
149
交互参考文献
[1]许鑫，曹阳.基于眼动追踪实验的高校图书馆门户网站网页设计研究[J].大学图书馆学报,2017,35(03):46-52.[2]王诗傲.基于眼动实验的工业设计服务网站界面评估体系研究[D].西安工程大学,2017.
[3]刘玮琳，孙立英，刘金波，万鹏.基于眼动实验的网页分类信息优化设计研究[J].科技和产业,2020,20(06):118-122.[4]吴安波，吴钰秀，孙林辉，袁晓芳，牛小荣.高校教务网站可用性优化的眼动研究[J].技术与创新管理,2020,41(03):262-270.
[5]李嘉瑜. 国内高校版面美学刍议[D].西北大学,2014.
[6]万立军，罗廷，马书琴.我国高校网站信息服务质量评价指标体系研究[J].情报科学,2016,34(05):114-117.[7]孔宁. 高校门户网站的可用性评估[D].浙江工业大学,2016.[8]王传松.基于用户体验的高校网站评价研究[D].山东大学,2018.
[9]吕怡然. 基于用户体验的高校网站界面设计研究[D].哈尔滨工程大学,2015.
[10]王知津，李明珍.网站评价指标体系的构建方法与过程[J].图书与情报,2006(03):45-52.
[11]The SPSSAU project (2020). SPSSAU. (Version 20.0)[Online Application Software]. Retrieved from www.spssau.
[12]Sun Dao-de. Selection of the Linear Regression Model According to the Parameter Estimation[J]. Wuhan University Journal of Natural Sciences, 2000, 5(4):400-405.
[13]张菲菲.基于用户体验的高校档案网站设计[J].设计,2019,32(04):140-142.
[14]杨瑞婷.基于眼动追踪的无人机造型特征识别研究[J].设计,2019,32(02):141-143.
[15]沈竹琦，薛澄岐，牛亚峰.基于眼动追踪的数字界面用户情绪分析[J].设计,2018(05):158-160.
从上表可知，利用相关分析去研究TFT, FC, AFT, PV和TCT之间的相关关系，使用Pearson相关系数去表示相关关系的强弱情况。具体分析可知：
TCT和TFT之间的相关系数值为0.998，并且呈现出0.01水平的显著性，说明TCT和TFT之间有着显著的正相关关系。TCT和FC之间的相关系数值为0.990，并且呈现出0.01水平的显著性，说明TCT 和FC之间有着显著的正相关关系。TCT和AFT之间的相关系数值为-0.330，接近于0，并且p值为0.351>0.05，说明TCT和AFT之间并没有相关关系。TCT和PV之间的相关系数值为-0.648，并且呈现出0.05水平的显著性，说明TCT和PV之间有着显著的负相关关系。
2.将TFT、FC、PV与TCT，输入至SPSSAU中进行线性回归分析，如表3、4、5所示：
TFT
FC AFT PV
TCT
Pearson 相关性.998**.990**-.330-.648*显著性（双侧）
.000
000
.351
.043
表2 眼动数据、PV 与TCT 的相关性
表3 PV 与TCT 线性回归方程参
表4 TFT 与TCT 线性回归方程参数
表5 FC 与TCT 线性回归方程参数
* p<0.05 ** p<0.01
系数
Sig.自变量8.154.000TCT -.009.043
R 方.420
F
5.793Sig..043系数Sig.自变量.057.834TCT .922
.000
R 方.996F
1882.932Sig..000
系数Sig.自变量-1.018.437TCT 1.974.000
R 方.980
F
386.337Sig..000从表3可以看出，模型R方值为0.420，意味着TCT可以解释PV的42.0%变化原因。对模型进行F检验时发现模型通过F检验(F=5.793，p=0.043<0.05)，模型公式为：PV=8.154-0.009*TCT。总结分析可知：TCT全部均会对PV产生显著的负向影响关系。
从表4可以看出，模型R 方值为0.996，意味着TC T 可以解释TFT的99.6%变化原因。对模型进行F检
验时发现模型通过F检验(F=1882.932，p=0.000<0.05)，模型公式为：TFT=0.057 + 0.922*TCT。总结分析可知：TCT全部均会对TFT产生显著的正向影响关系。
从表5可以看出，模型R方值为0.980，意味着TC T 可以解释FC的98.0%变化原因。对模型进行F检验时发现模型通过F检验(F=386.337，p=0.000<0.05)，模型公式为：FC=-1.018 + 1.974*TCT。总结分析可知：TCT全部均会对FC产生显著的正向影响关系。
通过眼动数据及网页喜好度值处理分析之后的结果可知：网页喜好度与完成所搜任务所用时间之间有着负相关关系，所用时间越长，搜索效率越低，喜好度越低，搜索任务放在打开网站的第一屏时，搜索效率最高；总注视时间与完成搜索任务所用时间共1项之间有着正相关关系，完成搜任务所用时间越久，总注视时间越长；注视点个数与完成所搜任务所用时间之间有着正相关关系，完成所搜任务所用时间越长，注视点个数越多。
（四）讨论
结合高校的作用及眼动实验与问卷调查数据处理分析的结果，对高校设计提出以下建议：
1.信息内容：高校网站与其他网站不同，它是教育性质而非盈利性质的网站，使用价值是使学校教职
工、学生以及社会人员获得有用的信息，其内容主要是与学校相关新闻动态、教学科研、招生等管理服务信息这些方面，高校发布的信息内容需具有准确性、权威性及新颖性。实验表明，图片比大段文字更具有吸引力，用户浏览高校网站时第一注视点及最关注的区域在网页中上方，信息放在打开网站的第一屏时，搜索效率最高。因此，在进行高校网页设计时，信息内容可以结合图片进行展示，增加对用户的吸引力，提高用户的关注度，并且应将重要的信息放在网站第一屏的中上方。
2.用户服务：高校的基本功能是满足用户体的需求，
所以合理、科学地划分用户体，从而确定目标用户，并满足目标用
户的需求，这是提升高校网站用户体验的一个重要方面[9]。
高校网页在设计时，应考虑其界面如何便于用户操作，例如导航栏及搜索框的设计，网站导航栏是引导用户进行网站浏览并快速地回到网站的首页及其他内容页面栏目的一个版块，它决定了用户能否通过导航系统快速进入到相关页面；搜索框在网站的设计中是至关重要的，通过搜索框用户可以快速地查到自己想要的内容。实验结果表明：搜索信息花费的时间越短，用户对网站的喜好度越高，因此应将导航栏和搜索框有关的内容放于首页的中上部，使用户在最短的时间获得最有用的信息，提高用户对网站的喜好度。
3.网站结构：明确高校的定位及信息内容之后，高校网站的网页结构设计应分清主次关系，科学地进行信息分类，组织信息方式多样化，使各部分所含信息平衡。网站的结构层次不宜过多，
网站目录结构与层次框架应当清晰有序、线索明确、主次合理[10]。
在进行高校网页设计时标题与内容之间可通过字体大小颜进行区分，加大加粗的标题更能引起用户的注意力。应合理地使用图片，采用图文结合的方式进行排版布局，使视觉效果增强对信息资源的显示，而不是一味地大面积使用图片，信息内容变得松散，使得用户的视觉搜索效率降低，反而适得其反。
4.网页风格：用户获取信息最主要的方式是视觉，“视觉吸引”是影响用户体验的第一步，用户打开网站之后的网页视觉效果给用户留下第一印象，网页整体风格决定网页视觉效果，因此，网页整体风格的好坏对用户视觉印象起到关键性的作用。通过眼动实验及问卷调查发现，被试对于网页整体风格简洁、有条理的高校页面的注视点更为集中，用户能很快地到重要信息。对于页面风格结构相对复杂的网页，被试的注视点更为松散，视觉搜索效率也相对较低。因此，高校的设计不应该一味地追求风格复杂化而忽视了功能的重要性，在进行高校设计时，应将视觉和功能相结合，网页结构功能清晰、风格鲜明，使用户能够便捷且顺利地完成操作。结语
通过眼动实验研究了用户在正常浏览情况下浏览高校主页的浏览行为习惯，到高校官方网
站中信息搜索效率最高的位置，发现与信息搜索效率相关的眼动指标，得出搜索目标时间越久，搜索效率越低，用户的喜好度越低。并结合高校的定位，为高校网页的设计提供了参考建议。本次实验仍有不足之处，比如眼动仪精度不够高，实验样本较小，实验设计的较为简单等，未来研究可以针对这几个方面的不足之处进行完善和深入。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。