2023年12月3日发(作者：乐视超级手机3)

眼动实验在高校官方网站网页设计中的应用APPLICATION OF EYE MOVEMENT EXPERIMENT IN WEB DESIGN OF UNIVERSITY OFFICIAL

WEBSITE西安工程大学服装与艺术设计学院 武晓燕 张阿维

摘要：调查，为了研究用户的网页浏览习惯及效率。将主观评估和客观数据相结合，以高校官方网站为例，论文借助眼动实验，对用户浏览网页并结合问卷行为和效率进行研究，网站时第一注视点及最关注的区域在网页中上方；获得用户眼动数据及对网页喜好度数据。好度越低；搜索信息效率越低，用户浏览高校用户喜服务、信息放在打开网站的第一屏时，搜索效率最高。从信息内容、用户为高校官方网站网页设计提供参考依据。网站结构及网页风格四个方面对高校官方网站设计提出建议。研究结果关键词：眼动实验 网页设计 高校官网 浏览习惯 搜索效率中图分类号：TB472 文献标识码：A文章编号：1003-0069（2021）05-0147-03Abstract：with the aid of eye movement experiment as well as questionnaires, combines

In order to study users' browsing habits and efficiency in paper,

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 '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 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 ds：Browsing Habits Search EfficiencyEye Movement Experiment Web Design University Official Website

