基于用戶認知的Web頁面設計實證研究——以武漢大學圖書館網(wǎng)站為例

●邱均平，夏　琦（武漢大學．中國科學評價研究中心；．信息管理學院，武漢　430072）

基于用戶認知的Web頁面設計實證研究——以武漢大學圖書館網(wǎng)站為例

●邱均平a，夏琦b
（武漢大學a．中國科學評價研究中心；b．信息管理學院，武漢430072）

［關鍵詞］用戶認知；Web頁面設計；武漢大學；圖書館

［摘要］本文將一系列基于用戶認知的Web頁面設計理論，包括以用戶為中心的設計標準、認知心理學以及色彩學與Web頁面設計實踐相結合，以武漢大學圖書館網(wǎng)站的改版前后頁面為對比，試圖對基于用戶認知的Web設計理論與實踐的推廣和深化有所幫助。

根據(jù)中國互聯(lián)網(wǎng)絡信息中心（CNNIC）發(fā)布的第34次《中國互聯(lián)網(wǎng)絡發(fā)展狀況統(tǒng)計報告》，截至2014 年6月，中國網(wǎng)民規(guī)模達到了6.32億，互聯(lián)網(wǎng)的普及率則達到了46.9%。［1］如此龐大的用戶規(guī)模使得如何維持用戶忠誠度成為網(wǎng)站建設者需要思考的問題。要解決這個問題，就應該從用戶瀏覽Web頁面的信息獲取過程著手，利用用戶認知的相關理論，為用戶提供更為符合使用習慣的Web頁面設計?；谟脩粽J知的理論包括以用戶為中心的設計標準，認知心理學在Web頁面設計中的應用以及色彩學在Web頁面設計中的應用。對用戶信息獲取過程進行研究，不僅能夠促進以用戶為中心的Web頁面設計水平，也能夠為用戶提供更好的個性化服務。因此，本文以基于用戶認知的Web頁面設計理論為指導，以武漢大學圖書館網(wǎng)站為例，試圖對基于用戶認知的Web設計理論與實踐的推廣和深化有所幫助。

1基于用戶認知的Web頁面設計理論

1.1以用戶為中心的設計標準

創(chuàng)建一個吸引用戶、能增強用戶體驗的方法被稱作以用戶為中心的設計。它是一種高效的、圍繞用戶為中心設計產(chǎn)品的方法。［2］簡單地說，就是在進行產(chǎn)品設計之初就從用戶的需求出發(fā)，站在用戶的角度思考問題，以用戶為中心來設計產(chǎn)品，而不是讓用戶去適應產(chǎn)品。以用戶為中心的Web設計理念的興起標志著關注點的轉變，從過去對技術上高效率的關注逐漸轉移至用戶身上，讓用戶盡可能早地參與到設計過程中。［3］以用戶為中心的設計主要從以下三方面展開。

（1）策略和用戶分析。其主要任務和目的在于分析和收集用戶需求，首先對目標用戶進行特征分析和描述，進而收集用戶需求并進行分析，在此基礎上定義和規(guī)劃網(wǎng)頁目標，最后進行分析和確定。

（2）設計和測試。網(wǎng)頁設計和網(wǎng)頁編寫的具體過程，包括對對象進行模型化和分析，然后對網(wǎng)頁視圖即交互界面進行設計，進行原型開發(fā)，最后進行用戶測試以及專家的審閱。

（3）實施和評估。重點在于保持一個高真設計原型以及設計風格標準，并對其進行實施及評估。［4］而設計師的任務則是及時對用戶需求進行反饋整理，進而將其運用到下一步的模型設計中去，在完成改進后進行下一輪的評估。

1.2認知心理學

認知心理學興起于20世紀50年代中期，并且于70年代獲得廣泛的認同，它是一門研究人的認知行為的學科。［5］事實上，網(wǎng)頁設計過程可以看作是一次信息傳遞與處理的過程。一個排版整潔、布局清晰、信息突出的網(wǎng)頁可以成為人們認知過程中獲取信息的一個快捷渠道，為了使用戶能夠更加快捷準確地獲取網(wǎng)頁傳達的信息，網(wǎng)頁設計者需要對用戶的信息需求、認知過程及其規(guī)律有一個清晰的認識，并在這些規(guī)律的指導下應用到實際的網(wǎng)頁設計中。［6］

