网站用户界面设计模式语言的比较研究
黄晓斌, 邱明辉
中山大学资讯管理学院 广州 510006
摘要

介绍6种较有代表性的网站用户界面设计模式语言,提出网站用户界面设计模式语言的评价指标,对这6种网站用户界面设计模式语言进行比较分析,在此基础上就编制数字图书馆网站用户界面设计模式语言提出相应的建议,以提高数字图书馆网站的可用性。

关键词: 网站设计; 数字图书馆; 用户界面; 模式语言; 可用性
中图分类号:G250
Comparative Research on Pattern Languages of Website User Interfaces
Huang Xiaobin, Qiu Minghui
School of Information Management, Sun Yat-Sen University, Guangzhou 510006, China
Abstract

This paper introduces 6 pattern languages of website user interface, puts forward the evaluate criteria for pattern language of website user interface.Then it analyses the 6 pattern languages of website user interface comparatively, and points out some suggestions on how to write pattern languages of digital library website user interface in order to improve the usability of digital library.

Keyword: Website design; Digital library User interface; Pattern language; Usability

亚历山大在20世纪60年代提出的“建筑模式语言”思想深刻地影响了现代建筑的理论和实践[ 1, 2]。进入20世纪90年代后,他的思想在软件工程领域得到很好的应用,其影响力已深入到人机交互领域,并进一步扩展到网络应用中。网站用户界面设计模式语言是随着网站用户界面设计实践和研究的发展,在网站设计和评价中逐渐出现的;其模式是对网站用户界面设计中解决特定问题的知识和经验的总结,也是在特定情境下针对特定问题的有效的解决方案[ 3];将模式按一定的结构组织起来,就形成了模式语言。网站用户界面设计模式语言可以使设计者一方面更好地理解设计思路,应用可复用技术高效地完成设计任务[ 4];另一方面更好地与用户交流,利用有效的方案解决可用性问题,从开发前期甚至是在需求分析阶段就关注可用性问题。本文通过制定评价指标对较有代表性的网站用户界面设计模式语言进行比较分析,在此基础上就编制数字图书馆网站用户界面设计模式语言提出相应的建议。

1 目前较有代表性的模式语言

Rijken早在1994年就把亚历山大的“建筑模式语言”思想应用于构建交互设计模式[ 5],其后在EuroPLoP[ 6]、CHI[ 7]上都有关于用户界面设计模式的论文或研讨专题,在20世纪末还出现了Tidwell[ 8]和Brighton大学可用性小组[ 9]编制的用户界面设计模式集。进入21世纪后,用户界面设计模式语言的研制得到更广泛的关注,常见的用户界面设计模式语言除了Web网站、WAP网站、信息系统的模式语言外,还有论坛、博客、维基、游戏等具体应用的模式语言,下面介绍目前较有代表性的6种Web网站用户界面设计模式语言(简称为模式语言)。需要说明的是,设计模式和设计指南是两个相近的概念,都是对设计知识和经验的总结,但在抽象程度和使用效果方面稍有差别[ 10, 11],本文不加分别地把设计指南结合在设计模式中研究。

(1)HHS模式语言

美国卫生和公众服务部(HHS)于2006年推出了《以研究为基础的Web设计和可用性指南》[ 12],目的在于为网站设计者和管理者提供设计指南,为可用性专家和研究人员提供评价依据。HHS具有如下特点:

①数量多,指南初选后超过500个,最后推出时共有209个。

②来源于研究,指南来源于已有的设计指南、发表的研究论文、公开的或内部的可用性测试报告。

③范围广,所有指南分为18个类目,不仅包括了用户界面和内容组织的内容,还包括了从设计过程到可用性评价、从用户体验到可获取性等内容。

④制定过程严密,HHS的编制始于2000年前后,中间经过初选、剔除、评定重要程度、检验证据强度、提供样例图片、分类组织等环节,甚至文本的排版格式都进行过可用性测试,HHS严密的制定过程是保证其质量的关键。

⑤描述精确,每个指南都有注释和引用论著的说明,都以1-5分的形式标明其重要程度和证据强度。HHS所有209个指南分为18类。

(2)Welie模式语言

Welie[ 13]在软件可用性架构研究方面很有影响力。自2000年起,把从网站设计中收集起来的模式发布在网站上,历经多年的建设成为全球最大的一个交互设计模式库[ 14]。Welie具有如下特点:

①数量多,模式数量达到131个。

②来源于设计,每个模式都是对前人设计知识和经验的总结。

③内容深入,特别重视从用户到任务、从交互到体验、从页面元素到各类网站方面的内容。

