基于用戶體驗元素模型的電子教材設計與應用研究 *

王曉晨，楊 嬌，陳 桄，黃榮懷

(1.首都師范大學 教育技術系，北京 100048；2.北京師范大學 教育學部，北京 100875)

基于用戶體驗元素模型的電子教材設計與應用研究 *

王曉晨1，楊 嬌1，陳 桄2，黃榮懷2

(1.首都師范大學 教育技術系，北京 100048；2.北京師范大學 教育學部，北京 100875)

學生在學習電子教材過程中能否產生良好的學習體驗，是他們能否輕松、投入、有效學習的重要前提。該文基于新一代學習者的用戶體驗需求，嘗試將Garrett提出的用戶體驗元素模型結合電子教材的教育特性予以修訂。在具體分析該用戶體驗要素模型五個層面即戰略層(學習需求和學習目標制定)、范圍層(內容設計和功能設計)、結構層(結構設計和交互設計)、框架層(導航設計和界面設計)和表現層(視覺設計)的基礎上，針對小學四年級語文《馬背上的小紅軍》一課設計和開發了相應的電子教材。實踐證明，該模型能夠滿足電子教材的開發需要，為具有良好學習體驗的電子教材開發奠定了堅實的基礎。

數字一代；電子教材；用戶體驗；用戶體驗模型

一、引言

在落實《國家中長期教育改革與發展規劃綱要(2010-2020年)》，實施《教育信息化十年發展規劃(2011-2020年)》，以及踐行“三通兩平臺”的建設任務之際，“電子書包”的應用與試驗加速了信息時代教育改革探索的步伐[1]，電子教材的出現對課程改革帶來了前所未有的機遇與挑戰[2]。

隨著電子教材研究的不斷深入，其關注點從最初的內容和功能設計逐漸過渡到用戶體驗設計上。調研發現，電子教材的用戶體驗設計與學生的學習結果存在顯著相關。高用戶體驗能夠提升教室課堂教學的滿意度[3]，增強學生的學習動機和學習活動參與度等[4]。龔朝花在“電子教材的開發技術及適用性實驗研究”項目中對北京市東城區兩所小學的209名學生和9名老師展開電子教材用戶體驗調查，結果得出：用戶體驗質量高低直接影響電子教材課堂教學質量，并提出將來電子教材設計需要關注學生的用戶體驗[5]。

然而，目前電子教材的用戶體驗設計現狀難以適應新一代學生的學習需求。視覺疲勞、導航迷航、無關信息過多、交互不友好等負面信息[6]嚴重影響了學生的使用信心。因此，在科學理論模型指導下的電子教材用戶體驗設計必然會成為未來發展趨勢。調研發現，用戶體驗元素模型是目前影響力較大的用戶體驗模型[7]。本研究以新一代學習者的用戶體驗需求為出發點，嘗試基于用戶體驗元素模型構建電子教材設計模型，深入剖析各級要素的設計原則，并進行實際案例的設計和開發。

二、基于用戶體驗要素模型的電子教材設計框架的構建

文獻調研發現，Morville提出的用戶體驗蜂巢模型，Doman提出的用戶體驗影響力模型，以及Garrett提出的用戶體驗元素模型是目前被各個領域廣泛應用的用戶體驗模型。其中，前兩個模型注重對用戶體驗效果的分析和評價指標的構建，用戶體驗元素模型則側重用戶體驗的設計和開發層面。用戶體驗元素模型的提出引起了許多設計者的響應。在教育領域，已開始有研究人員使用用戶體驗要素模型對網絡課程進行用戶體驗優化設計實踐，并取得良好效果[8]。

Garrett提出的用戶體驗元素模型如下頁圖1所示，分為表現層、框架層、結構層、范圍層和戰略層等五個層面。表現層是一系列由圖片和文字組成的頁面；框架層則是按鈕、控件、照片和文本區域等頁面元素的位置；結構層用來設計用戶如何達到某個頁面，確定產品各種特性和功能最合適的組合方式；范圍層則是各種特性和功能；戰略層則決定產品的范圍。用戶體驗設計在此架構基礎上逐步開展。在表現層上實施視覺設計，框架層則強調界面設計和導航設計，結構層上需要完成交互設計和信息架構，在范圍層上則需完成內容需求分析，戰略層則側重于用戶需求及產品目標設計[9]。其中，左邊的要素用于描述軟件界面類型的網頁，右邊的要素則用于超文本信息空間。

