K12教育APP信息可视化设计研究

韦艳丽 孙虹 王松琴 王磊

摘要：在大数据时代，探索提高信息可视化设计质量的方法。基于K12教育APP产生的数据，结合用户研究及交互设计理论方法，基于用户场景，探索用户需求并设计基于用户需求的K12教育APP信息可视化设计。得到K12教育APP信息可视化设计方法。基于K12教育APP的信息可视化设计，针对用户角色及用户需求进行数据挖掘与可视化设计，有助于提升用户获取信息的效率与體验。

关键词：信息可视化 K12教育 用户研究

中图分类号：TP391.9 文献标识码：A文章编号：1003-0069（2019）01-0138-04

Abstract： In the era of big data， explore ways to improve the quality of information visualization design.Based on the data generated by K12 education app， combined with user research and interaction design theoretical methods， explore user requirements based on user scenarios and design the visual design of K12 education app information based on user requirements.The visual design method of K12 education app information is obtained.Based on the information visualization design of K12 education app， data mining and visual design are carried out for user roles and user demands， which is helpful to improve the efficiency and experience of users in obtaining information.

Keywords： Information visualization K12 education user research

引言

随着科技的进步，大数据已逐步渗透我们的生活，面对海量复杂的数据信息，如何让用户能易于识别，获取自身需要的有效信息，感知信息效用，图表、线形图、柱形图、饼状图已经完全落后，信息可视化成为一种新的趋势，新闻、趋势、商业策略，所有抽象概念都可以用图表表达。在体验经济的大背景下，信息可视化的研究重点将转向可用性分析以及信息服务评价等内容，即由“以任务为中心”转向“以用户为中心”的研究[1]。

随着物联网的发展，教育行业也开始实施智慧教育，通过在线教育平台，记录学生学习行为数据。通过对海量数据的整理、分类、分析，挖掘学生学习能力、教学环境不足之处，合理安排教学内容，辅助教学。本文在阐述及探究数据可视化的内涵和技术基础上，分析了教学平台的用户人群、需求、目的、场景等方面的特点，提出了如何基于用户需求进行合理的信息可视化设计，在保证信息传达准确度同时，提高用户获取信息时的体验。

一、信息可视化

信息可视化（Information visualization）是一门跨学科领域，以研

究大规模非数值型信息的视觉呈现为首，利用图形图像技术与方法，抽象展示，帮助人们分析数据和理解信息。主要包括数据可视化、科学可视化、知识可视化、人机交互、信息图形、视觉设计以及心理学和商业知识。信息可视化同时兼具科学的严谨性和设计美学的创造性，利用独特的设计形式，组织整理各项信息，打破了原本繁琐、枯燥、沉闷的数据，真正做到了形式和内容的统一、科学和艺术的统一[2]。图形、地图、表格、文本及颜色的合理搭配为信息可视化提供了展示方式和手段，设计师充分从用户体验角度设计方案，促进用户理解、洞察信息中的关键点，各信息之间的关联性，快捷、高效向用户传达，也成为现今信息呈现和传播的重要发展方向。

二、k12教育APP

随着全球教育信息化的发展，在线教育市场呈现井喷式增长，K12教育也包含其中。K12（kindergarten through twelfth grade）是教育类专用名词，K指幼儿园，12则指小学、初中、高中教育，（如图1）所示，从2014年至2018年K12在线教育占据市场规模逐年增加，并自2017年至今一直占据市场第一。目前我国在线教育产品主要分为辅导类、题库类、答疑类、家教类、工具类。

数据来源于http：//www.sohu.com/a/191700814386633（根据市场公开数据、财报、企业访谈，结合艾瑞资讯模型核算）

基于互联网的数据时代，传统规模化授课模式难以激发学生自主学习热情、培养创新能力及面对问题的决策力，借助网络平台实施全方位、多层次、宽领域的个性化教学形式已逐渐成为教育行业发展的必然趋势[3]。教育类APP利用互联网+教育打造新的教育体验，通过APP中不同的交互形式，给用户带来不一样的体验，让孩子爰上学习，让家长和老师能随时观察和监督孩子学习近况，为学生、老师和家长间提供交流平台，从而全面提升教学品质、学生实践能力、课程优化升级等。

三、信息可视化在教育行业的应用

信息可视化的应用十分广泛，在医学、工程技术、自然科学、通信、金融和商业等领域都有显著成效，在教育类应用产品中也颇有建树。2018年4月，教育部办公厅印发的《教育信息化2.0行动计划》中明确提出，要推进“互联网+教育”，建立健全教育信息化可持续发展机制，构建完善的教育体系，建设学习型社会，推动教育基础数据共享。

