当设计一个页面/功能时,先从设计用户流程开始吧

8 评论 15463 浏览 123 收藏 9 分钟

在激烈的比赛中取胜的往往是那些把技能锻炼得更深刻的选手。我们能成为顶尖选手并没有什么秘诀,而是对可能是基本技能的东西有更深的理解。每天都要学得更深一点而不是更广一点,因为学得更深可以让我们把潜力中那些看不到、感受不到但又极具创造力的部分挖掘出来。——国际象棋大师&业余太极推手世界冠军,乔希•维茨金

最近在Udacity学习老美的产品设计课程,我以为会吸收不少先进的产品理念,但只是一再强调那些我早就「看不起」的基本概念、基础注意事项。

他们特别强调对于这些基本功的严格执行。就像一开头我引用国际象棋大师说的那句话一样,「我们能成为顶尖选手并没有什么秘诀,而是对可能是基本技能的东西有更深的理解」。其中一个让我印象深刻的是关于用户流程图的设计。

流程图,我相信在互联网公司待过的同学再熟悉不过,产品会用到流程图、设计会用到流程图、开发测试也会用到流程图。

在我工作的时候,没有做出过一次让设计/码农0疑问的流程图,我把大部分的精力放在了产品/网站的视觉表现上,甚少思考流程里有什么改进空间,甚至有时候因为功能简单连流程图都懒得去想去弄了。

这个课程里提到我们在产品设计开始时会犯的两个典型错误:

  1. PM因为旧版本不够时髦/好看,进行产品设计;
  2. PM用堆积木的方式来设计产品,比如LOGO放上边,登录模块右上角,界面采用左右布局等等。

看了以后内心特别惭愧,自己就是这么干的。

顺序错了。我们应该从「完成商业目标」和「帮助用户完成任务」开始,你希望用户来到这里干什么,他们要经历多少艰难险阻的操作才能最终完成你的任务,你怎么设计这些操作使得用户减少用户投降放弃的比例。

设计不只是设计它长得漂不漂亮,更重要的是设计它好不好用。当我们设计一个页面/功能时,先从设计用户流程开始吧。

时刻提醒自己的两件事情:

  1. 产品/项目目标是什么,这是你让一堆设计师程序猿加班加点围着你团团转的原因;
  2. 用户目标是什么,他们有什么需求要满足。

留意用户的来源

用户从四面八方过来,质量参差不齐,对于产品和信息的了解程度也不同,设计流程的第一步就是为不同的客源设计流程(也许到后面你发现他们的流程都一样)。

他们可能是:

  • 搜索引擎主动找过来的;
  • 你发布的广告骗过来的;
  • 被朋友圈微博吸引来的;
  • 正在使用你网站/产品发现的;

……

这些人各自「心怀鬼胎」,你得把他们的需求和你的诉求想办法匹配起来,提升转化率。

举一个之前迅雷会员开通(但我们没做好的)的流程为例,我们的流程是:

高速通道试用→ 试用效果展示/会员介绍→点击「开通会员」→登录/注册→支付页面→完成支付、开通会员

这里我们思考得就不够勤快,没有针对不同用户设计流程,也不愿意给自己添麻烦。我随便举一下针对不同用户群改进思路:

1、曾经是会员但现在没续费的

沿用上面流程,但在支付时候可以记住上次支付方式,或者是在支付时提供给老会员买年费的折扣;

2、没有账号的用户

他可能只是想看看价格再决定买不买,但登录/注册的流程会挡掉一大部分人。

提供用QQ登录的接口,或者是直接直接到支付页,在页面填写自己的邮箱/手机,支付完成给他们的邮箱/手机发送密码(当然涉及到已经有账号或者这个邮箱手机被注册了怎么办的逻辑分支)。

如果把流程图更细化、更多一点思考,我相信还能想到更多提升转化率的改进方法。

