游戏化用户体验案例研究
游戏化用户体验案例研究：推动 Madrasa 教育平台的参与度
作为 MBRGI 计划的一部分，我们为 Madrasa 教育平台的 UX 和 UI 设计做出了贡献，旨在让学习数学和科学更具吸引力。为了鼓励用户更多地、更有规律地练习，我们依靠游戏化流程来鼓励学生之间的友好竞争，同时尊重项目的教育和文化特殊性。
1. 设计游戏化体验
游戏化基于学习路径中的游戏机制（积分、徽章、排名）的整合。我们首先研究了用例并确定了动力可能下降的关键时刻。
作为回应，我们设计了视觉反馈元素（进度条、分数、奖杯）来帮助用户衡量他们的进度并庆祝他们的成功。
其目的是保持高水平的参与度，特别是通过以下方式：
- 等级和徽章系统： 标记所迈出的每一步和获得的每项技能。
- 比赛及排名： 鼓励学习者的效仿精神。
- 有形或象征性的奖励： 增强成就感。
2. 适应教育问题的 UX 和 UI 设计
为了使游戏化有效，界面必须直观且令人愉悦。因此，UI 设计旨在增强教育内容，同时提供有趣的元素（图标、字体、明亮的色彩）。
我们还考虑了 Madrasa 的整体特性，以确保图形的一致性并尊重当地的文化敏感性。
- 内容的可读性： 清晰划分各个区域，方便导航。
- 可访问性： 移动兼容性、阿拉伯语和英语支持，以覆盖数百万用户。
- 进度结构： 一条标记的路径，以便每个学习者都知道要遵循哪些步骤以及要实现哪些目标。
3. 成果：学习更加有趣，社区更加活跃
目前，Madrasa 教育平台提供阿拉伯语和英语的免费数学和科学课程，面向广泛的受众。
得益于 UX 游戏化，学生们更有动力去训练，更快地进步，并创造出积极竞争的精神。
本案例研究强调了游戏化教学方法在教育领域的影响：通过整合深思熟虑的游戏化策略，Madrasa 成功地让数百万用户的学习变得更有激励性、更具包容性、更具文化相关性。
Ux：主页 Wireframind，V1。 Madrasa 主页概念：全民电子学习。
该图显示了在线教育平台 Madrasa 主页初始版本的线框图。关键元素包括专门用于用户简介、新闻以及获胜者或比赛介绍的部分。在中心，一个名为“学习路径”的部分提供了一个搜索引擎和带有指定点的交互式进度图。底部包含有关该平台的愿景、目标和功能的信息，以及 Android 和 iOS 应用程序的下载链接。
Ui：个人资料页面的最终确定。宗教学校动态主页。
该图展示了 Madrasa 电子学习平台主页的最终版本。顶部有一条横幅，邀请用户成为所在国家/地区的最佳人选，同时还重点介绍了获奖者和奖项。中间部分有一个交互式“学习路径”，其中包含丰富多彩的类别和进度点。一个盒子突出了穆罕默德·本·拉希德·阿勒马克图姆鼓舞人心的名言。该平台在底部概述了其使命、愿景和目标，并附有 iOS 和 Android 上应用程序的下载链接，所有应用程序均采用紫色和白色调色板，呈现出有吸引力且专业的设计。
Ui：创建弹出窗口。选择头像。头像定制 – Madrasa。
该图显示了 Madrasa 平台上专门用于头像定制的弹出窗口。主要区域展示了一系列带有各种配件和主题的插图恐龙图标。每个图标都附有一个图例，指示需要解锁的点数。已解锁的项目是彩色的，而锁定的项目是灰色的，并带有“锁定”徽章。紫色背景的界面简单而有吸引力，鼓励用户在平台上互动并个性化他们的体验。
Ux：个人资料页面的线框图。 Madrasa 上的交互式用户个人资料。
该图展示了 Madrasa 教育平台上“我的个人资料”页面的模型。顶部显示用户的等级和昵称，以及用于提高等级的按钮。 “每日课程”部分提供了一个教育视频，观看后可以赚取积分。再往下，显示了一系列徽章，表明用户在不同类别中取得的成就。最后，“观看列表”和“我的最后 5 节课”列表允许您跟踪已观看或将观看的视频，以及每个内容的关联点。该设计直观，强调互动性和学习者参与度。
Ui：创建地图弹出窗口。埃及宗教学校前 10 位用户。
该图显示了埃及 Madrasa 教育平台上前 10 位用户排名的模型。每个排名（从第 1 名到第 10 名）都附有用户昵称、头像和已完成视频数量的指示（此处为每个用户 50 个视频）。排行榜分为两栏，设计清晰，紫色独特。顶部显示国家名称及其国旗，增强了平台的竞争性和社区性。
Ui：最终确定我的个人资料模型。 Madrasa 上的用户个人资料页面。
该图显示了 Madrasa 教育平台上的用户个人资料页面。在顶部，排名和积分以标志性的金色奖杯视觉效果显示。下一部分将介绍每日课程，并附有教育视频和观看视频可获得的积分。再往下，“徽章”部分用彩色图标显示了获得或要解锁的不同区别。最后，用户可以查阅他们的“观看列表”和“最后 5 节课”，按类别和获得的积分进行组织。该页面采用简洁的设计和紫色，这是宗教学校图形章程的典型特征。
用户界面;学习路径模型的最终确定。宗教学校教育之旅。
该图像代表宗教学校的“学习路径”部分。在页面顶部，有一条消息祝贺用户当前的排名和积分。中央部分列出了不同的教育路径（“路径列表”），其中包含有关要获得的积分、视频数量以及完成它们的预计时间的信息。下面，视频播放器显示了一个示例课程，其中包含教育科学内容。右侧的“路径观察列表”允许用户跟踪他们的学习情况。布局清晰直观，紫色调与平台的视觉形象相对应。
Ui：排行榜模型。宗教学校的排名和表现。
此图显示了 Madrasa 的排行榜部分，用户可以在其中查看基于累积积分的排行榜。上部显示一条祝贺信息，其中包含当前用户的排名和积分。主排行榜显示前 100 位用户的排名、积分和头像。再往下，具体排名按类别（A、B、C）划分，每个部分都有彩色标签。底部部分使用阿拉伯国家的交互式地图展示了“按国家/地区排名前 10 位”，其中紫色标记表示活跃位置。紫色和蓝色调色板反映了 Madrasa 的视觉形象，提供了清晰且引人入胜的用户体验。
Ux：主页 Wireframind，V2。 Madrasa 主页模型（版本 2）。
此图显示了拟议的 Madrasa 主页的线框图，展示了清晰且有组织的布局。顶部部分包括竞赛和获奖者的号召性用语，后面是选择学习领域的部分。另一部分以地图和进度指示器的形式提供教育路径。用户还可以使用登录或帐户创建按钮来跟踪他们的进度。底部的“关于”部分描述了 Madrasa 的使命、愿景和目标，而按钮则允许您下载移动应用程序。布局采用圆形和流畅的过渡，增强了愉快和直观的导航。