信息可视化为传统教学模式开辟了新路径、新技术、新思维、新模式，打破了传统的教育模式与理念，实现个性化教学、优化教学模式、构建教育评价机制、学校数据管理等。目前内外常用在线教育平台有网易公开课、一起作业、作业帮、猿辅导、极课、智学网、mooc等。信息可视化在教育类产品应用中，虽然涉猎范围广泛，但缺乏研究力度与实践经验，没有深入了解，不同信息最佳可视化展现形式，不足以形成标准化的设计模式，发挥信息可视化的最佳效用。信息可视化在教育平台中用户群体主要分为学生、教师、教学管理者和家长，本文将围绕教师、教学管理者群体，以某教育类APP（教师端）为例，探索提升信息可视化设计质量的方法。

四、教育APP用户分类

信息可视化的用户是指信息经过可视化处理过的受众人群。用户感知是用户体验中最前端和最贴近用户的一部分，它与数据的解读与理解是息息相关的[45]。因此，对于终端用户的划分，有助于从受众视角看待问题，了解需求。并且，不同的终端用户需求也各不相同，甚至在不同时期，用户的的需求都在不断变化，获取信息的目的也不一样。这些对于设计师选择信息可视化的展现方式起着至关重要的作用。（如表1）所示，按用户阅读信息目的将其分为两类：普通用户和专业用户。

普通用户，具有普遍性、广泛性、非专业性的特点。对信息图的理解程度参差不齐，大部分属于被动接受信息者，并且接受内容往往与用户的认知度、关注度及主观意识密切相关，所以在获取信息的过程中伴随着随机性和偶然性，少部分用户积极获取信息。专业用户，具有专业性、精确性等特点，主要是一些专门从事学术、科研、机构、企业中具有领导地位的受众。对信息所要传达的内容十分了解，并且能从信息图中摸索出一定的规律，透过现象看本质，挖掘出更有价值的内容。

不同的用户群体也对应不同的教育APP，包括教师端、学生端（家长端）、运营人员，其中教师端分为普通教师用户和教育管理者，不同的终端用户或同一终端不同类型用户对信息的需求都截然不同。

（一）教师端。教师端用户主要是一些在校任职教师，主要分为两类用户，教育管理者和教师用户，通过教育APP获取一些与自身职业相关的信息。

教育管理者，属于专业用户，主要使用人群是校长、学科组长、教导主任等在校有决策权的用户群体，通过产品提供的数据可视化处理，考核追踪教师绩效、教学任务完成情况，高效决策，指导教学计划;了解学生整体成绩情况，进而调整教学方案，对薄弱生进行针对性教学。

教师用户，主要使用人群是在校任职的教师用户，屬于核心用户，主要分为代课老师、班主任、学科组长三类。由于职务的不同，不同用户的权限也有所区分。教师用户通过产品记录的学生行为数据、相关检测报告，掌握班级整体和学生的各科成绩情况、知识点掌握度、年级排名、教学成果，实时监督学生作业完成度，海量题库随意出题，智能批改，辅助教学，留出更多精力在个性化教学上，丰富教学手段、因材施教，让课程体系更加完善，使教学生动有趣，学生学有所获。

（二）学生端（家长端）。学生端又可称为家长端，是学生和家长用户共存的一个平台。为学生提供各类教学资源，及时了解自身薄弱情况，査漏补缺，自主个性化学习，有针对性地进行强化巩固。[6]让家长掌握学生在学校一切动态，包括通知、学习、教育资讯、安全等，促使学校和家长有效沟通，实现家校互联。

（三）运营人员、科研人员。一般是指平台内部操作人员，属于专业型用户。对业务熟悉度高，对信息的需求也更加具体细化，实时发现系统故障，通过可视化的信息图表，监测系统发现优化点，多维数据之间的关联度，从而总结数据规律，洞察商业动态，行业趋势，制订盈利模式及后续商业推广方式，达到资源的优化配置，从而获取对自身更有用的信息。

因此对于教师用户、学生用户两类高频用户，产品的交互设计、视觉表现以及综合用户体验方面要求更高。信息图表呈现方式简单易懂，操作便捷，反德及时，为用户带来沉浸式体验，让用户对产品产生依赖性。

五、教育类APP（教师端）信息可视化设计

