基于信息自動關聯技術的界面導航對Ｗｅｂ系統可用性的改進

〔摘 要〕本文利用信息自動關聯技術對Web系統界面導航設計中存在的硬編碼問題進行了研究，提出了一種支持界面元素的關聯信息自動生成的導航驅動的設計方法，通過對Web常見界面導航邏輯的分析，給出了相應的模型和算法，最后以一個食品質量監管系統為例，對用戶使用行為進行了統計分析，結果顯示與基于菜單驅動方式相比，該方法可以有效地提高系統可用性。

〔關鍵詞〕Web系統;可用性;UI設計

〔中圖分類號〕G202 〔文獻標識碼〕A 〔文章編號〕1008-0821(2009)09-0055-04

Improvement of Web Usability with UI Navigation

Based on an Information Auto-Linking MethodYang Zhaojun

(School of Economic Management，Xidian University，Xi’an 710071，China)

〔Abstract〕Considering hard-coding navigations in user interface design of web systems，this paper presented a design method to support information auto-linking and UI navigation.The UI navigation logic was analyzed first，and then its model and main algorithm were designed.Lastly，the statistics result of user behaviors in a food quality management system showed this method improved the usability in contrast to menu-driven navigation.

〔Key words〕Web system;usability;user interface design

網站的可用性(Web Usability)是指采取何種方式來使網站用戶可以迅速和有效地找到他們要找的內容。一個具有良好可用性的網站Web系統可以給網站支持的業務帶來巨大效益。所以說，如何提高電子商務、電子政務和服務咨詢型等網站系統的可用性，并且改善現有UI設計中硬編碼方式的導航設計，已經成為當前Web系統設計中不可缺少的部分。由于信息的搜索已經成為目前互聯網的主要行為，所以本文提出一種信息自動關聯技術來實現用戶在信息訪問和業務操作中的快捷導航，從而提高用戶信息查詢和工作效率。本文實現的這種動態可配置的信息關聯和自由導航技術，可以應用“以用戶為中心”的網站設計，以及基于 “場景式服務”等人性化設計理念的Web系統中。

1 系統可用性

可用性(Usability)作為人機交互領域中一個關鍵概念，在當前的業務處理和網站設計中已被廣泛接受[1]。Jakob Nielsen從用戶感受的質量角度認為，可用性由可學習 性、效率、可記憶性、出錯、滿意度、功能適用性等方面[2];Helen Sharp從人 ——機界面系統的角度，把可用性定義為“交互系統的易學性，易用性，操作安全性，有效 和高效率及用戶滿意性的程度”[3];而國際可用性標準ISO/DIS 9241-11中的定 義為:“可用性是產品在特定環境下為特定用戶用于特定用途所具有的有效性，效率和用戶 主觀滿意度”[4]。雖然很多網站和基于Web的系統在可用性方面做了很多工作， 然而根據國際可用性診斷咨詢公司Nielsen Norman Group所做的調查，目前電子商務網站的 可用性普遍較低。不友好的導航、過期信息、死鏈接或者鏈接錯誤以及孤立的頁面等造成了 用戶的不愉快的上網體驗。

存在上述可用性問題的原因之一就是在界面設計中業務信息缺乏相互關聯，并且現有的信息關聯也多采用硬編碼“超鏈接”的方式，頁面之間的導航邏輯往往在程序開發時就作為需求規格固定下來，業務發生變化時需要修改編碼和重新部署，缺乏擴展性，造成了系統升級維護的困難。本文提出一種信息自動關聯技術來實現自由導航以改進Web系統的可用性，并且以一個實際的食品質量監管系統為例，通過對用戶操作行為的分析來說明在系統可用性方面的改進。

2 信息自動關聯系統的設計

2.1 Web系統的界面導航邏輯分析

Web系統可以看做是由多個業務對象按照特定業務邏輯構成的交互系統。例如在類似淘寶網等電子商務的Web系統中，通常由商品、賣家、買家、購物車、暫存架、訂單等很多不同對象構成，并通過一系列的業務流程來完成商品的網上交易及配送等過程。

在Web系統中實現某個特定業務功能時，可能需要對一個或多個業務對象進行條件查詢、定位、編輯和修改等，例如在當前商品的瀏覽頁面，用戶可能需要查詢購買過此商品的用戶還買過其他什么相近的商品，以便給自己的購買提供決策支持。在此情況下，信息導航的路徑可能由一個“商品→買家→商品→買家→…”的有限步驟構成。考慮到信息導航需要的一般需求，其通用的界面表現形式如圖1所示。

圖1 信息自由導航示意圖

2009年9月第29卷第9期現?代?情?報Journal of Modern InformationSep.，2009Vol.29 No.92009年9月第29卷第9期基于信息自動關聯技術的界面導航對Web系統可用性的改進Sep.，2009Vol.29 No.9對于任何一個業務類而言，圖1中給出了以下幾種最基本的界面形式:

