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

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

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

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

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

注册流程

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

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

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

相关推荐

  • 中国交互设计“教父”辛向阳老师首次线上分享会来啦

    应集创堂的邀请,中国交互设计“教父”辛向阳老师将在4月20日为大家带来首次线上分享会!辛老师是卡耐基梅隆大学设计哲学博士,是目前很少数在美国获得设计哲学博士、并首个回到中国内地的华人之一。有着跨多个学科的教育和工作背景,包括机械、建筑、平面设计、油画、交互设计以及艺术史。同时,辛老师还是IXDC(交互设计国际大会)大会主席,提出了“交互设计五要素”和“行为逻辑”等交互设计领域的重要理论和方法,并在香港理工大学成功创办了中国首个交互设计专...

    2018-04-17
  • 专业的网页风格指南应该如何制作?

    文案规范
    视觉指南

    配色方案,包括每种色彩的具体参数,以及其他可接受的色调
    字体和排版方案,包括每个部分的字体类型、尺寸、字重以及具体用法
    LOGO,包括它的样式、变体、尺寸以及位置的说明
    拼写、关键词的选择、文案的风格(包括按钮、社交媒体等)
    图片使用规范,包括色彩、裁剪规则和视觉表现方面的标准
    SEO信息,比如可选的标签和关键词
    栅格标准(主要用作网页排版和印刷)
    空间与留白方面的说明(设计的松紧度等)
    关键点的说明(团队成员可能会提出的问题或者有待澄清的点)

    在内容表述上不要限制太多,这毕竟是风格指南,重点是视觉上的引导,设计是核心;
    将相关、相联的条目整合到一起做快速指引:一个页面介绍色彩,在另外一个页面做排版的规范等等;
    用图片案例来展示界面应有的外观,而不要单纯用枯燥的文字来做介绍;
    提供可用的具体说明。比如配色方案中提供色彩的RGB或者CMYK的具体值,确保色彩的运用能够一致;
    将一部分的设计案例分解说明,确保每个元素的功能和使用规则都足够明晰;

    2017-05-22
  • 柴静是个好的产品经理

    这几天,柴静刷屏,有捧有踩。但是从创业者的角度,谨以此文向由文艺青年找准路线之后成功转型的优秀代表柴静,她不仅是一位优秀的新闻工作者,还是一位极好的产品经理。 她做了一个很好的示范,互联网的时代如何打…

    2015-03-05
  • Axure实验室 | 带放大效果的轮播图

    提起轮播图,相信大家已经非常熟悉了,脑海中自然而然的会浮现出轮播图的交互效果——几张图片,可以逐一的左右切换显示,而每次只能显示一张。这是最基本的轮播图,当然,我今天要讲的不是这种。还有一种轮播图,会同时显示三张图片,中间的图片会放大显示(相比左右两边的两张会大一些),像下面这样。阅读原文预览然后左右切换的时候(通过点击左右按钮或者左右滑动),左右两边的图片移动到中间位置时会动态放大,而中间的图片移动到左右两边时会动态缩小。另外,这种轮...

    2018-03-15
  • 产品设计之行为学研究,四步打造影响力超高的产品!

    我们每天都感叹“改变”有多难——落空的新年计划、从未使用的健身卡、东西少吃点、存款留多点,可惜都止步在了yy。

    2016-08-29
  • 光鲜背后:Pokemon Go的用户体验现状

    今天,我像往常一样走路去上班。但我不是孤身一人。在我周围,从店铺与餐馆门口的人行道,到城市公园里的绿色草坪,人们举着手机四处徘徊。小巷和公园入口这样的普通场所,聚满了人,在计算机算法作用下随机地聚集起来。这就是Pokemon Go。

    2017-05-21
  • 如何让设计效果可量化

    前言: 做搜搜这些年一直沉浸于重点工作中的项目,除了定时写项目总结与培训。都快忘记写文章很抱歉。这次终于有了重新学习机会,应该多写。 长久一来也是思考如何让我们每天面对的工作内容更直观价值体现与量化。 …

    2015-04-13
  • 交互设计中的人为本与用户需求究竟谈的是什么?

    以人为本和建立用户需求,是开展交互设计的首要任务。以人为本指的是:理解用户,理解人的感知和认知的本质,分析用户的思维模型。如何理解以人为本以人为本的两种理解:人本工具论之说和人本实质伦之说。人本工具论:这是从统治者角度出发的,出于实现自身利益的需要,把以人为本作为实现其利益的一种手段。这是伪以人为本、虚假的以人为本。人本实质伦:这是从人的立场出发,以人的自身角度研究问题的“人本观”作为出发点。在满足人的需求时,还应考虑对交互系统可持续发...

    微信热点 2018-02-26
  • 叶云燕:不懂用户体验,没有互联网思维的代理人,迟早会被淘汰!

    第1937期|编发/保险论坛互联网时代,到处都在谈如何用互联网思维做生意。有人用互联网思维卖奶茶,销售额翻倍;有人用互联网思维开理发店,已获得数千万融资;有人用互联网思维卖衣服,年利润过亿;而当我第一次提出要用互联网思维卖保险时,很多人都感到茫然,认为这不过是赶时髦,蹭热点。保险代理人的新机遇事实上,互联网时代的到来,对保险代理人来说是一个前所未有的机遇,它让代理人的品牌形象更加丰满,展业渠道更加多样化。更重要的是,互联网思维的核心是以...

    2018-04-25
  • 十种数字字体免费下载

    当你数字和文字融合时,让数字脱颖而出是很重要的。 这些数字可用来吸引用户的眼球。在广告或打印使用创造性的数字字体和颜色,它们将脱颖而出。 国外设计师Heather Moritz跟大家分享了十种免费数字字体,这些字体仅…

    2015-01-20