信息可视化设计的基本流程为明确需求、用户调研、竞品分析、建立信息架构、基本图表建立、可视化方案设计、可用性测试与产品迭代等，根据产品的不同情况，优化还是新功能的建立，流程也会有所调整，不可完全按部就班来进行。智学网基于人工智能核心技术，学校课后作业、考试和发展性教学与教学评价功能，推出的大数据个性化教学系统。能够实现教与学全场景动态数据的采集与分析，深度挖掘数据价值，帮助教育管理者高效决策，为教师提供针对性教学，因材施教、智能批改、査看学情考察的信息化环境与服务，提升教学质量m。如今该产品的用户群体主要为教师和教学管理者，本文将以智学网（教师端）APP-学情分析功能为例，阐述信息可视化设计的流程。

教师用户信息可视化优化设计，教师端“学情分析”模块的核心定位就是基于过程性数据采集技术，挖掘数据，自动分析输出每场考试及作业报告，内容涵盖学生知识点掌握情况、得分率、排名、作答情况等，从而辅助教师制订教学方案、讲解错题，针对性教学等，以此充分挖掘校园考试价值。本文以教师用户为目标人群，通过对其进行深度访谈，挖掘信息需求，分析竞品，梳理信息架构，对教师用户所需信息进行可视化优化设计，并证明其可用性。

（一）竞品分析

根据优化模块功能及用途，选取极课教师APP和一起作业APP为竞品，进行分析，（如图2、3）所示，极课教师APP信息覆盖面广，利用用户使用场景移动端只选取部分功能模块，操作便捷高效。用户可快速获取索要数据，竖板界面，视觉流畅性高。但对于年级组长、校长、班主任等，没有功能上区分，对于不同人群，所需功能也应有所调整。而一起作业页面布局简单直接，分为布置作业和检查作业两大模块。海量题库筛选题目，快捷操作，随时生成作业。可仔细检査英语听说练习，学生作答情况。但不能通过作业数据，自动分析学生薄弱知识点，也能通过作业完成情况，发现学生共性问题。

（二）APP可用性测试

通过对APP的可用性测试，探索产品的可用性问题。（1）可用性测试任务，以一次年级考试为测试，观察用户在使用学情分析功能的主要使用场景，对页面阅读的流畅度，关注点，课下备课以及课上讲解错题，分析试卷并相应布置巩固练等。（2）实践结果分析。（如表2、3），从任务耗时和任务中跳转次数统计结果分析，用户在査看学情分析报告过程中被测用户所耗时和跳转次数差别较大，甚至会出现浏览路径断层现像，可以深入分析流程中的可用性问题。通过PSSUQ测试，搜集整理大量APP系统设计，得出相关可用性评分标准，（如图4）所示，上线值为灰色线，用户测试结果为蓝色线，测试数值越高，问题越严重，APP的质量远远低于可用性质量标准，其中信息质量及界面质量问题最为严重。

（三）用户需求调研

所需优化的在线教育产品根据其用户特性，选取用户访谈为主要调研方式，结合后台用户点击相关数据，挖掘产品可用性问题，用户痛点及用户诉求，指导后续优化设计，具体请况（如图5）所示。

通过访谈获取了教师用户的主要使用场景与信息需求。学情分析的主要使用场景分为课下査看报告、课前备课、课堂展示三类，展示的数据主要有年级班级排名对比排名信息、共性错题信息、知识点分布信息、关注生成绩信息、题目详解及作文相关息等。

（四）痛点提取及改进思路

通过前期的APP可用性测试及用户调研工作，汇总用户痛点问题。主要问题如下1.页面层级过深，用户易迷失;2.流程体验断层，使用路径分散，关键信息不突出，部分布局交互不符合用户习惯，用户学习成本较高;3.对比信息不明显，各模块子信息混乱，相关性不高;4.弹窗、浮层、气泡等交互形式不一致;5.信息覆盖不全，部分信息效用不明显，需更新替换部分信息，例如：试卷题型和知识点分析、同场考试班级各项指数对比等。根据以上问题，在设计过程中可从以下几方面对应解决用户痛点：1.页面信息合理布局，交互方式轻量化、多元化减少用户学习成本，交互样式保持一致性;2.提高班级与年级，班级间对比优先级;3.页面功能架构解构重组，去除不必要模块，增加用户需求功能点;4.针对典型错题、后续设置布置同类型练习入口;5.展示试卷题型、知识点覆盖率，试卷分析模块增加同次考试各题得分率。

（五）信息架构设计

