不同布局网页可用性的眼动研究

1、 不同布局网页可用性的眼动研究 摘要：网页可用性是指在特定的使用环境下，一个站点可以被一组用户有效、高效且满意的使用以达成某个目标所能达到的程度。研究采用眼动跟踪技术，结合认知心理学相关理论探讨计算机视觉界面中不同网页布局下的视觉搜索策略问题。并对网页可用性设计提出了一些建议。关键词：网页；布局类型； 可用性 1 引言在科技、信息高速发展的 21 世纪，网络作为高科技与信息交互式媒介的产物，成为人类生活中不可或缺的重要连接纽带。人们通过各种研究得到各类成果，从而为更好的制作网页提供理论依据。网络技术的发展使数字成为一种桥梁，产生了网络化传播系统和结构，成为继报纸、广播、电视后的第四媒介。随着时

2、代的发展，网站建设已不仅仅是一项技术，网页的可用性研究，日益被网站建设者所注重。然而如何吸引和引导消费者和阅读者去准确的获取相关信息，就涉及到了可用性研究于具体设计过程的结合。设计网页的第一步也是很重要的一步就是设计网页布局。就像传统的报刊杂志编辑一样，我们将网页看作一张报纸、一本杂志来进行排版布局。虽然动态网页技术的发展使得我们开始趋向于学习场景编辑，但是固定的网页版面设计基础依然是必须学习和掌握的。它们的基本原理与普通书刊的版式设计原理是相通的，只要领会要点，就能举一反三。在网页设计中也应注意到它们的不同的特点，书刊尺寸是以开本为单位，而网页是以分辨率为尺寸单位的。书刊是纸印刷品，而网页是

3、无纸印刷的电子书刊（即数据流）。设计者具备充分了解网页设计的特点，才能合理安排设计版面布局。当前在网站和网页设计方面，国内外的设计师开始考虑可用性分析在网页设计中的应用。在国内，网页设计师在设计网站和网页时也或多或少的意识到这个问题，并将一些可用性分析的方法应用到实际的作品创作中。但是从目前来看，只有少数设计师和理论研究者注意到了这个问题，多数人还是进行心理学认知心理学和网页设计学单方面的理论研究，至于真正上升到理论层次，讨论相关的交叉性理论书籍和文章更是寥寥无几。一些研究者根据理论知识对网页的设计提出了一些建议，但是对网页的某一要素，重点进行量化分析，从而得出可用性评价的研究还是很少。所以此

4、问题的理论研究目前还处在摸索探讨的阶段，其探讨性的空间是很宽广和深远的。本文从网页布局入手，针对不同布局的各自特点，通过实验，详细记录分析了被试在观察不同布局网页时注视时间，注视点个数，首试象限，扫视路径长度等指标。结合具体的实例，对不同布局的可用性特点进行了分析。1.1网页布局现状网页布局就是以最适合浏览的方式将文字、图片和动画按照一定的形式美的法则，遵循一定的视觉规律，放在页面的不同地方。除传达信息外，还能给人美的享受，引起浏览者的共鸣。richard douglass在他的研究中提出现在的网页布局大致可分为型、拐角型、左右框架型、上下框架型、综合框架型、flash型。国内的学者结合中文网

5、页的特点提出中文网页大致可分为“t”型布局、“口”型布局、对称对比型布局、pop型布局四种。并对这四种布局下了定义：“t”型布局：所谓“t”结构，就是指页面顶部为横条网站标志式广告条，下方左面为主菜单，右面显示内容的布局、方式。这种布局的优点是页面结构清晰、主次分明，是初学者最容易掌握的布局方法。缺点是较为呆板（如下图）：“口”型布局：这是一个形象的说法，就是指页面上下各有一个广告条，左面是主菜单，右面放置友情连接等，中间接主要内容。这种布局的优点是充分利用版面，信息量大。缺点是页面拥挤、不够灵活。(如下图：)对称对比布局：它是指采取左右或者上下对称的布局，一半深色，一半浅色。一般用于设计型站