圖1 Jesse James Garrett用戶體驗元素模型

本研究嘗試將Garrett提出的用戶體驗元素模型，結合電子教材的教育特性進行修訂。由于電子教材是兼顧信息型和功能型的產品。因此，設計方面主要關注點是信息，要為學習者創建一個“可以穿越的信息空間”；功能方面主要關注的是任務，設計者應把所有的操作都納入一個過程，去思考學生如何完成學習過程，把電子教材看成學生完成任務的工具。此外，由于不同領域有其專屬的術語，因此本研究針對電子教材的教育特性，將原模型戰略層中的用戶需求和網站目標改為學習者需求和教學目標；將模型中范圍層中的功能規格和內容需求對應改為功能設計和內容設計；在結構層保留交互設計，將建設網站所用的信息架構改為結構設計；在框架層去掉了信息設計，因為在本研究中信息設計已經被包含在范圍層與結構層中。

綜上所述，基于Garrett用戶體驗要素模型，結合電子教材的教學特性修訂而成的電子教材用戶體驗設計模型，如右圖2所示。該模型包括戰略層、范圍層、結構層、框架層和表現層五個層面。其中涉及學習需求分析、教學目標制定、內容設計、功能設計、結構設計、交互設計、導航設計、界面設計和視覺設計九個設計要素。

圖2 以用戶體驗為中心的電子教材設計模型

三、電子教材用戶體驗設計模型的層級框架和構成要素分析

1.層級框架的邏輯關聯分析

為了確保該模型的科學性和嚴謹性，結合電子教材的教育特性，界定模型中五個層級之間的邏輯關系是重要的研究基礎。

(1)戰略層(學習者需求和學習目標制定)。在電子教材設計和開發之前，必須明確回答兩個問題：學習者要學習什么？要實現哪些目標？在戰略層，電子教材的設計人員無需考慮電子教材的最終呈現，只需關注學習者的需求及通過閱讀電子教材要達成的教學目標。

(2)范圍層(內容設計和功能設計)。在明確戰略層制定目標的基礎上，范圍層的任務就是把學習者需求和學習目標轉化成電子教材應該提供給學習者的內容和功能。

(3)結構層(結構設計和交互設計)。完成內容設計和功能設計之后，對最終的電子教材界面所包含的內容和特性有了清楚的認識。結構層需要確定將要呈現給用戶的元素的“模式”和“順序”，即通過結構設計和交互設計將學習內容準確傳達給學習者。

(4)框架層(導航設計和界面設計)。更進一步地提煉上一層中確定的結構，確定詳細的界面外觀和導航，這能讓晦澀的結構變得更實在。從電子教材的功能型角度出發，框架層需要通過界面設計和導航設計，設計學習者與教材的互動元素。

(5)表現層(視覺設計)。將內容、功能和美學匯集起來完成最終設計。該模型中主要涉及視覺體驗設計，通過精細加工從而實現界面的進一步優化[10]。

2.構成要素的設計要點概述

在明確電子教材用戶體驗設計模型的五層框架的邏輯關系的基礎上，需要進一步分析各級框架的具體要素的設計目的和基本原則才能確保設計和開發的可操作性。具體分析如下。

(1)學習需求是電子教材設計的方向標，只有深入了解學習者特征，明確學習需求才能確保教材設計的科學準確[11]；(2)教學目標制定是學習內容選擇和設計的基本依據；(3)內容設計旨在確定學習者所需學習內容的范圍和深度及內容各組成部分之間的關系，結合學習者特征確定學習順序；(4)功能設計旨在選擇合適的功能特性以呈現知識內容，營造學習情境。電子教材功能設計體現在結構化呈現、交互式媒體、筆記工具、作業工具、管理工具等方面；(5)結構設計旨在確定內容和功能最佳的組合方式，為學習者提供有效的信息訪問路徑；(6)交互設計包括圖片切換、點擊查看教學內容、做習題并反饋答案、筆記書簽等。閱讀器自帶的交互功能也提供了諸多便利，例如對圖片的放大、縮小操作，截圖、搜索等；(7)導航設計可以幫助學習者了解當前學習進度，減少記憶負擔，避免學習者迷航所導致的負面影響；(8)界面設計必須是友好的、簡明的、支持的、熟悉的、功能明顯的、鼓勵性的、有親和力的[12]；(9)視覺設計旨在遵循人眼的視覺流程，借助形狀選取和顏色搭配，通過合理的頁面元素設計，使學習者產生良好的心理體驗。各要素的設計要點如表1所示。

