（计算机应用技术专业论文）基于设计指南的网页可用性分析工具研究.pdf

摘要 随着社会的发展，人们的日常生活越来越离不开网络，浏览网页成为人们日 常生活中不可缺少的一部分。但是目前网页的设计还存在诸多的问题，给用户造 成很多不便之处，网页设计的好坏影响着用户对访问的网页的满意度，因此，设 计一个好的网页对提高网页访问量起着很重要的作用。 好的网页设计都是遵循一定的网页设计指导原则的，有调查表明，遵循网页 设计指导原则的网页要比没有遵循网页设计指导原则的网页存在的可用性问题要 少的多，翦者更容易满足用户的需求。那么当前网页满足网页设计指导原则的情 况如何? 网页中都还存在哪些可用性问题，问题的严重程度又是怎么样的，本文 将会根据利用工具进行的试验性应用研究对这些问题作出一一解答。 为了帮助网页设计及维护人员研究网页的可用性问题，我们开发了一种辅助 性工具，该工具的主体思想就是依据网页设计指导原则分析网页源代码对网页中 潜在的可用性问题进行分析。该工具可以对网页中的链接、图片和动画、搜索功 能以及框架使用和打印功能这几个方面进行分析，当对一定数量的网页进行分析 后，能够进行简单的统计分析，同时该工具还具有一定的修改功能，能根据分析 的结果给出相应的修改建议。文章首先介绍了可用性、可用性工程、网页可用性 问题等基本概念，对当前网页中存在的问题及传统的分析网页中存在问题的方法 进行分析后，接着作者提出利用辅助工具帮助网页设计及维护人员分析网页可用 性问题的方法。然后介绍了系统的实现以及对工具进行的评估和改进，最后利用 工具进行了两个试验性应用案例研究。第一个是对新浪4 0 0 个网页的分析应用； 第二个是对e b a y 中文网站和英文网站的分析应用。这两个案例表明该工具能够帮 助网页设计及维护人员提高工作效率，节省费用，并能够发现网页中存在的一些 浅显的网页可用性问题。 关键字：可用性；网页；设计指导原则；工具 a s t u d yo nw e bp a g eu s a b i l i t ya n a l y s i st o o lb a s e do nd e s i g n g u i d e l i n e s a b s t r a c t a st h ed e v e l o p m e n to ft h es o c i e t y , p e o p l e l sd a i l yl i v e sa r ei n c r e a s i n g l yt i e dt o n e t w o r k b u tn o wt h ed e s i g no ft h ew e bp a g es t i l le x i s t sm a n yp r o b l e m sw h i c hc a u s ea l o to fi n c o n v e n i e n c et ou s e r s s o ，d e s i g n i n gag o o dw e bp a g ep l a y sa ni m p o r t a n tr o l ei n i n c r e a s i n gt h ea c c e s so f t h ew e bp a g e i no r d e rt oh e l pw e bp a g ed e s i g n e r sa n dm a i n t a i n e r st os t u d yt h eu s a b i l i t yp r o b l e m o ft h ew e bp a g e ，w ed e v e l o p e da na s s i s t a n tt o o l ，t h eb a s i cp r i n c i p l eo fw h i c hi st o a n a l y z et h es o u r c ec o d eb a s i n go nt h ew e bp a g ed e s i g ng u i d e l i n e s t h i st o o lc a ng i v e t h ea n a l y s i so fm a n ya s p e c t s ，s u c ha sw e bl i n k ，p i c t u r e ，a n i m a t i o n ，s e a r c hf u n c t i o n ， f r a m e w o r ka n dp r i n tf u n c t i o n a f t e ra n a l y z i n gan u m b e ro fw e bp a g e s i tc a d d os i m p l e s t a t i s t i c a la n a l y s i s m e a n w h i l e ，t h i st 0 0 1h a sc e r t a i nm o d i f i c a t i o nf u n c t i o n , w h i c hc a l l g i v et h ec o r r e s p o n d i n gm o d i f i c a t i o ns u g g e s t i o na c c o r d i n gt ot h er e s u l t so f a n a l y s i s t h i s p a p e rf i r s t l yi n t r o d u c e dt h eb a s i cc o n c e p t i o n so f u s a b i l i t y , u s a b i l i t ye n g i n e e r i n ga n dw e b u s a b i l i t yp r o b l e m a f t e ra n a l y z i n gt h ee x i s t e dp r o b l e m so n t h ew e bp a g ea n dt h e t r a d i t i o n a lm e t h o d so fa n a l y z i n gt h ee x i s t e dp r o b l e m so nt h ew e bp a g e ，t h ea u t h o r p r o p o s e da na p p r o a c ho nh o w t oh e l pw e bp a g ed e s i g n e r sa n dm a i n t a i n e r sa n a l y z ew e b u s a b i l i t yp r o b l e m su s i n g a na s s i s t a n t t 0 0 1 t h e n ，t h i sp a p e r i n t r o d u c e d t h e i m p l e m e n t a t i o no ft h es y s t e ma n dt h ee v a l u a t i o na n dm o d i f i c a t i o no f t h et 0 0 1 f i n a l l y , w ec o n d u c t e dt w op i l o ta p p l i c a t i o nc a s es t u d y t h ef i r s to n ei sa b o u tt h ea n a l y s i s a p p l i c a t i o no f4 0 0w e bp a g e so nt h es i n aw e b s i t e a n dt h es e c o n do n ei s a b o u tt h e a n a l y s i sa p p l i c a t i o no fe b a yc h i n e s ew e b s i t ea n de n g l i s hw e b s i t e ，t h et w oc a s e s i n d i c a t et h a tt h i st o o lc a nh e l pw e bd e s i g n e r sa n dm a i n t a i n e r si m p r o v ew o r ke f f i c i e n c y k e yw o r d s ：u s a b i l i t y ：w e bp a g e s ：d e s e r tg u i d e l i n e s ；t o o l 大连海事大学学位论文原创性声明和使用授权说明 原创性声明 本人郑重声明：本论文是在导师的指导下，独立进行研究工作所取得的成果， 撰写成博士硕士学位论文 ：蒸j 璺茸掳盈链函函蠢盈l 彭越掘生丕递z 。除论文中 已经注明引用的内容外，对论文的研究做出重要贡献的个人和集体，均已在文中 以明确方式标明。本论文中不包含任何未加明确注明的其他个人或集体已经公开 发表或来公开发表的成果。 本声明的法律责任由本人承担。 论文作者签名：年月 目 学位论文版权使用授权书 本学位论文作者及指导教师完全了解“大连海事大学研究生学位论文提交、 版权使用管理办法”，饲意大连海事大学保留并向国家有关部门或机构送交学位论 文的复印件和电子版，允许论文被查阅和借阅。本人授权大连海事大学可以将本 学位论文的全部或部分内容编入有关数据库进行检索，也可采用影印、缩印或扫 描等复制手段保存和汇编学位论文。 保密口，在 年解密后适用本授权书。 本学位论文属于： 保密口 不保密口( 请在以上方框内打“”) 做储锵：魄z 嚣气洌挝日期：z 舯产3 月f 厶日 。 一 第1 章引言 对于大多数交互式产品，尤其是i t 产品来说，人们在设计的过程中大都追求 其中的技术的先进性以及功能的丰富性。以产品的价格、性能等产品本身的因素 作为商业竞争的主要手段，而完全忽略了产品设计的最终目的为最终用户所 用，也忽略了产品流通环节中的最为关键的因素人。只有被用户认可的产品 才能算得上是好产品，用户是否愿意继续使用产品才是决定产品生命力的重要因 素。对于网站这种以交互性为主要特点的产品来说更是如此。随着社会的发展， 网站的发展呈现出数量越来越多、应用越来越广泛、技术越来越多样化的趋势。 与此同时伴随而来的问题也越来越多。具体体现在网站的信息结构、内容创作、 网页设计、技术使用以及兼容性等方面。因特网可以说是近年来对社会影响最大 的技术进步了。它不仅为全世界信息的沟通提供了前所未有的便利渠道，而且影 响到人类生活方式的很多方面。在因特网飞速发展的同时，因特网的使用范围也 日趋扩大。随着这项技术的社会化，因特网已经被用于商业办公、业务管理、购 物娱乐等人类生活的各个方面。世界上因特网站不计其数，并且相互之间的差异 很大。一个小的网站可能只有几个网页，一个大型的网站可能有数以百万计的网 页。那么从用户的角度来说，这些网页是否能够满足用户的需求呢? 这就涉及到 了交互式i t 产品系统的重要质量指标可用性，以及实现交互式i t 产品系 统高可用性的一种先进开发方法可用性工程。本章将概述可用性、可用性工 程以及网页可用性的相关知识和评估方法。 1 1 可用性 1 1 1 可用性( u s a b i i i t y ) 的含义 可用性作为交互式i t 产品系统的重要质量指标，在我国国内仍是一个尚未 被广泛认识和接受的领域，而在国际上可用性已经发展成熟并且具备一套完整的 标准和方法。国际上众多知名i t 企业都拥有专业的可用性研究部门，可用性已经 成为企业保证产品成功不可或缺的重要因素f 2 】。 对于可用性的概念，研究人员提出了多种解释。可用性并不是用户界面的一 个单维属性。可用性具有多种成分，传统上与如下五个可用性属性相联系引： 可学习性( l e a r n a b i l i t y ) ：系统应当容易学习，从而用户可以在短时间 内开始使用系统来做某些事情。 效率( e f f i c i e n c y ) ：系统的使用应当高效，因此当用户学会使用系统之 后，可能具有高的生产力水平。 可记忆性( m e m o r a b i l i t y ) ：系统应当容易记忆，从而那些非频繁使用系 统的用户，在中间一段时间没有使用之后能够使用系统，而不用一切事情 从头学起。 出错( e r r o r ) ：系统应当具有低的出错率，从而用户在使用系统的过程中 能够少出错，在出错之后也能够迅速恢复。而且必须能够防止灾难性错误 发生。 满意度( s a t i s f a c t i o n ) ：系统应当使用起来令人愉快，从而让用户在使 用时主观上感到满意，喜欢使用系统。 i s 0 9 2 4 1 - 1 1 国际标准中对可用性是这样定义的：在特定的使用环境下特定用 户使用特定产品完成特定的任务时所具有的有效性( e f f e c t i v e n e s s ) 、效率 ( e f f i c i e n c y ) 和主观满意度( s a t i s f a c t i o n ) 瞄“。其中： 有效性：是指用户完成特定任务和达到特定目标时所具有的正确和完整程 度，也就是用户能否用产品做他们想做的事情； 效率：是指用户完成任务的正确和完整程度与所使用资源( 如时间) 之间 的比率； 主观满意度：是指用户在使用产品过程中所感受到的主观满意和接受程 度。 通俗地讲，可用性也就是要求产品设计要易于学习、理解和操作，并且能够 达到用户使用产品的最初目的，同时在使用产品的过程中用户没有受挫和不适的 感觉，而是有轻松愉悦的体验。 可究竟采用怎样的方法才能使产品满足可用性的要求? 怎样才能弥补常规产 品开发方法在保证可用性质量方面的缺陷呢? 这就需要在产品的设计过程中引入 可用性工程的方法。 1 1 2 可用性工程 u s a b i l i t ye n g in e e r i n g ) 可用性工程是一种以提高产品可用性为目的的先进开发方法论，它包括丁一整 套以提高和评估产品可用性质量为目的实用工程方法，分别运用于产品生命周期 的不同阶段，包括需求分析、产品设计、测试，一直到最终维护。可用性工程的 核心是以用户为中心的设计方法论 来表示标志的开始和结束( 例 如 标志对) ，因此在h t m l 文档中这样的标志对都必须是成对使用的。 例如； i 标志用于h t m l 文档的最前边，用来标识h t m l 文档的开始。而 标志恰恰相反，它放在h t m l 文档的最后边，用来标识h t m l 文档的结束，两个标 志必须一块使用。 2 ( h e a d 和 构成h t m l 文档的开头部分，在此标志对之间可以使用 、 等等标志对，这些标志对都是描述h t m l 文 档相关信息的标志对， 标志对之间的内容是不会在浏览器的框内显 示出来的。两个标志必须一块使用。 3 是h t m l 文档的主体部分，在此标志对之间可包含 、 、 、 、( b r 、 等等众多的标志，它们所定义的文本、图像等将会在浏 览器的框内显示出来。两个标志必须一块使用。 4 使用过浏览器的人可能都会注意到浏览器窗口最上边蓝色部分显示的文本信 息，那些信息一般是网页的“主题”，要将您的网页的主题显示到浏览器的顶部 其实很简单，只要在( t i t l e 标志对之间加入您要显示的文本即可。注意： 标志对只能放在 标志对之间。 还有许多标志对这里就不再一一介绍。目前做网页的各种嵌入式技术越来越 多，设计出的网页也多种多样，例如j a v a s c r i p t 等等，但是h t m l 还是最基本的， 必不可少的，是每个网页设计人员都要掌握的。了解了h t m l 的一些基础知识，下 面我们就来看一下系统的需求分析。 3 2 需求分析 当前的网页多的不计其数，但是并不是所有的网页都能满足用户的期望，能 让用户满意。目前网页中还是存在不少可用性问题的，对于网页设计和网页维护 人员来说，他们是希望在早期发现网页中存在的问题，从而能够及时纠正网页中 的问题，增加网页的访问量，提高用户的满意度。采用传统的网页分析方法能够 发现一些网页中存在的可用性问题，但是耗费的人力，时间等都非常大，在时间 比较短的情况下是不可取的。尤其是在当今社会飞速发展的条件下，网页设计及 维护人员迫切需要一种能够及时发现网页中存在问题的辅助工具，能够提高他们 的工作效率。目前国内还没有一种专门用来发现网页中存在的可用性问题的辅助 工具来帮助网页设计及维护人员。我们要开发的工具的主要思想是通过分析网页 的源代码来发现网页中存在可用性问题，当前国内存在这方面的软件，但是设计 的并不实用，下面的界面是一个叫h t m l 代码分析器的软件，界面如图3 1 所示： 图3 1h t m l 代码分析器界面 f i g 3 1h t m la n a l y z i n gi n t e r f a c e 该工具只是简单的提取出一个网页中存在哪些链接，并没有对这些链接进行 任何的分析，并且想要分析一个网页中的链接，还需要先打开要分析的网页，复 制其源代码，然后粘贴到工具的窗口中， 网页设计及维护人员的帮助也不是很大。 维护人员是非常必要的。 3 3 系统总体设想 这样使用起来是非常不方便的，并且对 因此开发一种辅助工具帮助网页设计及 本系统依据网页设计指导原则对网页源代码进行分析，发现网页中潜在的可 用性问题，从而能够帮助网页设计人员及网站维护人员较早的发现网页中存在的 问题，能够及时改正。本系统主要依据以下几个网页设计指导原则来开发工具的 1 2 4 - 2 6 1 ： 夺在网页上要提供搜索功能，并用搜索框表示，搜索的位置最好在页面上方，搜 索框的颜色最好为白色； 夺a l t 文本，最好为图片添加a l t 文本； 夺最好不要使用框架； 夺对于正文内容比较多的页面，最好提供打印功能； 要确保每个链接都是有效的； 夺对于嵌入式链接，要用不同的颜色与主体文本区分开来。 本系统主要是给网页设计及网页维护人员提供一个辅助工具，帮助他们分析 网页中存在的问题。根据系统设计目标，本系统主要是从超链接、图片及动画、 搜索功能、框架使用以及对于文字较多的网页是否具有打印功能这几个方面对网 页源代码进行分析的。一个网站由若干个网页组成，要想在短时间内检查所有的 链接是否正常，按照挨个点击的方式检查是很浪费时间的，效果也不一定好，本 系统可以通过分析h t m l 代码分析出个页面上都有哪些链接，哪些链接是不可 到达的，不可到达的原因是什么，结合实际的网页还可以分析出其它的可用性问 题。网页设计及维护人员可以对检查出的问题进行修改，查看修改结果，这样极 大的节省了工作人员的时间，提高了工作效率。链接好比网页的生命，如果链接 出现问题，会在一定程度上影响用户的满意度，对用户能否再次访问该网页也有 很重要的影响。在网页上使用图片，动画可以为网页增添光彩，但是要合理的使 用，否则会适得其反。a l t 文本是图片一个很重要的属性，对于盲人来说，图片 有了a l t 文本读屏软件就可以将图片所表示的内容读出来，盲人就可以知道图片 代表什么；对于正常人来说，在图片不能正常显示的时候，有a l t 文体的图片用 户也会知道它代表的什么，能够帮助用户理解网页上的内容。本系统能够分析出 一个网页上都用到了哪些图片，并能对图片的a l t 属性进行分析，并能进行修改。 此外，系统还能对搜索功能、框架使用和打印功能进行分柝。在打印功能中，可 以对网页进行转换，转换成适合打印的形式。此系统主要是将h t m l 代码分类显 示或者顺序显示，并对链接、图片进行分析，对于链接只是分析出一个网页上有 哪些链接，点击相应的链接能够显示相应的网页，图片也只是分析出用到了哪些 图片，对于搜索功能和框架分析等也只是简单的显示结果。在实现工具的同时， 我们还对工具进行了评估改进，及时修改实现过程中出现的问题，使工具更好的 完成分析工作。 3 4 系统功能概述 该系统主要有查看指导原则、超链接分析、图片与动画分析、搜索功能分析、 框架使用分析、打印功能分析以及最后生成一份综合分析报告七个功能。并且在 分析某一方面时可以进行简单的统计分析，最后也可以对分析的所有网页进行综 合统计分析。系统的功能结构如图3 2 系统的主界面如图3 3 所示 图3 2 功能结构图 f i g 3 2f u n c t i o ns t r u c t u r e 图3 3 系统主界面 f i g ，3 3t h em a i ni n t e r f a c e 查看指导原则：是把用到的设计指导原则显示出来，这样可以给使用工具