Web可用性設(shè)計(jì)方法研究

鄢 沛 郭 皎 應(yīng) 宏

（重慶三峽學(xué)院數(shù)學(xué)與計(jì)算機(jī)科學(xué)學(xué)院，重慶萬(wàn)州 404100）

Web被譽(yù)為20世紀(jì)中最偉大的發(fā)明之一，它的迅速發(fā)展不僅為全球通信提供了前所未有的便利渠道，而且影響到人類(lèi)生活的各個(gè)方面.隨著信息和服務(wù)的不斷發(fā)展，網(wǎng)站數(shù)目增長(zhǎng)迅速.[1]同時(shí)Web也是一個(gè)復(fù)雜的信息環(huán)境，是一種特定的人機(jī)交互界面，和傳統(tǒng)的軟件人機(jī)界面相比，Web界面要倒退至少10年.[2]人們?cè)谑褂肳eb時(shí)，卻發(fā)現(xiàn)這些Web難以學(xué)習(xí)、繁于操作或難以理解.據(jù)Jakob Nielsen研究發(fā)現(xiàn)，網(wǎng)站普遍存在著不同程度的可用性問(wèn)題，[3]而當(dāng)用戶(hù)首次訪問(wèn)一個(gè)網(wǎng)站留下不良印象時(shí)，40%的用戶(hù)不會(huì)再次訪問(wèn)該網(wǎng)站.[4]由此可見(jiàn)，網(wǎng)站的可用性問(wèn)題具有廣泛的普遍性和嚴(yán)重性.在Web時(shí)代，要想實(shí)現(xiàn)網(wǎng)站的目的，就應(yīng)讓用戶(hù)感受到良好的可用性.Web可用性已經(jīng)從“最好有”變?yōu)榱恕氨仨氂小?[5]為此一定要找到克服可用性問(wèn)題的辦法，設(shè)計(jì)具有較高可用性的網(wǎng)站.其研究意義在于為Web設(shè)計(jì)者提供一個(gè)簡(jiǎn)單有效的網(wǎng)站設(shè)計(jì)方法和步驟，使得他們能夠通過(guò)提高Web可用性設(shè)計(jì)出用戶(hù)滿(mǎn)意的網(wǎng)站.

1 Web可用性

1.1 可用性

人機(jī)交互學(xué)的唯一目標(biāo)就是最大限度的滿(mǎn)足用戶(hù)的需求和期望，提高軟件系統(tǒng)的可用性.[6]軟件可用性（Usability）早在20世紀(jì)80年代就受到不同程度的重視，它是交互式IT產(chǎn)品/系統(tǒng)的重要質(zhì)量指標(biāo).可用性專(zhuān)家Nielsen指出，可用性是指產(chǎn)品對(duì)用戶(hù)來(lái)說(shuō)有效、易學(xué)、高效、好記、少錯(cuò)和令人滿(mǎn)意的程度.[7]ISO 9241-11國(guó)際標(biāo)準(zhǔn)對(duì)可用性作了如下定義：產(chǎn)品在特定使用環(huán)境下為特定用戶(hù)用于特定用途時(shí)所具有的有效性（effectiveness）、效率（efficiency）和用戶(hù)主觀滿(mǎn)意度（satisfaction）.自20世紀(jì)80年代以來(lái)，人們對(duì)產(chǎn)品可用性質(zhì)量的重視促進(jìn)了可用性工程（Usability Engineering）這一概念的出現(xiàn)，并相應(yīng)地形成了一個(gè)在學(xué)術(shù)界和工業(yè)界均十分熱門(mén)的領(lǐng)域.可用性工程是IT產(chǎn)品及用戶(hù)界面開(kāi)發(fā)的一種工程方法論，貫穿了產(chǎn)品生命周期的各個(gè)階段.其核心就是以用戶(hù)為中心（UCD：User-Centered design）的設(shè)計(jì)方法論，強(qiáng)調(diào)從用戶(hù)的角度來(lái)進(jìn)行產(chǎn)品的設(shè)計(jì)和開(kāi)發(fā).[8]

1.2 Web可用性設(shè)計(jì)