6、点。优点是视觉冲击力强，缺点是将两部分有机地结合比较困难。(如下图：)pop 布局：pop 引自广告术语，就是指页面布局像一张宣传海报，以一张精美图片作为页面的设计中心。常用于时尚类站点，优点显而易见：漂亮且吸引人。缺点是速度慢，但作为版面布局还是值得借鉴的。(如下图：)结合众多成功的网页，研究者发现网页内容和形式即具体的网页的排版布局要能够达到一种协调的状态下才能真正的成功的网页设计，所以，不能单独考虑网页的内容的排版，随着网络的迅速普及，网页设计技术的高低已不再是判断网页好坏的唯一标准。一些构成网页的基本要素如网页布局、色彩搭配、字体大小等越来越引起了人们的注意。利用科学方法对其进行研究也

7、显的格外重要了。2.网页布局可用性的研究进展与相关技术2.1网页可用性研究进展2.1.1 umm模型国外学者针对网页可用性评价提出了umm模型。umm可用性成熟度模型，（usability maturity model），它是iso15504标准的一部分。它的宗旨就是从软件开发的组织体制上真正实现以用户为本。umm分为六个等级：从最初的等级0未知阶段开始、经过等级1认知和个体执行、等级评价和管理、等级建立和实现、等级整合和预测，最后到最高等级制度化和优化自适应的过程。它最终建立起一个可预测的过程，它可以调整它的性能去满足现在和以后一段时间的客户需求，可靠地满足它所描述的目标。2.1.2微软可用

8、性指南（mug）微软就网页可用性评价提出了微软可用性指南（mug），它的设计目的在于用户使用该产品能可行地，有效地，满意得达到特定目标的能力。它的五个主指标：内容、易实用性、促销、定制服务、情感因素。2.1.3“可用性usability”的设计原则jakob nielsen等人大力倡导“可用性usability”的设计原则，如今已经成为许多网页设计师遵循的准则。jakob认为，一个符合网友需求，且受到网友喜爱的网站，至少要顾及到“功能性（utility）”、及“可用性（usability）”。2.1.4关于色彩心理学在网页设计中运用的研究 苏梅通过研究发现。在网页设计中，根据和谐、均衡和重点突

9、出的原则，将不同的色彩进行组合，搭配来构成美丽的页面。根据色彩对人们心理的影响，合理地加以运用。在页面中，图片、文字位置前后叠压，或页面位置变化所产生的视觉效果都各不相同。2.1.5关于网页中底纹对视觉搜索绩效的影响胡凤培的研究发现突显在一定条件下可以提高视觉搜索的绩效,而这一效应能否发挥,与突出显示项目的方式(即突显类型)有关在以数字为视觉呈现材料时,亮度、闪烁、颜色、箱筐、下划线等作为突显类型对视觉搜索绩效均有明显的影响。2.2 可用性研究方向如今的可用性研究主要包含了以下几个方向：2.2.1以用户为基础的可用性评价方法(可用性测试) 可用性测试可以使评价者在一定情境下，(真实的用户与交互

10、任务)对用户的交互情况(包括外显行为与内部心理过程)进行考察。其主要的方法有： 对用户使用界面的外显行为及绩效的考察方法主要通过自然观察法，(可以借助录像等纪录手段)，计算机自动记录，(如鼠标、键盘的事件纪录)，来记录用户的绩效与其它行为表现如动作、表情等。其中绩效包括：任务完成时间、任务完成错误率与错误类型、纠正错误所用的时间、用户使用系统功能的数量及用户使用帮助系统的次数与时间等。对用户使用界面的内部心理过程的考察方法包括口语记录与分析技术，及其两个变形：(1)事后回忆法，(2)建构性交互。另外，教练法(选取专家型用户作为教练，解答新手在学习使用系统时提出的问题

11、，从而发现用户所需要的帮助信息。)也是较为常用的方法。 对用户使用界面的态度与偏好的考察方法由于用户的态度与偏好直接影响到系统的设计与开发，可以使用访谈法、问卷与量表法等系统、廉价的方法，来收集用户的这些主观信息。 实验法评价者可以主动操纵与变化人机界面的某一方面，作为自变量(如菜单深度)，通过考察因变量(如操作绩效)是否随自变量的变化而变化，由推论统计结果支持或推翻原有假设。另外，我们可依据不同的目的将可用性测试手段分为两大类：(1)、诊断性测试方法：为及时发现问题来修改原界面，可以运用口语分析技术及其变式、问卷与访谈法。(2)、总结性测试方法：当我们要评价界面的

