• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 如何做好用户故事地图?来看蚂蚁金服的实战案例!

如何做好用户故事地图?来看蚂蚁金服的实战案例!

作者:付凯文 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含用户体验,用户故事地图,经验分享等相关知识,付凯文希望在学习及工作中可以帮助到您

用户故事地图作为一种常见工具,进入了大家的视野。但是体验地图到底能解决什么问题,该怎么用呢?很多同学也许并不太了解。这次分享主要是将我们在各类渠道了解到的关于用户体验地图的各类说法做了一个总结,并结合了我们在工作中的实际运用,给有兴趣了解该方法的同学提供一点我们的见解和看法。

本文图文内容,来源于蚂蚁金服体验技术部「芝士会」分享。

关键词:中后台、Ant Design、故事地图、需求分析。

本文将分为 5 个部分:

  • 怎么做
  • 提效
  • 价值
  • 总结
  • 相关材料

中后台产品大多通过产品化工具来给用户提效,随着用户的应用场景开始延伸到线上线下各个角落,设计师也开始思考如何从时间空间维度去关注完整的用户体验。

用户发现你提供的产品真正的价值,就像这张封面背景图一样,往往要经过一段旅程,必定不是一马平川。通过我们的专业知识、见解和洞察搞清楚用户这段旅途当中坑在哪里、怎么填才能让用户走的更顺。帮助用户更容易获取产品价值,帮助项目组获得成功。

一. 怎么做?

用户故事地图虽然是一个耳熟能详的体验工具,但事实上当你接触的时候才知道并不容易。其中需要注意的要点很多,能找到的模型也很多样,导致做一个正确的方向变得复杂,结果可能会产出一个适得其反的用户故事地图,或者什么都没有产出,那我们到底该怎么做呢。

我们在支持项目的过程中,初期会选择采用「故事编写工作坊」的形式来梳理产品的用户故事地图。一般是项目组成员共创的形式,参与人员包括:技术开发、产品经理、项目经理、设计师、用户、产品老大。

重要流程分成四个步骤:产品定义——梳理骨干故事——拆分故事——沟通确认。

下面我简要介绍下这四步分别需要做哪些事情。

第一步:产品定义

一般是在故事编写工作坊准备阶段,首先由PD提主导产出,主要有几点内容:

  • 产品的目标用户
  • 解决了哪些问题
  • 用户目标
  • 产品目标

将这些内容记录在黑板上,与大家讨论达成共识,最终确定产品定义。简单来说,需要明确「我们为什么要做这个?」以及「用户为什么要用这个?」明确业务诉求和用户诉求为之后的设计提供了指导,不仅可以在接下来讨论的过程中不易迷失方向,还可以避免陷入设计细节的纠结。基于业务诉求和用户诉求其实就是为了不忘初心,是为了明确设计的初衷。所以,在做交互设计之前,一定要问自己这两个问题:「这能给我们带来什么价值?、这能为用户提供什么价值?」这一步可以让项目组内所有人和用户共同明确产品覆盖的整个范围。

第二步:梳理骨干故事

为了方便大家理解,我在这里举一个大家生活都会发生的例子。故事的整个范围:起点是起床——终点是到达公司。闭上眼睛,回想一下今天早上起床的过程。把这段故事分成这样几个阶段,起床——洗漱——穿衣——出门——上班途中——到达公司。

在真实做项目过程中,大家在这一步可能会写出不同颗粒度的故事,需要设计师把控故事的大小,这段故事可以再往下梳理一层颗粒度更小一点的故事。比如起床就可以再拆分为:闹铃响了——挣扎——关闹钟——下床。剩下的故事卡片都可以继续这样拆分归类。

这样我们骨干故事就有两层:一级故事和二级故事,故事的发生从左至右是一个叙事流。

这里需要注意的是,在真实业务中,故事的流程不可能是一帆风顺的,情况会变得复杂,我们可以借助流程图的图例线连接我们的故事卡片。

总结一下,我们在这步怎么做的。首先,我们在第一步确定产品整体范围之内尽量的把故事讲完整,比如我们这个例子,起床——洗漱——穿衣——出门——上班途中——到达公司。这样我们项目组的所有人就可以对整个产品有个全局的印象。其次,我们需要注意是要讲完整的故事,但是一定要广度优先,而非深度,要做到一公里宽一厘米深。比如刷牙这个故事里面,找牙刷、挤牙膏这类故事在这个阶段我们无须关注,不要过早的沉浸到细节中。在这步让大家做到对产品只见森林不见树木的状态。

第三步:拆分故事

在这一步,我们需要在刚刚梳理的每一个二级故事下面做停留,去拆分二级故事获取更多细节内容。如果二级故事是一个海平面的话,那二级故事以上就是海平面故事,那现在我们需要关注的是海平面以下更多不可见的故事。项目组会围绕这个故事写出很多细节来。我们可以按照以下几个维度对细节进行归类,分别是:故事细节、想法、痛点、机会、情绪。其中情绪可以通过固定的问题获得,也可以通过用户想法、用户的痛点结合主观判断。