網(wǎng)頁設計中的感知覺理論告訴我們，作為整體的網(wǎng)站頁面需要提供給用戶一個能夠強烈吸引注意力的第一印象，并針對不同用戶群體應該對網(wǎng)頁的整體風格做出相應的調(diào)整，如，網(wǎng)站的目標群體是兒童，網(wǎng)頁可以大膽運用一些鮮艷的顏色，明快的布局以及輕松的音樂來吸引他們；而在設計交互界面的過程中則應該盡量減少用戶不必要的眼球移動，使得使用網(wǎng)頁成為一件省時省力的事情；另外還應設計易于瀏覽的格式布局，使得用戶能夠盡可能快地找到所需信息。［7］

此外，用戶的認知是在一個有限的時間和注意力范圍內(nèi)的，因此，在網(wǎng)頁鏈接與跳轉的過程中也應該保持主題的醒目與一致性，將大批的信息按照其相互間的聯(lián)系進行分類組織，使得用戶能夠通過最簡短的步驟完成頁面的跳轉與所需信息的獲取。［8］

1.3色彩學

任何一個網(wǎng)頁界面都少不了色彩的存在，在網(wǎng)絡界面設計中對色彩進行合理運用和搭配，利用色彩學中包括色彩對比原則、色彩調(diào)和原則以及人對相關色彩的心理效應（如色彩的好惡、色彩的表情等）等理論，更好地達到傳達信息、吸引用戶注意力的目的。

在網(wǎng)頁設計過程中，運用色彩對比手法，利用冷暖色調(diào)之間的強烈對比，突出主題，使得網(wǎng)頁呈現(xiàn)出一種更為立體、豐富的色彩效果。如，在設計網(wǎng)頁底色和字體顏色的過程中應該注意兩種顏色對比度和區(qū)分度的提升，用戶在使用的時候，白底黑字自然比黑底綠字的頁面設置易于閱讀。［9］此外，為了突出網(wǎng)頁的用戶定位和主題特征，可以利用不同色塊的面積對比來突出其特色。如，網(wǎng)站的用戶群體為5～10歲兒童，可以大膽采用黃色、紅色等活潑顏色的面積同時布局面積相等或類似的綠色、藍色布局，這樣可以達到色彩沖突的最高值，能更好地吸引用戶的注意力。

色彩調(diào)和原則看起來與色彩對比原則相對立，實際是將有差別的不同顏色經(jīng)過面積、純度等方面的調(diào)整，獲得一種和諧統(tǒng)一的整體風格及效果。［10］其方法包括利用面積法進行調(diào)和，即大面積冷對小面積暖；聚散調(diào)和法即冷聚熱散以及利用黑、白、灰等中性色作過渡區(qū)間來加以調(diào)和。［11］根據(jù)哥德的面積理論，紅色與綠色的面積比為1:1是最為恰當?shù)纳时壤?，但在實際應用中我們發(fā)現(xiàn)這樣的色彩組合并不會帶來一種和諧的感官享受，反而在配色時將紅色的面積縮小為整體面積的四分之一左右、綠色占據(jù)剩下的四分之三時呈現(xiàn)出一種更為悅目的狀態(tài)，這就是利用面積法使得大面積的冷色與小面積的暖色相對應，使得整體頁面色調(diào)達到一個和諧統(tǒng)一的狀態(tài)。

2基于用戶認知的Web設計實踐——以武漢大學圖書館網(wǎng)站為例

2.1導航可用性