12、总体交互质量时，其一，对不同产品或设计进行比较，主要运用实验法；其二，要检验产品是否达到了一定的可用性目标与标准，如果这一可用性目标是评价界面的高效性，则采用外显行为的各种观察与记录方法；如果目标是为了解用户对系统的主观态度，则主要运用问卷、量表法与访谈法。2.2.2 系统设计前与投入使用后的可用性评价方法 主要是现场研究技术、情景调查法、人种学研究方法、焦点小组及用户日志等方法。这些方法比较重视研究的生态效度，但耗费的人力较多。2.2.3可用性工程周期综合neilsen.j、nelsonrohn及sweeny的观点，从软件产品开发周期各阶段及评价目的出发，我们可以将可用性工程总结如下：2.2

13、.3.1软件产品界面概念设计阶段运用的评价方法(1) 了解用户方面：现场研究技术、自然观察法(用于了解用户工作情境与社会人际因素)；焦点小组、问卷与访谈法、用户反馈与用户日志、现场研究技术(分析用户需求)；对交互情况的观察与记录(用户任务分析)；专家评价(分析系统功能与需求的匹配)。(2)市场分析方面：可采用可用性测试，比较市场上同类产品，发现其在界面可用性上的长处与不足，有利于自身产品在这方面的定位。软件产品界面设计阶段运用的评价方法(1) 产品界面原型形成阶段：可以根据资源条件与一定的可用性目标出发，选择合适的诊查型方法与诊断性测试方法。(2)软件产品界面实现阶段：可选择合适

14、的诊断性测试方法与总结性测试方法，从发现的可用性问题出发，反复修改人机界面。产品成型并投入市场阶段运用的评价方法可以运用用户联机反馈，对实际使用情况的自动记录，用户日志等方法，了解用户长期使用系统的情况。同时，这些收集到的评价信息，应及时反馈给产品界面的界面原型设计人员。iso标准（iso924111）中对可用性的定义是：可用性是指在特定的使用环境下，一个站点可以被一组用户有效、高效且满意的使用以达成某个目标所能达到的程度。在这个定义中，可用性被描述成一个相对的概念，首先，它是和用户相关的，即对应不同的用户群体，相同的网页，其可用性也是不同的。我们大致可以把用户分为三个层次：初级用户，一般用户

15、和专家用户。他们因为所掌握的计算机和网络知识数量不同，对同一界面的操作感受也就不同。第二，可用性是和任务相关的，讨论可用性时应该限制在执行特定的任务背景中，比如查找一个公司地址，在线购买一件商品等。然后可用性就可以定义为在完成这些任务时操作的效率以及用户满意度。第三，可用性是和效率相关的。可用性好的站点，其工作效率也是高的，用户可以非常快速直接的完成特定任务，而不会受到太多阻碍。还有许多其他关于可用性的定义。一些研究可用性的专家认可可用性是能够具体定义的。例如可以通过综合考虑一次典型访问的完成时间和在这次访问中用户所犯的错误数目而得到。从用户的角度讲，那样可能不是很有意义；用户可能仅仅关心在完

16、成任务后他的满意程度。许多可用性专家如jakob nielsen()倾向于采用和iso标准中类似的定义。例如，nielsen提出一下五点决定了一个网页的可用性：l 可学习性l 可记忆性l 使用时的效率l 使用时的可靠程度l 用户的满意程度可用性评价作为评价网页的一种有效方法已越来越引起人们的关注，国外众多的专业可用性评价组织、研究机构。比较著名的有：hfes-human factors and ergonomics society - 总部在英国的专业人机工程学组织acm sigchi - /sigchiacm的人机交互s

17、ig/美国health and human service部门的政府网站，也有一些可用性专业知识与信息the ergonomics society - .uk/英国的人机工程社区british hci group ：.uk/英国的人机交互小组，usabilitynews的姐妹网站stc usability sig - /usability/stc的可用性sig，从这里可以到达stc其他的sig中国在2004年4月建立了中国可用性

18、专业协会 (usability professionals association,china) 2.3.网站存在的可用性问题2.3.1在信息结构上,应按反映公司内部结构的方式来组织站点,而不是按照反映用户任务和所看到信息空间的方式来组织；这样,用户就不能方便地查找、理解和使用网站上的信息。2.3.2在内容创作上,网站常包含许多适合于打印形式的材料,而没有采用网站上的表现形式(超文本链接方式)；这样就忽视了用户对纸面信息与web信息浏览的区别,给用户阅读带来不便。2.3.3在网页设计上,注重网页制作技术的运用,网页往往制作得十分华丽,忽视了网页内容的组织性,网页内容可能杂乱无章。网站的目的是提