Web頁(yè)面就是建立在Internet技術(shù)基礎(chǔ)上的一種特定的人機(jī)界面，Web是在Internet環(huán)境中的特殊交互式系統(tǒng).Web可用性工程是將可用性工程原理與技術(shù)運(yùn)用到Web設(shè)計(jì)中，使Web設(shè)計(jì)者以用戶(hù)為中心創(chuàng)建網(wǎng)站而不再以技術(shù)為中心，應(yīng)該圍繞其用戶(hù)，而不是計(jì)算機(jī)的輸入和輸出.故Web設(shè)計(jì)需要發(fā)生從技術(shù)驅(qū)動(dòng)到用戶(hù)驅(qū)動(dòng)的轉(zhuǎn)變.Web交互界面設(shè)計(jì)是從圍繞以屏幕為基礎(chǔ)的用戶(hù)交互軟件的圖形用戶(hù)界面設(shè)計(jì)發(fā)展而來(lái)，和其他領(lǐng)域的設(shè)計(jì)一樣遵循設(shè)計(jì)的基本面：[9]必須直接面對(duì)“帶有特定需求的用戶(hù)”，且也必須保證客戶(hù)在使用Web服務(wù)成功完成任務(wù)的過(guò)程是愉快的.Web設(shè)計(jì)較多采用設(shè)計(jì)——評(píng)估的迭代設(shè)計(jì)過(guò)程來(lái)提高其可用性.Web可用性設(shè)計(jì)包括以下三個(gè)主要內(nèi)容：用戶(hù)研究、Web設(shè)計(jì)和評(píng)估.

2 用戶(hù)研究

用戶(hù)研究方法的重點(diǎn)是在系統(tǒng)開(kāi)發(fā)中以用戶(hù)需求為驅(qū)動(dòng)，而非技術(shù)需求為驅(qū)動(dòng).設(shè)計(jì)應(yīng)當(dāng)通過(guò)突出用戶(hù)交互和依賴(lài)原型法迭代設(shè)計(jì)的過(guò)程來(lái)提供良好的交互式產(chǎn)品.[10]當(dāng)UCD方法論將用戶(hù)置于應(yīng)用的中心，必須理解和可視化用戶(hù)之間，用戶(hù)、社會(huì)和環(huán)境之間，以及用戶(hù)和將設(shè)計(jì)的產(chǎn)品之間的一些顯著特性.用戶(hù)必須通過(guò)用戶(hù)建模進(jìn)行標(biāo)識(shí)和分析.用戶(hù)模型是任何交互式系統(tǒng)的組成部分，用戶(hù)模型是基于每一個(gè)用戶(hù)對(duì)系統(tǒng)的期待和理解，包括系統(tǒng)提供的功能和對(duì)象，當(dāng)用戶(hù)與系統(tǒng)交互時(shí)如何反饋，用戶(hù)在交互過(guò)程中想要完成的目標(biāo).這些期待、理解和目標(biāo)受用戶(hù)的經(jīng)驗(yàn)所影響，包括與系統(tǒng)的交互.因?yàn)槊總€(gè)用戶(hù)的概念模型是由不同的經(jīng)驗(yàn)所影響，沒(méi)有兩個(gè)概念模型是一模一樣的，每個(gè)用戶(hù)在看到一個(gè)界面時(shí)的觀點(diǎn)都會(huì)有所不同.

2.1 用戶(hù)建模

用戶(hù)建模技術(shù)有：用戶(hù)角色（user roles），用戶(hù)群（user segments），終極角色（extreme characters）和人物角色（personas）[2]等.其中用戶(hù)角色和用戶(hù)群方法對(duì)單個(gè)項(xiàng)目中開(kāi)發(fā)用戶(hù)場(chǎng)景（scenarios）和協(xié)調(diào)不同用戶(hù)并不是有用，終極角色不可能表征系統(tǒng)的真實(shí)用戶(hù).綜合比較，人物角色是能夠很好的標(biāo)識(shí)和表征系統(tǒng)最終用戶(hù)的用戶(hù)建模方法.

2.2 人物角色

2.2.1 創(chuàng)建人物角色

Alan Cooper提出的人物角色，是一個(gè)幫助設(shè)計(jì)者在設(shè)計(jì)過(guò)程中獲得清晰和關(guān)注的目標(biāo)導(dǎo)向（goal-directed）設(shè)計(jì)方法.他們是在人種學(xué)調(diào)查收集到的實(shí)際用戶(hù)的行為數(shù)據(jù)的基礎(chǔ)上形成的綜合原型（composite archetype），概括了用戶(hù)研究的發(fā)現(xiàn)，闡述系統(tǒng)典型用戶(hù)的目標(biāo)和活動(dòng)，是針對(duì)網(wǎng)站目標(biāo)群體真正特征的勾勒.[11]人物角色并不是真實(shí)的人群，但他們基于人們真實(shí)的行為和動(dòng)機(jī)，并且在設(shè)計(jì)過(guò)程中代表著真實(shí)的人群，通過(guò)理解人物角色，設(shè)計(jì)師可以理解在特定場(chǎng)景下的用戶(hù).基于目標(biāo)導(dǎo)向的網(wǎng)站可以有多種人物角色，每個(gè)系統(tǒng)至少需要一個(gè)主要的人物角色，必須針對(duì)主要任務(wù)角色且遵循其需求和目標(biāo)進(jìn)行用戶(hù)交互設(shè)計(jì).

