6

用户体验地图如何落地——12306购票体验升级

 3 years ago
source link: https://www.ui.cn/detail/584721.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

用户体验地图如何落地——12306购票体验升级-UI中国用户体验设计平台

用户体验地图如何落地——12306购票体验升级
85.9°
原创文章 / 教程 / / 举报

2021-04-07

万字长文,手把手教学,看干货可以直飞第三章。我们在工作中打磨出用户体验地图的方法论,任何不懂的地方欢迎评论和私聊。

3693652.png

用户的体验感对于一个产品来说,是至关重要的。一个好的产品能够充分照顾到用户的感受,从而拥有大批的忠实用户。用户体验地图是帮助产品设计者站在用户维度思考体验优化,提升用户体验的重要工具。

那么,应该如何打造用户体验地图及如何落地呢?我们在本文给出了解答。(本文对用户调研、用户行为路径、使用场景等也做出了详细解析)

3693750.png

3693749.png

1.1 定义用户体验地图

用户体验地图,是从用户的视角出发,去理解用户、产品或者服务交互的一个重要的设计工具。

它以可视化的形式,来表现一个用户使用产品或接受服务的体验情况,来发现用户在整个体验过程中的问题点与情绪点,从中提取出产品的优化点。

对于1-∞的产品来说,用户体验地图是用户增长策略的一部分,是产品优化的重要工具。

1.2 拆解用户体验地图

用户体验地图一般由以下几个部分组成:

3693658.png

用户体验地图的组成部分大同小异,可以根据自身分析内容增加或简化。小伙伴可以保存这张空白模板,直接拿去填内容哦~

3693878.jpg

3693761.png

我们给出了简洁明了的回答:

3693766.png

背靠着中国铁路总局,12306在基础票务预订服务上有着得天独厚的优势,但基于用户日益增加的多样化需求,以及越来越多的用户愿意为优质体验买单,竞争激烈的OTA们日益精进,与官方12306形成鲜明对比,本次优化就围绕12306流失最多的年轻用户群体展开。

3693767.png

本文以12306为例,主要针对购票流程(核心功能),提升交互易用性和用户体验,演示用户体验地图如何落地。首先我们来看一下用户体验地图的原型模板。

3693879.jpg(上图建议保存)

根据地图原型的ABC区域,分别对应着A区的用户特征与需求,B区是用户行为、思考、情绪,以及C区的总结分析。A区+B区得出C区,A和B都基于用户,所以,了解用户——是梳理用户使用问题的基础和第一步。

经过我们团队的经验总结,得到绘制前的流程步骤如下图,下文会拆分步骤一一讲解。

3693769.png

3.1 了解用户

体验地图的“用户”不是主观脑补出来的,而是通过定性调研和基于数据支撑所得出的,所以收集用户的信息是十分必要的。

以下我们通过用户群体数据和问卷调研数据(包括用户画像)来确定用户模型。

3.1.1 用户群体

3693772.png

本文根据以上数据,仅锁定一线城市的主要用户群体,也就是高线年轻人群的购票流程优化。

3.1.2 问卷调查

笼统的“对某类用户使用产品的情况调研”是无法提供有价值的调研内容的,调研目的一定是颗粒度可细化的存在。

12306平台的下单耗时长,年轻用户流失率上升,对官方软件槽点颇多,品牌影响较为负面。本次调研,主要针对年轻用户在平台的购票路径,分析该用户群体,在下单过程中的操作节点与关注点,探索用户流失与差评的原因。

3693774.png

我们把社会属性相关的样本数据按不同维度归类,划分用户人群。比如按年龄、行业、职位等维度的典型特征,可以将12306APP的主要用户划分为:在校学生、企业白领、自由职业。

3693775.png

再加以问卷结果描述,得到了高线年轻产品使用者的虚拟画像。3693777.png

在列问卷内容时,要注意12306是火车购票工具类软件,用户目的明确——刚性需求,所以问卷无需过多挖掘需求,而是锁定调研目的,研究APP体验本身,精准投放颗粒度较细的具体问题。如下:

3693787.png

团队花了2天时间,总共发了335份问卷,回收率80%,拿到了268份。图表较多就不详细展示过程了,重在方法。

3693785.png

根据统计结果,我们最终总结出了下列重点问卷结论:

3693788.png

把这些痛点、满意点,包括用户实际接触的界面或功能模块,都归纳记录下来,方便后续将这些痛点进行优化改进。

3.2 确定用户体验场景

保存以上部分的相关数据和结论,我们已经了解了用户(进入角色),接下来要确定用户体验场景了(模拟人生)。

3.2.1 用户行为路径

在做使用场景前,先通过产品设计者视角梳理出产品目前的用户行为路径,这个步骤的主要目的是找出复杂节点,降低操作成本

它需要我们对操作流程进行拆解,将一个流程拆解成几个阶段,阶段又可以拆解成具体的操作节点。这样一来,我们可以分析每个动作节点存在的必要性。

3693789.png

根据上图的4步法,第一步——我们在确认主流程的情况下,罗列所有操作节点:

3693790.png

一定不能怕麻烦,用户所有的动作节点都要罗列。

然后我们要找出复杂的操作节点,也就是可以优化用户操作的节点,当然也不能主观地“我觉得”,用交互量化的方法可以快速帮助我们找到问题点:

1. 把每个操作交互定一个数值,即为操作成本。越是高阶越是隐藏的交互手势越复杂,所谓的“交互成本”也越高。这里我们规则为:

3693791.png

2. 通过简单的加减计算,就可以直观地看到复杂节点在哪里。

3693792.png

