面向用戶體驗的課程網站建設研究與實踐

□ 李 偉 鄧紅濤 曹傳東

面向用戶體驗的課程網站建設研究與實踐

□ 李 偉 鄧紅濤 曹傳東

通過分析國內課程網站建設現狀，發現目前課程網站建設側重于對教學素材的堆積，而忽略了對學生的黏性和友好度。本文結合產品設計領域的用戶體驗思想，從可用性、易用性、愛用性三方面探討課程網站建設質量要素；結合UX元素模型，提出貫穿于課程網站開發流程的體驗模型，并從用戶需求、功能設計、前端設計及交互設計等方面探討“網頁設計”課程網站用戶體驗思想的運用。

用戶體驗；課程網站；體驗模型

一、Web課程研究現狀及分析

通過采用隨機調查的方法分析了國內大學近30個課程網站建設情況，發現其多采用以課程內容建設為中心，沒有從學習者的角度出發，課程網站成了教學大綱、教學資料等內容堆積的倉庫，沒有體現“以用戶為中心設計”的思想[1]，造成課程網站使用率不高，對學生黏性不夠等狀況。針對這些問題，筆者認為，課程網站要重拾在教學體系中的地位，其角色定位應不僅僅是信息資源的管理者，更應該是信息資源的服務者。課程網站應從為學生提供課外學習資源，轉變為與學生建立長期穩定的服務關系，以實現學生對課程網站的歸屬感和黏性[2]。將產品設計領域的用戶體驗思想移植到課程網站并不需要過高技術要求[3]，實現這種功能、角色定位的轉變，在課程網站中引入用戶體驗是可行且必要的。

二、什么是用戶體驗

Ajax之父Jesse James Garrett對用戶體驗（User Experience）[4]的描述：“把最終用戶作為設計和開發活動的焦點，而不是系統、應用程序或者單純的審美價值。它是基于一般的以用戶為中心（用戶至上）的設計理念。” 用戶體驗是一種純主觀在用戶使用產品過程中建立起來的感受，各個行業都在追求“用戶體驗”。用戶體驗涵蓋的內容很多，一般認為有：品牌、視覺、友好、易用、有用等幾個方面[5]，如圖1所示。

圖1 用戶體驗四個要素

這些因素密不可分共同形成了正確的用戶體驗。其中品牌主要指為用戶訪問提供有吸引力的難忘的體驗、視覺效果、體驗過程的價值、傳達品牌的程度、是否加強或延伸了品牌等。

功能性指網站的技術應用手段及提供的互動服務。包括信息的及時反饋、任務告知、安全及個人隱私的標準等。

可用性指對網站的內容的易用性和友好性，能夠讓用戶快速達成其目的的能力。包括防止錯誤發生、恢復能力、頁面眾優化程度、頁面標準及一致性、提供特定內容等。

內容指網站的實際內容，文本、圖片、多媒體以及其信息體結構。包括根據用戶需求制定清晰度和簡單的網站瀏覽、易于實現用戶目標 、內容及時準確等綜合性內容。

課程網站有其特殊性，它本身沒有任何培訓與客服幫助，全靠學生自己的經驗來操作和使用。因而課程網站在傳遞信息資源的同時必須以一種能夠幫助學生理解和接受的方式呈現出來，信息的呈現必須符合人的認知心理、美學心理等，讓學生易于接受，否則學生得出的結論是“這個網站不好用”，課程網站的價值也就無法體現出來了。注重用戶體驗，就要求我們必須把學生擺在課程網站設計的首要要素位置。

三、用戶體驗的質量因素

近年來，用戶體驗（UE）觀念在商業市場中受到的關注日益增高，用戶體驗常常體現在非常細微的地方。百度以前首頁上有句“設百度為首頁”，現在改為了“把百度設為首頁”，這是一種更清晰、更溫和的語氣，也是尊重用戶體驗的表現。同時，強調溝通、情境和互動的建構主義學習思想和“以人為本”的設計理念深入人心，使得“用戶體驗”在教育領域頗受重視。設計好的課程資源，為學生提供良好的學習體驗成為每位教學設計者的共同目標。網絡課程在滿足學習者需求的同時，還要考慮情感、信仰、喜好、認知印象、生理和心理反應、行為和成就等各個方面諸多因素。結合其具體使用而言，不論是用戶體驗的5E模型，還是蜂窩模型，反映用戶體驗效果的質量因素都可以歸類為可用性、易用性、愛用性三個方面[6]。

