交互设计流程的“闭环”问题

交互设计师有一项很重要的工作就是定义任务流程。在接到需求之后,设计师需要把抽象的需求设计成具象的流程,然后再把流程分配到不同的界面,最终形成成品。设计流程不难,但是设计好的流程非常难。举个简单的例子,注册这个流程可以这么定义:

交互设计流程的“闭环”问题

交互设计师有一项很重要的工作就是定义任务流程。在接到需求之后,设计师需要把抽象的需求设计成具象的流程,然后再把流程分配到不同的界面,最终形成成品。设计流程不难,但是设计好的流程非常难。举个简单的例子,注册这个流程可以这么定义:

交互设计流程的“闭环”问题

注册流程

这么一看,确实很简单。但是这是一个好的流程吗?比如填写手机号码的时候发现手机号码已经注册了,这个时候需要怎么办?比如获取不到验证码怎么办?这些细化的场景如果没有考虑到的话,流程就会变得很晦涩难用。

怎么去寻找细分的场景一直是流程设计中一个难题,这部分以后会谈。所以,今天我主要是从“闭环”这个角度来讲讲流程设计中的优化问题。怎么去构造交互设计的闭环,我主要从以下几个维度去讲:①打通断头路;②设置延长线;③开辟新岔路。每个流程就好比一条路,所以这里借用交通领域的名词来说明,理解起来更加形象生动。

1、打通断头路

断头路,顾名思义就是流程走到某个地方,虽然目标还没达成,但是路径已经中断了。如果现实中遇到断头路,司机肯定是一顿怒骂然后沿路返回,再选择新的路。在流程中,如果用户遇到断头路,有可能用户会沿路返回,然后去尝试新的流程,但是也有可能是用户会直接流失掉。如果流失掉客户,那么损失可就大了。所以,在做流程设计的时候,首先就要看看有没有断头路,然后要把断头路都打通。

回到一开始的例子,我们来看看这个例子中可能出现的断头路。在填写完手机号码之后,一般都会有个检验的功能,首先会检验输入的是不是11位数字,接着才会检验是否已经注册。如果已经注册了,一般至少都会弹出一个toast“该手机号码已注册”。流程如下:

交互设计流程的“闭环”问题

注册流程(增加toast提示)

如果按照这个流程走,就出现了我所说的断头路。在注册/登录流程,用户的目的很明确,就是要注册或者登录以使用应用,如果没能达成这两个目的就中断,用户的任务就无法完成,用户当然会很不爽。所以,如果只是弹出一个toast“该手机号码已注册”,这无疑就中断了用户的流程。

那么要怎么进行改进呢?最简单的就是把提示文案修改一下“该手机号码已注册,请直接登录”,通过文案的引导,可以让用户知道后续要做什么。不要小看加上去的这几个字,因为我们无法揣摩用户的状态,所以我们不能保证用户时时刻刻都很清楚他在干嘛,他接下来要干嘛。针对这种情况,交互设计有一个“可学习性”的原则,简单地说就是,我们要一步步告诉用户,他应该怎么做。其中,文案的作用至关重要。

当然,现在这还不是最好的方式。最好的方式是什么呢?我们来捋一捋现在的场景。现在是用户的注册流程被打断了,为什么会被打断呢?因为用户已经注册过了。为什么用户会现在还注册一遍呢?因为他想进入应用使用。所以呢,既然我们知道用户走到了断头路,我们也知道用户想去哪?那么最好的方式就是告诉用户:“嘿,这条路走不通了,但是这里有捷径哟”。具体实施起来就是用一个弹窗进行引导,如下图:

交互设计流程的“闭环”问题

弹窗提示直接登录

然后做的再细致一点,因为用户已经填写了手机号码,登录的时候就不需要用户再填写一遍了。还有,不要忘了登录页面的“忘记密码”选项。

回头再来看看设计中的断头路,还有哪些情况。比如说搜索不到内容,这时候就相当于一个断头路。假如这时候提供一些推荐的相关的关键词,就相当于打通了断头路。比如说,下载资源没速度,这也相当于断头路。旧版迅雷会推荐相似的资源,这就像打通了断头路。再比如说,chrome浏览器连接不到网络,断头路又出现了。chrome会推荐一个小游戏给用户玩(具体可以见消灭空状态),这也相当于打通了断头路。

总之,在流程设计中要特别注意可能出错的节点,谨慎避免断头路的出现。

2、设置延长线