有兩種主要方法創(chuàng)建人物角色，它們是根據(jù)用戶(hù)研究的類(lèi)型和分析方法來(lái)區(qū)分的：[11]定性（qualitative）人物角色、定量（quantitative）人物角色.人物角色定性研究方法中包括：用戶(hù)訪談、現(xiàn)場(chǎng)調(diào)查和可用性測(cè)試.通過(guò)定性研究可以得到一個(gè)來(lái)自用戶(hù)的、關(guān)于他們目標(biāo)、行為和觀點(diǎn)的總體列表.定量研究方法有：調(diào)查問(wèn)卷、日志文件分析和CRM（Customer Relationship Management）數(shù)據(jù)分析等.將定量和定性相結(jié)合，用定量方法驗(yàn)證和改良定性人物角色.人物角色使用目標(biāo)、行為、觀點(diǎn)、和人口統(tǒng)計(jì)特征來(lái)描述.

2.2.2 應(yīng)用人物角色

人物角色可以使確定網(wǎng)站功能和內(nèi)容，以及使得確定其優(yōu)先級(jí)別的過(guò)程變得清晰，它在幫助我們提早做出決策方面有著不可估量的作用.在定性特性和功能范圍時(shí)，人物角色可以應(yīng)用在頭腦風(fēng)暴（Brainstorming）、確定范圍的優(yōu)先次序、指導(dǎo)網(wǎng)站結(jié)構(gòu)、內(nèi)容和設(shè)計(jì)等.在頭腦風(fēng)暴中，基于人物角色的目標(biāo)、觀點(diǎn)和行為來(lái)集體討論所有可能的特性、功能和內(nèi)容.通過(guò)對(duì)人物角色進(jìn)行頭腦風(fēng)暴，得到用戶(hù)功能需求列表.確定范圍的優(yōu)先次序，通過(guò)人物角色為每個(gè)潛在的功能評(píng)分，很容易得到一個(gè)比較科學(xué)的評(píng)價(jià)結(jié)果對(duì)功能進(jìn)行優(yōu)先次序排定.

3 Web設(shè)計(jì)

與其花時(shí)間解釋如何使用界面，不如在設(shè)計(jì)中要利用界面元素的自描述信息，顯性展示W(wǎng)eb的使用過(guò)程，[12]同時(shí)要界面表現(xiàn)和行為符合用戶(hù)操作習(xí)慣和心智模型.Web界面融合了文本、鏈接、圖像元素和格式化等諸多影響 Web可用性方面的元素.在Web設(shè)計(jì)中遵循標(biāo)準(zhǔn)化技術(shù)，可以實(shí)現(xiàn)下列優(yōu)點(diǎn)：網(wǎng)頁(yè)下載和讀取速度加快、更好的可訪問(wèn)性、更利于搜索引擎排名（SEO）、適應(yīng)性強(qiáng)、開(kāi)發(fā)與維護(hù)變得簡(jiǎn)易.簡(jiǎn)而言之，標(biāo)準(zhǔn)化的網(wǎng)頁(yè)可以增強(qiáng)可用性，大幅度提升用戶(hù)體驗(yàn).因此，在Web設(shè)計(jì)中要提高Web可用性，需解決下列內(nèi)容：信息架構(gòu)設(shè)計(jì)，易讀性設(shè)計(jì)，搜索設(shè)計(jì)和頁(yè)面設(shè)計(jì).

3.1 Web信息架構(gòu)設(shè)計(jì)