在此次武漢大學圖書館網(wǎng)站改版過程中，一個非常明顯的改變就是網(wǎng)站頁面風格的變化以及各類各個版塊的組織排列上的優(yōu)化，突出了某些常用功能的鏈接，新增了講座信息、圖書館新聞等信息滾動介紹，總之，是在確保保留網(wǎng)站主要功能的基礎上根據(jù)用戶的需求變化對網(wǎng)頁布局設計做出一番調(diào)整，增強了網(wǎng)頁的可用性和易用性，以優(yōu)化用戶的體驗。下面就將針對新舊兩個版本網(wǎng)站的導航可用性、信息易獲取性以及頁面的易用性做一個對比，探討武漢大學圖書館網(wǎng)站在為滿足用戶需求、增強網(wǎng)站可用性方面所做出的努力。

導航的作用在于讓網(wǎng)頁使用者能夠隨時隨地、清楚明確地知道自己位于網(wǎng)站的哪個版塊、如何可以快速地回到剛訪問的網(wǎng)頁以及接下來可以訪問哪些內(nèi)容、如何訪問那些網(wǎng)頁等。由認知心理學可知，由于人的注意力和記憶力都是具有一定時效性的，這也就是說，為了使用戶能夠專注于某一任務或是掌握自己的使用規(guī)律，導航扮演著重要的角色，它能提醒用戶在整個網(wǎng)站中的位置，也能幫助用戶快速定位到訪問過的頁面。為了更好地完成這一任務，武漢大學圖書館網(wǎng)站在首頁導航條的設計上做了一個較大的調(diào)整。

改版前的圖書館網(wǎng)站僅在頁面上方提供一個導航條，其字體與頁面正文字體大小一樣，因此不能迅速、直觀地指示讀者：這是可以提供頁面間跳轉的導航條。此外，對于已經(jīng)訪問過的欄目以及使用者正在訪問的欄目沒有給予相應的顏色或大小上的變化予以反應，因此不具有鮮明的指向性。

而經(jīng)過改版之后的導航條在呈現(xiàn)形式上更為豐富，以不同的顏色版塊、不同形狀的按鈕以及不同大小的字體來劃分不同層級、不同功能的指示性導航。這是根據(jù)色彩學中通過合理使用顏色對比可以突出重點的理論，因為注意具有選擇性，用特定的設計手段對于某些板塊加以美化能夠起到吸引用戶注意力的目的。除此之外，它在全局性的導航能力方面也有所提高。用戶通過頁面上部的語言指示可以清楚地看到自己是如何從首頁來到當前頁面，并且能明晰地了解整個系統(tǒng)間頁面與頁面之間的關系，這樣的全局導航方式遠比之前單純的網(wǎng)站地圖更易于理解，從而使得用戶能夠更好地對自己訪問的網(wǎng)頁進行定位，同時對首頁以及之前訪問過的頁面添加鏈接，便于使用者在有需要的情況下迅速地返回網(wǎng)站首頁或者是之前訪問過的頁面。新的全局性導航的調(diào)整就是幫助用戶隨時定位、明確使用目的。

2.2信息易獲取性

用戶訪問網(wǎng)頁的目的在于獲取信息，因此網(wǎng)站界面的組織與信息的呈現(xiàn)方式在很大程度上影響著用戶能否很好地完成其訪問目的。［12］如，在舊版的圖書館網(wǎng)站首頁，各種鏈接基本上是以一種雜亂無章的方式堆放在一起，如果用戶想要找尋某一特定任務的鏈接，只能通過瀏覽的方式獲取。另外，各處鏈接基本上以同樣大小、同樣顏色的相同字體來指示，這就讓第一次使用或者是不熟悉圖書館網(wǎng)頁的用戶費時費力地一個一個地尋找。根據(jù)認知心理學的理論，在使用網(wǎng)頁的過程中，大部分使用者都是用快速瀏覽的方式尋找信息，而一個用戶最多只會花上四十秒鐘去尋找所需信息，如果超過這個時間，他就會認為這個網(wǎng)站獲取信息的難度要超過他所能接受的水平，因此對于網(wǎng)站的整體印象及使用效果就會大打折扣。

