教学需求至上:MOOC平台Coursera的web端选课流程及关键页面设计

零基础学产品,BAT产品总监带,2天线下集训+1年在线课程,全面掌握优秀产品经理必备技能。了解详情

笔者通过深入体验,对每一种选课流程的设计思路进行了概括,并从教学需求的角度对关键页面设计作了进一步的讨论,最后对课程注册页面进行了设计思路分析。

笔者深刻的体会到,教学需求是教育产品设计过程中不得不考虑的因素。

选课流程和上课流程是Coursera平台两个关键业务流程,也是用户在平台操作的关键体验流程。

通常情况下,页面流程设计,需要考虑到综合考虑用户需求和业务需求;但是在教育类产品中,由于教学的需求有其隐蔽性,用户和业务都很难察觉的到,所以需要单独作为一个设计需求来综合考虑;保证在关键的页面中能够体现出其教学的设计,引导用户完成有意义的学习。

本次分析首先单独对选课流程及其关键页面设计做综合分析,能够综合了解coursera的选课流程,总结其优点,指出不足的地方。

一、web端选课流程分析

Coursera平台Web端的选课流程主要分为四类,包括搜索、目录查找、最近浏览、学习路径。其中搜索、目录查找和最近浏览是内容站点常用的内容查找方式;而学习路径,是针对教学设计而言的一种全新的思考,它的目的不仅仅在于基于用户兴趣的用户推荐。

1.1 搜索

关于“搜索”,是用户查找信息最常用的一种方式。搜索框位于顶部悬浮栏的位置,搜索的流程优化关键在于搜索结果的排列和搜索结果的筛选。笔者分别以“心理学”和“psychology”为关键词进行搜索,呈现的部分搜索结果如下:

搜索结果返回页面包含筛选器和搜索结果列表两个部分,遵循移动优先的原则,在对页面宽度进行缩小时,筛选器会自动隐藏。

其中,筛选器主要包括:课程语言、字幕语言以及所有主题,中文搜索结果和英文搜索结果存在明显的差异。

总体来说,大致可以得出以下结论:

  1. 以“心理学”为关键词进行搜索,返回的搜索结果主要是中文课程和英文课程标题已经翻译成中文的课程,对英文支持不太好。而以”psychology”为关键词进行搜索,返回的搜索结果只有英文课程(有一些英文课程把标题翻译成了中文,方便中文用户的客户端显示)。
  2. 返回的搜索结果中相对靠后的课程和搜索关键词并不存在明显的关联性。如以“心理学”为关键词进行搜索,返回结果中出现《人体生理学导论》、《哲学导论》课程等。经过观察发现,排名靠后的课程应该是通过搜索关键的语言来匹配的,也就是出现不相关的中文标题的课程。
  3. 筛选器中包含课程语言、字幕语言和所有主题。有一点疑问,不明白所有主题的筛选用途在哪里?另外,筛选器可以进行有效筛选的功能有限,

综合以上分析,我们发现coursera平台搜索返回页面表现得中规中矩,有一些优点也存在一些缺点和需要改进的地方。

优点主要包括;

  1. 遵循移动优先的原则,页面结构清晰、简洁。
  2. 字幕语言的筛选是coursera平台作为全球化的MOOC平台,一个突出的亮点;

缺点和改进主要包括:

  1. 搜索结果返回页面仅限于标题和关键词的匹配。以中国大学MOOC为例,可以增加和课程概述内容的匹配,如以“经济学”为关键词进行搜索,《会计学原理》这门课程是属于经济学范畴的,单纯以标题来匹配,大大降低了搜索的精确度。
  2. 中文和英文的匹配。实际上这里存在一个功能冲突,即课程语言筛选和中、英文独立搜索的功能冲突,从目前情况来讲,以“心理学”为关键词只能搜索到英文课程标题已经被翻译成中文的课程,还有很多的尚未翻译的课程是检索不到的,这样的设置,和课程语言的筛选实际上是一个冲突的功能设置,让课程语言筛选失去了意义。
  3. 增加更多维度的筛选,帮助用户快速选择优质的课程。目前搜索结果的筛选项偏少,可以增加更多维度实用的筛选,如热门、评分、精品、专项课程等,目的就是帮助用户减少选择的成本,降低选择的操作难度。

1.2 目录查找