通过前期用户访谈获取了教师端用户的主要使用场景与用户痛点。教师端的主要使用场景是课上讲解和休息时间做备注，pad设备较多。（如图6）所示，在用户痛点和需求确立的情况下，将所要展示信息解构重组，确定相应展示的优先级，展示的主要数据划分为学情总览信息、试卷讲评信息、试卷分析信息、作文分析信息、成绩单相关信息六方面。

（六）可视化页面提取设计

信息可视化的作用主要体现在两方面，其一，用户阅览页面时，对于各类相关信息统计的了解;其二，用户在完成任务流程时，关键信息的传达性。通过对该模块信息架构的重新梳理，以及用户访谈中对各类信息的关注度，将各个页面提取出的可视化要素，采用合适的可视化传达方式。（如表4）所示，学情总览模块中的班级年级对比数据，试卷讲评模块中的答题统计，作文分析（语文、英语）中的成绩分布情况、错误类型分析及错误订正反馈，成绩单模块中的成绩报告，相应采取可视化设计。笔者根据新的信息架构及前期用户调研工作，将学情分析模块可采取可视化处理的信息进行汇总。

（七）可视化方案设计

根据前期的调研和数据的挖掘处理对智学网APP-学情分析模块的信息可视化进行设计，部分界面（如图7）所示。

（八）检査测试

1.实地测试：将设计方案测试版投放测试设备中，走査关键路线的交互路径，反馈及时性，信息是否便于阅读，动效是否达到预期，色差是否能接受，操作方式是否易懂，确保能够完成基本的功能。2.可用性测试：通过完成任务测试査看是否仍然存在可用性问题，用户是否能通过页面信息可视化处理，理解其信息含义，获取有效内容。

结语

信息可视化是教育产品的显著特征之一，应用领域也十分广泛，未来在教育产品的研发、迭代过程中，甚至会根据用户需要推荐多种信息可视化布局，增强用户体验，保证信息传达的准确性、易读性。本文以某K12教育APP教师端为例，深入挖掘教师用户的信息需求，将信息可视化理论付诸于实践，结合使用人群、使用场景及产品功能的特殊性，以提高用户体验为目标，进行产品信息可视化设计。本文举例的K12教育APP信息可视化设计方法、策略、流程以及注意事项等，对于教育类APP信息可视化设计具有一定的参考价值。

参考文献

[1]PINEIIBJ，JAMESHG.ALeadersGuide to Iimovation in tlie Experience Economy[J].Strategy&Amp，2014，42（1）.

[2]孙远波，宋洲，朱宸岑，姬鸣扬.车辆管理服务平台的信息可视化设计研究[J].包装工程，2017，38（20）：1-6.

[3]刘海，李姣姣，张维，张昭理，易泽I喂面向在线教学平台的数据可视化方法及应用P].中国远程教育，2018⑴：3744.

[4]路璐，田丰，戴国忠.融合触听视觉的多通道认知和交互^[J].计算机辅助设计与图形学学报，2014，26⑷：651661.

[5]张尧官，方能御.1981年诺贝尔生理学医学奖获得者罗杰.渥尔考特.斯佩里[J].世界科學，1982（1）：48-49.

[6]杨明刚，孙启超，朱韦茜可视化大数据在在线教育教学中的应用研究[J].设计，2015⑵：158-157.

[7]李旭，翟颖琳.基于数据分析平台的APP交互设计测试评估研究[J].包装工程，2018，39⑵：143-148.

[8]刘再行.从需求出发的信息可视化设计方法研究[J].包装工程，2016，37（16）：1-5.

[9]陆菁，刘渊，张晓婷，章洁，黄秋儒，孟磊基于用户体验的数据可视化模型研究[J].包装工程，2016，37⑵：52-56.

[10]吉涵宇，席涛.大数据时代智慧校园的信息可视化设计应用研究[J].包装工程，2017，38（14）：95-100.

[11]卢潇，胡凡刚.基于教育大数据的教育虚拟社区交互设计研究[J].远程教育杂志，2017，（5）：85-92.

[12]谭浩，李文良，何人可，季铁，袁翔面向设计教育的产学研协同创新的云服务平台设计研究[J].包装工程，2017，38（24）：1-5.

[13]田崑，王毅栋，袁媛，高素芳信息可视化在儿童娱教产品界面设计中的应用[J].设计艺术与理论，2018⑴：49-50.

[14]郝凝辉.探析信息设计中的信息图表设计[J].包装工程，2016，37（18）：76-81.