Web可用性设计方法研究

鄢 沛 郭 皎 应 宏

（重庆三峡学院数学与计算机科学学院，重庆万州 404100）

Web被誉为20世纪中最伟大的发明之一，它的迅速发展不仅为全球通信提供了前所未有的便利渠道，而且影响到人类生活的各个方面.随着信息和服务的不断发展，网站数目增长迅速.[1]同时Web也是一个复杂的信息环境，是一种特定的人机交互界面，和传统的软件人机界面相比，Web界面要倒退至少10年.[2]人们在使用Web时，却发现这些Web难以学习、繁于操作或难以理解.据Jakob Nielsen研究发现，网站普遍存在着不同程度的可用性问题，[3]而当用户首次访问一个网站留下不良印象时，40%的用户不会再次访问该网站.[4]由此可见，网站的可用性问题具有广泛的普遍性和严重性.在Web时代，要想实现网站的目的，就应让用户感受到良好的可用性.Web可用性已经从“最好有”变为了“必须有”.[5]为此一定要找到克服可用性问题的办法，设计具有较高可用性的网站.其研究意义在于为Web设计者提供一个简单有效的网站设计方法和步骤，使得他们能够通过提高Web可用性设计出用户满意的网站.

1 Web可用性

1.1 可用性

人机交互学的唯一目标就是最大限度的满足用户的需求和期望，提高软件系统的可用性.[6]软件可用性（Usability）早在20世纪80年代就受到不同程度的重视，它是交互式IT产品/系统的重要质量指标.可用性专家Nielsen指出，可用性是指产品对用户来说有效、易学、高效、好记、少错和令人满意的程度.[7]ISO 9241-11国际标准对可用性作了如下定义：产品在特定使用环境下为特定用户用于特定用途时所具有的有效性（effectiveness）、效率（efficiency）和用户主观满意度（satisfaction）.自20世纪80年代以来，人们对产品可用性质量的重视促进了可用性工程（Usability Engineering）这一概念的出现，并相应地形成了一个在学术界和工业界均十分热门的领域.可用性工程是IT产品及用户界面开发的一种工程方法论，贯穿了产品生命周期的各个阶段.其核心就是以用户为中心（UCD：User-Centered design）的设计方法论，强调从用户的角度来进行产品的设计和开发.[8]

1.2 Web可用性设计

Web页面就是建立在Internet技术基础上的一种特定的人机界面，Web是在Internet环境中的特殊交互式系统.Web可用性工程是将可用性工程原理与技术运用到Web设计中，使Web设计者以用户为中心创建网站而不再以技术为中心，应该围绕其用户，而不是计算机的输入和输出.故Web设计需要发生从技术驱动到用户驱动的转变.Web交互界面设计是从围绕以屏幕为基础的用户交互软件的图形用户界面设计发展而来，和其他领域的设计一样遵循设计的基本面：[9]必须直接面对“带有特定需求的用户”，且也必须保证客户在使用Web服务成功完成任务的过程是愉快的.Web设计较多采用设计——评估的迭代设计过程来提高其可用性.Web可用性设计包括以下三个主要内容：用户研究、Web设计和评估.

2 用户研究

用户研究方法的重点是在系统开发中以用户需求为驱动，而非技术需求为驱动.设计应当通过突出用户交互和依赖原型法迭代设计的过程来提供良好的交互式产品.[10]当UCD方法论将用户置于应用的中心，必须理解和可视化用户之间，用户、社会和环境之间，以及用户和将设计的产品之间的一些显著特性.用户必须通过用户建模进行标识和分析.用户模型是任何交互式系统的组成部分，用户模型是基于每一个用户对系统的期待和理解，包括系统提供的功能和对象，当用户与系统交互时如何反馈，用户在交互过程中想要完成的目标.这些期待、理解和目标受用户的经验所影响，包括与系统的交互.因为每个用户的概念模型是由不同的经验所影响，没有两个概念模型是一模一样的，每个用户在看到一个界面时的观点都会有所不同.

2.1 用户建模

用户建模技术有：用户角色（user roles），用户群（user segments），终极角色（extreme characters）和人物角色（personas）[2]等.其中用户角色和用户群方法对单个项目中开发用户场景（scenarios）和协调不同用户并不是有用，终极角色不可能表征系统的真实用户.综合比较，人物角色是能够很好的标识和表征系统最终用户的用户建模方法.

2.2 人物角色

2.2.1 创建人物角色

Alan Cooper提出的人物角色，是一个帮助设计者在设计过程中获得清晰和关注的目标导向（goal-directed）设计方法.他们是在人种学调查收集到的实际用户的行为数据的基础上形成的综合原型（composite archetype），概括了用户研究的发现，阐述系统典型用户的目标和活动，是针对网站目标群体真正特征的勾勒.[11]人物角色并不是真实的人群，但他们基于人们真实的行为和动机，并且在设计过程中代表着真实的人群，通过理解人物角色，设计师可以理解在特定场景下的用户.基于目标导向的网站可以有多种人物角色，每个系统至少需要一个主要的人物角色，必须针对主要任务角色且遵循其需求和目标进行用户交互设计.