④开放式管理,Welie把模式发布在网站上供设计者共享,同时通过网站收集新模式、新建议,使模式库处在动态发展中。

⑤侧重于指导设计,模式格式的设置注重实用性,便于设计者从中吸取经验。Welie共有131个模式,组织成3大类15小类。

(3)Minerva模式语言

Minerva EC[ 15]是由欧盟各成员国部长为磋商文化和科学内容的数字化、长期保存和可获取而建立的网络平台,其于2003年推出了《文化机构网站手册:为民众保证质量》[ 16],目的在于为文化机构的网站建设制定保证质量的原则和提高可获取性、可用性的模式语言。Minerva的模式参考了Welie,共有33个模式,分为5个类目。

(4)e-Envoy模式语言

英国政府电子特使办公室(e-Envoy)为了构建具有可用性的优秀政府网站,于2003年推出了《英国政府网站设计的质量框架:政府网站的可用性问题》[ 17]。e-Envoy围绕以人为中心的设计思想把用户需求结合在网站设计过程中,目的在于提高政府网站管理者的意识。e-Envoy共有56个指南,分为5个类目。

(5)CMU模式语言

卡耐基梅隆大学(CMU)软件工程研究所一直在从事如何把可用性与软件架构结合起来的研究[ 18],其从研究文献和设计实践中收集了27个在软件架构设计中普遍存在的支持可用性的场景[ 19],如支持可视化、提供综合查询、观测系统状态等,然后从可用性和软件架构的角度为每个场景编制解决方案。CMU共有27个指南,分为两大类9小类。

(6)ISO 9241-151模式语言

国际标准化组织于2008年推出了《ISO 9241-151 人系统交互生态学—151部分:WWW用户界面指南》[ 20],这项标准制定了以人为中心的Web用户界面设计的原则与指南,目的在于提高Web应用的可用性。ISO共有179个指南,分为4个类目。

以上6种模式语言的基本情况如表1所示。

表1 较有代表性的模式语言
2 模式语言的评价指标

在网络应用或人机交互领域的研究中,有许多论著[ 21, 22, 23]探讨了如何把设计模式应用于指导交互系统设计的问题,其中有不少论著指出了设计模式的不足之处;也有一些研究讨论了编制设计模式的原则[ 24];还有一些研究则提出了编制可用性模式语言的问题[ 25, 26]。本文结合这些研究成果,根据网站用户界面设计的特点提出了模式语言的评价指标。

(1)编写的严密程度

对编写模式语言的目的、意义、模式来源、组织结构、格式项目、验收程序等必须制定严格的规定,这是保证编制质量的关键。

(2)组织结构的完整性

组织结构是模式的组织形式,要求结构完整、组织合理,应有反映总体情况的组织结构图、模式目录或词汇表等辅助性内容。

(3)覆盖面

模式语言的覆盖面应根据编制目的和用户需求而定,如有的覆盖面较大,涉及网站用户界面设计和评价;有的覆盖面较小,只涉及网站用户界面设计的某一部分。

(4)模式的层次和粒度

层次是指具有等级关系的模式之间形成的层次,粒度是指同类模式之间的细分程度。通常情况下模式之间要有一定的层次,粒度要尽可能细。

(5)格式项目齐全性

模式的格式项目分为必需项目和可选项目两类。前者包括名称、情境、作用力、问题和方案等,要求项目齐全,描述尽可能详细;后者包括图片样例、代码样例、文本样例、相关模式、注释、元数据和责任者等,要求项目尽可能多,便于浏览和选择。

(6)模式的效度

模式所提供的方案是针对特定问题在特定情境中各种因素相互作用下的方案,应提供效度的证据。

(7)模式间的关系

模式间的关系可分为等级关系、同一关系或相关关系,相互间的关系应在模式中揭示出来。

(8)描述详细准确程度

编写模式语言要求表述准确。模式及模式语言的名称必须简洁易记;描述问题要直接、具体、准确;描述方案要直观、详细、明确。

(9)查检方便程度

利用组织结构可以确定每个模式的位置和次序,有组织结构图、模式目录或词汇表等辅助性查检工具,如有可能还应设置元数据项目以便查检。

3 对较有代表性的模式语言的比较

根据以上的评价指标,对6种较有代表性的模式语言进行比较分析:

(1)编写的严密程度