2.1.1 業務類的Form界面

這是一個自由格式的單記錄的增加、查詢或編輯界面，如圖1中業務類1、業務類2和業務類n。一個業務類可以有一個或多個表現形式不同的Form界面，但是一個Form界面僅且只包含一個業務類。我們可以通過創建一個在邏輯上由多個業務類組成的新業務類來實現在一個Form界面中包括多個業務類。顯然，Form頁面僅接收所包含業務類的內部標識(主鍵)、操作狀態(只讀、編輯)或權限控制等信息。

2.1.2 業務類的List界面

這是一個支持多記錄的列表查詢或刪除界面，如圖1中業務類1的List界面。同樣一個業務類可以有一個或多個由不同屬性集合構成的List界面。與Form界面類似，一個List界面僅且只有一個業務類。通常List頁面接收一個查詢的條件，根據這個條件返回對應業務類的業務對象的集合。

2.1.3 業務類的統計定制Stat界面

這是一個定制處理的自由格式的統計界面，如圖1中業務類n的Stat界面。一個Stat界面由多個導出屬性構成，并且Stat界面需要接收多個統計條件來對相應的導出屬性進行統計求值。例如商品月份統計的界面上，需要接收月份集合和商品類別集合的笛卡爾積所形成的統計條件的集合。

當然，在實際Web系統的開發和界面設計中，任何一個復雜的處理頁面都由上述這3種基本的界面形式組合而成。例如在一個網上購書的訂單提交頁面中，至少包括買家信息的Form界面和購買商品明細的List界面。

2.2 信息自動關聯的模型及算法

對于任何一個業務類Ci來說，其界面元素由m個屬性構成，即UIi。在系統運行時，界面根據業務類Ci和傳入的查詢條件，動態加載一個或多個業務對象集合，即Oi={oi1，oi2，…，oin}，其中每個對象oij由在當前界面UIi的每個屬性上的取值構成，即oij。其中如果是Form界面的話，對象集合只有一個元素;List界面則可能有多個。

與Form和List界面不同，Stat界面中的屬性可以看做是一種導出屬性，即由其他業務類的屬性經過運算得來。業務類Ci在Stat界面中動態加載數據時，對于Stat界面中的某個導出屬性pij來說，根據對應的統計條件執行相應的運算，得出結果vij。例如在圖1中業務類m的Stat界面中“業務類1的數量”屬性根據傳入的統計條件，計算出結果為2，用戶點擊2時，自動導航到業務類1的List界面，顯示其具體的2條記錄。

可以構建一個關聯矩陣ROC來描述業務類之間的導航關系，如下所示:

ROC=C1C2Cn

C1r11r12r1n

C2r21

rij

Cnrn1rnn

為了便于討論，這里僅考慮一個業務類僅有一個List界面和Form界面的情況。通過分析，rij的取值可能有以下幾種:

rij=0

LF

FF

FL

SL

FS

LS?意味?Ci和Cj之間不存在任何路徑的信息關聯

Ci的List界面到Cj的Form界面存在信息關聯

Ci的Form界面到Cj的Form界面存在信息關聯

Ci的Form界面到Cj的List界面存在信息關聯

Ci的Stat界面到Cj的List界面存在信息關聯

Ci的Form界面到Cj的Stat界面存在信息關聯

Ci的List界面到Cj的Stat界面存在信息關聯

當rij<>0時，Ci必須通過其界面中的某個關聯屬性pis來實現到Cj界面的信息導航。由于界面中某些關聯元素的取值可能存在兩種情況:(1)顯示值和內部碼是一個;(2)顯示值和內部碼不同，例如顯示的是某個商品的名稱，而用于信息導航中使用的卻是對應的商品惟一標識(內部碼)，例如在圖1中，業務類1的List界面中編號為S12345的業務對象先根據關聯屬性1上的顯示值“A11”，取得其對應的內部碼(界面中的隱藏屬性)，然后根據內部碼導航到業務類2的Form界面。

基于效率和使用上的方便，系統在設計時，對于所有的業務類來說，都具有若干統一的屬性命名，例如標識屬性id、對象所有者owner、創建時間created、最后修改時間lastmodified等。當在業務類中存在上述幾種關聯時，關聯屬性pi可能在兩端業務類Ci、Cj中的命名也可能不同，例如一個業務類C1的id被另外一個業務類C2引用時，多數情況下需要重新命名以避免與C2中的id屬性沖突。

通過上述分析，Web系統的框架模塊通過預定義的匹配規則在運行時動態生成業務類之間的ROC關聯信息，從而實現自動定位頁面和動態設置界面中數據元素的關聯導航標志。例如對結果集中的某列數據自動設置超鏈接，當用戶單擊時，自動導航到相關聯的業務界面，并實現業務對象的檢索。