如果说打通断头路更多是站在用户的角度去进行设计,那么设置延长线除了是为用户考虑之外,还有一部分是为了产品本身考虑的。具体做法就是,当原来的任务已经完成的时候,但这时候又推荐一些任务给你做,流程变得比原来更长了,这个新加入的刘晨就是我所说放入”延长线”。乍一看,这好像违背了交互设计的简洁性,无端端把流程变长了,就不需要考虑流程的用户流失率吗?当然不是,关于这一点,还让我细细说来。

之前在手机管家实习的时候,正巧是手机管家从5.x到6.x的升级改版项目。这里稍微解释一下,手机管家是一款工具型应用。你可以把手机管家当成瑞士军刀,是一堆工具的合集。在5.x的版本遇到有个问题就是,部分功能的渗透率非常低(注:渗透率就是一个功能的使用率)。通过调研分析,得出两个方法,其中一个就是整合功能,把原先20多项的功能整合到10多项,减少选项的确有助于让用户做出选择。第二种就是这里讲的“设置延长线”的方法。具体的做法就是通过高渗透率的功能去带动低渗透率的功能。比如说,在某个操作完成之后,除了结果反馈以及完成按钮之外,可以推荐用户做另外一些操作。通过这种流程的优化去带动其他的功能,从而提高整体功能的渗透率。如下图:

交互设计流程的“闭环”问题

完成页的推荐任务

你可能会说,那这样不会有问题么?流程不会变得很长很长么?结果反馈页不会变得很复杂么?

关于结果反馈页的问题。没错,页面会变复杂,但是页面简单并不是我们的目的。我们的目的是通过页面去引导用户,所以可以通过页面内容的大小对比、颜色对比来解决页面复杂的问题。同时,交互设计是一个平衡用户需求和商业需求的职位,所以,有时候为了商业需求也需要牺牲一点用户体验。

第二个是流程变长的问题。这个问题是这样子的,用户可以选择像之前那样直接完成任务即可,所以我们只是增加了选择成本而已。其次,如果我们推荐的功能刚好是用户需要的,那么用户当然会很乐意继续操作下去。最后,不是每一项操作完成之后都会紧跟着一些推荐功能。当流程过长时,我们可以关闭这个“设置延长线”的功能,只留下结果反馈元素和“完成”按钮。

小结一下,设置延长线相当于把应用不同模块之间做一个串联,一是可以提高功能模块的渗透率,二是如果串联的功能恰好是用户需要的,那么同时也会提升用户体验。只是,怎么样“恰好”推荐到用户喜欢的功能,这个需要多方调研以及用数据做支撑才行。

3、开辟新岔路

一般来说,正常的流程应该是线性的,这样的流程最简单,用户使用起来也没什么压力和成本。但是,这仅仅只是正常的流程。交互设计需要考虑复杂的异常流程,这也就导致了好的流程更像一张网,有无数的岔路,每个岔路还可能有岔路,岔路走着走着可能又回到原点,最终,所有的路径都会汇集到一个或者多个终点。

这是普通的情况,但是也有特殊的情况。比如说我现在要讲的这个“开辟新岔路”,如果说前面两个方法都还是为用户着想的话,现在这个方法更多的是为产品运营方着想的。开辟新岔路是说在正常流程的某个节点,分岔出新的流程,最终分岔的这个流程还会回归到正常的流程。

如下图,蓝色代表普通的流程,但是现在插进去了一些新的节点,就是橙色的点,这些橙色的点构成的流程就是我所说的新岔路。

交互设计流程的“闭环”问题

新岔路

这么说还是很抽象,我还是通过例子来说明吧。购物车是购物应用里面一个非常常见的功能,用户在使用购物车的时候流程是这样子的。

交互设计流程的“闭环”问题

购物车使用流程

但是,真的是这样么?在查看购物车的界面,其实除了购物车的内容,还有其他的内容。如下图:

交互设计流程的“闭环”问题

京东购物车界面

购物车页面其实还有一个推荐商品的部分,如果用户恰好在这里发现自己需要的商品,就很有可能会跳转出去浏览,然后再回来购物车进行结账。流程如下:

交互设计流程的“闭环”问题

京东购物流程

这一个跳出去的动作就是我所说的岔路。在电商这个场景下,岔路的意思就是要让你多“逛”一下,万一你再看重别的东西,电商不就多赚一点么?同理,岔路还适用于其他适合“逛”的产品,比如说资讯阅读类产品等等。对于其他产品,这种方法就要慎重了。因为有可能岔着岔着用户就不回来了。除此之外,岔路的设置也会使得界面变得更加复杂,用户有可能会迷失掉。