19、供信息,而不是技术站台,这样会导致用户不能清楚、快捷地找到所需信息。2.3.4 大量地运用图形、图象、动画等,使得用户访问网站的速度很低；用户往往没有耐心等到整个网页下载完成。2.3.5运用大量新的网页制作技术,经常需要用户升级浏览器或下载插件以增强浏览器；而普通非专业用户可能根本不具备升级浏览器或增强浏览器的能力；2.3.6网页不能适应不同的浏览器和浏览器的不同版本；而网络上不同的用户可能使用不同类型、不同版本的浏览器,这样可能导致某些用户的浏览器不能正确显示网页。这里只是列出了网站可用性问题的一些常见表现形式。根据发达国家的网站可用性问题调查结果显示:90%的企业网站可用性较差；70%的企

20、业对其网站设计不够满意；用户在商业网站上找到所要信息的几率只有42%；由于不能从网站找到所需的信息而损失大约50%的潜在销售额；网购物者最终放弃寻找欲购商品的几率为62%；用户在网站上60%的时间不能找到所需的信息；51%的网站可用性问题是由于未运用最基本的可用性原则；依据基本的可用性原则对30个b2b网站进行评测,无一通过。由此可见,网站存在的可用性问题比较多,对网站应用产生的影响也比较严重。3.实验方法3.1实验变量本实验的实验变量为网页布局，分为“t”型布局、“口”型布局、对称对比型布局、pop型布局“t”型布局，就是指页面顶部为横条网站标志式广告条，下方左面为主菜单，右面显示内容的布局

21、、方式。“口”型布局，指页面上下各有一个广告条，左面是主菜单，右面放置友情连接等，中间接主要内容。对称对比布局，是指采取左右或者上下对称的布局，一半深色，一半浅色。一般用于设计型站点。优点是视觉冲击力强，缺点是将两部分有机地结合比较困难。pop 引自广告术语，就是指页面布局像一张宣传海报，以一张精美图片作为页面的设计中心。3.2 实验材料实验中,采用的实验材料为64张国内大学网站的首页，字体均为简体中文，每张网页内容中都包含了“人才”两个字，要求被试报告“人才”在电脑屏幕的哪个象限，实验主试对被试的报告进行记录。实验中显示器的物理坐标是左上角为（0，0），右下角为（799，599）。我们以显示

22、器中点（400，300）为坐标原点，把显示器分为四个象限。x=400,y=300为第一象限。x300为第二象限，x=400,y400,y300为第四象限。当被试完成报告后可按键盘上的“1”键，切换到下一张图片，然后重复上述的操作。为了消除位置效应和顺序效应等因素的影响,不同条件下网页的显示都采用随机显示。实验中被试眼睛到屏幕距离60cm 。3.3 实验任务 实验中,被试需要完成视觉搜索任务和报告目标所在象限两类任务。视觉搜索选择任务就是要求被试在所显示网页中进行目标搜索，当被试找到目标项时,向主试报告目标所在的象限。主试记录被试的选择，被试在完成报告后按键盘上的“1”键进入下已张网页。然后继续