有两种主要方法创建人物角色，它们是根据用户研究的类型和分析方法来区分的：[11]定性（qualitative）人物角色、定量（quantitative）人物角色.人物角色定性研究方法中包括：用户访谈、现场调查和可用性测试.通过定性研究可以得到一个来自用户的、关于他们目标、行为和观点的总体列表.定量研究方法有：调查问卷、日志文件分析和CRM（Customer Relationship Management）数据分析等.将定量和定性相结合，用定量方法验证和改良定性人物角色.人物角色使用目标、行为、观点、和人口统计特征来描述.

2.2.2 应用人物角色

人物角色可以使确定网站功能和内容，以及使得确定其优先级别的过程变得清晰，它在帮助我们提早做出决策方面有着不可估量的作用.在定性特性和功能范围时，人物角色可以应用在头脑风暴（Brainstorming）、确定范围的优先次序、指导网站结构、内容和设计等.在头脑风暴中，基于人物角色的目标、观点和行为来集体讨论所有可能的特性、功能和内容.通过对人物角色进行头脑风暴，得到用户功能需求列表.确定范围的优先次序，通过人物角色为每个潜在的功能评分，很容易得到一个比较科学的评价结果对功能进行优先次序排定.

3 Web设计

与其花时间解释如何使用界面，不如在设计中要利用界面元素的自描述信息，显性展示Web的使用过程，[12]同时要界面表现和行为符合用户操作习惯和心智模型.Web界面融合了文本、链接、图像元素和格式化等诸多影响 Web可用性方面的元素.在Web设计中遵循标准化技术，可以实现下列优点：网页下载和读取速度加快、更好的可访问性、更利于搜索引擎排名（SEO）、适应性强、开发与维护变得简易.简而言之，标准化的网页可以增强可用性，大幅度提升用户体验.因此，在Web设计中要提高Web可用性，需解决下列内容：信息架构设计，易读性设计，搜索设计和页面设计.

3.1 Web信息架构设计

信息体系架构建设作为“明确站点的使命与范围，平衡其投资机构和用户的需求”的过程，它决定网站将包含什么样的内容和功能.它通过定义组织结构、导航系统、标引和搜索工具来指定用户找到信息的途径.[13]组织结构系统是决定网站信息架构成功与否的关键因素，也是建立导航系统和标引系统的基础，它由信息组织方案和组织结构两部分组成.Web导航和信息查找的能力直接关系网站的运营效果，所以导航系统需不断为用户提供路径线索和标志，使他们始终知道自己“在哪里”，这一点在超文本链接过程中至关重要.[14]标引系统是向用户展示组织和导航系统的手段，因此标引系统的创建应该在它们确立后再进行.

3.2 易读性设计

人们访问网站是因为网站有用，而不是好看.Web是以用户为导向的媒体，用户需要清晰的非混乱的页面，用户采用信息搜索的策略来节省时间，不会以一种线性的方式来搜索信息，相反他们采用扫描的方式，依赖一些视觉的暗示，这些暗示给出了结果就在附近的强烈信号，用户将他们的注意力指引到这些区域，并忽略其他内容.所以必须按用户Web阅读的习惯来组织文字，将Web内容设计得和用户的行为相匹配，并对其进行调整，以便取得最优的可扫描性和可理解性.Web写作过程中采用简单的语言，尊重用户的时间和阅读技巧，Web写作简明扼要.Jeff Johnson还给出三个Web写作准则：不要使用术语、避免使用首字母缩写、不要使用讥讽.

3.3 搜索设计

搜索是Web用户体验中很突出的一部分，它是Web可用性设计中最重要的元素之一，用户对于它的效果有很强的期望.许多网站的搜索成功率很低，在 Web设计中要创建好的搜索功能最好的办法就是学习搜索引擎的准则，为网站设计有效的搜索功能.用户期望网站的搜索功能和外部主要的搜索引擎以同样的方式工作，在设计搜索功能时，应当不要动用用户新的心智模型，让用户没意识到自己是在搜索.对于搜索结果处理，可以模仿国际搜索引擎的结果呈现页面，把值得推荐的结果置顶列出.搜索引擎优化也是 Web可用性设计中的非常重要的组成部分.主要有三种白帽（white hat）搜索引擎优化（SEO: Search Engine Optimization)技术：语言SEO、结构SEO和声誉SEO.

3.4 页面设计