在6种模式语言中,由政府或机构编写的组织严密程度比较高,由个人编写的则要松散些。如有关机构为编制HHS、Minerva、e-Envoy、CMU、ISO都设有专门的小组,有人员和经费的支持,有相应的目标任务、组织结构、格式项目等规定,经历较长的一段时间才完成。比较典型的如ISO,由国际标准化组织的ISO TC159/SC4/WG5工作组负责编制,每年召开两至三次会议,从立项至正式成为国际标准长达近10年时间。而由个人编制的Welie由于人力、物力的限制,编写过程则简略得多,甚至采用开放式管理方法。

(2)组织结构的完整性

HHS在6种模式语言中的组织结构最为完整,它把209个指南分成18类并通过目录组织起来,在正文之后还附有术语列表、重要程度列表、证据强度列表、文献源列表、文献源的作者列表、词汇索引表,充分体现了HHS以研究为基础的编制原则和追求“可用性研究的可用性”的扎实风格。Welie把模式发布在网站上,以列表的形式分为3类15小类,用户可以通过浏览器浏览或查询,利用链接导向相应的模式,比制成印刷型文档更便于查检。Minerva、e-Envoy、CMU的模式均以目录形式组织,结构比较清晰。ISO的组织结构则比较简略,只把179个指南粗略地分为5类。

(3)覆盖面

从覆盖面看HHS、ISO的范围最大,它们的模式有交叉,但也有很多不同[ 11]。HHS有些模式如软件与硬件、屏幕控件、图片图像与多媒体、可用性测试是ISO很少涉及的;ISO有些模式如隐私策略、国际化、个性化也是HHS所没有的。e-Envoy的模式数量虽然少于HHS和ISO,但其覆盖面仍较大。CMU的模式针对的是软件架构,所以同一模式可能影响网站用户界面多个方面的可用性。相比较而言,Minerva、Welie的模式主要是关于界面元素、交互和易理解等方面的内容,覆盖面要小得多。

(4)模式的层次和粒度

由于各种模式语言的覆盖面不同,要比较它们的层次和粒度只能限定在共同拥有的范围内,这里以它们共同拥有的导航和搜索两部分内容为例进行比较。

ISO导航部分内容分为三层,搜索部分内容分为两层。其他5种模式语言有关导航或搜索部分内容都是在第一层下列出所有的模式,但e-Envoy的层次设置特殊一些,它把导航归入“与设计者合作”类中,搜索归入“内容准确”类中。

ISO、Welie有关导航和搜索两部分内容的模式粒度最细。ISO非常关注导航和搜索的内容,属于这两部分的模式很多;Welie的模式具有新颖性,网站上出现不久的导航或搜索组件如“分面导航”、“标签云”等都能在其中找到。HHS、Minerva有关这两部分的模式数量均少于ISO或Welie;e-Envoy、CMU的粒度则太粗,只有一个导航指南和搜索指南。

(5)格式项目齐全性

在6种模式语言中,Welie、Minerva模式的必需项目区分最为清晰,尤其是问题/方案之间的对应关系明确;HHS、e-Envoy、CMU、ISO则没有区分出问题/方案项目。HHS、Welie模式设置的可选项目多。相比较而言,e-Envoy、ISO的模式项目少,而且项目内容过于简单。

(6)模式的效度

在提供模式效度方面最值得称道是HHS,其每个指南都列出了引用的论著,都以1-5分的形式标明其重要程度和证据强度。其他5种模式语言都没有提供效度的证据,如此看来如何保证模式的效度是一个值得关注的问题。

(7)模式间的关系

HHS、Welie、Minerva、e-Envoy、ISO通过组织结构把模式组织起来,HHS还利用指南的重要程度列表和证据强度列表把相同分值的指南集中在一起。在相关模式的揭示方面,Welie、Minerva的模式做得最好,e-Envoy、CMU、ISO只有少部分模式揭示这种关系,HHS的模式则基本不反映这种关系。CMU利用模式能实现的可用性效果和能采用的软件架构策略形成二维矩阵图,通过矩阵图把相关的模式联系起来。

(8)描述准确详细程度

在6种模式语言中,HHS的模式名称主要使用动宾结构词组, Welie、Minerva、e-Envoy、CMU、ISO的模式名称则主要使用名词或动名词词组;Welie、 Minerva、CMU的模式名称较为简洁,HHS、e-Envoy、ISO的模式名称则要长一些。HHS对模式语言的总体描述最为详细,Welie最为简单,ISO用词最为准确。

(9)查检方便程度

HHS、Welie在查检方便程度方面表现最为突出。HHS把所有指南分为18类,每个指南都标有序号,在正文之后还附有术语列表、文献源列表、文献源的作者列表和词汇索引表等查检工具;Welie的模式发布在网站上,分为3类15小类,用户可以通过浏览器浏览或查询。Minerva、e-Envoy、CMU也有目录可供浏览。相比较而言,ISO既没有目录也没有索引,查检最为不便。