信息體系架構(gòu)建設(shè)作為“明確站點(diǎn)的使命與范圍，平衡其投資機(jī)構(gòu)和用戶(hù)的需求”的過(guò)程，它決定網(wǎng)站將包含什么樣的內(nèi)容和功能.它通過(guò)定義組織結(jié)構(gòu)、導(dǎo)航系統(tǒng)、標(biāo)引和搜索工具來(lái)指定用戶(hù)找到信息的途徑.[13]組織結(jié)構(gòu)系統(tǒng)是決定網(wǎng)站信息架構(gòu)成功與否的關(guān)鍵因素，也是建立導(dǎo)航系統(tǒng)和標(biāo)引系統(tǒng)的基礎(chǔ)，它由信息組織方案和組織結(jié)構(gòu)兩部分組成.Web導(dǎo)航和信息查找的能力直接關(guān)系網(wǎng)站的運(yùn)營(yíng)效果，所以導(dǎo)航系統(tǒng)需不斷為用戶(hù)提供路徑線索和標(biāo)志，使他們始終知道自己“在哪里”，這一點(diǎn)在超文本鏈接過(guò)程中至關(guān)重要.[14]標(biāo)引系統(tǒng)是向用戶(hù)展示組織和導(dǎo)航系統(tǒng)的手段，因此標(biāo)引系統(tǒng)的創(chuàng)建應(yīng)該在它們確立后再進(jìn)行.

3.2 易讀性設(shè)計(jì)

人們?cè)L問(wèn)網(wǎng)站是因?yàn)榫W(wǎng)站有用，而不是好看.Web是以用戶(hù)為導(dǎo)向的媒體，用戶(hù)需要清晰的非混亂的頁(yè)面，用戶(hù)采用信息搜索的策略來(lái)節(jié)省時(shí)間，不會(huì)以一種線性的方式來(lái)搜索信息，相反他們采用掃描的方式，依賴(lài)一些視覺(jué)的暗示，這些暗示給出了結(jié)果就在附近的強(qiáng)烈信號(hào)，用戶(hù)將他們的注意力指引到這些區(qū)域，并忽略其他內(nèi)容.所以必須按用戶(hù)Web閱讀的習(xí)慣來(lái)組織文字，將Web內(nèi)容設(shè)計(jì)得和用戶(hù)的行為相匹配，并對(duì)其進(jìn)行調(diào)整，以便取得最優(yōu)的可掃描性和可理解性.Web寫(xiě)作過(guò)程中采用簡(jiǎn)單的語(yǔ)言，尊重用戶(hù)的時(shí)間和閱讀技巧，Web寫(xiě)作簡(jiǎn)明扼要.Jeff Johnson還給出三個(gè)Web寫(xiě)作準(zhǔn)則：不要使用術(shù)語(yǔ)、避免使用首字母縮寫(xiě)、不要使用譏諷.

3.3 搜索設(shè)計(jì)

搜索是Web用戶(hù)體驗(yàn)中很突出的一部分，它是Web可用性設(shè)計(jì)中最重要的元素之一，用戶(hù)對(duì)于它的效果有很強(qiáng)的期望.許多網(wǎng)站的搜索成功率很低，在 Web設(shè)計(jì)中要?jiǎng)?chuàng)建好的搜索功能最好的辦法就是學(xué)習(xí)搜索引擎的準(zhǔn)則，為網(wǎng)站設(shè)計(jì)有效的搜索功能.用戶(hù)期望網(wǎng)站的搜索功能和外部主要的搜索引擎以同樣的方式工作，在設(shè)計(jì)搜索功能時(shí)，應(yīng)當(dāng)不要?jiǎng)佑糜脩?hù)新的心智模型，讓用戶(hù)沒(méi)意識(shí)到自己是在搜索.對(duì)于搜索結(jié)果處理，可以模仿國(guó)際搜索引擎的結(jié)果呈現(xiàn)頁(yè)面，把值得推薦的結(jié)果置頂列出.搜索引擎優(yōu)化也是 Web可用性設(shè)計(jì)中的非常重要的組成部分.主要有三種白帽（white hat）搜索引擎優(yōu)化（SEO: Search Engine Optimization)技術(shù)：語(yǔ)言SEO、結(jié)構(gòu)SEO和聲譽(yù)SEO.

3.4 頁(yè)面設(shè)計(jì)

頁(yè)面設(shè)計(jì)部分包括兩個(gè)部分，第一部分是圖形視覺(jué)部分，第二部分是HTML編碼部分.圖形視覺(jué)部分主要關(guān)注可視化呈現(xiàn).HTML編碼在頁(yè)面設(shè)計(jì)中非常重要，HTML編碼設(shè)計(jì)時(shí)應(yīng)該支持Web標(biāo)準(zhǔn)和瀏覽器兼容性.

Web標(biāo)準(zhǔn)是一些規(guī)范的集合，是由W3C和其它的標(biāo)準(zhǔn)化組織共同制定的，以用它來(lái)創(chuàng)建和解釋基于 Web的內(nèi)容.使用結(jié)構(gòu)化標(biāo)準(zhǔn)語(yǔ)言（如：XHTML或XML）來(lái)描述網(wǎng)頁(yè)的結(jié)構(gòu)；使用標(biāo)準(zhǔn)呈現(xiàn)語(yǔ)言來(lái)格式化網(wǎng)頁(yè)的呈現(xiàn)；用標(biāo)準(zhǔn)的行為控制語(yǔ)言來(lái)定義網(wǎng)頁(yè)的行為.具體地：1）結(jié)構(gòu)和表現(xiàn)分離，充分考慮文檔的語(yǔ)義結(jié)構(gòu)，用HTML文檔來(lái)保存內(nèi)容與結(jié)構(gòu)，用CSS（層疊樣式表）文檔來(lái)控制整個(gè)文檔的表現(xiàn).2）使用XHTML創(chuàng)建嚴(yán)謹(jǐn)?shù)腤eb頁(yè)面.3）使用CSS，結(jié)構(gòu)化、語(yǔ)義化的XHTML描述文檔，CSS用來(lái)高效地控制顯示布局.

Web瀏覽器已經(jīng)成為一個(gè)主流的應(yīng)用程序平臺(tái)，[14]但瀏覽器的種類(lèi)（版本）繁多，諸多瀏覽器共存迫使Web設(shè)計(jì)考慮瀏覽器兼容問(wèn)題.

4 Web可用性評(píng)估

網(wǎng)頁(yè)設(shè)計(jì)中，采用設(shè)計(jì)——評(píng)估的迭代設(shè)計(jì)過(guò)程來(lái)提高其可用性.傳統(tǒng)可用性工程強(qiáng)調(diào)精確定義可用性度量（Usability metrics），Whiteside等提供了一系列量化度量標(biāo)準(zhǔn).依照可用性可度量的原則，Melody Y. Ivory 等提供了一個(gè)被稱(chēng)為Webtango的工具，主要探索幫助改善網(wǎng)站設(shè)計(jì)的自動(dòng)化方法，它的目標(biāo)是提供一個(gè)交互式工具幫助網(wǎng)站設(shè)計(jì)者改良網(wǎng)站設(shè)計(jì)，該工具對(duì)Web設(shè)計(jì)采用定量的方法，對(duì)Web設(shè)計(jì)中的信息、導(dǎo)航和圖形呈現(xiàn)方面進(jìn)行分析和度量.它使用“快速檢測(cè)”工具網(wǎng)頁(yè)進(jìn)行檢查，以便改進(jìn)設(shè)計(jì).這種設(shè)計(jì)——檢測(cè)方法并不是要替代可用性測(cè)試，它只是可用性測(cè)試的一個(gè)補(bǔ)充.在文獻(xiàn)[14]中介紹了一種用戶(hù)界面設(shè)計(jì)支持方法等，這些工具和方法可以對(duì)軟件界面的可用性進(jìn)行基于規(guī)則的評(píng)估和改進(jìn).Web頁(yè)面中的HTML編碼校驗(yàn)可以采用W3C提供的校驗(yàn)服務(wù).通過(guò)校驗(yàn)可以根據(jù)具體的校驗(yàn)錯(cuò)誤提示信息，進(jìn)行修正，全方位的提高網(wǎng)頁(yè)的標(biāo)準(zhǔn)度，從而增強(qiáng)其可用性.

Web可用性設(shè)計(jì)包括三個(gè)主要內(nèi)容：研究用戶(hù)，Web設(shè)計(jì)和評(píng)估.通過(guò)上述研究，歸納出網(wǎng)站可用性設(shè)計(jì)的具體方法是：在以用戶(hù)為中心的設(shè)計(jì)思想指導(dǎo)下，充分理解Web設(shè)計(jì)內(nèi)涵，借鑒其他領(lǐng)域設(shè)計(jì)思路.使用人物角色研究用戶(hù)目標(biāo)、觀點(diǎn)和行為，并確定網(wǎng)站定性特性與功能范圍，構(gòu)建合理的Web信息架構(gòu).遵循導(dǎo)航設(shè)計(jì)的一般原則，優(yōu)化Web界面，按照用戶(hù)閱讀方式組織文字，建立合理的站內(nèi)搜索，遵循Web實(shí)現(xiàn)標(biāo)準(zhǔn)，為主流搜索引擎優(yōu)化網(wǎng)站結(jié)構(gòu)與內(nèi)容，并采用設(shè)計(jì)——評(píng)估的迭代設(shè)計(jì)過(guò)程提高網(wǎng)站可用性.該方法可作為Web設(shè)計(jì)人員設(shè)計(jì)和提高Web可用性的設(shè)計(jì)指南.

[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.