表1 基于用戶體驗的電子教材設計要素分析

續表1

四、電子教材《馬背上的小紅軍》設計開發與實踐

為了驗證基于用戶體驗的電子教材設計模型的科學性和可操作性，本研究基于iBooks Author電子教材開發軟件，在兩名具有教育技術專業背景的設計開發人員和學科教師的協同參與下，選擇小學四年級語文《馬背上的小紅軍》一課進行電子教材的設計開發?，F將設計開發要點總結如下。

1.戰略層——學習者需求分析與教學目標制定

(1)學習需求分析和學習者分析

本課的教學對象是小學四年級學生，他們好奇心較強，喜歡游戲式的學習，重視覺體驗，喜歡多種形式媒體結合的內容呈現方式；具有高度的附屬內驅力；思維具有多維性、可逆性，能夠進行具體的邏輯推理?？蛇m當放手讓學生結合內容感悟課文所要表達的思想感情。在本課的學習中，教師要引導學生通過讀、理解、感受人物的語言、神態及動作描寫，體會文中主人公的心理變化，并采用角色扮演和討論等手段，落實重點、突破難點。

(2)教學目標制定

教學目標制定綜合考慮知識技能、過程方法、情感道德價值觀三個維度。如認識9個生字，能夠書寫其中8個生字；學會抓住描寫人物言行的詞句，細心體會人物的品質以及所蘊涵的感情；通過理解文中描寫人物言行的詞句，樹立小紅軍一心為別人著想的高尚品質等。

2.范圍層——內容設計與功能設計

(1)內容設計

該教材的內容設計概括為兩大模塊、六個階段、兩個結合。兩大模塊包括課文學習和趣味活動。六階段是指將課文學習的過程分為六個階段：預習導學、課文學習、字詞學習、精講精練、同步課堂、拓展閱讀。兩個結合分別是指課文學習與趣味活動相結合、電子教材課堂與傳統課堂相結合。

(2)功能設計

該教材選用了畫廊、離線字典、交互圖像、動畫以及交互式測驗題等功能形式。畫廊可用于系列圖像的展示。離線字典可用于生字詞的學習，讀者可以輕按該詞匯即可在疊層中查看其定義。交互圖像是一種交互式很強的具有解釋圖像中內容的功能，可用于內容解析或解答題呈現答案。動畫適合用來說明工作原理、內部結構以及制作虛幻場景。本節課選用動畫功能呈現和演示文字的筆畫順序。選擇題、匹配題、問答題等多種類型的交互式測驗題，可以有效檢驗學生的學習成果。

3.結構層——結構設計與交互設計

(1)結構設計

課文學習和字詞學習的環節，在媒體功能上選用了圖片、文字、動畫多種形式；嵌入了離線字典和筆畫書寫順序的動畫用來支持生字的學習，如圖3所示。

圖3 《馬背上的小紅軍》電子教材的結構設計示例

精講精練環節提供了交互圖像功能，在問題處通過手指的點觸可以顯示相關答案，該環節還設計了一道匹配題，學習者可通過交互式測驗檢驗知識的掌握情況。擴展閱讀環節設計了畫廊來瀏覽圖片，可以用來顯示多幅圖畫，并生成縮略圖。此外，該教材具有書簽、高亮和批注等筆記功能。

(2)交互設計

交互設計是一種讓電子教材易用、有效，讓學習者愉悅浸入學習氛圍的技術。為了體現情感性原則，該案例在設計交互的位置給出學習者自然親切的提示語；同時，在交互測試題處能夠及時給學習反饋，點擊下方按鈕就可以檢查答案。

4.框架層——導航設計與界面設計

(1)導航設計

導航設計采用空間導航(水平延展)，放置在頁面下方，這樣的設計一方面便于學習者使用，另一方面沒有破壞頁面的整潔性，分散學生注意力。此外，鑒于底部導航結構對上面區域的限制比其他布局結構要小，因此，設計者可以按照自己的意圖自由發揮，設計出多樣化、有創意的界面。該案例中導航放置在每個界面的同一個區域，并且形式保持一致。在任何位置都很容易后退及返回，按鈕之間的距離較為適中，如圖4所示。

