眼动实验在高校官方网站网页设计中的应用

来源 :设计 | 被引量 : 0次 | 上传用户:beanmilk
下载到本地 , 更方便阅读
声明 : 本文档内容版权归属内容提供方 , 如果您对本文有版权争议 , 可与客服联系进行内容授权或下架
论文部分内容阅读
  关键词:眼动实验 网页设计 高校官网 浏览习惯 搜索效率
  引言
  互联网的时代,高校官方网站是高校宣传的重要平台与载体,网站设计的好坏直接影响用户使用高校官方网站的积极性,然而对于高校官方网页设计的研究方法多以问卷调查、专家打分等方式进行,评估具有主观随意性。而眼动仪可以实时捕捉用户的行为习惯,通过被试者的眼动轨迹、热点图以及相关数据可对网页的设计情况进行直观、准确地分析评价。本文以国内部分知名高校官方网站首页为研究对象,采用眼动实验对被试者浏览高校官方网页过程进行研究,并在实验结束后立即填写调查问卷,获取用户的主观信息,将主观评估和客观数据相结合,对用户浏览高校官方网站的习惯及用户的视觉搜索因素进行分析探讨,使结论更加全面具体,为高校官方网站的网页设计提供参考依据。
  一、眼动实验与高校官方网站设计
  眼睛是人类获得外界信息的主要途径,视觉是加工处理信息的重要方式,用户浏览网页时主要是通过眼睛获取搜索信息。眼动仪是用来记录处理眼动数据的设备,是心理学研究的重要仪器,眼动测试是内隐测量方法的一种,其实验数据可以直接反映用户行为,近些年被广泛应用于网站的设计与评估中,用于分析用户对网站的视觉浏览习惯。眼动实验能够记录用户在浏览网页时眼睛的运动数据,包括总注视时间(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-30,采样频率30Hz。实验材料通过分析处理软件Ergolab2.0显示在戴尔电脑显示屏,分辨率为1920*1080,被试眼睛与显示屏的距离保持在60cm左右。
  (三)被试
  高校的师生是高校官网吸引的绝大部分访问对象,因此被试为随机招募的西安工程大学在校本科生、研究生及教师,被试的年龄在18~34岁,男女比例1:1,其中本科生16名,研究生12名,教师2名,共30名。所有被试身体状况良好,无色盲症状,视力或矫正视力均在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所示:
  从上表可知,利用相关分析去研究TFT, FC, AFT, PV和TCT之间的相关关系,使用Pearson相关系数去表示相关关系的强弱情况。具体分析可知:
  TCT和TFT之间的相关系数值为0.998,并且呈现出0.01水平的显著性,说明TCT和TFT之间有着显著的正相关关系。TCT和FC之间的相关系数值为0.990,并且呈现出0.01水平的显著性,说明TCT和FC之间有着显著的正相关关系。TCT和AF T之间的相关系数值为-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所示:
  从表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. 9 9 6,意味着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. 9 8 0,意味着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.网页风格:用户获取信息最主要的方式是视觉,“视觉吸引”是影响用户体验的第一步,用户打开网站之后的网页视觉效果给用户留下第一印象,网页整体风格决定网页视觉效果,因此,网页整体风格的好坏对用户视觉印象起到关键性的作用。通过眼动实验及问卷调查发现,被试对于网页整体风格简洁、有条理的高校官方网站页面的注视点更为集中,用户能很快地找到重要信息。对于页面风格结构相对复杂的网页,被试的注视点更为松散,视觉搜索效率也相对较低。因此,高校官方网站的设计不应该一味地追求风格复杂化而忽视了功能的重要性,在进行高校官方网站设计时,应将视觉和功能相结合,网页结构功能清晰、风格鲜明,使用户能够便捷且顺利地完成操作。
  结语
  通过眼动实验研究了用户在正常浏览情况下浏览高校官方网站主頁的浏览行为习惯,找到高校官方网站中信息搜索效率最高的位置,发现与信息搜索效率相关的眼动指标,得出搜索目标时间越久,搜索效率越低,用户的喜好度越低。并结合高校官方网站的定位,为高校官方网站网页的设计提供了参考建议。本次实验仍有不足之处,比如眼动仪精度不够高,实验样本较小,实验设计的较为简单等,未来研究可以针对这几个方面的不足之处进行完善和深入。
其他文献
为解决老人购物车使用与出行问题,将UCD与TRIZ理论相结合,指导购物车设计语义中突出的用户需求问题,以达到便捷、实用、高效的目的.运用UCD深入分析用户需求与使用环境,用TRI
关键词:仿生设计 线形元素 智能产品 形态设计 女性用品  引言  科学技术的发展不断让我们的生活变得更便利,人们的生活质量也在不断提升,这对设计提出了更大的挑战,现在的设计在满足人们基本功能需求时,要更加注重情感的需求,让设计贴近生活,使产品更符合生活的气息。女性作为时代中的重要主体,占有巨大的消费市场,对女性周边产品的设计,需要准确把握女性的消费动机、消费行为和消费心理,使设计出的产品更加符合
关键词:渐变 设计方法 视知觉 色彩 形式 美感 应用价值  引言  每一季服裝流行趋势的更迭和推新,服装设计师们总是在不断尝试新的方法去顺应时尚,从2020年开始,无论是秀场还是卖场,渐变的设计方法以主流且多元的方式冲入了人们的视野,渐变也随之成为了女装设计中被人们关注的设计方式。女装设计中渐变方法的应用趋势,已不单是传统意义上的色彩渐变染色,更多的是图案装饰和质感的渐变,及融入了高科技技术的综
关键词:语义研究 形态抽象 形态设计 现代军事风格 有源外骨骼  引言  在现代高科技战争背景下,单兵作战需携带的装备种类与数量越来越多,士兵的行军速度、机动性与持续作战能力受到严重影响,同时士兵的运动健康与安全愈受关注。[1] 因此,能够增强人体生理机能、提供运动防护的军用可穿戴外骨骼机器人应运而生,其中有源外骨骼机器人的潜力最受关注。  有源外骨骼机器人是一种模仿人体骨骼运动,穿戴在人体表面的
调查分析无人超市在使用过程中的用户体验感受并提出以用户为中心的改良建议.以成都地区的部分无人超市为研究对象,通过对搜集资料的整合制定因素框架,基于前期调研设计出对
关键词:情境体验 互联网 社交电商 APP 交互设计  一、互联网社交电商概述  社交电商通常通过具有社交功能的平台为用户提供互动交流、分享等社交性元素,以达到更快交易的目的。这样的方式能带来更好的传播性以及更多的交流与互动,有利于增加用户黏性。此外,由于信息传播具有裂变式效应,因此社交电商用户可以呈现规模发展,为用户转化打下良好基础,依托线下地摊文化兴趣圈为消费者建立依托社交电商的线上平台,分拟
探索后疫情时代和科技化智能化时代下,居家办公人群在居家办公问题上的困难与需求,并研究设计其解决方案.通过共享办公空间相关文献,归纳其研究现状,再结合共享办公趋势,把握
我国老龄化日益严重,糖尿病老年人比重日趋扩大,他们目前的生活方式、自我管理方式以及生活环境等易引起多种并发症危害,急需提出有效的医养结合的系统性方法来解决这一问题。运用文献调研法和田野调研法深入观察糖尿病患者和医生所呈现问题及痛点,形成相应人物原型和用户流程并归纳出痛点及机会点形成相应系统。结合自我管理概念与现有医疗服务在医生的帮助下,使糖尿病患者能够根据自身的情况采取相应措施,提供有针对性的解决方案,加入各个利益相关者使社区医疗与用户形成良性循环,减少疾病对健康的影响,并提升用户在社区医疗中的参与感。最
关键词:空间设计 家居设计 设计防疫 家居防疫 空间改善  一、绪论  己亥岁末,年关将至,中华大地忽染恶疾,数月余,市井民众均闭门不入,足不出户,居家而学。新型冠状病毒的猝然爆发,让中华民族陷入惶恐,继而疫情在全球范围内迅速扩散。纵观人类历史,人与瘟疫病毒的战役从人类诞生那日起,至今未曾间断。1347—1353年,一场名为“黑死病”的瘟疫席卷整个欧洲,夺走了欧洲1/3人口的性命,人口聚集的城市难
2021年5月12日下午2点,清华大学美术学院2021届硕士研究生毕业作品展在清华大学艺术博物馆大厅开幕.清华大学美术学院院长鲁晓波、副院长杨冬江、副书记李鹤、米兰艺术设计学
期刊