引言站设计的好坏直接影响用户使用高校官方网站的积极性，互联网的时代，高校官方网站是高校宣传的重要平台与载体，网高校官方网页设计的研究方法多以问卷调查、评估具有主观随意性。被试者的眼动轨迹、而眼动仪可以实时捕捉用户的行为习惯，专家打分等方式进行，然而对于通过直观、热点图以及相关数据可对网页的设计情况进行究对象，准确地分析评价。本文以国内部分知名高校官方网站首页为研在实验结束后立即填写调查问卷，采用眼动实验对被试者浏览高校官方网页过程进行研究，并和客观数据相结合，获取用户的主观信息，将主观评估索因素进行分析探讨，对用户浏览高校官方网站的习惯及用户的视觉搜设计提供参考依据。使结论更加全面具体，为高校官方网站的网页一、眼动实验与高校官方网站设计重要方式，眼睛是人类获得外界信息的主要途径，用来记录处理眼动数据的设备，用户浏览网页时主要是通过眼睛获取搜索信息。视觉是加工处理信息的眼动仪是是内隐测量方法的一种，其实验数据可以直接反映用户行为，是心理学研究的重要仪器，眼动测试近些年被广泛应用于网站的设计与评估中，习惯。注视时间眼动实验能够记录用户在浏览网页时眼睛的运动数据，用于分析用户对网站的视觉浏览FC）观性图表在网页设计研究中被使用最多的是热点图和轨迹图。、平均注视时间（Total Fixation Time，（Average Fixation Time，TFT）、注视次数包括总AFT）（Fixation Count，。眼动实验的主用眼动追踪实验研究用户在浏览高校图书馆门户网站主页时的浏览近些年，眼动追踪被广泛应用于网页设计研究之中。许鑫等人利习惯，王诗傲将眼动分析法引入到工业设计服务网站的界面设计评估上，提出了高校图书馆门户网站网页设计时应考虑的重要因素[1]；通过眼动指标完善工业设计服务网站评价体系内容过眼动实验探究网页界面中的分类信息设计对用户认知效果的影响[2]；刘玮琳等人通规律程度上为教务网站的设计及改进提供参考[3]；吴安波等人对某高校教务网站的可用性进行了分析，在一定验对网页设计进行研究已经较为成熟，[4]。由此可见，利用眼动实研究提供了理论基础。为高校官方网站网页设计的师生为目的，高校官方网站是依托于高等学府，校信息发布、肩负对内交流、对外宣传的使命，以服务教育、服务科研、服务信息传播的重要载体，辅助教学管理的综合性网站[5]。高校官方网站既是学校从事教育资源整合、高官方网站设计研究方面，也是校内师生管理系统的重要入口。美学视角为出发点，李嘉瑜以国内“985”高校为研究对象，针对高校立军等人通过国内外学者对目前高校网站信息服务质量评价相关研对高校官网的版式界面进行了详细的分析[5]；以万究内容的分析，宁通过询问技术，构建我国高校网站信息服务质量评价指标体系孔进行了进一步的探索与研究从用户的主观倾向性出发，[6]；问卷调查法、[7]；王传松应用文献分析法、对高校门户网站可用性用户访谈和户体验的高校网站评价模型层次分析法以及模糊综合评判法等方法，前针对高校官方网站网页设计的研究并不多，[8]。通过对搜索的文献进行整理发现目构建了基于用域中还有待探索。眼动实验在这一研究领二、实验设计目标搜索任务。眼动实验的方法主要有两种，一种是无目标浏览，另一种是典型浏览，本次实验分为两组（实验A和实验B），实验A：无目标研究被试在正常情况下浏览高校官方网站主页的习惯。在规定的时间内被试按照自身习惯对十张刺激材料进行浏览，目标搜索任务，实验B：对实验材料进行打分，要求被试以通知公告栏作为搜索目标，在浏览结束后典型（一）研究通知公告栏在不同位置的搜索效率。料采用站长之家根据Alexa排名、流量是衡量网站是否受欢迎的一个重要指标，实验材料本次实验刺激材素综合排名的高等院校网站排行榜的前十名高校官方网站主页，百度权重、PR值以及反链数四种因编号为A、时间为2020年11月29日。B、C、D、E、F、G、H、I、J，十所高校均为双一流高校，分别查询示材料进行规则讲解。并选取西安工程大学官方网站主页作为演（二）实验设备为由瑞典公司所生产的Tobii眼动仪，实验设备型号为：Tobii X2-交互学研探索147图 1 热点30，戴尔电脑显示屏，采样频率30Hz。持在60cm左右。分辨率为1920*1080，实验材料通过分析处理软件Ergolab2.0显示在被试眼睛与显示屏的距离保（三）随机招募的西安工程大学在校本科生、高校的师生是高校官网吸引的绝大部分访问对象，被试18~34岁30名。以上，所有被试身体状况良好，，男女比例1:1，其中本科生16名，研究生及教师，被试的年龄在因此被试为无色盲症状，研究生12名，视力或矫正视力均在1.0教师2名，共30人随机分为2组，均有使用电脑上网的经验，完成后每人将会获得一份小礼物。无目标浏览15人，能熟练操作计算机。典型目标搜索任务15人。根据实验任务测试（四）实验流程行。适应环境后，实验员向被试简单介绍实验设备、整个实验在采光良好、安静的交互体验与可用性测试实验室进数；打开软件，坐在实验位置上并在实验知情书上签字。实验流程及注意事项，待被试输入实验名称，将实验刺激材料导入，设置相应参持平行；被试坐在距离电脑显示屏60cm左右的位置，调整坐姿，目光保语；采用五点校准法对被试进行眼动数据校准；被试浏览指导度问卷；浏览屏幕上的实验刺激材料；实验结束，整理数据。参与实验B的被试填写纸质版喜好三、实验结果及问卷分析（一）示被试对界面各处的不同关注度，热点图是被试浏览网页时图形化表示的数据，热点图分析用不同颜色来表颜色表示。主要通过绿色、橙色和红色三种注视时间短、被试在一区域的注视时间越长，注视点越多，颜色越深；域，从而知道最关注和最容易忽略的区域。注视点少则颜色浅，可以直观地看到被试视线集中的区选择展示，通过实验A所得到的热点图颜色多为红色，如图1所示）。从图中可以看到，（15组数据叠加之后的热点图，网页中学校logo及导航栏随机闻区域多为橙色。轮播图区域为绿色和橙色，信息栏中的标题及图片新右侧区域颜色较淡。网页右下角的文章标题链接区域颜色为绿色，网页关注的区域在上方的位置，从热点图中可以看到，被试在浏览的过程中，最息更加直观，用户的注意力；能够吸引人的眼球；也就是学校标识及导航栏；轮播图传达信在网页的最右侧区域。图片比文字更加吸引人的注意力；加大加粗的标题比大段文字更吸引重要的信息不宜放（二）3……代表注视点的顺序，注视轨迹图用于记录被试在浏览网页的注视轨迹，轨迹图分析注视停留时间越长，注视点的半径越大。数值1、2、148学研探索交互图2 轨迹图通过注视点轨迹图可知被试首先注视的区域、停留时间的长短以及视觉是否流畅。注视的先后顺序、注视示）通过实验A所得到的注视点轨迹图（随机选择展示，如图2所播图的位置，。从轨迹图中可以看到，第一注视点往往在网页的中上区域，即轮惯进行浏览，第二注视点一般在导航栏，图可以看出，图片右侧偏下的位置几乎没有注视点。然后根据从上自下的浏览习行高校官方网站网页设计时，注视点的位置多落在导航区、标题以及图片区域。通过注视点轨迹在进的视线，明了的导航能够准确高效地引导用户查找信息，也是对整个网页的第一印象；好的轮播图能够让人眼前一亮，导航区的设计尤为重要，吸引人清晰息而浪费的时间；减少因为盲目寻找信提供简洁明了的信息层级，信息栏中标题与大段文字之间应形成对比，片比文字更加吸引人，让用户以最短的时间找到想要的信息；为用户图不仅可以提高用户视觉体验，在高校官方网站网页设计中合理地加入图片，（三）还可提高信息的获取率。

