要不要在弹窗上画个[×]

弹窗是常见的控件,每天我们与数字界面打交道的时候都会碰到各种各样的弹窗。确认弹窗是其中的一种(这是我个人的总结,并非什么权威的对弹窗的分类),出现于进行删除、离开编辑这种存在一定风险的操作时让用户确认自己的操作。当然,要防止误操作或是轻率决策除了确认弹窗还有其他的方式,比如撤销删除,但本文主要讨论web界面确认弹窗的问题。

一个常见的场景是,弹窗出现后你又不打算进行删除操作了,这时应该怎么办?有3种方式可以中断操作、关闭弹窗:1,点击[确认]按钮旁边的[取消]按钮;2,点击弹窗右上角的[关闭]按钮;3,键盘上的esc键。用3种方法达到同一效果,对普通用户来说并不是什么问题,但足以吸引设计师发问:我画交互稿的时候,到底要不要在弹窗上加个[×]?这三种方式有什么区别?是否需要保留多个效果一样的路径?

对于这三者的区别,可以这样理解:

点击[取消]代表着做出了决策,“我想过了,要放弃之前的操作”;点击[关闭]意味着“我好像还没想好?那就先不做决策了”;而esc是更快捷也更隐蔽的专家用户操作,“先不做决策”的意味更浓。

而怎样对效果一样的三者进行使用呢?[取消]按钮与[确定]按钮相对,当然是必不可少的;esc键较隐蔽,加上它也没有负担。那么问题主要集中在:[关闭]按钮是否必要?我没能一下子想到一个足够充分的理由。然而,多数现有产品的确认弹窗都保留了[关闭]按钮:

在QQ邮箱中的彻底删除邮件(不可esc)
在淘宝购物车中删除商品(不可esc)
在Pinterest中删除画板(可esc)

但也有一些确认弹窗是没有[关闭]的:

在简书中删除草稿(不可esc)
在谷歌相册中删除相册(可esc)

Mac版Chrome浏览器及Mac系统中的所有弹窗都没有[关闭]且可以esc退出。猜想,Mac中不保留[关闭]而支持esc是因为Mac OS有着强大的快捷键和触控板功能,相比Windows系统,用户会更习惯于直接用键盘进行操作,而不是移动光标进行点击。

在chrome所打开的豆瓣中删除广播
在iPhoto中删除照片

参考了现有产品后,我并没有得出明确的结论。于是我直接问了其他人这两个问题:若要退出提示弹窗,你会[取消]还是[关闭]?既然[取消]和[关闭]效果一样,那么可否去掉[关闭]?

我所询问的人中,有产品设计相关人员,也有普通用户。大多数人都表示会点击关闭,正如其中一个朋友所言:“如果要点取消,我还得专门去想一想”。点击了按钮意味着做出决策,增加了用户的思考成本。但对于“可否去掉关闭”这个问题,大家出现了分歧。支持保留关闭的小伙伴给出的理由如下:

不同用户有不同习惯,仍有大量的用户习惯去右上角点“关闭”,去掉就会增加用户操作成本,这会让用户不爽。
如果产品没有强大到去塑造用户习惯,最好还是尊重不同用户的操作习惯,提供多种操作方式也没什么坏处。
另外,关闭和取消分布在页面的不同位置,可以减少移动光标的距离,使操作更便捷。

有趣的是,所询问的交互设计师和视觉设计师却都比较倾向于去掉[关闭],理由是尽量避免表现层的冗余:

毕竟,页面上每个元素的存在总得有个足够充分的理由,我们设计师才能不带疑虑地亲手将它放上去。做决策会带来思考成本,而冗余所带来的判断过程又何尝不是一种思考成本?

作为交互设计师,我承认自己更多时候会点击关闭而非取消,但我还是倾向于去掉[关闭],并enable键盘esc键。弹窗右上角的[关闭]并非不可或缺,用户习惯也是在不停发展的。尽量去掉表现层的冗余元素,是我心中更现代的设计原则,也是一个趋势。

所以,确认弹窗右上角的[关闭]到底要不要?经过这么一番讨论,以下是我的结论:

  1. 先看产品风格和目标用户。如果产品风格和用户比较保守传统,那么在现阶段最好保留[关闭]按钮;如果不是,那么尝试去掉[关闭]好了,它没有那么重要。
  2. 在去掉[关闭]的同时,要记得将确认弹窗设为模态的,并enable键盘esc键。不管用户是否在使用鼠标,用左手去按esc键都是最方便的退出方式。

以上就是我目前对这个小问题的总结。感谢各位伙伴的讨论。

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.