不过,我们可以从结果推导一下:既然现在电商的购物车普遍都用了这种方法,说明它还是切实有效的。所以,是否选中这种岔路,不仅需要基于自身产品的属性来考量,更重要的是要从上线之后的数据来观察。

好了,讲到这里,我对于交互设计流程的闭环问题也就讲完了。总结一下,闭环实际上是一种“串联”,把同个功能模块下的不同流程串联起来(打通断头路),把不同的功能模块串联起来(设置延长线),或者是自己把自己串联起来(开辟新岔路)。这种串联有为用户着想的,也有产品方面的考量。但是不管从哪里出发,在设计交互流程对这些闭环进行思考,整个交互流程才会变得更加强大和完整。

#专栏作家#

妖叶秋,一年级交互设计师,人人都是产品经理专栏作家。做过ToC产品的交互设计,现在在尝试ToB的业务。主攻交互,也懂点用研、视觉和产品的知识。爱生活、爱设计、爱读书、爱总结,头像下方是我的联系方式,欢迎志同道合者与我交流。

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

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/30089/

(0)
CatherineCatherine
上一篇 2017-05-27 03:01
下一篇 2017-05-27 05:05

相关推荐

  • 【STARCAST】用Sketch表现不了的"孝敏"清纯日常画报

    ——还没关注?点击上方蓝字——大家好。STARCAST的家族们!!!!!!我们孝敏终于携Sketch回归了,这是她的第4次STARCAST!如果觉得我们孝敏已经展示了她的全部,那你就错了!她还有很多都没有展示给大家哦!今天就为大家送上,脸也没法用Sketch来表现,身材也没法用Sketch来表现的孝敏隐藏的一面,就像日常生活一样的画报,就像画报一样的日常生活照!这个秘密只告诉STARCAST 家族的大家哦,不是秘密>.大家已经开始紧张了...

    2018-03-02
  • 值得你深入了解的交互设计五大支柱

    1、用户角色(Persona):Persona文档(控制在2~5个)通常需要包含你的目标用户。作为Persona中的虚构的角色,它的属性和特征是 基于产品研究和用户定位来设定的,用作后续设计过程中所面对的“理想用户”,本质上,它就是一个占位符。作为人物设定,其中会包含个人信息,远不止于年龄 和收入信息这么简单。Persona 文档的目标是利用角色来验证你的目标用户是如何感受如何看待你的设计的。
    2、移情地图(Empathy Map):它像是一个轻量级的Persona文档,在资源短缺时间紧的状况下,可以使用这个文档。Empathy Map 将 Persona 中的角色的个性和性格部分移除了,更加专注于用户在特定情况下的感受。
    3、用户剧本(User Scenario):如果Persona 是帮你设计了一个故事中的角色,那么User Scenario 就是故事的剧本。用户剧本通常是围绕着一个特定目标来设计的。比如说,第二天是母亲节,要为母亲预订一份礼物。目标很明确,要达成目标,用户需要点击几次 按钮,走哪些流程,需要多长时间,如何在过程中融入情感,贯穿始终。对整个用户流程有了预判之后,设计师对于UI和UX的设计就有了把握。
    4、用户地图(Customer Journey Map):这份文档同上门的用户剧本很像,但是它比起前者跨度更大,贯穿体验设计始终。设计人员可以对产品的背景有更深入的了解才能更好地设计,而产品投 入使用之后也不是最终结束,这也是跨度如此之大的原因所在。用户旅图将会涵盖角色信息、用户剧本和移情地图的全部信息。这么设定并不是要让用户旅图成为一 个大杂烩,而是要将用户性格和用户流程、交互过程结合到一起来看待问题,每个阶段不同环节,都牵涉到不同的情绪和情感。Affordance 是 James J. Gibson 造出来的一个词,Gibson 是20世纪最重要的认知心理学家之一,他的生态学式视知觉论和直接知觉为认知心理学开辟了新的领地。affordance 是 afford (提供、给予、承担)的名词形式,环境的 affordance 是指这个环境可提供给动物的属性,无论是好的还是坏的,所以我认为“可供性”是一个合适的翻译。Gibson 用来解释 affordance 的例子是这样的:如果一块地表面接近水平(而不是倾斜的),接近平整的(而不是凸起或凹陷的),以及充分延伸的(与动物的尺寸相关),如果地表面的物质是 坚硬的(与动物的重量相关),我们可称它为基底、场地或地面,它是可以站上去的(stan-on-able),可让四足或两足动物保持竖直姿势,它是可以 行走(walk-on-able)和跑动(run-over-able)的,它不像水表面或沼泽表面之于一定重量的动物那样是可陷入的(sink- into-able)。列出的四项属性——水平、平整、延伸和坚硬——它们是这个表面的物理属性,如果以物理中使用的度量衡去衡量它们的话,但是对于特定 动物的支撑可供性,它们必须与动物关联上才可以被衡量,它们不是抽象的物理属性,它们是为所指动物特定的,与动物的姿势和行为相关,所以 affordance 不能像我们在物理中那样来衡量。能指和所指是语言学上的一对概念,能指意为语言文字的声音,形象;所指则是语言的意义本身。按照语言学家或者哲学家们的划分,人们试图通过语言表达出来的东西叫”所指”,而语言实际传达出来的东西叫”能指”。

    2017-06-04
  • 互联网产品开发阶段,几个典型阶段

    在互联网产品开发阶段,通常要经历以下几个典型阶段:确定用户需求和产品目标、概念设计、原型设计、界面设计、信息设计、视觉设计、前端开发、用户体验测试、产品完善、产品发布等过程。当然,这些阶段的划分有时…

    2015-12-23
  • 嘿,快点!这些小程序岗位正在被疯抢...

    招聘旺季,很多人都在考虑是不是要换(炒)个(老)新(板)环(鱿)境(鱼)。听说小程序很火,但小程序公司实在太多太杂,万一遇到“小程序教母”可肿么办!我们花了整整两天时间,综合参考企业规模、融资情况及阿拉丁排名指数优选整理出来第一期12家优秀小程序企业招聘岗位,希望能够帮助优秀的人才快速找到优秀的企业。何必东奔西走,这里可能就有!美团点评北京三快科技有限公司美团点评公司是全球领先的一站式生活服务平台,为超过6亿消费者和和超过450万的优质...

    2018-03-12
  • 如何完美碾压用户体验职位面试

    作者: Patrick Neeman |  翻译:Shea ,校审:Ariel本文长度3082字,建议阅读5分钟当你成功进入了电话面试或者面对面面试的阶段,这就意味着你已经通过了最艰难的考验:你已经具备了在该公司工作的技能。现在要被评估是否具备软实力以及能否适应公司的文化。在上次西雅图用户体验组见面会主持的谈话之后,我发现很多公司没有在面试中明确表达对面试者的期望,而且并不知道如何去面试。面试的过程其实是个自我展现的机会,作为设计师来说...

    2018-02-07
  • 如何改善产品 UX 设计,这 5 条原则也许能帮到你

    本文编译自Medium,作者 Clark Wimberly 是一位用户体验(UX)设计师。

    2017-06-04
  • 打造优秀语音交互体验的设计建议

    点击信息与交互设计关注我们!欢迎大家踊跃投稿哦!投稿邮箱:iidc@iidc.org.cn回顾人机交互发展是「技术进步」与「载体创新」交替螺旋促进在推动着人获取信息的效率不断提升,成本不断降低。AlphaGo先后打败李世石和柯洁,百度发布自动驾驶系统「阿波罗」这一次由AI引领的技术进步正在发生。基于大量纯净数据的深度学习给人工智能带来的了巨大的进步,这种进步主要体现在三个维度。认知能力– 基于用户行为的画像,将人机交互从「单向」关系带入...

    2018-01-30
  • 交互设计就业前景怎么样?

    交互设计师/用户体验师 5年内22倍增长需求。在我几年前选择交互设计这个专业的时候还没有什么人知道是什么。还是蛮有趣的,就是想尽一切办法让用户满意。国内以前只有浙江大学才有这个专业,现在应该很多大学都有了…

    交互专题 2016-10-25
  • 应用中的游戏化设计

    作者:_Ammy   游戏借着其互动性、反馈性、挑战性、快速成长性等特点,拥有着让玩家长期专注于其中的神奇力量。而若将游戏的这些特点引入到一般的产品设计上,也可能会产生意想不到的效果,这就是游戏化。游戏化的…

    交互专题 2017-08-07
  • UED新刊 | 马岩松:梦露十年

    UED105期《MAD国际实践专辑》现已开始预售更有30本马岩松亲笔签名版,只限预售!具体购买详见文末互动福利PART 1新刊导读尽管频频有人发问,中国建筑为何迟迟未能冲出亚洲、走向世界,然而这是个太过深广的课题,涉及文化、经济、 政治、意识形态等等诸多方面,并不是三言两语甚至是一期杂志就能说清楚的。在这样的大背景下,马岩松和他的MAD 建筑事务所在国际上的实践探索,便分外独树一帜、另人瞩目。2004年,马岩松在纽约创办MAD建筑事务所...

    2018-02-07