以上6种模式语言比较分析的基本情况如表2所示。

表2 较有代表性的模式语言比较
4 结 语

结合数字图书馆网站的研究和实践,探讨编制数字图书馆网站用户界面设计模式语言的问题:

(1)编制模式语言是一个知识管理的过程

国外早在1993年就开始关注数字图书馆可用性的研究[ 27],我国在2000年前后也出现了数字图书馆可用性研究的论文[ 28],但这些论述侧重于对界面可用性评价的研究,对界面可用性设计的研究并不多。与此同时,界面可用性评价的研究成果对设计的指导作用也处于脱节的状态,表现为不重视研究成果的“可用性”,不关注研究成果的累积效应。编制模式语言的过程正是一个知识管理过程,通过对网站用户界面设计和评价知识的总结,可以把组织的隐性知识转化为显性知识,同时与软件开发、用户研究、市场调查、组织决策等结合起来,构成组织知识管理系统的一个重要组成部分。

(2)编制模式语言是一项系统工程

通过以上的比较分析可以发现,编制数字图书馆网站用户界面设计模式语言的过程必然是一个漫长而又复杂的过程:

①要成立专门的编写机构,吸收多方面的专家参与,除了要有软件工程、系统测试、可用性、图书情报学方面的专家外,最好还要有心理学、行为学、社会学、语言学等方面的专家参与;

②要明确模式语言的用户,这里的用户可能是设计者、测试工程师,也可能是数字图书馆管理者或者是终端用户;

③要针对数字图书馆的特点,从大量的设计、评价研究成果中总结出行之有效的方案;

④还必须严格遵循编写方法、编写过程、验收程序等的规定。

这就决定了编写模式语言是一项系统工程,必须应用系统论的方法,全面地分析模式语言各个组成部分尤其是问题与方案之间的关系,采取“分而治之”的策略才能编制出优秀的模式语言。

(3)编制模式语言有利于促进可用性设计和需求分析的结合

目前,数字图书馆网站设计通常是在网站开发成型后才进行可用性测试,然后根据测试结果修改存在的问题,这样做的实际效果并不理想。究其原因,主要是网站开发成型后再修改可用性问题不仅耗时费力代价高昂,而且很大一部分的问题根本就无法修改[ 29]。因此,数字图书馆网站的可用性分析必须前移,如果能够在需求分析阶段就关注可用性问题,则可以更好地提高所设计网站的可用性。而模式语言能够利用行之有效的方案解决可用性问题,可以在以人为中心的设计中更好地与用户交流,从而在开发前期就关注可用性问题。所以,加强模式语言的研究,编制合适的模式语言,有利于促进数字图书馆网站的可用性设计和需求分析的结合。

The authors have declared that no competing interests exist.

作者已声明无竞争性利益关系。

