答题模式全新改版:提升做题体验,打造更有​「人情味」的答题小程序
2020/06/29 来源:鲸打卡

大家好,我们是鲸打卡设计团队,这是我们首次以推文的形式和大家交流。


从2017年5月4日成立至今,鲸打卡已经陪伴机构、老师和同学们走过了三个年头。三年来兜兜转转,鲸打卡的产品初心始终未改——依然聚焦在「作业」这个督学的核心点上。


而答题模式,作为老师布置和批改作业最为得力的功能之一,2018年2月甫一推出便受到了老师们的极大欢迎,截至目前仍是使用量最多的课程模式之一。

但随着鲸打卡用户体量的不断增加,老师和同学们在作业答题领域不断深入,答题模式旧有的答题流程、页面体验、交互细节等,渐渐跟不上大家多样化、个性化的答题需求……


于是,我们想趁端午佳节、鲸打卡三周年这个特殊节点,对答题模式进行一次全新的升级改版,以感谢大家多年来的持续关注、信任和支持。

为什么我们做这次升级?


01 设计背景


鲸打卡小程序最初是一款轻量级产品。

但在过去三年的时间里,为了满足市场和客户的需求、抓住机遇,鲸打卡进入了高速迭代时期,体量也越来越大,功能越来越多。这样导致的结果是,产品在整体的体验上相对较差。因此,我们想通过对答题模式的升级改版来进一步深度打磨产品,希望它能更好地「服务」客户及学员,所以进行了这次升级。


02设计理念


鲸打卡企业愿景:让学习更有温度、更有趣、更有效;

鲸打卡企业使命:聚焦客户关注的挑战和压力,提供有竞争力的教学互动、口碑增长解决方案和服务,持续为客户创造最大的价值。

——我们将这两点提炼出两个关键词:「服务」、「人情味」,从而延伸出了这次重设计的灵感。

将优质的「服务」融入到产品设计中,如何去体现呢?关键的一点是「人情味」:我们想要做有温度的、更有趣的、更有味道的产品,交互上更注重引导用户及帮助用户解决困惑的产品。

于是,我们从视觉风格上提炼出了两种颜色:蓝、绿,分别代表【服务、人情味】,【鲸打卡、机构】,以及【老师、学员】这样的互动关系,从而提升整个小程序的品牌调性。

此次设计,强调服务和人情味,教学互动、品牌增长、挑战和有温度、更有趣、更有效——我们遵循这一设计理念进行了答题模式升级,较好地体现了「你中有我,我中有你」。

为此,我们做了哪些努力?


01优化答题流程,给予正向激励


1. 强化章节概念:

当学员完成一个章节后,会进入一个章节页面,并给予COOL的表情反馈,告诉学员已完成章节。

这有一种小时候收集印章小红花的感觉,激励用户完成下一个章节,可有效提升学员的完成率。

2. 轻量化答题卡交互:

旧版本的答题卡交互是跳转到新页面,页面需要加载等待,打断学员答题的连续性;

新版本则轻量化这一交互,改为抽屉式弹出、无需等待加载,无缝切换答题卡和答题页面,减轻加载带来的焦虑影响学员答题体验。

02增强做题交互细节,提升学员做题体验


1. 音频支持倍速播放:

为了更好地服务不同身份的学员,在音频上我们增加了倍速播放按钮,可在不同的场景下提供需要的倍速播放需求。

例如:上班族在学习时间短时需要提高播放速度,可大大节省做题时间。

2. 减少误触:

带图片的选项经常会让学员误触,影响点击答案选项,导致打断学员做题体验。

我们通过增加一个查看大图的显著图标,来减少误触几率。

3. 填空题连续性增强:

旧版本的填空题交互,需要上下来回阅读题目和填写答案;

新版本则具有更强的连续性:填写完当前空格,点击确定,系统自动定位到下一空,强化做题连续性。

03 结果页趣味升级,更清晰的答题解析


1. 更具趣味性的结果页:

我们在结果页做了大胆的尝试,通过增加结果页趣味性,来激励学员获得高分所带来的成就感,以及减轻学员拿到低分时的挫败感。


2. 更清晰的答案解析:

对比旧版本的答案解析,新版本将结果页与解析页面拆分成两个页面,减少页面信息过多所带来的视觉负担,减轻学员的查阅解析所带来的来回上下拖动界面的繁琐交互。

……

服务无期,未来可期


答题模式作为作业、考试类客户最喜爱的功能之一,从最初上线支持部分题型到现在支持更多题型,再到越来越完善的题库种类,接下来我们会继续做更多的努力将它完善起来。


这次设计重构中,我们还为未来换肤做了一系列的准备工作。不久的将未,机构可以在后台选用自家品牌色作为小程序主色,真正意义上实现自有独立品牌小程序。

与此同时,鲸打卡小程序上的更多模块也正在努力升级当中:绘本跟读、沉浸阅读、专栏课程……都将会迎来新的面貌。敬请期待~

鲸打卡打卡小程序答题小程序