交互案例实战!三个按钮背后由小见大的交互思考

@窒息红Leon :初入交互设计工作,最常见的需求就是——放按钮。放按钮看起来是超级简单的事,无非就是设计按钮的样式、摆放按钮的位置、确定按钮的状态与反馈等,但殊不知其『麻雀虽小,五脏俱全』,小小的按钮设计中也蕴含了很多交互设计的思维,当然除了设计本身之外,还能看到如何平衡开发、产品以及用户各方的需求。

所以,本文章会通过三个真实但抽象的例子说明工作中『放按钮』是怎么做的。真实说的是案例来源于实战,抽象就是提炼出思维但讲的场景都是虚拟的,免得透露机密。有趣的是,三个按理都和时间、时效有关。

案例一

虚拟场景:某订单页面,商品订单以卡片的形式罗列,每个卡片下方有若干操作按钮,如支付、取消、投诉等。根据规则,投诉按钮必须在订单产生2天后才可使用。

现状:目前产品线上的设计方案是,几个按钮同时呈现可点击状态,当投诉按钮处于可用时间段内时,点击就会去往一个投诉页面填写投诉申请;当目前处于不可投诉时间段内,投诉按钮点击后弹窗提醒用户:还有 XXX 时间才可发起投诉。

交互案例实战!三个按钮背后由小见大的交互思考

目标:提出这个案例时,我们希望让这个操作过程更加自然,不要让用户点击了之后才告诉用户这个功能不可用,而不要脱离用户的交互期望(如果按钮可用,交互期望就应该是实现相应的功能)。

设计过程:

最开始考虑这个案例时,我的第一反应就是如果一个按钮当前是不可用的,就应该隐藏起来,这个场景按钮还是挺挤的,明明不能用的东西为什么要放在界面中吸引视线呢?

交互案例实战!三个按钮背后由小见大的交互思考

但是很明显,这个第一感觉有严重的硬伤。首先,对于一个按钮或功能,告诉用户这个东西不可用,和不告诉用户有这个功能,是完全两码事。尤其是一个存在可用/不可用两种状态的按钮,在特定时间将其隐藏的风险非常大——你不知道这个功能的被需要度多高。

于是,我们去查阅了一下数据和之前的设计方案。首先得出的结论是,这个按钮的点击率不低(超过10%的用户,而且这个页面的总 pv 非常高),其次,以前有尝试过把这个按钮直接在不可用时隐藏的设计,但是立刻引来了大量的客服投诉——用户找不到投诉入口在哪里了。

所以,似乎数据和历史方案帮助我们排除了第一种做法,也就是直接隐藏按钮。那在不可用期间把按钮置灰怎么样?

交互案例实战!三个按钮背后由小见大的交互思考

置灰的好处在于,用户一眼就能看到这个功能的存在,同时又能知道这个功能暂时是不可用的。但是问题也来了,怎么知道这个按钮什么时候可点什么时候不可点?一个解决方案是在置灰的按钮中加上文案提醒,另一个是点击置灰的按钮后给出文案提示,但是前者似乎没有足够的空间进行展示了,而后者看起来不错……但是好像又回到了原点?(后来还讨论过一些更复杂的方案,比如最后半天置灰,更早的时候隐藏等,但我们并无法判断用户对时间点的真实感受和期待。)

所以最终的结论就是,由于当前的线上形式并没有什么致命的问题,也没有收到太多关于体验方面的投诉,而考虑到开发成本、设计成本和迭代周期,还是选择保持线上的样式不变。

感觉走了一圈走回原地?在实际工作中经常遇到这样的情况,设计师通过本能和直觉判断某些内容的体验可能不是最佳的,但经过资料搜集、自我批判、成本评估后发现,似乎保持现状是最好的做法。

总结:这个案例告诉我们,设计时不要总想着找茬,第一反应往往可能漏过了诸多细节,思考清楚再做行动。

案例二

虚拟场景:对商家或商品进行投诉之后,需要用户选择投诉原因,如态度不好、价格变动、缺货等。其中,在某些特殊时间段内,如该商品本身就是秒杀商品,用户发起投诉时则不能选择『缺货』原因。

现状:线上目前没有这个功能,即所有的投诉原因都是可选的,选择组件使用的是 picker,大概如下图的样式(最常见的就是选择时间啦)。

交互案例实战!三个按钮背后由小见大的交互思考

目标:对于『缺货』这个投诉原因进行交互处理,令其在特定时间段内(商品秒杀阶段)无法选择,并给用户相关提醒。

设计过程:

乍一看和案例一非常相似,但其实差别还是挺大的。案例一属于设计师自发尝试对体验改进,而案例二确实明确的业务需求,需要把没有的功能融入到现有方案中。拿到这个需求时,首先看到大概会涉及两个页面可以用来设计,分别是投诉页面和投诉原因选择页(这两个通常不会直接在一起,但是后者有可能以弹层的形式出现,当然也可能新开页面),于是闪过几种可能的处理方案。