3. 通过计算,我们能够直观地看到用户操作最繁杂的部分集中于“选择站点城市”“车次查询”“选择乘车人”这三个操作流程中。此时,重新审视这几项繁杂操作节点,让用户在更少的步骤内完成操作是我们的目标,能一次点击完成的操作绝不让用户点击两次。

4.降低操作成本,可以从2个方面入手优化:对于复杂的节点,降低操作难度,用简单的操作替换复杂的;对于可有可无的节点,大胆地删除,减少操作步骤

3693799.jpg

(由于精力有限,这块内容暂时不过多展开,因为还涉及很多知识点,以后慢慢讲解。当然,感兴趣的同学也可以自行查找资料,或在文章下方评论交流哦~)

3.2.2 用户使用场景

明确了目标用户后,接下来需要我们发挥共情能力,代入用户视角走查产品。           从“带着需求”来(我要买车票),到“完成目标”(买到票)走的核心场景路径,梳理出来粗颗粒度的故事场景 。

【举个栗子】:

场景的梳理,先从颗粒度大的骨干场景出发,举个栗子:假如我们起床到公司这个场景,可以回想一下,在整个过程中我们经历了哪些大的阶段?

——经历了:起床—洗漱—出门—路上—到达。

3693796.png

基于大的阶段,我们可以继续拆分出颗粒度较小的二级故事场景,比如“洗漱”还可以拆解:换衣服—刷牙—洗脸—梳头。

3693797.png

拿到实例中,12306的购票流程是:查询车次—筛选车次—填写乘车信息—提交订单付款—买到票了

切忌在使用场景时流程颗粒度过细,忽略用户使用目的。

【加餐知识点】

这里先讲解一下,场景设计主要分为2类:一是挖掘需求,挖掘用户使用目的及动机;二是研究需求,在已有需求上深入研究和优化。

3693798.png

12306是从1-∞的出行工具类产品,用户的使用目的非常明确——买车票,因此使用场景一定是围绕【研究需求】展开。

运用4W1H场景分析法,我们得到用户使用场景:3693800.jpg

在已经了解用户和确认了用户使用场景的基础上,根据以上得到的结论和机会点等资料,开始绘制用户体验地图。

3.3 绘制用户体验地图

文章开头拆解的组成内容还记得吗?

3693880.jpg

现在召集团队不同岗位的人员,共同努力填补网格空白处。最好从上到下从左到右开始,不用强求全部填满,因为用户体验地图并不是一锤定音的,它是不断分析和反复更新迭代的。

我们得到了用户体验地图成品:
3693881.jpg

3693806.png

用户体验地图是产品用户增长的策略工具之一,绘制完成后根据地图针对用户体验情绪与机会点探索解决方案。

4.1后续工作安排

绘制好体验地图后,工作并没有结束,还有2项重要的工作:

  • 优化机会点:展开头脑风暴,讨论是否能有最佳方案,来满足用户的目标,提升用户满意度、优化体验

  • 安排后续工作:按照情绪曲线、机会点价值大小,梳理优先级,安排后续工作 

4.2探索优化方案

然后根据用户体验地图,按照用户情绪的低(解决痛点)、高(放大爽点)、中(思考分析),分别探索优化。

3693807.png

把所有问题点按照上述分类,首先解决用户情绪最焦虑的痛点问题,其次思考是否能把情绪高点继续优化到极致,让用户更嗨,而用户情绪平缓的地方,要研究分析,继续思考优化空间。

3693808.png

· 中转功能操作繁琐,推荐方案不够智能——减少交互步骤+增加智能方案推荐

· 视觉层级冗杂、票价信息不直观——F型分析法优化+增加票价显示

· 列表页排序算法升级(与产品开发相关,不做案例展示) 

优化点:中转方案的优化

我们增加了智能方案推荐,并把中转车次与直达车次划在同一页面,优先展示直达车次。极大地增加了用户操作的易用性,可直观对比,减少页面跳转和加载等待时间。

3693810.png

通过多稿权重对比,在信息层级、功能突显和视觉样式中,择优选择了最终稿。

3693811.png

复杂节点降低操作成本,切换动效能直观看出阅读效率和易用性的提高。

3693872.gif

优化点:视觉层级优化

通过F型视觉模型和十字交叉法梳理了信息层级,极大的提高了阅读效率。

3693812.png

3693820.png

日期选择由展开点按切换改为滑动切换,提高屏幕利用率的同时,更方便用户操作。

3693873.gif

3693835.png

优化点:增加目的地天气提醒

——情感化设计,魅力型功能,让嗨点更嗨。

3693839.png

3693855.gif

3693831.png

情绪中线以下,都有优化空间

  • · 添加乘车人操作重复、耽误抢票——默认常用已选+页内抽屉拉起

  • · 筛选功能视觉较弱、触点易错——增加视觉识别与触点面积

这是一部分可以不断思考打磨的空间,虽然紧要程度低于用户情绪低点,但是花时间将产品从满足80%的用户到满足99%的用户,即使在大多数人看来是一种性价比很低的行为,但却是提升用户体验的绝佳方式。这也是大厂产品体验良好的原因。

3693826.png

归纳与总结

文章有点长,感谢阅读。下面概括了一些文中的方法论知识点,方便读者回顾。

3693828.png

写在后面

市面上有很多关于产品体验地图的文章,但多数是基于已有产品的劣势去直接绘制地图,绘制地图并不是目的,绘制好体验地图之后怎么分析优化才是目的,用户体验地图本身只是一个可视化工具。我们努力去剖析过程、记录方法论,希望初学者能够知其然并知其所以然。

当然优化之后还是要验证的,最终数据是判断是否真正有效果的标准。关于设计验证的方法及数据指标,大家可以期待一下我们下一篇文章。(爱立Flag死得早啊,这一篇已经快头秃了)

注:文中如有不足之处,欢迎补充交流。

3693853.png


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK