基于用户体验元素模型的电子教材设计与应用研究 *

王晓晨，杨 娇，陈 桄，黄荣怀

(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电子教材开发软件，在两名具有教育技术专业背景的设计开发人员和学科教师的协同参与下，选择小学四年级语文《马背上的小红军》一课进行电子教材的设计开发。现将设计开发要点总结如下。

1.战略层——学习者需求分析与教学目标制定

(1)学习需求分析和学习者分析

本课的教学对象是小学四年级学生，他们好奇心较强，喜欢游戏式的学习，重视觉体验，喜欢多种形式媒体结合的内容呈现方式；具有高度的附属内驱力；思维具有多维性、可逆性，能够进行具体的逻辑推理。可适当放手让学生结合内容感悟课文所要表达的思想感情。在本课的学习中，教师要引导学生通过读、理解、感受人物的语言、神态及动作描写，体会文中主人公的心理变化，并采用角色扮演和讨论等手段，落实重点、突破难点。

(2)教学目标制定

教学目标制定综合考虑知识技能、过程方法、情感道德价值观三个维度。如认识9个生字，能够书写其中8个生字；学会抓住描写人物言行的词句，细心体会人物的品质以及所蕴涵的感情；通过理解文中描写人物言行的词句，树立小红军一心为别人着想的高尚品质等。

2.范围层——内容设计与功能设计

(1)内容设计

该教材的内容设计概括为两大模块、六个阶段、两个结合。两大模块包括课文学习和趣味活动。六阶段是指将课文学习的过程分为六个阶段：预习导学、课文学习、字词学习、精讲精练、同步课堂、拓展阅读。两个结合分别是指课文学习与趣味活动相结合、电子教材课堂与传统课堂相结合。

(2)功能设计

该教材选用了画廊、离线字典、交互图像、动画以及交互式测验题等功能形式。画廊可用于系列图像的展示。离线字典可用于生字词的学习，读者可以轻按该词汇即可在叠层中查看其定义。交互图像是一种交互式很强的具有解释图像中内容的功能，可用于内容解析或解答题呈现答案。动画适合用来说明工作原理、内部结构以及制作虚幻场景。本节课选用动画功能呈现和演示文字的笔画顺序。选择题、匹配题、问答题等多种类型的交互式测验题，可以有效检验学生的学习成果。

3.结构层——结构设计与交互设计

(1)结构设计

课文学习和字词学习的环节，在媒体功能上选用了图片、文字、动画多种形式；嵌入了离线字典和笔画书写顺序的动画用来支持生字的学习，如图3所示。

图3 《马背上的小红军》电子教材的结构设计示例

精讲精练环节提供了交互图像功能，在问题处通过手指的点触可以显示相关答案，该环节还设计了一道匹配题，学习者可通过交互式测验检验知识的掌握情况。扩展阅读环节设计了画廊来浏览图片，可以用来显示多幅图画，并生成缩略图。此外，该教材具有书签、高亮和批注等笔记功能。

(2)交互设计

交互设计是一种让电子教材易用、有效，让学习者愉悦浸入学习氛围的技术。为了体现情感性原则，该案例在设计交互的位置给出学习者自然亲切的提示语；同时，在交互测试题处能够及时给学习反馈，点击下方按钮就可以检查答案。

4.框架层——导航设计与界面设计

(1)导航设计

导航设计采用空间导航(水平延展)，放置在页面下方，这样的设计一方面便于学习者使用，另一方面没有破坏页面的整洁性，分散学生注意力。此外，鉴于底部导航结构对上面区域的限制比其他布局结构要小，因此，设计者可以按照自己的意图自由发挥，设计出多样化、有创意的界面。该案例中导航放置在每个界面的同一个区域，并且形式保持一致。在任何位置都很容易后退及返回，按钮之间的距离较为适中，如图4所示。

图4 《马背上的小红军》电子教材的导航设计示例

(2)界面设计

在界面设计中，始终坚持电子教材的界面必须是友好的、简明的、显著的、鼓励性的等理念。该教材的界面元素的位置、颜色、样式等遵循了统一的设计风格，做到了内容的简洁呈现，去掉了可有可无的链接、按钮和选项。每个页面能够明确表达一个内容或功能。界面的顶部区域放置了标题，中部放置教学知识，下部放置导航和页码，并适当留白。如下页图5所示的页面，其主要内容就是两个小问题，表达清晰，目标明确；该页面中使用了交互图像的功能，题目中对应给出了明确提示；页面中的配图选择与内容相符，符合学习者特征。

5.表现层——视觉设计

页面布局遵循了“纸质图书”的隐喻，与纸质教材的版面有很多相似之处，符合学习者的纸质教材感官习惯。页面采用左右构图，大多页面左面是学习目标与配图，右边是具体内容，让学习者带着任务去学习。该案例中在页面左上角放置了课文标题，右下角的圆形用来显示电子教材的页码，在整个页面中形成对角线构图，该设计能让学习者清晰地了解当下所在的位置以及学习进程。在图像元素的设计上，每个图像的的绘制和合成都融入了美学元素。如，界面上方采用了波浪型线条，设计意图在于给学习者营造一种舒服、流畅的氛围。最后，在色彩的选择和搭配上，课文学习模块选用了可以让学生心情镇静的冷色调蓝色，趣味活动模块选用了可以让学生大脑兴奋的暖色调橙色。此外，该案例中文字内容的呈现采用了白色的纯色背景，这种护眼模式有助于缓解眼疲劳。

6.学生的试用评测

(1)评测实施

本研究选取了北京师范大学电子书实验室项目合作实验校——鄂尔多斯某小学四年级的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)研究成果。