為了實現上述功能，其中涉及兩個重要的算法:(1)界面關聯導航標志的動態生成算法;(2)Web系統框架模塊的導航控制算法。限于篇幅，這里僅給出(1)的算法的偽碼形式，且以從List界面導航到Form界面為例。

設當前界面為業務類c的List界面，傳入的條件為查詢w

ResultSet rs=getResultSet(c，w) ∥從數據庫或文件中加載結果集

if(!rs.isEmpty())∥如果結果非空

{

∥根據規則庫，構建矩陣ROC，獲得其關聯信息的集合relatedInfos

∥每個關聯信息是由關聯碼屬性、顯示值屬性、關聯業務類及對應屬性等信息組成

Array relatedInfos[]=getRelatives(c，‘L’)∥L即List界面，見rij中的取值說明

int ncol=rs.getNumColumns(relatedInfos) ∥得到結果集的屬性(列)的數目

outputHead(relatedInfos) ?∥輸出表頭，即屬性(列)名信息

}

while(rs.next()) ∥輸出所有的結果

{

for(int i=1;i<=ncol;i++)∥輸出每個屬性的值

{

∥如果是關聯屬性(列)，在輸出值的同時設置關聯導航標志

∥例如超鏈接形式value

if isRelatedCol(relatedInfos，i)

{

∥如果有顯示值屬性，先獲取顯示值屬性對應的索引

∥如果沒有則返回i，即顯示值和內部碼是一個

int k=relatedInfos[i].getIndexDispValue()

OutputWithLabel(rs.getalue(k)，new Label(relatedInfos[i]))

}else

{

∥不是關聯屬性(列)，則直接輸出屬性的字面值

OutputWith(rs.getValue(i))

}

}

}圖2 界面關聯導航標志的動態生成算法

2.3 實際案例及可用性改進分析

根據上述和其他相關算法，我們實現了一個基于信息自動關聯和自由導航的某市食品質量監管的Web系統，該系統基于J2EE平臺，前端采用Struts和Ajax，后端采用Hibernate框架，業務類的關聯信息采用XML存儲，系統支持Jboss和Tomcat等應用服務器。界面信息的自動關聯和導航形式采用超鏈接的方式，如圖3所示，當用戶點擊“磷酸鹽”時，自動導航到添加劑的Form窗口，并自動加載磷酸鹽的詳細信息。

圖3 食品Web系統的信息自動關聯和導航運行示意圖

該食品系統同時為用戶提供了傳統式的菜單驅動和信息自動關聯的自由導航兩種方式，與基于菜單和工具條的導航方式相比，無論是在使用的方便性，還是在信息獲取的快捷準確性方面都很大的改進。我們以添加劑監管的業務為例，食品監管員根據當前有問題的添加劑“磷酸鹽”，查詢添加劑的國家標準和本分局管轄下所有使用這類添加劑的企業信息，以及該添加劑的來源信息。通過對8名使用者的操作行為(輸入信息量、鼠標移動距離、點擊次數、耗費時間等)的分析，統計結果如表1所示。表1 不同驅動方式的系統可用性對比

操作

行為按鍵次數

(選擇、點

擊、鍵盤)鼠標移動

總距離(cm)鼠標點擊

總次數業 務耗費

時間(秒)菜單驅動94811107關聯導航522743注:“磷酸鹽”的拼音助記碼為lsy，按鍵次數為3。從表1中可以看出，與傳統菜單驅動的導航方式相比，采用信息自動關聯的自由導航不但給用戶帶來更好的使用體驗，而且減少了用戶在不同界面之間的頻繁切換以及拷貝、粘貼所造成的輸入錯誤，有效提高了業務處理的效率。3 結束語

由于目前大多數流行開發語言和平臺都支持諸如“反射”這種動態機制，這就為開發本文提出的這種基于信息自動關聯的自由導航的Web系統提供了便利。當然除了把界面邏輯從程序的硬編碼中分離出來外，我們還需要對業務類的基本界面形式進行標準化的封裝和統一管理。并且本文提出的這種信息自動關聯技術可以進行靈活擴展來支持不同的導航方式，例如動態的右鍵菜單和導航按鈕等。下一步信息關聯和導航技術的研究將會結合用戶的訪問歷史和偏好等信息來為Web用戶提供一個更智能化的場景和推薦服務。

參考文獻

[1]陳晶.淺談Web頁面的可用性設計[J].現代圖書情報技術，2003，(1).

[2]Jakob Nielsen:Usability Engineering[M].Academic Press，Boston，1993.

[3]Helen Sharp，Yvonne Rogers，Jenny Preece:交互設計——超越人機交互[M].北京:電子工業出版社，2003.6.

[4]ISO DIS 9241-11:Ergonomic requirements for office work with visual display terminals(VDTs):-Part 11:Guidance on Usability[R].

[5]Jakob Nielsen:Designing Web Usability:The Practice of Simplicity[M].北京:人民郵電出版社，2000.11.