考】为什么有的弹窗在设计时,有“取消”按钮,还要添加在右上角“关闭”按钮呢?
结论先行:通过设置重复元素,营造更加多样的交互方式和视觉效果,以达到产品方期望用户去点击取消或关闭的目的
关于这个问题,我特意找了一个电脑版和手机版的弹窗试了一下。
电脑版弹窗的例子:
卸载软件时,弹窗同时设置了取消的按钮和右上角的“X”,我想这样做是为了通过多元素的重复布局,加深对用户去点击取消或关闭的心理引导,以达到挽留用户不去卸载软件的目的,毕竟卸载软件,损失了一名用户,也就损失了潜在的变现价值。从这个弹框,【立即修复】按钮加色,以及默认弹框勾选的【修复】模块也能看出产品是不想让用户去卸载的。这个界面,六个按钮模块,其中只有一个【卸载】按钮才是真正的卸载产品,但是用户要去卸载的话,首先从交互上来说,需要再去点击一次卸载,增加了用户的操作流程,而且用户目光也不容易发现卸载这个模块的按钮。
再来看另外一个反面的例子:
上图是进入软件提示升级的界面,相信很多同学都有遇到过这样的情况。对于升级的弹窗,没有设置取消的按钮,反而是在右上角设置了“X”按钮。给用户营造了更为复杂的交互体验和视觉路径(需要转移目光才容易发现这个关闭按钮),期望用户能够点击升级。强制升级会给用户带来极差的体验,但是又想要用户升级,怎么办?借助按钮元素的布局,下方按钮不设置【取消】,引导客户去点击产品本身想要用户去点击的按钮【立即升级】,用户如果不想升级,就需要转移目光去点击右上角“X”
综上:我认为大部分弹框的取消和右上角的关闭按钮,是产品方逆用交互给用户带来的体验,已达到自身的商业目的,这样做是不会给用户带来交互上不好的体验(用户可以通过更简单的交互和视觉转移点击产品期望用户点击的按钮),真是巧妙。
以上是我针对我所使用过的交互做得较好的产品的弹窗的感受,当然也有一些其他的弹窗不是这样类型,后续如有新的弹窗和看法,我也会在这篇文章里进行补充。