圖4 《馬背上的小紅軍》電子教材的導航設計示例

(2)界面設計

在界面設計中，始終堅持電子教材的界面必須是友好的、簡明的、顯著的、鼓勵性的等理念。該教材的界面元素的位置、顏色、樣式等遵循了統一的設計風格，做到了內容的簡潔呈現，去掉了可有可無的鏈接、按鈕和選項。每個頁面能夠明確表達一個內容或功能。界面的頂部區域放置了標題，中部放置教學知識，下部放置導航和頁碼，并適當留白。如下頁圖5所示的頁面，其主要內容就是兩個小問題，表達清晰，目標明確；該頁面中使用了交互圖像的功能，題目中對應給出了明確提示；頁面中的配圖選擇與內容相符，符合學習者特征。

5.表現層——視覺設計

頁面布局遵循了“紙質圖書”的隱喻，與紙質教材的版面有很多相似之處，符合學習者的紙質教材感官習慣。頁面采用左右構圖，大多頁面左面是學習目標與配圖，右邊是具體內容，讓學習者帶著任務去學習。該案例中在頁面左上角放置了課文標題，右下角的圓形用來顯示電子教材的頁碼，在整個頁面中形成對角線構圖，該設計能讓學習者清晰地了解當下所在的位置以及學習進程。在圖像元素的設計上，每個圖像的的繪制和合成都融入了美學元素。如，界面上方采用了波浪型線條，設計意圖在于給學習者營造一種舒服、流暢的氛圍。最后，在色彩的選擇和搭配上，課文學習模塊選用了可以讓學生心情鎮靜的冷色調藍色，趣味活動模塊選用了可以讓學生大腦興奮的暖色調橙色。此外，該案例中文字內容的呈現采用了白色的純色背景，這種護眼模式有助于緩解眼疲勞。

6.學生的試用評測

(1)評測實施

本研究選取了北京師范大學電子書實驗室項目合作實驗?！鯛柖嗨鼓承W四年級的46名學生，進行基于用戶體驗調查問卷，對《馬背上的小紅軍》電子教材予以1-5分測評。調查問卷具有良好的信度，Cronbach α為0.935。問卷從價值、可靠性、可用性、合意性和適應性五個維度開展評價，共22道題目。在正式評測之前，為每位學生發放一部iPad平板電腦作為電子教材的閱讀終端。所有設備上均提前裝載有iBooks閱讀軟件和《馬背上的小紅軍》電子教材。研究者先向參與者講解iBooks電子教材的功能。然后讓參與者試用電子教材案例《馬背上的小紅軍》，并要求他們認真完成每一頁面的學習，體驗電子教材的全部功能。在整個體驗過程中，研究者在一旁觀察并在需要時提供幫助。

(2)數據分析

評分結果顯示，學生對《馬背上的小紅軍》體驗的總評情況很好(最低Mean=3.56，SD=0.85)。各維度及題項的評分如右表2所示。就該電子教材案例的“價值”而言，學生普遍認為通過使用電子教材能夠滿足他們的學習需求，并能夠清楚知道電子教材的教學目標(Mean＞4.60)；就其“可靠性”而言，學生并沒有發現電子教材內容有錯誤之處，并普遍認為內容的選擇與組織比較合理(Mean＞4.20)，同時數據表明多數學生并沒有用到筆記功能，因此在實際使用之前應向學生強調該功能；對于“可用性”，所有學生都能夠快速掌握電子教材的基本操作，并能夠自如地操控電子教材 (Mean＞4.20)；就“合意性”而言，學生普遍認為電子教材的界面簡潔美觀，學生在使用電子教材時表現出具有很高的好奇心和濃厚的興趣(Mean＞4.10)；關于“適應性”，學生對案例的縮放功能都有好的反饋，但數據同時表明電子教材應在“適應性”方面進一步改進，設計時牢記學習者之前使用紙質教材的感官習慣，并實現同一內容的不同呈現、內容及模塊的自主個性設置等功能(Mean＞3.90)。

表2 《馬背上的小紅軍》電子教材的用戶體驗測評結果

五、結論