Courserap平台的目录列表是通过顶部悬浮栏目录入口进入的。为什么目录列表没有放在首页,而是放在了下一个信息层级?我们在MOOC平台Coursera的web端首页设计中已经分析过。这里不多做赘述,以下分别是目录列表页面和目录查找返回页面以及分析讨论。

以上是目录列表页面。整个页面当中,包括商务风背景图、slogan和目录列表,信息结构清晰,没有任何多余的元素。

这里有一点需要说明和讨论,帮助大家理解这张页面为什么这么设计。

这张页面为什么设计得如此简单?是不是可以再添加一些别的信息?

在页面设计评估体系中,有一套经典的评估方法,即VIMM系统。

关于智力层,就是通常如果想要减少用户的认知负担的话,应该尽量避免多余信息的干扰。所以当我们知道用户有一个明确的任务,就要给他设计一个封闭的流程,尽量让他每次操作只允许做一件事,这样做的好处就是让用户不需要思考下一步需要做什么。

目录列表这张页面中,用户的任务就是选择分类。这样的设计,就是保证用户在这张页面中只做一件事情,快速完成用户的任务,达到好的用户体验。

当然需要说明的是:这一条评估原则并不是指导设计的唯一原则,实际上设计过程中,更多的是根据设计定位寻找一个最优的平衡(如淘宝的确认订单流程需要填写很多信息,但是却不能放在很多页面当中来保证流程的封闭)。

如果想明白这一点的话,就不需要去纠结这张页面内容太少,要不要在下面加上热门课程、精品课程等。

以上是选择“社会科学”分类,返回的目录查找返回页面。主要包含目录列表、筛选器、和查找结果内容。目录列表采用了固定窗口绝对定位的样式,在主内容区不随着内容的滑动而改变位置,方便在滑动内容的时候对目录列表进行操作。

筛选器包括常用筛选项和特定专业二级分类筛选项,常用拆选项有课程语言和字幕语言,特定专业耳机分类筛选项,就是特定领域的耳机专业分类,实际上是一个锚点定位的样式。

比如通过选择“法律”,可以帮助快速定位到法律的课程内容,查找结果内容就是对查找结果的返回。

这里有两个特点:一是根据二级专业分类进行课程展示;二是课程排序专项课程优先展示。

这里有几个需要讨论的问题。

  1. 为什么要在这张页面中加上目录列表?理由就是用户在查找完某一分类内容之后,有可能会继续查看另一个分类的内容,这样做的好处就是不需要用户再跳转到上一层级的页面,直接在该页面中进行分类选择,减少了用户的操作复杂度。
  2. 二级分类锚点定位存在视觉效果的偏差。目前该页面的锚点定位是点击之后直接定位到该内容的位置。中间没有视觉过渡的动画,并且在定位上有一定的误差。导致在点击之后,出现视觉效果的偏差,找不到具体的对象,用户视觉注意力容易跳出内容。
  3. 关于目录分类问题的探讨。下图分别是coursera平台和中国大学mooc平台的目录列表。在学科分类当中有很多的分法,但是不管是哪一类分法,都是为了保证学科内容能够有条不紊的呈现,保证用户能够根据分类快速找到具体的学科内容(图书馆的图书分类就是一个典型的范例,但是你会发现不同的学校图书分类方式总是有所区别)。

以coursera为例,其中“社会科学”是一个学科大类,里面还包含教育学、政治学、经济学、法学、哲学、心理学等等,这些又可以简单称之为学科小类,它们之间虽然同属于社会科学,但是相互之间却没有非常强的关联性。

如果把他们放在同一个分类下,就必须要对结果内容呈现上做出二级分类划分,这就是为什么coursera平台,没有把“社会科学”的结果内容都放在一起的原因,而是在视觉层级上做了区分,通过“查看全部”,让更多的内容在下一层级显示。

而中国大学MOOC的做法直接根据学科小类进行分类,由于学科小类的内容具有关联性,可以放在一起呈现,同时可以通过二级分类来筛选,减少了一个层级的操作。

另外,通过观察,我们可以很明显地发现:目录的分类还将当下的热门的内容和单个学科的课程的数量作为了目录分类考虑的因素。如Coursera和中国大学MOOC都将计算机作为了一个重要的目录分类,coursera甚至还将数据科学作为了一个单独的分类,这是由于当下机器学习的热度导致的,而中国大学mooc则是将考研作为了一个重要的目录分类。