一些改进用户流程的思考方法:

  • 用户来这里有什么需求?他们有什么问题要解决?(空虚寂寞孤独冷的夜晚怎么打发)
  • 他们为什么需要你提供的东西?(提供给他一段美好的个人时光)
  • 你的产品/服务对于他们最重要的特性是什么?(速度快?立即能看片?)
  • 用户有什么担心,他们犹豫什么?(太贵了,有没有效果?)
  • 什么信息能够帮助他们做决定?(3天无效退款)
  • 有什么情绪或者冲动能帮他们做决定?(精虫上脑)

这些问题靠自己YY肯定是不够的,这就促使你要多跟用户交流了。交流的时候,你发现会有千奇百怪的用户,如果你为每一类人定制专门的流程,就算你不累死设计开发也会把你打得半死.

这其中的取舍就依赖于你的判断了(要不然老板给你的工资是干啥用的啊)。

「流程」里要有些啥?

我自己以前画的用户流程,着重点是不同状态间的逻辑跳转。课程提供了另外一种方式提升可用性,我觉得非常赞。它将一个流程分成上下两部分,上面是「用户看到什么」,下面是「你要用户做什么」。比如:

微博桌面截图_20161013105845

使用这种方式,可以让你专注于怎么提升用户的行动上。给其他同学看的时候可读性也更好(不像我之前的流程图,实际看的人没几个)。

做的时候可能会比较痛苦,以往的流程只需要考虑状态之间的跳转就好,而这种方式增加了用户可见内容跟要用户行动的内容。但这种工作量的增加是值得的,我自己在做练习的时候,就会时刻提醒自己不忘最后的目标,这些信息是不是有助于提升用户的点击、哪些动作要简化哪些要增加。

值得模仿的网站

作者提供了两个在用户流程方面很不错的网站作为学习对象,一个是tastebuds.fm,一个是codecademy,都不需要翻墙就能直接访问。计算是花个5分钟浏览一下,也能给你带来不少的收获哦。

1、https://tastebuds.fm//

2、https://www.codecademy.com/

#专栏作家#

黎晨,微信公众号xiaochenxiangtaiduo。人人都是产品经理专栏作家,毕业后在迅雷服役8年,从零开始参与迅雷史上最赚钱业务(迅雷会员)的大部分工作。做过c++工程师、数据分析师、迅雷会员运营总监,在付费用户运营上有很多一线实战经验,可惜还没能把工作当玩耍。

本文原创发布于人人都是产品经理,未经许可,不得转载。

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 可以做个案例分析下您的理论用法么?添加了用户分层、前端展示和用户操作的维度,岂不是泳道图(表述业务流程图的一种图)的做法?
    用户流程图到底是什么?用来做什么?盼解析

    回复
  2. 我总结流程图有四个元素:对象、动作、数据、状态。
    对象:指操作动作的人、系统等,提前搞清楚哪些对象需要执行(查看)动作来修改数据或者状态。
    动作:对象通过对象来改变数据或状态。
    数据:数据是核心。
    状态:状态是一种特殊的数据,它的作用在流程图中就是用来判断执行不同的动作。

    流程图多修改,若画出复杂的流程图,从全局一看,减少其中多余的对象或动作或数据或状态,可能流程就清晰了。

    其实我有空还是喜欢做原型,通过设计、产品、开发一起来做动态的原型,更加直观。但比较耗费精力,那得配一个高效精干的团队才能驾驭。

    回复
    1. 可以详细再讲讲吗

      来自上海 回复
    2. 不实用的逻辑思维

      回复
  3. 说的都很“正确”,总结下来就是以实用为核心,考虑不同的场景状态。其实,越往深处走,应该是大而全的整体性思维,它或许是一种固定的思考模式。

    来自广东 回复
  4. 有启发👍

    回复
  5. 如果可以把那两个网站也举例分析一下就更好啦!

    来自北京 回复
  6. 😉 您好,我在站酷网上转发了您的文章,已经注明转发自您的文章 😯 并附上了这里的地址。如果您想删除请联系我。我会自行删除。感谢您的分享。

    来自山东 回复