导语:用户会在哪个页面停留更久?在订单关闭前,用户通常看到的最后一页是什么?这个答案对于视觉设计师来说并不陌生:详情页。通常设计师设计的细节页面都是静态的。今天就来说说在线教育行业的详情页界面设计,让详情页可以动起来。
#一、思考
我们先来看这样一个问题。当你在某宝买衣服时,什么会促使你下单?
进入产品详情页后,模特的穿衣效果如何?促销价格?用户评价?买家秀?正品保证?运费保险?等等……是什么信息,让你有什么感受,促使你下单?
不仅对于电商平台,对于在线教育平台,详情页也是提高转化率非常重要的一个层面。
那么,如何通过设计的手段帮助用户做出购买决策,提高商品的转化率呢?带着这样的疑惑,我们先来看看在线教育的详情页是如何设计的。
#二。详细信息页面显示
今天我们就来体验这三款:属于K12的作业帮APP、高图课堂APP、属于成人职业教育的一考老师APP、三款在线教育产品。
从点击进入APP开始,用户将通过一层或多层交互进入产品详情页面。通常情况下,用户会对这个产品有潜在的或明确的需求,比如这个产品能提供什么,是否不可靠,是否适合自己。
让我们来看看这三个应用是如何设计的:
这张截图展示了iPhone7的体验环境。
我们先来看看上面的文件夹,也就是用户进入详情页后看到的第一张图片。
可以发现,细节屏前半部分三款app的设计框架基本一致:顶部是课程展示图,中间是课程名称和价格,然后是优惠服务。
自从优惠服务后,模块信息有了自己的侧重点。
我们依次来看。
## 1\.顶级课程演示图
这是用户进入页面时看到的第一个信息。
家庭作业帮助的课程地图是一个介绍六年级课程的动物ip。卡通动物和鲜艳的配色让画面亲和力更强,这也符合作业帮的定位:中小学生在线辅导网络课程。咨询和陪伴是给人友好感觉的词。
高途课堂的定位:名师是高途学生,网课选择高途课程。名师是他们的主要卖点,用微质感背景衬托出挺拔西装的高中老师;整体画面干净干练,清晰的教师形象给人专业严谨的感觉。
作为职业教育平台的考试老师,在课程地图的选择中,短视频被用来展示信息。收取考试费的用户大部分是成年女性。在考虑亲和力的同时,视频可以让用户比图片停留的时间更长。
## 2\.课程介绍、价格和服务
先说说课程介绍,价格和服务。
三款应用几乎相似,包括课程名称、开始时间、价格、折扣和服务模块。但是在价格和服务模块,一起考试的老师和另外两个形成对比。
价格模块:
考试的老师一起指出了购买者的数量。27人的购买量有心理指导,相当于告诉用户在你之前有多少人做过购买决定。这不仅适用于人群的从众心理,也是增加信任的好方法。
关于如何显示价格,一起考试的老师设计了这样的方式:划掉原价497元,用放大的红色字体突出467元的优惠价格,加上“特价”的小标签再次强调课程的优惠,双重提醒强化促销氛围。同时起始时间增加到价格以下,时间节点通常会给人一种恐慌感,促使用户做出决策。
此外,在本模块的设计中,根据课程的性质,增加了一个在整个课程和协议课程之间切换的按钮,对于有类似需求的用户来说非常友好,无需回到上一页进行相关搜索,两个课程的对比可以b
相对来说,作业帮和高图课堂的价格模块设计比较简单,只展示原价,可能与两者的用户群体和课程本身的定价策略有关。
尽管
作业帮和高途课堂面向的用户是学生,但真正作出购买决策的是家长们,家长们愿意给孩子找寻更好的教育资源。一定程度上,价格高低、是否折扣会给人带来质量优或良的感受。当然,三者的具体定价金额会和课程本身的定位、课程实际提供的服务、课程预期的售卖人群密切相关,但这个也不影响我们就价格的设计方式进行思考。
整体来说,一起考教师的价格模块结合了更多人性规律来设计。通过小设计增加用户的信任感,制造一种时间氛围上的紧迫感,并营造买买买的促销购物环境;心理感受上的重复也会加强人的情绪记忆,这些都会影响用户行为。
优惠服务:
对于优惠服务模块,作业帮和高途课堂的展示更为直接。
优惠:“购买长期班,即得精品课”,做什么动作,你就可以得到什么。
服务:“直播授课课堂回放随堂测试纸质教材”四字短句,简单明白、结构美观、服务丰富。如果用户想深入了解,点击右箭头,会有详细的解释说明。
一起考教师在这儿提供的是赠品信息,为了突出这一项,它将赠品文案颜色标红并增加一个红色边框。赠品不同于服务,赠品应该大于服务;因为在词语理解上,赠品是产品之外额外赠送的礼物;点击右箭头,对6个赠品的内容,会有简单说明。
整体来看,作业帮和高途课堂的优惠服务介绍简明扼要,而一起考教师更注重利益点的传达。
## 3\. 信息模块
在实际页面浏览过程中,大部分用户会继续往下滑动,来观看后面更重要的课程信息,也就是信息模块内容。
从这里开始,三家APP对于模块展示就各有侧重。
* 作业帮:选择老师和时间、课程大纲、学员评价、课程详情。
* 高途课堂:授课老师、课程评价、课程详情、课程大纲。
* 一起考教师:课程详情、课程表、授课教师、课程评价。
授课老师:
作业帮和高途课堂是面向青少年的学习平台,青少年有容易外显的情绪特点;无论是因为主打卖点是明星老师们,还是青少年更容易产生对老师的好恶情绪,作业帮和高途课堂都将老师模块放在了最前面。
在这里,作业帮还增加了一个DIY功能:选择老师和时间的服务。用户可以根据自己的偏好和便利度自行选择课程,当然,这个功能相应地也会给平台:对内的老师资源排期和课程时间排期,增加一定的复杂度。
对比来看,一起考教师对于授课老师的展示,在模块设计上进行了弱化;或者说,它更想突出的是“课程详情”的详情效果图,因为用户的使用习惯更倾向于滑动页面向下继续查看信息,需要点击才能查看的“课程表”“授课教师”“课程评价”,更适用于对此信息有明确诉求的用户。
课程评价:
同为课程评价,模块设计上是否有一些讨巧的地方?我们先来看高途课堂对于评价模块的设计。
高途课堂在评价模块有这些设计:课程总评分5.0分、课程评价数815条、4颗星或5颗星评价,优质用户评论。
不管是总评分、还是丰富的课程评价数量、以及被选中的真实感学员的完整优质评论,这个热闹的氛围都在影响浏览中的用户:大家用的都好,购买此课程是个明智的选择。
用户与课程之间,也是需要信任感的。
相对而言,作业帮的评价模块设计比较简约,并且还跟在课程大纲模块之后,几乎是在第二屏的最后;唯一展示出来的一位用户评论,还需要点击才能查看完整信息,这个步骤相对繁琐。
而一起考教师的评价模块就被弱化了,浏览时需要点击课程评价按钮,才会进入评价页面;这里的课程评价是按时间顺序进行浏览,没有筛选个别优质评论;因为评论信息有4000多条,整体来说信息量较多,翻看评论会花费时间。
用户都容易被他人影响、容易参考他人观点;他们在作出购买决策之前,会希望获取更多信息,比如从用户评论中寻找这门课程是否靠谱的蛛丝马迹,评价模块正是起到这样的引导作用。
详情效果图:
千呼万唤始出来,最后一个模块是详情页落地效果图。真正的课程卖点,都集中在这张效果图里;在这里我们不具体分析详情页的文案的撰写技巧,也不去讨论内容是否了抓住用户的痛点、痒点、爽点,我们在这里主要还是看页面的布局结构。
一起考教师非常重视详情页的展示,在进入这个页面第一屏就已经将详情页效果图推出。
高途课堂则做好了足够的铺垫,比如老师介绍、评价模块,再来展示课程详情效果图。
作业帮的进度会慢一些,几乎第三屏才开始推出详情效果图,前面还有老师介绍、课程大纲和评价模块,文字信息量较多,虽然课程大纲和评价模块都有折叠功能,但似乎也会分散用户的注意力。
毕竟视觉的第一眼感受是最直观的。
详情页的整体视觉定位是专业、友好、品质?这些视觉感受都会给用户带来对应课程的品质印象。
如果详情页效果图的各模块层级明晰、重点突出、图文匹配,也能在用户的阅读体验上加分。
## 4\. 驻底按钮
立即购买:
与常规的“立即购买”不同,高途课堂和作业帮设计了“加入选课单”和“立即报名”按钮;点击“立即报名”其实也是跳转到购买页面,只是在措词上弱化了购买的意识。
但基于学生可能有多门课程的培训需求,“加入选课单”营造了一个可以打包购物的场景。但这也会带来:用户当下将课程加入选课单后,会有退出页面的情况发生。
一起考教师在当前页的购买意愿似乎更强,它只有一个“立即购买”的按钮,基于前面的所有模块的设计方式,它更希望帮助用户在当下直接做出购买决策。
客服咨询:
作业帮和高途课堂的咨询按钮能够直接跳转到客服沟通页面,先进行机器人对话,可根据需求转人工服务。
一起考教师的咨询步骤相对繁琐,需要添加至社交群后,进群咨询。但是带来的好处是:用户能够快速进入到一个有共同学习氛围的群体中,平台也能留下课程的初始用户。
# 三、最后
今天我们探讨了三份详情页面框架,各平台对于详情页的模块设计各有侧重;其实,即便是同款APP,对于不同类型的课程,详情页面的模块设计框架也不是固定不变的。
比如高途课堂,部分课程页面没有评价模块,但我们今天探讨的详情页面里是有的;比如一起考教师,部分课程的价格模块设计也比较简约,而我们今天探讨的价格模块是暗含了很多用户心理的运用。
比如部分APP对个别课程有提供试听功能,但今天我们探讨的这三份课程里并没有提及。比如部分APP点击咨询按钮后,根据课程性质,可能会跳转到社交群,也可能跳转到客服咨询平台等等。
为什么布局模块或功能设计会不一样?究竟什么是提高详情页面转化率的最佳方案呢?我们需要一个合理假设、上线验证、数据收集的过程。
但不管是怎样的设计方案:帮助用户做出决策,来提高用户在当前页面的转化率,是详情页面的常规设计目标。
对于视觉设计师而言,把效果图带回到用户的使用现场,追问自己设计的目的究竟是什么,或许能帮助自己更好地理解详情页。
在收集在线教育APP详情页面的过程中,我也看到很多优秀的产品,比如有道精品课、考虫、猿辅导等APP的详情页面设计,因篇幅有限,本次就不做过多探讨。
本文由 @阿念 原创发布于人人都是产品经理,未经许可,禁止转载
题图来自 Unsplash,基于 CC0 协议