注视时间(ATF)三种眼动指标数据。在实验B中，数据分析采集了总注视时间（TFT）、注视点个数(FC)及平均的总和，搜索效率的重要指标；反映了被试在进行搜索任务时注视的时间，TFT是被试对网页所有注视时间是比较不同网页的个数，个注视点平均所用的时间。在信息搜索中，FC是被试在浏览网页的过程中产生的注视点注视点个数越多，相关数据得出被试完成搜索任务所用的时间TCT，通过眼动实验分析处理软件Ergolab2.0信息搜索越困难；AFT是每打开网站的第一屏时，所高校官方网站网页进行喜好度打分，搜索效率最高。被试在完成实验后，得出搜索任务放在立即对十网站喜好度均值PV，对喜好度数据进行统计，得出息搜索效率高的网站。数据表明用户更喜爱风格简洁、度值如表1所示：相关眼动数据、完成搜索任务所用时间及喜好有条理，并且信表 1 眼动数据、PV及TCT编号FC/NAFT/sBATFT/s28.6457.170.660.517.91PVTCT/s30.64DC3.554.186.730.748.218.263.843.15EF5.195.7711.134.717.51.540.507.99G14.439.1534.6321.170.487.968.068.0111.015.436.58H15.57JI8.365.633.2919.339.076.070.460.670.426.530.618.178.18.038.933.4分析，1.将各网页眼动数据与TCT、得到网页眼动数据、PV与TCT的相关性数值，PV值分别输入SPSSAU进行相关性如表2所示：表2 眼动数据、PV与TCT的相关性TFT PVTCTPearson 相关性.998**.990FC**AFT-.330-.648*显著性（双侧）.000000.351.043* p<0.05 ** p<0.01的相关关系，从上表可知，利用相关分析去研究TFT, FC, AFT, PV和TCT之间体分析可知：使用Pearson相关系数去表示相关关系的强弱情况。具显著性，TCT和TFT之间的相关系数值为0.998，间的相关系数值为0.990，说明TCT和TFT之间有着显著的正相关关系。并且呈现出0.01水平的和FC之间有着显著的正相关关系。并且呈现出0.01水平的显著性，TCT和FC之说明TCT为-0.330，有相关关系。接近于0，TCT和AFT之间的相关系数值水平的显著性，TCT和PV之间的相关系数值为-0.648，并且p值为0.351>0.05，说明TCT和AFT之间并没并且呈现出0.05如表3、2.将TFT、4、5所示：FC、说明TCT和PV之间有着显著的负相关关系。PV与TCT，输入至SPSSAU中进行线性回归分析，表3 PV与TCT线性回归方程参表4 TFT与TCT线性回归方程参数表5 FC与TCT线性回归方程参数系数Sig.系数Sig.系数Sig.自变量8.154.000自变量.057.834自变量-1.018.437TCTR方-..420009.043TCTTCTR方1..980974.000Sig.F5R方1882..996922.000..043793Sig.F.000.932Sig.F386.000.33742.0%变化原因。从表3可以看出，p=0.043<0.05)，对模型进行F检验时发现模型通过F检验(F=5.793，模型R方值为0.420，意味着TCT可以解释PV的知：TCT全部均会对PV产生显著的负向影响关系。模型公式为：PV=8.154-0.009*TCT。总结分析可TFT的99.6%变化原因。从表4可以看出，模型R方值为0.996，意味着TCT可以解释(F=1882.932，总结分析可知：p=0.000<0.05)，对模型进行F检验时发现模型通过F检验FC的98.0%变化原因。从表5可以看出，TCT全部均会对TFT产生显著的正向影响关系。模型公式为：TFT=0.057 + 0.922*TCT。模型R方值为0.980，意味着TCT可以解释(F=386.337总结分析可知：，p=0.000<0.05)，对模型进行F检验时发现模型通过F检验模型公式为：FC=-1.018 + 1.974*TCT。喜好度与完成所搜任务所用时间之间有着负相关关系，通过眼动数据及网页喜好度值处理分析之后的结果可知：TCT全部均会对FC产生显著的正向影响关系。网页长，时，有着正相关关系，搜索效率最高；搜索效率越低，总注视时间与完成搜索任务所用时间共1项之间喜好度越低，搜索任务放在打开网站的第一屏所用时间越点个数与完成所搜任务所用时间之间有着正相关关系，完成搜任务所用时间越久，总注视时间越长；注视所用时间越长，完成所搜任务（四）注视点个数越多。的结果，结合高校官方网站的作用及眼动实验与问卷调查数据处理分析讨论对高校官方网站设计提出以下建议：性质的网站，1.信息内容：高校网站与其他网站不同，它是教育性质而非盈利的信息，服务信息这些方面，其内容主要是与学校相关新闻动态、使用价值是使学校教职工、学生以及社会人员获得有用及新颖性。高校官网发布的信息内容需具有准确性、教学科研、招生等管理网站时第一注视点及最关注的区域在网页中上方，实验表明，图片比大段文字更具有吸引力，用户浏览高校权威性站的第一屏时，信息放在打开网时，搜索效率最高。因此，在进行高校官方网站网页设计户的关注度，信息内容可以结合图片进行展示，并且应将重要的信息放在网站第一屏的中上方。增加对用户的吸引力，提高用所以合理、2.用户服务：户的需求，网站网页在设计时，这是提升高校网站用户体验的一个重要方面科学地划分用户群体，高校官方网站的基本功能是满足用户群体的需求，从而确定目标用户，并满足目标用[9]。高校官方搜索框的设计，网站的首页及其他内容页面栏目的一个版块，网站导航栏是引导用户进行网站浏览并快速地回到应考虑其界面如何便于用户操作，例如导航栏及导航系统快速进入到相关页面；它决定了用户能否通过的，明：通过搜索框用户可以快速地查找到自己想要的内容。搜索框在网站的设计中是至关重要导航栏和搜索框有关的内容放于官网首页的中上部，搜索信息花费的时间越短，用户对网站的喜好度越高，实验结果表因此应将时间获得最有用的信息，使用户在最短的站的网页结构设计应分清主次关系，3.网站结构：明确高校官方网站的定位及信息内容之后，提高用户对网站的喜好度。息方式多样化，网站目录结构与层次框架应当清晰有序、使各部分所含信息平衡。科学地进行信息分类，高校网网站的结构层次不宜过多，组织信进行高校官方网站网页设计时标题与内容之间可通过字体大小颜色线索明确、主次合理[10]。在进行区分，片，加大加粗的标题更能引起用户的注意力。应合理地使用图的显示，采用图文结合的方式进行排版布局，户的视觉搜索效率降低，而不是一味地大面积使用图片，使视觉效果增强对信息资源信息内容变得松散，影响用户体验的第一步4.网页风格：用户获取信息最主要的方式是视觉，反而适得其反。使得用“视觉吸引”下第一印象，的好坏对用户视觉印象起到关键性的作用。网页整体风格决定网页视觉效果，，用户打开网站之后的网页视觉效果给用户留是因此，网页整体风格发现，通过眼动实验及问卷调查视点更为集中，被试对于网页整体风格简洁、有条理的高校官方网站页面的注复杂的网页，用户能很快地找到重要信息。对于页面风格结构相对此，被试的注视点更为松散，视觉搜索效率也相对较低。因的重要性，高校官方网站的设计不应该一味地追求风格复杂化而忽视了功能页结构功能清晰、在进行高校官方网站设计时，风格鲜明，使用户能够便捷且顺利地完成操作。应将视觉和功能相结合，网结语主页的浏览行为习惯，通过眼动实验研究了用户在正常浏览情况下浏览高校官方网站置，找到高校官方网站中信息搜索效率最高的位搜索效率越低，发现与信息搜索效率相关的眼动指标，高校官方网站网页的设计提供了参考建议。用户的喜好度越低。并结合高校官方网站的定位，得出搜索目标时间越久，为比如眼动仪精度不够高，来研究可以针对这几个方面的不足之处进行完善和深入。实验样本较小，实验设计的较为简单等，本次实验仍有不足之处，未参考文献[[1[2]]许鑫王诗傲,曹阳.基于眼动实验的工业设计服务网站界面评估体系研究.基于眼动追踪实验的高校图书馆门户网站网页设计研究[J].大学图书馆学报,2017,35(03):46-52.[34]]刘玮琳吴安波,,孙立英吴钰秀,,刘金波孙林辉,,万鹏袁晓芳.基于眼动实验的网页分类信息优化设计研究[D].西安工程大学,牛小荣.高校教务网站可用性优化的眼动研究[J].[J].科技和产业,2017.技术与创新管理,2020,20,(202006):118,41-(12203):.262-270[.[5]李嘉瑜. 国内高校官网版面美学刍议[D].西北大学,2014.[6]万立军,罗廷,马书琴.我国高校网站信息服务质量评价指标体系研究[J].情报科学,2016,34(05):114-117.[7]孔宁. 高校门户网站的可用性评估[D].浙江工业大学,2016.[8]王传松.基于用户体验的高校网站评价研究[D].山东大学,2018.[9[10]吕怡然]王知津. 基于用户体验的高校网站界面设计研究,李明珍.网站评价指标体系的构建方法与过程[D].哈尔滨工程大学[J].图书与情报,2015,2006.(.11]The SPSSAU project (2020). SPSSAU. (Version 20.0)[Online Application Software]. Retrieved from www.03):45-52.[University Journal of Natural Sciences,

12]Sun Dao-de. Selection of the Linear Regression Model According to the Parameter Estimation[J]. Wuhan

[[13]张菲菲.基于用户体验的高校档案网站设计2000, 5(4):[J].400设计-405,2019.,32(04):140[1415]]杨瑞婷沈竹琦.,基于眼动追踪的无人机造型特征识别研究薛澄岐,牛亚峰.基于眼动追踪的数字界面用户情绪分析[J].设计,2019,[J].32-(142设计02):.141,2018-143(05.):158-160.交互学研探索149