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

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

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

案例一

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

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

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

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

设计过程:

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

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

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

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

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

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

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

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

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

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

案例二

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

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

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

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

设计过程:

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

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

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

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

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

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

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

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

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

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

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

案例三

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

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

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

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

设计过程:

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

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

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

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

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

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

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

作者:@窒息红Leon

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

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

相关推荐

  • 现阶段用户体验最完美的混合动力 试驾新款比亚迪唐100

    以上汽车你体验过开一天车只花4元么?你体验过地板油加速无声无息么?你体验过用车供电吃电火锅开Party么?你体验过下大雨没带伞直接把车遥控过来么?你体验过车外雾霾爆表你却淡定自若么?你体验过下坡行驶续航里程却越来越多么?你体验过开个三月车却用不到100元油费么?今天这个车让我们知道到了答案!话说以前以上君并没有太关注过新能源车型,总感觉没有乐趣,但是真正开上贴近生活以后才发现插电混动是真的实用。YishangAuto第一眼看到唐100就...

    2018-04-07
  • 用户体验才是核心竞争力 英雄互娱《一起来冒险》趣味至上

    (点击上方“GameLook”↑↑↑↑↑↑,订阅微信)近几年来,随着手游用户增长速度趋于平稳,手游数量的增多,人口红利的优势已经消失殆尽,如何曝光率成为困扰所有开发商的共同难题。在买量成本水涨船高的情况下,靠忠实玩家形成的用户口碑形成病毒传播则成了很多游戏的“制胜法宝”。经过了几年的发展之后,玩家们越来越懂游戏,千篇一律的复刻已经无法提起人们的兴趣,人们有了自己对于游戏的追求,这也是市场上越来越多细分品类游戏成功的主要原因,比如《纪念碑...

    2018-01-30
  • 被忽视的重彩-交互设计验证

    每次评审,都是一场高效的讨(si)论(bi)大会...届时,需求、设计、开发也会上演争霸对决。作为身经百战的设计师该如何从评审会中顺利脱身,逃离这场没有硝烟的战役呢?小子很高兴地告诉你:你是绝对跑不掉的!定性、定量挖掘数据我们知道产品都有一定的周期性,开发期-成长期-成熟期-衰退期。在不同的产品周期中用户也会随着时间的推移,对产品的使用深度和理解广度有了深浅的层次变化,而不同的时期设计师采用的定性定量研究方法也是不一样的,如:访谈、问卷...

    2018-04-18
  • 塾乐教育-进阶提高设计思路的秘籍在这里!

    一直以来,我们始终想让知识变的更实用这5年,课程前后完善了几十个方案这篇文章,请认真阅读也许,会改变你的一生01为什么学设计一定要参加系统课程学习?01- 电商设计行业升级更新太快,如果不即时学习最新的知识。单靠自己平时工作的经验是无法满足中高端市场的需求的!通过学习,让你远远超过你的同行技术水平!02- 虽然互联网上免费知识层出不穷,但绝大部分都是挂羊头卖狗肉性质的不系统招生引流课程。给你一点甜头,再收取你高额培训费用!03- 一个人...

    2018-03-03
  • 4个方法帮你零基础快速完成Apple Watch的项目

    这会可以不用慌张,我们先给自己一天或者半天时间去了解它,最快捷的办法是开动大家的脑洞,然后再用自己的脑洞想办法,三个臭皮匠顶一个诸葛亮,联 系你认识的设计群体人脉,询问做过类似项目的设计师,最后总会有惊喜的收获。记得罗胖讲过,在这个时代,我们应该善于运用我的网状关系链,我就是从朋友那 里在短短的一个小时之内了解了手表项目的大概(虽然人家并不是做的苹果手表),他大致陈述了一下手表的特性还给我几个手表相关的网站进行浏览。给我的网站 可以推荐给你们,这里当然包括苹果官网,你可以在苹果官网上看到成熟的上线产品的模样,另外一个网站相对概念,可以参考一些简单的操作动效。

    2017-05-31
  • 交互系统和设计目标

    交互设计:是针对用户与产品之间的“交互行为”来进行设计。可以理解为对交互系统的设计。系统的概念系统可以类比为自然间的生态系统、人体的生物循环系统、公司也是一个系统。他主要有一下几个基本概念:1、系统是一个有机的整体,各个元素之间不可分割,相互作用构成系统。2、这个系统定具备明确的功能,可以用来完成某项任务或支持某些行为。3、系统的功能是由所有的要素共同支持的。4、系统的功能应是稳定的,在各种使用场景下,都能提供功能。5、系统的功能应具备...

    微信热点 2018-02-11
  • 帮你创造优质移动端UI的7项最佳实践

    在几年前,关于网页和APP谁做主导的话题还很热,但是现在看来,APP无疑已经是为用户提供内容和服务的主流了,它是用户最信赖的内容和功能的呈现方式。于是,随之而来的问题就是如何在竞争无比激烈的市场中,让你的APP在诸多同类中脱颖而出,并且让用户留在你的APP当中。留白常常被认为是一个活跃的元素,而非被动存在的间隙和背景。—— Jan Tschichold小贴士:有效的移动端APP信息推送策略是采用多种类型的信息推送机制,推送通知,电子邮件,应用内通知,新闻Feed等。多样化的信息推送通过合理的协调,创造良好的用户体验。

    2017-05-15
  • 在交互稿完成前,记得开一场需求评审会

    需求评审会是交互稿完成之前,最为重要、参与成员最多的一次会议。

    2017-05-11
  • 关于Axure8.0中继器的使用1

    废话少说,请开始你的表演!!!1.拖入一个中继器,将中继器多余的行删除;2.在中继器中添加三列(可以直接双击编辑),分别命名:name、sex、age;3.双击拖入的中继器会跳转类似动态面板的“(中继器)(page2)”新页面;4.在(中继器)(page2)中再添加两个和已有矩形大小一直的矩形,分别命名:name、sex、age;关于中继器的准备工作完毕,因为中继器需要存放动态数据,所以需要在页面增加动态数据的输入入口。5.回到拖入中继...

    2018-03-10
  • 艾璐斯刘光有:用户体验为先 九字方针瞄准盈利点

    2018年3月2日下午,由慧聪网主办、慧聪汽车用品网承办、广东哈弗石油能源股份有限公司总冠名的哈弗润滑油杯’2017年度汽车用品行业品牌盛会颁奖盛典在北京钓鱼台国宾馆芳华苑隆重举行,来自汽车后市场商(协)会领导、获奖企业代表、渠道商、终端门店精英、主流媒体记者等嘉宾共聚一堂,聚焦汽车用品行业热点话题,全面解读行业最新发展趋势,推动汽车后市场快速有序发展!香港艾璐斯实业有限公司总经理刘光有行业盛典现场嘉宾共聚一堂在本次盛会上,香港艾璐斯实...

    2018-03-06