页面设计部分包括两个部分，第一部分是图形视觉部分，第二部分是HTML编码部分.图形视觉部分主要关注可视化呈现.HTML编码在页面设计中非常重要，HTML编码设计时应该支持Web标准和浏览器兼容性.

Web标准是一些规范的集合，是由W3C和其它的标准化组织共同制定的，以用它来创建和解释基于 Web的内容.使用结构化标准语言（如：XHTML或XML）来描述网页的结构；使用标准呈现语言来格式化网页的呈现；用标准的行为控制语言来定义网页的行为.具体地：1）结构和表现分离，充分考虑文档的语义结构，用HTML文档来保存内容与结构，用CSS（层叠样式表）文档来控制整个文档的表现.2）使用XHTML创建严谨的Web页面.3）使用CSS，结构化、语义化的XHTML描述文档，CSS用来高效地控制显示布局.

Web浏览器已经成为一个主流的应用程序平台，[14]但浏览器的种类（版本）繁多，诸多浏览器共存迫使Web设计考虑浏览器兼容问题.

4 Web可用性评估

网页设计中，采用设计——评估的迭代设计过程来提高其可用性.传统可用性工程强调精确定义可用性度量（Usability metrics），Whiteside等提供了一系列量化度量标准.依照可用性可度量的原则，Melody Y. Ivory 等提供了一个被称为Webtango的工具，主要探索帮助改善网站设计的自动化方法，它的目标是提供一个交互式工具帮助网站设计者改良网站设计，该工具对Web设计采用定量的方法，对Web设计中的信息、导航和图形呈现方面进行分析和度量.它使用“快速检测”工具网页进行检查，以便改进设计.这种设计——检测方法并不是要替代可用性测试，它只是可用性测试的一个补充.在文献[14]中介绍了一种用户界面设计支持方法等，这些工具和方法可以对软件界面的可用性进行基于规则的评估和改进.Web页面中的HTML编码校验可以采用W3C提供的校验服务.通过校验可以根据具体的校验错误提示信息，进行修正，全方位的提高网页的标准度，从而增强其可用性.

Web可用性设计包括三个主要内容：研究用户，Web设计和评估.通过上述研究，归纳出网站可用性设计的具体方法是：在以用户为中心的设计思想指导下，充分理解Web设计内涵，借鉴其他领域设计思路.使用人物角色研究用户目标、观点和行为，并确定网站定性特性与功能范围，构建合理的Web信息架构.遵循导航设计的一般原则，优化Web界面，按照用户阅读方式组织文字，建立合理的站内搜索，遵循Web实现标准，为主流搜索引擎优化网站结构与内容，并采用设计——评估的迭代设计过程提高网站可用性.该方法可作为Web设计人员设计和提高Web可用性的设计指南.

[1]Jeffrey Veen. The Art & Science of Web Design [M]. New Riders. 2002.

[2]Cooper， A. and Reimann， R. M. About Face 2.0 The Essentials of Interaction Design [M]. John Wiley & Sons. 2nd edition，2003.

[3]Jakob，N. Designing Web Usability: The practice of simplicity [M]. Indianapolis，New Riders. 2000.

[4]Jakob Nielsen， Hoa Loranger. Prioritizing Web Usability [M]. New Riders. April 20，2006.

[5]M. H. Cloyd. Designing user-centered web applications in web time [J]. IEEE Software， IEEE Computer Society Press， 18:62-69， Jan/Feb 2001.

[6]L. L. Constantine and L. A. D. Lockwood，Software for Use: A Practical Guide to the Models and Methods of Usage-Centered Design [M]. ACM Press，1999.

[7]J.Nielse， Usability engineering [M]. Academic Press， San Diego，1993.

[8]Abras， C.， Maloney-Krichmar， D.， and Preece， J.， User-Centered Design， in Encyclopedia of Human-Computer Interaction， W. Bainbridge Eds.，Sage Publications Thousand Oaks，2004.

[9]Macdonald， Nico. What is Web Design?[M]. Mies， Switzerland: RotoVision，2003.

[10]Garret， J. J. The Elements Of User Experience: User-Centered Design For The Web [M]. American Institute of Graphic Arts and New Riders，New York. 2003.

[11]Steve Mulder，Ziv Yaar.The User Is Always Right:A Practical Guide to Creating and Using Personas for the Web[M].US:New Riders Press，2006，8.

[12]Robert Hoekman， Jr.， Designing the Obvious: A Common Sense Approach to Web Application Design[M]， New Riders Publishing，Thousand Oaks，CA，2006.

[13]Rosenfeld L， Morville P. Information Architecture for the World Wide Web[M]，O’Reilly，2002.

[14]H. Reiterer， A User Interface Design Assistant Approach[C].Proc. IFIP 13th World Computer Congress， vol. 2， K. Brunnstein and E. Raubold，eds.，Elsevier Science Publishers，Amsterdam，Aug. 1994：180-187.