而改版之后的頁面則在這一方面做出了明顯的改善。首先一點是不同類別的資源導航通過陰影、版塊之間的銜接確定了自己非常獨特而清楚的版塊，與其他類型資源相區(qū)別開來，有利于用戶快捷迅速地找到自己所需資源所屬的類別，繼而找到該資源的鏈接；其次在了解用戶需求以及常用功能的情況下將使用頻率較高、需求較大的一些鏈接單獨列出，如數(shù)據(jù)庫、特色資源、學科服務平臺等，便于用戶能夠根據(jù)自己的使用習慣更快地找到目標鏈接，而不用在一列外形類似的詞語中尋找。

3經(jīng)驗與啟示

通過對武漢大學圖書館網(wǎng)站W(wǎng)eb頁面改版前后的對比，一個非常明顯的改變是網(wǎng)站頁面風格的變化以及各類各個版塊組織排列上的優(yōu)化，突出了某些常用功能的鏈接，新增了講座信息、圖書館新聞等信息滾動介紹。總之，是在確保保留網(wǎng)站主要功能的基礎上根據(jù)用戶的認知規(guī)律以及用戶的需求變化對網(wǎng)頁布局設計做出一番調(diào)整，增強了網(wǎng)頁的可用性和易用性，以優(yōu)化了用戶的體驗。

Web頁面在設計過程中應貫徹以用戶為中心的設計理念，通過戰(zhàn)略層面的規(guī)劃進一步精準定位及分析，獲取關于用戶需求的更為準確、深入的信息，對網(wǎng)頁的呈現(xiàn)方式作出相應的調(diào)整，使得其在外觀上更加時尚、和諧，布局上更為緊湊、合理，更符合用戶的使用習慣和認知規(guī)律，讓用戶在使用過程中可以更加方便、迅速地找到所需信息。［13］

由于具有不同的網(wǎng)站建設目的，因此不同的網(wǎng)站有著不同的目標用戶群體。在網(wǎng)站建設之初，一個重要且亟需探析的步驟就是明確網(wǎng)站的潛在用戶群體，這樣才能在接下來包括網(wǎng)站系統(tǒng)設計、內(nèi)容提供以及界面設計等方面有的放矢，提供最為貼合需求的Web頁面。網(wǎng)頁設計者在進行規(guī)劃時可以首先利用問卷調(diào)查法、現(xiàn)場采訪法等多種方式獲取不同用戶的信息需求以及其訪問網(wǎng)站的主要目的，這樣可以時刻提醒自己將用戶需求放在第一位，并且可以更加全面地考慮各種可能的相關情況，由此作出相應調(diào)整。確定一個正確的戰(zhàn)略方向對于一個網(wǎng)頁而言尤為重要。

如果說戰(zhàn)略規(guī)劃是一個后臺的、不與用戶之間接觸的網(wǎng)頁設計層面的話，那么Web網(wǎng)頁的界面設計以及導航的設計好壞都直接影響到用戶體驗。無論是網(wǎng)站的界面設計還是導航設計都是網(wǎng)頁給予用戶最為直觀的使用體驗的一部分，導航設計時應該考慮到認知心理學規(guī)律，即網(wǎng)頁鏈接與跳轉的過程中應該保持主題的醒目與一致性，使得用戶能夠通過最簡短的步驟完成頁面的跳轉從而獲取所需信息；而頁面設計則應該充分考慮色彩學理論的影響，通過提供一個整體色彩和諧、布局緊湊、重點突出的頁面來促進用戶良好的使用體驗，此外應該考慮到的一點是由于注意具有轉移性，因此在首頁對于常用功能的突出顯示以及形象化展示就具有吸引用戶注意以及幫助他們快速達到使用需求的作用。

具體來講，基于用戶認知的Web頁面設計實踐主要從以下幾個方面來進行。

（1）知覺方面。知覺是指用戶在使用Web頁面的過程中所感受到的頁面設計、信息組織以及版式分布等直觀信息，大腦在接收這種外部信息刺激之后產(chǎn)生了相應的知覺反應。在Web設計的實踐過程中可以利用用戶對排列有序以及具有整體性的對象具有較強的認知度這一特性，設計出一個風格統(tǒng)一的網(wǎng)頁導航欄，使得用戶能夠更加快捷、全面地了解整個網(wǎng)站的結構。