方案一,在投诉页面提前进行文案披露,告诉用户『缺货』原因不可选,同时进入原因选择页时将『缺货』选项置灰;

交互案例实战!三个按钮背后由小见大的交互思考

方案二,原因选择页的『缺货』按钮正常可选,选择后通过弹窗提醒用户该原因不可用,并恢复默认待选原因状态;

交互案例实战!三个按钮背后由小见大的交互思考

方案三,仅设计原因选择页,在『缺货』选项内提供文案如『暂不可选』,并且置灰该选项。

交互案例实战!三个按钮背后由小见大的交互思考

详细了解需求背景之后,方案三首先被排除了。原因很简单,本身置灰就已经表示不可选了,『暂不可选』文案所表达的内容太少,既没有展示出不可选的原因,也没有告诉用户什么时候恢复该投诉选项。同时,我们得知反馈的文案会比较长,大约有十几个汉字,按钮本身的空间有限,并且直接在原因字段内拼接『暂不可选』也会有点技术成本。

方案二在流程上是顺畅的,但是和案例一中提到的类似,我们一般希望用户在操作之前就能预期到交互的结果,而不是让可选的按钮点击后出现提醒再告诉用户不可选。

同时考虑方案一,对于按钮置灰有一个问题需要考虑,可以看到无线端使用的是这种滚轮式的选择组件,其本身置灰能不能做是要打个问号的,事实上和开发沟通之后发现确实无法实现。最后,综合考虑下,还是采用了方案二。

总结:通过案例二可以看到,设计中常常会有一个最优解,但又总会因为技术成本、其他业务原因的影响去妥协,最后得到的方案也许不是交互上最佳的,但确实整体效率最高的。这也说明了,新人不要轻易对其他产品做体验分析,因为你并没有这些真实限制,所得出的结论也是空中楼阁。

案例三

虚拟场景:某些操作是有时效的,比如某个商品限量销售,如果还没有到付款的时间节点,付款功能是不可用的,那么付款按钮能否优化处理。

现状:当商品不在支付时间段内,付款按钮隐藏。

交互案例实战!三个按钮背后由小见大的交互思考

目标:不要让用户找不到付款按钮,令操作更加顺畅,可见性更强。

设计过程:

和案例一一样,这也是一个设计师自发想要改善体验的过程,正好有其他业务需要对这些页面进行改造,能否把这个按钮隐藏的过程优化呢?原因相信大家都能理解,把不可用的功能藏起来,总归不是最好的做法。

仔细查看线上的样式我们发现,这个案例和案例一还不太一样。最重要的一点是,付款的时间是有倒计时的,也就是说即便付款按钮本身是隐藏起来的,但其附近依然有文案提醒现在不在支付时间内,所以用户不太容易迷惑。

比较简单的解决办法就是,把支付按钮暴露出来,并且置灰。看来今天三个案例都和置灰杠上了。经过交互小组和产品小组的讨论,都一致觉得把不可用的支付按钮置灰更加合适,并且线上已有文案提醒说明,用户也更容易理解。

交互案例实战!三个按钮背后由小见大的交互思考

但是这个案例最后的结论有些出乎意料,首先,因为线上所有类似业务都采用了隐藏不可支付按钮的做法,所以如果这类交易要改,其他全都要改(时间成本);其次,这个按钮组件在早期开发过程中,并没有设计、开发 disable 的状态,也就是没有置灰的样式,如果要做,需要重新设计和开发(开发成本);最后,线上这个隐藏的样式已经存在很长时间了,用户大部分都其已经习惯,并且没有发生普遍的反馈表示认知困难(用户理解成本)。所以,结论还是保持线上的样式。

总结:有时候设计是对的,所有人都认可,但是依然会有各种因素前来制约。尤其在较大的产品团队,业务节奏快、需求多、上线紧,这类优化体验的工作常常优先级不够高。与此同时,很多朋友可能会说一个按钮而已,加一个 disable 的样式又有何难?然而很多团队的流程规则导致业务工作是一条线,组件优化新增样式又是另一条线,想要一步把两件事都做了并没有想象中的容易。

怎么样,简单的三个按钮,是不是让你有些晕了?交互设计的难点常常就在于体验、产品、开发各个内容的协调,相互妥协,最后达到一个平衡的状态。由小见大,小按钮我们能应付了,慢慢就可以面对大问题啦。

作者:@窒息红Leon

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

(0)
iouedioued
上一篇 2015-09-18
下一篇 2015-09-18