这种动态的调整是为了满足特定用户的需求,强调平台的特色,分类其实一种很重要的能力。

1.3 最近浏览

最近浏览位于首页的个人学习信息内容区的下方,视觉信息层级上要比个人学习信息内容区低。具体的首页设计思路请见MOOC平台Coursera的web端首页设计,最近浏览主要包含最近查看的专项课程和最近浏览的课程。

接下来我们一起来一下讨论:为什么会有最近查看的专项课程和最近浏览的课程?

关于coursera平台课程的设置,我们在这里不做详细的阐述,后续我们会单独拿出来讲。但是为了理解后续的内容,我们有必要对专项课程做一个了解。

以《学术英语:写作》专项课程为例,它包含“语法和标点、论文写作入门、高级写作、面向论文写作的研究导论、毕业项目:撰写一篇研究论文”五门课程,每一门课程单独拿出来又可以作为一门独立的课程进行学习。

说到这里,我们应该知道:专项课程其实是一个从入门到实践的综合课程,能够帮助学习者不断地深入学习,并且课程的设置能够帮助用户达到从基础学习到应用的水平。

专项课程的设置考虑到了用户需求、业务需求和教学需求(第一次提及)三个方面。

  1. 用户的需求是不同用户的认知水平不同,如何来满足不同用户来学习《学术英语:写作》这门课程。
  2. 业务需求是在完成用户学习需求的同时,如何区分专项课程和独立课程,尝试平台的盈利模式。
  3. 教学需求,首先需要强调的是,专项课程的课程组合形式不是传统商品的打包捆绑销售,这是有本质区别的。所以教学的需求,是如何针对不同的用户来设计课程的结构和内容,实现分层教学。

说到这里你就应该明白:为什么会出现“最近查看的专项课程”和“最近浏览的课程”两个模块,并且“最近查看的专项课程”的视觉信息层级比“最近浏览的课程”要高。

1.4 学习路径

MOOC平台Coursera的web端首页设计中,我们讲到三种类型的首页,分别是未注册的用户首页、已注册未获取学习路径的用户首页和已注册并已获取学习路径的用户首页。

学习路径的选课流程就是从已注册为获取学习路径的用户首页开始的,通过点击首页获取学习路径入口,在信息页中选择或填写个人目标、兴趣、背景等,目标不能超过3个;系统会自动为你的每个目标推荐5门课程;开始第一门课程的学习,注册之后,目标和课程会进入道首页个人中心,即已注册并已获取学习路径的用户首页,可以继续添加新的目标,进入下一轮。

大致的学习路径的选课流程如下:

以下是目标和课程进入到首页个人学习中心内容区,即已注册并已获取学习路径的用户首页。

学习路径是根据教学需求设计(再一次提到教学需求)的一项功能,它包含对学习者的分析和学习需要分析,以及教学内容的选择与组织、教学结构的选择与运用。

学习者的分析包括了解学习者的兴趣和目标,比如学习心理学的需求。

学习需要分析是根据可能存在的学习需求,分析现有的资源和约束条件,论证满足学习需求的可能性,即平台内是否有足够优质的课程来满足各类学习需求。

教学内容的选择与组织,对教学内容的知识点进行分类,如心理学包含心理学入门、社会心理学、积极心理学、心理学应用等等,教学结构的选择与运用则是具体的教学内容的呈现方式和结构。

这部分简单介绍希望能帮助理解学习路径的选课流程,关于学习路径的设计后续再具体探讨。

二、课程注册页面设计

上述介绍了Coursera平台Web端的选课流程主要分为搜索、目录查找、最近浏览和学习路径四种方式,并且分析了流程中一些关键页面设计思路,帮助理解选课流程。

如果你看到这里,可以仅仅通过上述的文字阅读,就可以在脑海里理清四类选课流程以及一些关键的设计细节,那说明我讲清楚了并且你的理解能力还不错。如果没有,我建议你去对照着web端站点再梳理一遍,对你的理解很有帮助。

关于课程注册页面,就是课程的信息介绍页,也就是选课流程的最后一步。上述四种选课方式最终都会到达课程注册页面完成选课操作。课程的注册页面,相当于课程信息的展示窗口,是影响用户是否会注册课程的重要因素,所以课程注册页面的设计变得十分重要。

接下来我们就来分析:课程注册页面是如何设计的?