参考文献
[1] 亚历山大. 建筑的永恒之道[M]. 赵冰译. 北京: 知识产权出版社, 2002: 4-46. [本文引用:1]
[2] 亚历山大. 建筑模式语言: 城镇 建筑 构造[M]. 王听度, 周序鸿译. 北京: 知识产权出版社, 2002: 17-44. [本文引用:1]
[3] Mahemoff M J, Johnston L J. Pattern Languages for Usability: An Investigation of Alternative Approaches[C]. In: Proceedings of Asia-Pacific Conference on Human Computer Interaction. Los Alamitos, CA: IEEE Computer Society, 1998: 25-31. [本文引用:1]
[4] 伽玛 E, 赫姆 R, 约翰逊 R, . 设计模式: 可复用面向对象软件的基础: 双语版= Design Patterns: Elements of Reusable Object-Oriented Software[M]. 李英军, 马晓星, 蔡敏, 译. 北京: 机械工业出版社, 2007: 389-390. [本文引用:1]
[5] Rijken D, et al. The Timeless Way. .The Design of Meaning[J]. SIGCHI Bulletin, 1994, 26(3): 70-79. [本文引用:1]
[6] EuroPLoP’96[EB/OL]. [2011-07-10]. http://www1.cse.wustl.edu/~schmidt/europlop-96/writers-workshop.html. [本文引用:1]
[7] Erickson T, Thomas J. Putting It All Together: Pattern Languages for Interaction Design[EB/OL]. [2011-07-10]. http://old.sigchi.org/chi97/proceedings/workshop/jct.htm. [本文引用:1]
[8] Tidwell J. Common Ground: A Pattern Language for Human-Computer Interface Design[EB/OL]. [2011-07-10]. http://www.mit.edu/~jtidwell/interaction_patterns.html. [本文引用:1]
[9] The Brighton Usability Pattern Collection[EB/OL]. [2011-07-10]. http://www.it.bton.ac.uk/Research/patterns/home.html. [本文引用:1]
[10] Richter A. Generating User Interface Design Patterns for Web-based E-business Applications[EB/OL]. [2011-07-10]. http://wwwswt.informatik.uni-rostock.de/deutsch/Interact/09%20Richter.pdf. [本文引用:1]
[11] Bevan N, Spinhof L. Are Guidelines and Stand ards for Web Usability Comprehensive[C]. In: Proceedings of HCI International 2007. New York, USA: Springer, 2007: 407-419. [本文引用:2]
[12] Koyani S J, Bailey R W, Nall J R. Research-based Web Design & Usability Guidelines[EB/OL]. [2011-07-10]. http://www.usability.gov/guidelines/guidelines_book.pdf. [本文引用:1]
[13] Curriculum Vitae Martijn van Welie[EB/OL]. [2011-07-10]. http://www.welie.com/about/cv-martijn-van-welie.pdf. [本文引用:1]
[14] A Pattern Library for Interaction Design[EB/OL]. [2011-07-10]. http://www.welie.com/index.php. [本文引用:1]
[15] Minerva EC Website[EB/OL]. [2011-07-10]. http://www.minervaeurope.org/home.htm. [本文引用:1]
[16] Minerva Working Group 5. Hand book for Quality in Cultural Web Sites: Improving Quality for Citizens[EB/OL]. [2011-07-10]. http://www.minervaeurope.org/publications/qualitycriteria1_2draft/qualitypdf1103.pdf. [本文引用:1]
[17] Office of the e-Envoy. Quality Framework for UK Government Website Design: Usability Issues for Government Websites[EB/OL]. [2011-07-10]. http://www.umic.pt/images/stories/publicacoes/quality_framework_uk.pdf. [本文引用:1]
[18] Usability Software Architecture[EB/OL]. [2011-07-10]. http://www.cs.cmu.edu/~bej/usa/publications.html. [本文引用:1]
[19] Bass L, Jonh B E. Linking Usability to Software Architecture Patterns Through General Scenarios[J]. The Journal of Systems and Software, 2003, 66(3): 187-197. [本文引用:1]
[20] ISO 9241-151, Ergonomics of Human-System Interaction -- Part 151: Guidance on World Wide Web User Interfaces[S]. [本文引用:1]
[21] Spool J M. Evolution Trumps Usability Guidelines[EB/OL]. [2011-08-20]. http://www.uie.com/articles/evolution_trumps_usability/. [本文引用:1]
[22] Juristo N, Moreno A, Sanchez-Segura M. Guidelines for Eliciting Usability Functionalities[J]. IEEE Transactions on Software Engineering, 2007, 33(11): 744-758. [本文引用:1] [JCR: 2.588]
[23] Bevan N. International Stand ards for Usability Should be More Widely Used[J]. Journal of Usability Studies, 2009, 4(3): 106-113. [本文引用:1]
[24] Cronholm S. The Usability of Usability Guidelines: A Proposal for Meta-Guidelines[C]. In: Proceedings of the 21st Annual Conference of the Australian Computer-Human Interaction Special Interest Group: Design, New York, USA. 2009. [本文引用:1]
[25] Hughes M. A Pattern Language Approach to Usability Knowledge Management[J]. Journal of Usability Studies, 2006, 1(2): 76-90. [本文引用:1]
[26] Meszaros G, Doble J. MetaPatterns: A Pattern Language for Pattern Writing[C/OL]. In: Proceedings of the 3rd Pattern Languages of Programming Conference. 1996. [2011-07-10]. http://citeseerx.ist.psu.edu/icons/pdf.gif;jsessionid=34CD7EF4A05ECBFF3D8F1D2515810582. [本文引用:1]
[27] 马翠嫦. 国外数字图书馆可用性评价研究综述[J]. 现代图书情报技术, 2007(2): 1-6. [本文引用:1]
[28] 马翠嫦, 李刚. 我国大陆及台湾地区数字图书馆可用性评价研究进展[J]. 数字图书馆论坛, 2008(4): 63-68. [本文引用:1]
[29] Folmer E, van Gurp J, Bosch J. Software Architecture Analysis of Usability[C]. In: Proceedings of the Engineering Human Computer Interaction and Interactive Systems. New York, USA: Springer, 2005: 38-58. [本文引用:1]