（2）注意方面。在單位時間內(nèi)用戶的信息通道容量是有限的，用戶會選擇過濾功能來篩選對自己有用的信息，剔除次要信息，因此就要求在Web設計的過程當中突出重點信息，盡量減少與主題內(nèi)容無關的畫面、音樂等裝飾性因素；在內(nèi)容的呈現(xiàn)方式方面應該多采用文字和圖像相結合的形式，避免多種多媒體傳輸?shù)寞B加，一方面會使整個頁面變

得雜亂無章，另一方面也會使網(wǎng)頁的加載速度減慢，應該以合理、平衡的頁面分布來吸引用戶的注意力，而不是多種信息板塊的疊加。［14］在設計網(wǎng)頁時應當運用人的注意力有限這一特點，避免過分強調(diào)Web頁面呈現(xiàn)的視覺效果，而應該通過簡潔的布局、清晰的導航以及動靜結合的板塊設計來完善用戶的使用體驗。

（3）記憶方面。人的記憶主要分為短時記憶和長時記憶，其中短時記憶主要反映的是用戶對于Web頁面的指示性信息的處理，其容量在單位時間內(nèi)是有限的；而長時記憶則是用戶經(jīng)驗、常識以及知識的積累，其容量是無限的。在Web頁面設計的過程中保持界面風格以及命令的一致性可以幫助用戶減少短時記憶的負面影響，讓他們更好地感受到Web頁面的易用性。

［參考文獻］

［1］趙志華．WEB可用性設計研究及在校園網(wǎng)建設中的應用［D］．西安：西北大學，2009：56－61.

［2］Alan Cooper．交互設計之路［M］．Chris Ding譯．北京：電子工業(yè)出版社, 2006：91－95.

［3］Mi Kim，Mary Maher．The impact of tangible user interfaces on spatial cognition during collaborative design ［J］．Design Studies，2008，29（3）：222－253.

［4］梁景紅．設計師談網(wǎng)頁設計思維［M］．北京：電子工業(yè)出版社，2006：77－79.

［5］龔麗娜．探討基于認知心理學的網(wǎng)站交互設計原則［J］．藝術與設計，2010（10）：155－157.

［6］Bekker M，et al．Analysis of gestures in face-to-face design teams provides guidance for how to use groupware in design［J］．The Symposium on Designing Interactive Systems，1995，157－166.

［7］Seichter，H，Kvan，T．Tangible interfaces in design computing［J］．eCAADe，2004，159－166.

［8］曹越旗.基于認知心理學的電子商務網(wǎng)站設計研究［D］．上海:上海交通大學, 2010：11－16.

［9］Rafal Michalski．Theinfluenceofcolorgroupingonusers’visual search behavior and preference［J］．Displays, 2014，35（4）：176－195.

［10］Jan L．Plass，et al．Emotional design in multimedia learning：Effectsofshapeandcoloronaffectandlearning［J］．Learning and Instruction，2014（29）：128－140.

［11］李向來．網(wǎng)頁界面設計中的配色藝術［J］．濮陽職業(yè)技術學院學報，2007，20（1）：24－25.

［12］梁景紅．設計師談網(wǎng)頁設計思維［M］．北京：電子工業(yè)出版社，2006：130－136.

［13］Robert Hoekman，Jr．瞬間之美: Web界面設計如何讓用戶心動［M］.向怡寧譯．北京：人民郵電出版社，2009：103－110.

［14］鈕玉.基于認知心理學的網(wǎng)頁情感化設計研究［D］．昆明：昆明理工大學, 2011：106－110.

［收稿日期］2015－03－26［責任編輯］徐娜

［作者簡介］邱均平（1947－），男，博士生導師，研究方向：信息計量與科學評價研究；夏琦（1992－），女，碩士研究生，研究方向：信息計量與科學評價研究。

［文章編號］1005－8214（2015）12－0001－03

［文獻標志碼］B

［中圖分類號］G250.72；G258.6