23、判断目标项“人才”所在的象限。 实验采用完全被试内设计,每个被试总共需要完成64个视觉搜索选择任务。3.4 实验装置实验用计算机配置为奔腾4处理器，17英寸(800600分辨率纯平显示器,操作系统是windows xp。显示器中央点与被试的眼睛处于一个水平线采用eyelink眼动议，版本为eyelink.204,实验程序用c编写，vc6.0编译。3.5 实验被试浙江师范大学学生12名，男女各6名，被试视力（矫正视力）良好，无色盲，均通过计算机一级考试。所有被试无行为缺陷,均为右利手。3.6 实验程序3.6.1先让被试看实验指导语。3.6.2 让被试学习屏幕象限的划分，保证被试清楚各个象限所在的

24、位置，学习完成后进行5次测试，由主试报告一个象限，被试所出象限所在的位置，如：“左上角”。完全正确后进入下一步。3.6.3练习。在被试的眼动校准后，先有1020次实验练习，练习的图片、程序与正式实验一致。练习到被试能正确理解操作后，开始正式实验。3.6.3 正式实验 运行程序，连接眼动仪，进行校准，打开眼动记录文件准备记录。 随机呈现一幅网页。被试报告目标项“人才”所在的象限，主试进行记录。 完成报告后，按“1”进入下一张网页，重复上述操作。 由眼动仪记录被试的各项反应数据，按键后一次记录结束，一到四步为一次实验，然后重复上述步骤64次后

25、实验结束。4.实验结果与分析根据实验程序设计,记录被试正确反应条件下的视觉搜索反应时、眼动指标实验数据先用execl对眼动议记录的.asc文件进行初步处理，对实验的注视时间、注视点个数、扫视路径长度、首视点所在象限进行分类整理，被试的眼动数据用spss12.0进行分析。4.1 网页布局类型的主效应分析实验中统计了12名被试，在不同网页布局条件下各项眼动指标,见表1。表1 不同网页布局水平下的眼动指标眼动指标网页类型pop型布局 “t”型布局 对称型布局 “口”型布局 注视点个数 12.33 10.92 12.92 17.08注视总时间（ms） 2297.87 2014.68 2128.49 2

26、676.52扫视路径长度（像素） 740.88 600.19 703.67 877.30 各项眼动的统计指标如下图：根据表1,对被试在视觉搜索过程中的注视点个数、注视时间和扫视轨迹长度和进行方差分析，结果发现,网页布局类型对注视点个数的主效应非常显著(f(3,33)=35.056,p0.001)。网页布局类型对被试的扫视轨迹长度的主效应显著(f(3,33)=13.852,p0.001)。网页布局类型对被试的注视时间的主效应显著(f(3,23)=16.535,p0.001)。 4.2首视点分析4.2.1首视点的空间位置分布实验中显示器的物理坐标是左上角为（0，0），右下角为（799，599）。我

27、们以显示器中点（400，300）为坐标原点，把显示器分为四个象限。x=400,y=300为第一象限。x300为第二象限，x=400,y400,y300为第四象限。如下图：第一象限第三象限第四象限第二象限通过对不同网页布局首视点的分布情况的统计分析，我们以下数据：表二：不同网页布局的首视点分布情况不同网页布局的首视点分布网页类型第一象限第二象限第三象限第四象限pop型45.229.824.30.7t型52.119.726.31.9对称型38.232.522.37口型布局41.118.836.73.4（注：表中数据为百分比）根据以上结果从表1、表2、的结果来看,被试的各项眼动指标和各个感兴趣区域的

28、首注视点呈现一定的规律分布,可以得出以下结论:（1）在“口”型布局条件下被试的注视点数量、扫视轨迹长度和注视时间都大于其他几种布局条件。 （2）在“t”型布局条件下被试的注视点数量、扫视轨迹长度和注视时间都小于其他几种布局条件。（3）被试在从1到4的象限区域首视点分布比例大致呈现递减的趋势。（4）pop型布局和对称型布局，首视点分布在第二象限的比率明显高于t型布局和口型布局。（5）口型布局，首视点分布在第三象限的比率明显高于其他三种布局。5.结论与讨论通过本研究我们得到了网页在不同布局条件下，使用者在注视点个数、注视时间和扫视轨迹长度等眼动指标上存在的显著差异。当然这些数据都是相对的，我们不能

29、由于“口”型布局的注视点数量、扫视轨迹长度和注视时间都大于其他几种布局条件，就所“口”型布局不利于网页中信息的检索，而所“口”型布局的可用性水平低。同样通过实验我们得出：在“t”型布局条件下被试的注视点数量、扫视轨迹长度和注视时间都小于其他几种布局条件。但这却是对我们现在的网页设计是有一定的指导作用的，比如说，我设计一个网页的目的是让用户尽量在某一网页停留时间长一点，那么选择“口”型布局将会是一个很好的决定。相反的，如果我们的目的是让用户加快的在网页上找到自己需要的内容，那么“t”型布局相对与“口”型布局就会更有优势。5.1 用认知心理学的观点看网页布局设计结合到认知心理学的相关知识我们知道人

30、们主要是通过视觉与触觉来感受事物的，而人类信息量的80%是通过视觉获取的。浏览网页时，用户一般是通过眼睛接受网页的版面。因此，视觉传达的研究有助于我们掌握人眼认识事物的基本规律，并在设计中自觉地加以运用。对于网页设计来说，情况更是如此。网页是通过视知觉来实现信息内容的传达，为了使网页获得最大的视觉传达功能，使网络真正成为可读性强而又新颖的媒体，网页的设计必须适应人们视觉流向的心理和生理的特点，由此确定各种视觉构成元素之间的关系和秩序。因此，设计时应该研究各种视觉造型元素之间的距离、位置、面积和视觉流程的问题。我们首先从认知心理学的角度，看一看用户浏览网页时的视觉反映。按认知心理学的观点，视觉是

31、一种空间的感觉，我们通常把空间的感觉称为视空间。视空间又分为生理的一次印象和经验的二次印象。人们在观察物体时，视线并不是沿着直线平稳地运动，而是有一系列的跳动和注视。一般来说，物体的转折处，或轮廓发生变化的地方，或者有特殊细节的特征处，视线最易集中。例如三角形的三个角部，就最引人注目。视觉流程的形成是由人类的视觉特性所决定的。因为人眼晶体结构的生理构造，只能产生一个焦点，而不能同时把视线停留在两处或两处以上的地方。人们在阅读一种信息时，视觉总有一种自然的流动习惯，先看什么，后看什么，再看什么。视觉流程往往会体现出比较明显的方向感，它无形中形成一种脉络，似乎有一条线、一股气贯穿其中，使整个版面的

32、运动趋势有一个主旋律。心理学的研究表明，在一个平面上，上半部让人轻松和自在，下半部则让人稳定和压抑。同样，平面的左半部让人轻松和自在，右半部让人稳定和压抑。所以平面的视觉影响力上方强于下方，左侧强于右侧。这样平面的上部和中上部被称为“ 最佳视域” ，也就是最优选的地方。在网页设计中一些突出的信息，如主标题、每天更新的内容等通常都放在这个位置。当然视觉流程是一种感觉而非确切的数学公式，只要符合人们认识过程的心理和思维发展的逻辑顺序，就可以更为灵活地运用。在网页设计中，灵活而合理地运用视觉流程和最佳视域，组织好自然流畅的视觉导向，直接影响到传播者传达信息的准确性与有效性。所以在网页的编辑设计中，视

33、觉导向是一个要点，我们可以运用版式设计中的一些元素如：中心、立场、方向、对称、均衡等设计布局形式来体现网页页面的视觉流程和最佳视域。网页的设计是一种创造，首先要立足信息的传达，但又要符合人们较为普遍的思维习惯，做到视觉流程的自然、合理、畅快。成功的视觉流程安排，能使网页上的各种信息要素在一定空间内合理分布，能使页面上各信息要素的位置、间隙、大小保持一定的节奏感和美感。5.2 本研究对提高网页可用性的启示我们介绍过网页布局就是以最适合浏览的方式将文字、图片和动画按照一定的形式美的法则，遵循一定的视觉规律，放在页面的不同地方。除传达信息外，还能给人美的享受，引起浏览者的共鸣。通过本研究我们得到了网

34、页在不同布局条件下，使用者在注视点个数、注视时间和扫视轨迹长度等眼动指标上存在的显著差异的结果。结合到本文的结果以及一些关于网页可用性设计的资料。我们认为，一个网页要具有较高的可用性，就必须满足效率和满意度两个指标。效率是用户完成任务的正确性和完整程度与所使用资源(如时间)之间的比率，满意度是用户在使用产品过程中所感受到的主观满意和接受程度。目前,国内外许多网站设计专业人员为了改善和提高网站可用性,从不同的角度出发,研究了各种各样的方法和途径,其中主要工作集中在三方面:网站开发方法论、网站可用性设计指南、网站可用性支持工具。5.2.1网站开发方法论网站开发方法核心是以用户为中心的设计方法(us

35、er-centred design)。这种方法基本原理是用户和系统的功能恰当分配,用户的主动参与,反复设计以及多学科组成的设计团队。以用户为中心的设计方法通常采用原型法来实现,强调用户在产品或系统开发生命周期的各阶段的全程参与,以便反馈的意见能及时采纳,从而开发出容易理解和使用的具有更高可用性的产品或系统。以用户为中心的设计方法可以帮助开发者更加关注用户而不是技术,以创建更加可用的网站。这种方法着重于理解用户、提出可用性设计、发现可用性问题、理解其他开发约束条件。一般来说,网站开发方法具体应用在网站可用性生命周期中,有以下几个过程:用户需求分析。用户需求分析是进行网站可用性设计和

36、开发的基础。用户需求分析需搞清楚的问题有:在网站上要提供什么样的信息；网站的商业目标是什么(或称赢利点是什么)；网站具有的功能是什么；希望什么样的internet用户访问该网站；以前版本的网站可用性如何。同类网站的竞争性分析包括的问题有:有多少同类网站；地理分布如何；各具有什么优缺点。还要调查网上最终用户的需求,包括那些是最重要的用户组；用户访问该网站的目的是什么；用户有什么样的经验和专业知识；用户是哪个民族；可以阅读什么语言；用户寻找什么样的信息；用户怎样使用信息；屏幕阅读、打印还是下载；用户将使用什么类型的浏览器；用户的通信链路有多快；用户使用多大的屏幕和窗口；有多少种颜色等。5.2.1.

37、2建立可用性目标。网站可用性总的目标是易学、高效、好记、少错、用户主观满意度高,但针对不同的网站开发,要建立具体的可用性目标要求。比如易学,评估具体网站是否易学的要求或指标可能是不一样的。分析以前版本网站或者目前存在的同类型网站的可用性及其可用性问题,从而建立新网站的可用性基准,也可以通过用户调查的方法来建立一个可用性基准。利用这个基准可以确定新网站开发中哪些可用性目标是最重要的、每个总的可用性目标应该达到的具体指标,即新网站所要达到的可用性目标,以便在后续的可用性开发中加以实现,同时,这些指标也是检验设计、开发是否达到要求的标准。概念设计。首先要定义用户如何访问、为什么要访问该

38、站点的那些关键场景,以及用户想要通过该网站实现的任务,这些将有利于确定设计优先顺序,也是将要评估的焦点。然后要确定网站结构,这种结构应该是不同于公司内部信息组织结构的,是面向用户的。好的网站结构,有利于用户查找、理解网站信息,不同的用户可能需要不同的接口。另外,概念设计还要确定网站内容,以及用户使用这些内容的详细程度,要尽量采用用户熟悉的术语,建立用户熟悉的信息分类结构。概念设计可能还要确定网站的写作风格,比如先提出结论,后附详细内容；使用热键、简洁明了的标题、较短的文本段等等。建立原型。根据概念设计,快速开发出网站的原型；然后组织用户测试、收集用户反馈,也可以同时组织专家评估,

39、以便发现尽可能多的潜在的网站可用性问题；使用评估结果改进原型；重复这个过程,直到可用性目标得到满足。这个过程就是一个四步曲:创建、用户测试、找出优缺点、设计一个更好的版本。系统建造。系统建造就是要创建最终产品。原型的反复设计、建造,最后就可能演化成最终产品。或者在原型的基础上还要进一步开发,才能形成最终产品。系统建造过程中也要进行用户测试,利用测试结果改进产品,直到网站的商业目标得到满足；运行和维护。运行和维护过程要保证网站无故障不间断运行,使用户获得连续的网络服务；同时还要收集用户反馈信息,或分析网站使用日志以获得用户如何访问网站、有什么问题、网站的重新设计如何影

40、响网站使用等信息；使用这些信息维护和改善网站,进一步提高网站可用性；另外,分析用户反馈和使用情况,也可能对网站提出更新需求,从而加强对网站的改造,更加完善网站可用性。5.2.2 网站可用性支持工具网站可用性支持工具,可以自动化地检查、获取、分析、评估网站潜在的可用性问题,有的工具还可以提出相应的解决方案,甚至自动修改可用性问题,从而可以帮助开发人员迅速提高网站可用性。网站可用性支持工具大致可以分成三类:评估网站实现技术的工具。这类工具主要是基于一组可用性评估指南,评估组成网站的各个页面的html代码,以确定它是否遵循html标准；检查如背景色、图象、字体、导航元素的一致性等。这类

41、工具可以识别诸如可访问性、表单使用、性能、可维护性、导航、可读性等方面的可用性问题,产生页面可用性问题详细报告、潜在可用性问题优先顺序列表,有的工具还提供相应的编码修改建议,并附有相关的可用性原理,甚至可以直接修改评估报告中的html问题,使网站可用性得到迅速提高。这类工具主要有web-sat网站静态分析工具、lift online和lift on-site网站可用性支持工具等。基于智能浏览代理的工具。这类工具使用一个统计模型模拟用户经验,利用智能浏览代理(intelligent browsing agent)遍历网站以收集关键的统计信息,从可访问性、装载时间、内容三个方面对网站

42、进行评估,可以用一个快速的数字化分析评定网站的等级,提供性能基准,但不提供设计修改建议。这里可访问性是通过确定浏览路径,既从开始页到任何给定页的最短点击数,计算访问时间来描述；装载时间是计算站点页面装载的平均时间；内容则是指汇总组成站点的不同媒体元素(文本、图像、声音等)和客户站点技术(如flash、dhtml等等)的百分比,可以与竞争者做相应的比较分析。这类工具中最著名的是max软件。用户反馈收集和分析工具。这类工具一般由在线工具组成,拥有针对网站使用质量而精心设计的用户调查问卷,帮助收集用户反馈意见和建议,从而识别网站可用性问题,也可以进行市场调研。这类工具是最好的、最容易使

43、用和最有效的可用性支持工具,因为它们是基于最终用户直接反馈以识别可用性问题,也真正体现了“以用户为中心”的原则。典型工具的有netraker、wammi问卷等等。5.2.3 网站可用性设计指南这是改善和提高网站可用性的一组设计准则。许多可用性专业人员针对网站可用性问题,从不同的角度提出了大量的可用性设计准则,如设计过程及考虑、内容及内容组织、标题或头文字、页面长度、页面布局、字体和文本大小、阅读和浏览、链接、图形、搜索、导航、软件和硬件、可访问性等。遵循这些通用的指南,可以有效改进网站可用性。但是这些设计准则只是一些原则性的建议,在具体开发中也不能死搬硬套,而要根据具体情况灵活选用。6.结束语

44、网站数量和应用发展迅速,网站建设技术也日新月异,网站可用性问题日趋严重,也越来越重要。网站可用性方法论为提高网站可用性指明了方向,还需要加大对这种方法的推广应用；网站可用性设计指南还只是一些原则性的建议,往往缺乏实际的可操作性；网站可用性支持工具目前主要侧重网站制作后期的检测和改进,还有待于进一步开发支持可用性工程各种方法的支持工具,另外支持工具还存在着一定的局限性,并不能完全识别或解决网站潜在的可用性问题。这需要我们更多的借助其他学科的理论与工具对网页可行性进行综合分析。本文对构成网页的一个因素，网页布局进行了重点的可用性分析，得出了一定的结论。当然对其他的网页构成要素如网页色彩搭配，网页图

45、形图像使用进行可用性研究也是很有意义的。这些都值得我们在以后的研究中进一步的探讨。总之，运用心理学的基本原理和工具，针对网页的版面布局等诸多内容进行研究均能取得很好的效果，对提高网页可用性水平具有一定的参考意义。致谢本文是在曹晓华导师悉心指导和热情关怀下完成的，撰写论文期间曹老师由于要准备考博士，所以时间非常紧张。但曹老师还是抽出自己宝贵的时间对学生进行悉心指导，在论文选题、资料收集、实验设计、实验操作、数据处理、数据分析等诸多方面曹老师都给我尽可能多的帮助，使我受益匪浅。在此对曹老师表示深深的感谢！四年的学习生活，还要感谢我的班主任姚静静老师，以及给予我教育、培养和关怀的应用心理学系的各位任

46、课老师们，你们的教导使我受益匪浅，我想这些都使我一生受用的。最后感谢我的家人，感谢他们在我求学过程中，给我的无私关心、帮助和鼓励。王 钢 2006年04月浙江师范大学参考文献1 胡凤培.不同难度不同背景下箱框的突显工效研究j. 心理科学 2002（4）.2 谭朔.人体工程学在多媒体课件制作中的应用j.湖南财经高等专科学校学报,2003.3 杜小洪.浅谈网页开发技术j.广东气象,2003.4 张鸣.关于网页设计与制作方法的探讨j.长春大学学报,2003.5 李燕.网页设计中值得注意的几点问题探讨j.福建电脑,2004.6 邓 勇.浅谈网页设计的布局及原理j. 渝西学院学报,2004,(9).7 吴长河.网页设计与创意m.成都:四川电音像出版中心,2001.8张家锐，陈缘.网页设计标准教程m.北京：北京希望