相关推荐

  • 新媒体人员年薪十万怎么做到的,真的难以想象

    新媒体人员年薪十万怎么做到的前些日子,和我互联网专业的师兄聊了一下,他说他们公司干活轻松,工资还高,而且公司福利还好,什么六险一金,什么妹子很多啦......卧槽,居然这么爽(我可能就听见了那句妹子很多,哈哈哈)搞得和我一起的朋友立马拍板,问我师兄你们公司还招人不,(厚颜无耻啊)我就静静的看着他,厚颜无耻的他还在继续介绍着他,说我是211硕士,之前也在世界五百强企业工作来着(看着着厚颜无耻之人,我真想立马一脚踹飞他)真的嚣张到了极点是吧...

    2018-03-13
  • 【用户体验】从了解用户的注意力开始,创造更优秀的用户体验

    【点击上方蓝字↑↑↑关注「艺恋优梦」获得每晚推送】刚下班回家,今天又没时间写教程了。。。委屈这是一篇源自心理学家和 UX设计师的关于人类注意力研究的文章。在产品团队中,用户体验设计师的工作是输出高可用性、易用性的可交互数字产品。当我们在设计这些产品的时候,我们花费了大量的时间来探索不同的研究方法,了解不同用户的行为、习惯和需求。对于绝大多数的用户而言,在行为模式和心理结构上有着相似的地方,只要有意识地探索,我们能够更好地了解人类的认知过...

    2018-04-04
  • 【用户体验.春节特辑】理清儿时的记忆 找回逝去的情感(总第270期)

    亦可访问www.koushutianxia.com了解详情编家谱   修家史   留视频建祠堂   亲互动   传万代总第270期生活在这样一个时代,人们追求物质、追求理想、追求个性……而不去回望来路,不去寻求亲情和血缘所带来的归属感。“游子的情怀”和“漂泊的现境”总是让我们不由自主的追问自己:是否我们必须要失去我们最宝贵的东西才能实现自己的人生目标,我们实现自己的人生目标到底又是为了什么?我出生在安徽的一个小城里,由于父母工作繁忙,我...

    2018-02-21
  • 交互设计的门类 & 英国综合类院校及艺术院校在如何定义交互设计?

    艺麸大大带你了解英国交互类TOP院校要知道你离名校并不遥远别走神,好好看完哦~随着科技日新月异的发展,让交互设计一时成了“网红专业”,很多学平面设计或视觉传达的童鞋们纷纷转专业到交互设计大本营。然而各大顶尖院校对于交互设计的专业命名也是“五花八门”,如,服务设计、交互设计、用户体验设计等。交互本来就是一个艺术与科技的完美结合,国内很多院校都不能将其做的很突出和优秀,这就导致了出国学习交互设计成为许多人的想法。那么你有多了解交互设计呢?我...

    2018-04-19
  • 听说微软这次硬了?苹果赶紧发布了个触摸条压压惊!

    #交互学堂# 前天晚上,#微软# 赶在 #苹果新品发布# 会的前头抢先发布了一波硬件产品,出人意料地推出了Surface Studio 一体机以及交互配件 Surface Dial。一时间设计夹小编朋友圈里的设计师们都沸腾了,惊呼 “巨硬…

    2016-10-28
  • 设计师个人品牌的建立

    个人品牌是人们将自己和事业作为一个品牌推广出去。如今,空有一门好手艺已经不够了,独特和真实可信方可过关,但前提是人们得知道你。正如Michael Simmons所写道,在数字时代,真实才是关键。强有力的个人品牌可以创造大量机会,获得充分认可。

    2016-02-21
  • 蔚来ES8正式上市 | 重新定义汽车用户体验

    就在刚才,首届NIO Day蔚来日在北京五棵松体育馆圆满结束。蔚来ES8也正式上市并开启预订。近万名蔚来好友相聚于此今晚,这些信息你不容错过:蔚来ES8正式上市 公布售价蔚来ES8售价公布ES8基准版补贴前售价44.8万起,限量1万辆创始版补贴前售价54.8万,用户也可以选择电池租用方案,车价比常规购买低10万,每月支付1,280元电池月费,同时可享受电池升级服务。ES8上台亮相源于赛道冠军的极致性能4秒SUV俱乐部最大功率480千瓦(...

    2018-02-02
  • 交互设计岗位面试攻略

    面试交互设计岗位的同学应该准备以下几点: 1技能交互理论,熟记于心,信手拈来做为交互设计专业的学生,如果连一些普通的理论认识都不了解的话,是会很吃亏的。你所做的设计很容易遭到别人的质疑。这里推荐同学们…

    交互设计 2015-12-03
  • 交互、研发、视觉部门的协作工作技巧分享

    本文转载自交互学堂公众号,作者阿西UED 交互、研发、视觉部门的协作工作技巧分享 微信号:IxDSchool 本文是图片形式,打开有些慢,请耐心加载完再阅读。这里有原文地址

    2016-01-15
  • 手机系统苹果、安卓交互设计的通用原则总结!

    :请点上面免费订阅系统的设计从用户角度来说,交互设计是一种如何让产品更容易用,让用户更愉悦地使用产品。它致力于了解目标用户和他们的期望,了解用户在同产品交互时彼此的行为,了解用户心理和行为特点,并用通用的交互能满足用户操作的预期。下面介绍一下在交互设计中一些比较通用的设计原则,大家可以参考一下。交互1、就近原则:将同一类的功能都组织放在页面相同模块中。2、容错原则:必须允许用户有犯错的操作,给予用户后悔的操作机会。3、帮助原则:为用户提...

    2018-02-16