（一）可用性

對網站可用性的考察更側重學生對課程網站依賴與適應。美國尼爾森集團根據多年對用戶的可用性研究（從1994年至今），對網站的可用性問題進行分類，按照其重要程度得出產品信息、站內搜索、網站信息體系結構、網站易讀性、網站內容等問題所占的權重較大，在網站可用性因素中占將近一半的比例。同時課程網站的通用性也非常重要，主要表現在網站在不同瀏覽器上的兼容性，需要把握在主流瀏覽器下的顯示關系。另外，網站瀏覽速度也是衡量課程網站可用性的重要指標。

（二）易用性

網絡課程易用性在于最大限度上適應人的習慣和本能，主要包括以下幾個方面，見表1。

②自來水廠取用南水北調工程水源息稅前利潤（EBIT工程）＝市場售水價-工程供水價-管理維護費-污水處理費。自來水廠取用調水工程水應不繳納水資源費，水資源費由調水工程單位繳納，否則會重復繳納。

表1 網站易用性因素

通過對網站的易用性研究及用戶體驗相關的項目實踐，筆者認為，從課程網站的效果來看，網站易用性是一個綜合性問題，涉及網站建設的方方面面，應從網站策劃之初就將易用性思想貫徹到網站建設的每個細節中，這其中UI、程序都只是提升用戶體驗的一個方面而已，它們與網站內容、導航結構、任務流程等其它因素共同作用，最終達到優化用戶體驗目標。

（三）愛用性

愛用性即網站對用戶黏性，黏性是保證課程網站有效性的重要條件。網頁停留時間最終將決定互聯網的成功或者失敗。課程網站在為學生提供服務時，如果充分考慮人的個性及情感等因素，會使學生有良好的學習體驗，并達到愛用的效果。愛用性包括三個方面，見表2。

表2 網站愛用性因素

四、基于用戶體驗的網絡課程模型

當前針對高校網絡課程建設的用戶體驗研究有限，利用產品設計領域的用戶體驗模型成果融入教育教學理念和思想是本文研究重點。目前用戶體驗模型常見的有UX元素模型（UX elements）、UX蜂巢模型(UX honeycomb)、UX影響力模型（UX forces）和UX保護傘模型（UX umbrella）[7]等，其中UX元素模型（如圖2） 對課程網站建設具有重要指導意義。此模型包括表現層、框架層、結構層、范圍層、戰略層五個方面，此模型常被用于一些大型或小型的網站開發中。后來在這個框架結構之上Jesse對原來的模型作了改進調整（如圖2），增加了對用戶體驗元素的闡述。從圖示中我們可以看出，滿足用戶體驗的網絡課程應包括：用戶研究、網站戰略、技術戰略、內容戰略、抽象設計、技術設計、內容產品、具體設計、項目管理等九個方面。筆者認為，改進后的模型可理解為從用戶需求、課程設計、用戶體驗技術、課程更新等方面描述網絡課程用戶體驗框架。課程網站建設中用戶需求作為課程網站用戶體驗設計要素首位，并貫穿始終，目的就是為了保證課程網站達到學生的真實期望；課程設計是教學理念和思想的重要體現；用戶體驗技術是課程網站實現教育教學效果的重要手段；課程及時更新則是課程建設效果的有效保障。這種模型將課程教學理念融入產品設計領域的用戶體驗，重拾了課程網站在教學體系中的地位，提高了對學生學習的黏性和效果。當然，除了UX元素模型外，基于用戶體驗的網絡課程理論基礎還包括認知心理學、設計心理學、美學等研究理論，由于篇幅所限不在此闡述。