電子教材在應對信息化學習方式變革中具有顯著優勢。電子教材的用戶體驗設計與學生的學習結果存在顯著相關。高用戶體驗能夠提升教室課堂教學的滿意度，增強學生的學習動機和學習活動參與度等。本研究基于新一代學習者的用戶體驗需求，嘗試將Garrett提出的用戶體驗元素模型結合電子教材的教育特性予以修訂。實踐證明，基于Garrett模型改良后的電子教材用戶體驗設計模型能夠有效指導電子教材的設計和開發。然而，電子教材的實際應用效果如何，目前尚未有科學嚴謹的評價指標。未來，為了更好地推動電子教材的實施和推廣，將嘗試在分析電子教材用戶體驗現狀和瓶頸的基礎上，構建基于用戶體驗的電子教材評價標準研究。

[1]吳永和,雷云鶴,馬曉玲.電子書包中的電子課本應用需求研究——基于電子課本標準的視角[J].中國電化教育,2013,(5):73-77.

[2]龔朝花,陳桄.電子教材:產生、發展及其研究的關鍵問題[J].中國電化教育,2012,(9):89-94.

[3]龔朝花,陳桄,黃榮懷.融入中小學日常課堂教學的電子教材之價值再探[J].中國電化教育,2014,(2):60-66.

[4]Frank Guo.More than usability: The Four Elements of User Experience[EB/OL].http://www.uxmatters.com/mt/archives/2012/04/more-than-usability-the-four-elements-of-user-experience- part-i.php,2013-12-01.

[5]龔朝花.中小學電子教材的教學適用性研究[D].北京:北京師范大學,2013.

[6]Marques,S..eTextbooks Usage by Students at Andrews University: A Study of Attitudes,Perceptions,and Behaviors[DB/OL].http://docs.lib.purdue.edu/iatul/2012/papers/32,2011-11-10.

[7][9]Jesse James Garrett.用戶體驗的要素[M].北京:機械工業出版社,2008.

[8]衷克定,吳迪.網絡課程用戶體驗優化設計的實踐探索[J].網絡教育與遠程教育,2011,(3):63-68.

[10]Tom,D..E-textbooks:opportunities,innovations,distractions anddilemmas[J].Serials:The Journal for the Serials Community,2007,(2):98-102.

[11]李龍.教學設計[M].北京:高等教育出版社,2010.

[12]Larkin,K.& Finger,G.Investigating student netbook usage using activity theory[DB/OL].http://acec2010.acce.edu.au/proposal/226/investigating-student-netbook-usage-using-activitytheory,2012-12-01.

王曉晨：博士，講師，研究方向為移動學習、智慧學習(wangxc_cnu@163.com)。

楊嬌：碩士，研究方向為信息技術與課程整合(571279386@qq.com)。

陳桄：博士，講師，研究方向為數字閱讀、移動學習(teastick@163.com)。

黃榮懷：博士生導師，教授，研究方向為教育信息化、智慧教育(huangrh@bnu.edu.cn)。

2015年8月8日

責任編輯：趙興龍

Study on the Design and Application of e-Textbook Based on the Elements of User Experience

Wang Xiaochen1,Yang Jiao1,Chen Guang2,Huang Ronghuai2
(1.Department of Educational Technology,Capital Normal University,Beijing 100048;2.Faculty of Education,Beijing Normal University,Beijing 100875)

The user experience design of electronic teaching material is well directly related to the students’ fi nal learning effect.However,a considerable part of the research results show that the user experience of the current electronic materials is still relatively low.Based on the user experience of the new generation of learners,this study try to revise the user experience element model which were put forward by Garrett,with the educational characteristics of electronic teaching materials.With the basis of concrete analysis fi ve levels of the user experience factor model,which are the strategic level (learning needs and learning objectives),range level(content design and functional design),structural level (structural design and interaction design),framework level (navigation design and interface design) and performance level (visual design),We carried out the design and development of electronic textbooks of Chinese primary school the fourth grade “small red army on horseback”lesson.Practice has proved that the improved model can meet the needs of the development of the electronic teaching material,which has laid a solid foundation for the development of electronic teaching material with good learning experience.

Digital Generation; e-Textbook; User Experience; User Experience Elements of the Model

G434

A

1006—9860(2015)10—0082—06

* 本文系北京市哲學社會科學規劃項目“‘數字一代’學習方式調查及電子教材設計對策研究”(項目編號：13JYC020)研究成果。