在这个过程中,先让大家在一定时间内按照自己的想法写出来,每一条写在一张卡片上,做到相互不干扰,然后每个人出声说出自己的卡片内容,让所有人了解并贴在墙上。

项目组人在写想法的时候,相当于脑暴的过程,这时可以通过一些问题来刺激大家脑暴出更多的内容,比如:

  • 用户在这步具体做什么?
  • 用户还有其他选择么?
  • 用户怎么做才能更爽?
  • 出现问题如何处理?
  • 其他用户来到这里该如何处理?

回到我们的例子,我们洗澡的时候有正常的流程,但当没有热水时这个流程就会发生变化。同样,在真实业务当中,这类情况将更普遍的发生,所以这一步我们将尽量多的关注到所有场景的故事。

做完这步,我们已经获取到了足够多的细节信息,整个项目组都会做到对产品又见森林又见树木的状态。

第四步:沟通确认

这里我们的故事已经变得很丰满,甚至变得臃肿,所以沟通确认变得极为重要。我们在这步需要花费相对多的时间,大家对内容进行对标、充足讨论,把公认的留下来,无用的剔除掉。同时可以区分要做的故事细节的优先级。

依次类推,当所有故事梳理完成之后,就完成了如下这样一张完整的用户故事地图了。

总结一下。首先,我们需要对大家写的所有卡片进行对标,排除无效故事。其次,因为我们一般项目时间不够,开发资源紧张,不可能一口吃个胖子,所以把要做的事情达成共识排出优先级变得尤为重要。最后,并不是所有的故事卡片都需要在同一时间细化,在真实业务中有些模块的故事是无法一开始就梳理清楚的,所以可以先写个占位符,待合适的时机再做拆分。

我们通过这种一目了然、格式一致的故事地图,让项目组所有人都获得足够的信息,让项目有一个明朗的开发流程。

回顾一下,我们通过这四步梳理出产品的故事地图,这中间还有很多细节要点,会在今后再整理总结分享给大家,本次不做过多描述。

在真实业务落地的时候会发现,因为一般项目时间都非常紧张,这样一个完整的流程会显得比较重,耗费时间,所以我们一直在思考如何提效。

二. 提效

我们目前通过三种方式提效,分为事前——事中——事后。

1. 事前

我们制作了Excel故事地图准备模板,可以在故事编写工作坊开始前的一到两天发给参会人员,让所有人能够相对结构化的对产品有一个整体的梳理和思考,这样可以帮助在工作坊中提高产出数量和质量。

2. 事中

如果是需优化的产品,我们可以将设计稿demo或者线上

您可能想查找下面的文章:

  • 用户体验的76个体验点小结
  • 好的网站文案 良好的用户体验
  • B2C 网站用户体验细节设计参考
  • 该有的视觉元素全都有,设计不好到底差在哪里?
  • 对于「以人为中心」的设计,你的理解可能太浅显了
  • 为什么大家都想学服务设计?来看CEO 的亲身经历!
  • 在做产品设计的时候,预期和现实到底有多大的差别?
  • 设计出了错?很有可能是你没有问对问题
  • 为什么不要再问用户「你们到底想要什么」?
  • 设计好看但没人用?6个技巧告诉你到底该如何影响用户!

相关文章

  • 2018-08-236个小技巧帮你从线框仔进阶成UE设计师!
  • 2017-08-06网页核心内容的视觉表现方式介绍(图文)
  • 2018-08-23用Framer的实例,说说设计师学习代码的那些事
  • 2018-08-23实战案例!视觉设计练习学到的3个小技巧
  • 2017-08-06MIME的编码介绍(由网上资料和实践经验整合)
  • 2017-08-06人人必知10个网站易用性技巧
  • 2017-08-30Ext.windows.Windows中autoScroll:true 配置无效,不出现滚动条
  • 2017-08-06IE下打开ClearType后透明字体问题的解决方法
  • 2018-08-23设计师如何根据行业变化建立知识管理体系?
  • 2018-08-23顶尖高手的经验!Facebook的产品设计师是如何思考的(二)

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 黑白灰低调大气范的网页设计欣赏
    • 掌握这5个方面,让你具备真正的交互设计思维!
    • 全球iPhone摄影大赛人物类冠军:如何提高手机摄影水平?
    • AI+AE教程!手把手教你做出Game boy的飞机大战游戏
    • 网站中的关于页面介绍内容怎么写
    • z-index为负值的元素无法点击到的解决方法
    • 网页色彩对比与调和技巧分享
    • 负距离(换位思考)-相互影响的迭代过程
    • 浅谈响应式设计
    • 大产品小细节!5分钟了解格式塔原则

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有