圖2 UX元素模型及其改進

五、基于“網頁設計”課程網站的用戶體驗實踐設計

本文選取“網頁設計”課程網站作為用戶體驗設計實踐。將課程網站體驗元素融入UX元素模型中，從五個層面闡述本課程網站用戶體驗所重視的元素，如圖3所示。

圖3 課程網站用戶體驗實踐元素

這五個層面內容包括：

表現層（Surface）：視覺設計方面，由網頁及其中圖片、文字或其它flash元素組成表現層。

框架層（Skeleton）：表現層后是框架層，也是產品的界面設計、導航設計、信息元素設計及表格、按鈕、文字、圖片的區域位置等。

結構層(Structure)：框架層確定了結構層交互元素的區域位置，結構層就是交互設計與信息構架，解決用戶如何到達這個頁面，以及操作完之后去哪里的問題。

范圍層（Scope）：結構層確定了網站功能需求和性能的最佳組合方式，而這些就構成了網站的范圍層，即網站功能規格和內容需求。

戰略層（Strategy）：即網站目標和用戶需求，戰略層是流程設計的起點。

這五個層面是一個自下而上的過程，根據課程特點將具體的用戶體驗要素在每個層面具體細化，是一個從抽象到具體的過程。下面對具體設計流程進行探討。

（一）課程網站需求

“網頁設計”課程是計算機相關專業一門重要課程，該課程知識點多、操作性強。通過課程網站能夠讓學生在課外時間學習額外的知識，展示課程資源，吸引學生在網站完成特定教學任務。按照課程需求以及用戶體驗設計思想，將課程網站功能結構分解為如圖4所示。

圖4 “網頁設計”課程網站結構模型

（二）學生用戶需求

學生是課程網站最主要的用戶群體，學生的需求收集與分析要通過多種方法與渠道，可用網站調查分析、小組討論、課上討論、參考調查等手段，調查內容如表3，也可以在學生試用后不斷完善。本網站的建設主要通過課上討論與學生試用兩種手段，首先在課堂上聽取學生意見制作出網站策劃書，形成網站建設方案；網站建立后通過試用，老師與學生交流意見，不斷改進，最終形成完整的學生用戶需求。

表3 用戶需求調查項

（三）WEB前端設計

WEB前端設計即課程網站界面設計，也是用戶體驗效果最直接的展示。根據“網頁設計”課程網站內容的需要設計三級頁面，分別為主頁、欄目頁、內容頁。根據美國著名網站設計工程師Jakob Nielsen的F形狀網頁瀏覽模式，即人們大多不由自主地以“F”字母形狀的模式來閱讀網頁，本網站前端設計采用F型設計模式，將網站LOGO橫向設計，形成一條橫向的運動軌跡，這就是F字母的第一條橫線；用戶眼光略微下移，很典型地掃描比第一步范圍較短的區域，此區域為網站主題介紹，這就又畫了F字母中的第二條橫線；用戶眼光朝網頁左邊的部分進行垂直掃描，此部分內容為網站導航系統，這樣就畫了F字母中的一條豎線，如圖5所示?！熬W頁設計”課程網站設計采用F型，既滿足了“品牌”在學生心理的作用，同時，也整體介紹了網站的框架，學生能夠根據第一印象直達想要獲取的資源，達到了用戶體驗可用性原則的目的。

圖5 “F”模型前端網站結構

（四）功能與內容需求

“網頁設計”課程網站能夠讓學生掌握網頁設計基本技能與實踐能力，功能設計上有交互輔導、提問答疑等環節，同時提供課堂視頻與在線測試等功能；內容設計上必須提供課程簡介、教學大綱、電子教材、典型案例等欄目。在功能與內容設計基礎上，結合前端設計元素設計網頁效果。

（五）交互設計

UX模型中結構層是交互設計與信息構架，解決用戶如何到達這個頁面，以及操作完之后去哪里的問題。“網頁設計”課程在設計交互設計時主要考慮搜索功能、問答幫助以及交流答疑平臺、作業系統和測驗系統等。搜索是交互設計重要環節，搜索功能設計盡量簡潔，采用精確搜索與模糊搜索兩種模式，搜索結果按照“F”字母形狀的結果展現；問答幫助設計采用Ajax技術不刷新答疑方式，提高問答效率；交流答疑平臺采用在線答疑、BBS、論壇等多種方式，學生對課程某些問題在網上展開討論，發表自己的看法，也可以在線同老師交流，通過相互討論和解答，使學生從中獲得啟發，達到最佳教學效果；作業系統包括老師的作業布置、評語、學生提交、成績等功能；測驗系統則針對每章知識點給出相應測試題目或模擬考試等相應功能。交互系統設計如圖6，頁面設計效果如圖7所示。

圖6 交互系統設計

圖7 網頁設計效果

（六）網站評估

“網頁設計”課程網站評估即網站可用性測試，參照圖2的網站可用性分析，采用用戶測試法和滿意度問卷的方式進行。測試流程為：① 選定測試內容，② 選擇測試者，③ 測試并記錄，④ 測試結果分析，⑤ 統計并形成文檔，⑥ 指導課程網站修正。由于一般課程網站存在面對群體范圍有限，測試用戶成員單一的情況，網站評估存在一定主觀性，后續研究中還要繼續跟進，探討有限范圍內課程網站用戶體驗評估方法。

六、結論

本文通過分析國內部分高校課程網站建設現狀，從課程網站品牌、視覺、友好、易用、有用的幾個方面研究了課程網站建設質量要素，結合UX元素模型，提出將課程網站建設五個層面的體驗元素融入UX模型的每個階段中，提出了課程網站體驗模型。同時，依據課程特點，在用戶需求、前端設計、功能設計、交互設計等方面把握用戶體驗設計與信息構建的交叉，取得了良好的效果。

目前，在課程網站構建領域的用戶體驗應用越來越受到重視，但還處于起步摸索階段，主要原因為一方面缺乏結構性和層次性較強的論述體系和系統理論的指導，另一方面對于用戶情感和心理量化研究離實際應用尚有距離。同時，課程網站建設中學生心理感受、美學設計理念，以及網站評估測試等也是需要進一步研究的問題。課程網站用戶體驗設計不僅僅是改變網站的外觀，它能夠讓用戶認可課程網站的價值、服務，擺脫傳統課程網站成為教學資料倉庫堆積作用，用戶在使用網站過程中體驗到了友好與親切感，使教師與學生之間建立緊密的紐帶，實現了課程網站功能的最大化。

目前，有關用戶體驗研究涉及政務、電子商務和服務領域，國內外研究者從界面、情感、交互設計等角度研究用戶體驗的范圍和影響因素，在課程網站構建領域的用戶體驗應用越來越受到重視，但是還沒有形成完整的理論體系。

[1]Jakob Nielsen.Web Navigation:Designing the User Experience[M].O'Reilly Publishing，1998：33-40

[2]Susan Fowler，Victor Stanwick.Web Application Design Handbook：BestPracticesforWeb-Based Software [M].Morgan Kaufmann Publishing，2004：82-10

[3]Vincent Flanders，Michael Willis.Web Pages That Suck:Learn Good Design by Looking at Bad Design[M].Sybex Inc.，1998：34-67

[4]Lucas Daniel.Understanding user experience[J].Web Techniques,2000,5(8):42-43

[5]歐陽波，賀贊.用戶研究和用戶體驗設計[J].江蘇大學學報：自然科學版，2006，27，（5）：55-57，77.

[6]劉增，陳炳發.以用戶為中心的網站可用性設計和評估[J].中國制造業信息化，2009，38，（5）：63-66.

[7]胡昌平，鄧勝利.基于用戶體驗的網站信息構建要與模型分析[J].情報科學，2006，24，（3）：321-325.

G40-057

A

1009—458x（2012）05—0082—05

2011－11－30

李偉；鄧紅濤；曹傳東。新疆石河子大學信息科學與技術學院（832000）。

責任編輯 三 川