你真的了解确定取消的位置吗?

原创文章 分类: 经验/观点 版权:
1442 20 14 0
2018-10-10
8.9
编辑推荐

“确定/取消”与“取消/确定”在确认框中如何排序,你是否在这场排序大战中仍然存在疑惑,如有疑惑请仔细阅读

开篇

【确认框】属于模态框其中一种重量级反馈,一般用于用户进行一项很重要或者有风险的操作比如:删除/退出,展现的形式是以弹框的形式来给用户提示信息,一般会出现屏幕中间并且遮挡部分内容,用户根据提示来进行判断操作,确认框为强制用户操作,如不操作其余功能无法使用。并且确认框上的“取消”/”确定”操作是对用户关键行为的一个确认,如在移动端网盘中,删除某个文件并且此操作行为会导致当前文件不可恢复时,都会询问“确定要删除吗?”,用户可以选择“取消”或“确定”。

作为重量级反馈我们可以看出来模态弹框的优点是可以让用户迅速的获取视觉焦点,缺点是打断了用户的当前的操作流程。


Image title


确认框「确定」按钮究竟在左还是右?

有没有发现我们在做交互设计的道路上即使自己已经研究数年,深知一些高大上的理论,但是有一些很细小的细节是我们平常没去深思甚至关注的,因为我们更多人是站在巨人的肩膀上做设计,别人怎么做我们就怎么做,何曾问过自己一个为什么呢?比如确认框「确定」和「取消」按钮的位置,究竟是「确定」在左边还是取消在左边

其实这个问题目前仍旧没有确切的答案。


各大平台系统确认框怎么做?

操作系统中的几大阵营主要为微软的windows,苹果mac、ios,那下来我们分别来看主要针对存在歧义的微软和苹果系统来看下有什么区别。

----苹果----

1.OS X用户预期所有的按键位于dialog的右底部,启动一个操作的按键总是位于最右侧。该按键称之为「Action button」,以确认当前dialog最重要的操作。取消按键位于「Action button」的左侧。 OS X Interface Guidelines,传送门(参见Dialog章节):http://developer.apple.com/library/mac/#documentation/UserExperience/Conceptual/AppleHIGuidelines/Windows/Windows.html#//apple_ref/doc/uid/20000961-TP10

·苹果的mac

Image title

·苹果的ios

Image title

----微软----

2.dialog内操作按键称之为「Commit button」,肯定性操作位于左边,否定性操作位于最右边。Win平台定义了具体的用法与顺序:Yes/No, Yes/No/Cancel, [Do it]/Cancel, [Do it]/[Don't do it], [Do it]/[Don't do it]/Cancel。传送门:http://msdn.microsoft.com/en-us/library/aa511268.aspx#commitButtons 


Image title

我们可以看到不同的操作系统都遵循着自己的操作规范,那究竟哪种更加符合用户的操作逻辑呢?我们来做一个实验

我们暂且忘掉windows多年培养的用户习惯,确认在左,取消在右。或者苹果的mac确认在右取消在左边。首先我们想一下设计的初衷是什么?我们为什么人做设计?我们应该遵循一种什么样的原则?


设计是商业的一部分,我们的设计应该要避免用户去思考也就是我们要为潜意识做设计

我们人类在进行反应进行每项操作的时候如开门,行走等,你有想过我们的大脑真的会精心的调配每个肌肉应该怎么去做吗? 不是的,你大脑没有考虑这些问题,这都是你潜意识的行为,人类潜意识控制了人类大部分的行为模式,通常来说相应的行为动作发生之后,大脑上层才响应起来原来刚才我们干了什么一件事情,我们平常的动作都是潜意识的行为,上层意识是对行为的一种解释。我们做的应该是为潜意识做设计,避免用户去做思考。

Image title

举个例子

①这是一个付款界面有一个9.99 美元的需要你付款?你觉得哪个是确定呢?我没有标明哪个按钮是确认哦。

Image title

解释:确定在右取消在左依据为

1.视线流依据:

如果左边是确定右边是取消用户出于谨慎会阅读完所有可操作的选项,这意味着用户的视线不会停留在左边的按钮上面,它将继续向后进行扫视,在查看完所有可选项后,再返回左边的按钮执行相应操作(如下图第二个视线流)。如采用左边取消右边确定顺序,用户的视线流将会更平滑,视线最终停留的位置也是右边②的确定位置。确定放在右边相对于左边视线流更加的流畅视线流不用折返

Image title

2.古腾堡法则:

来说用户的浏览顺序是从左到右从上到下,我们认为左上是我们阅读的开始位置右下是落脚位置,所以右边位置放确认来说更加合理(如下图)

Image title

3.上一步下一步依据:

因为大部分的国家的阅读顺序都是从左到右的,我们意识中左边是上一步而右边是下一步按钮,我们认为最右边的按钮是一个积极的方向,所以确定放在右边更加的合理


②我只是把一个颜色加深了一点点,现在哪边是确认呢?

Image title

解释:左边的深灰按钮和背景对比反差更大一点,在我们看来他明暗的对比更加强烈积极所以我们会认为他更加适合作为确认按钮


③我只是把其中一个按钮加入橙色,现在哪边是确认呢?Image title

解释:我们给其中一个按钮色彩,在我们看来橙色和背景的对比更加强烈在我们看来他更加积极一点,所以我们觉得他是一个确认按钮


④我们分别给两个按钮绿色和橙色,现在您觉得哪个是确认按钮呢?

Image title

解释:大多数的人会认为左边是一个确认按钮,因为我们生活中给我们的颜色属性就是绿色代表通过前进,橙色代表警示,绿色给我们的反馈更加的积极,所以当前我们觉得绿色是一个确定按钮

我们看了这么多的案例,我们的思维也改变了多次,总结一点为我们要为潜意识做设计,不要让用户去思考


但是左边取消右边确定并不是一成不变的

正常情况确定按钮放右,取消按钮放左。但是有些情况是比较特殊的破坏性操作或存在风险时反之,以避免用户误操作。例如:

1.ofo的退押金确认框


Image title

2.网易云音乐清空确认框



Image title


3.知乎跳出当前app


Image title

4.ios删除应用

Image title

总结:

确认在右取消在左(交互体验依据)

1.因为大部分的国家的阅读顺序都是从左到右的,我们意识中左边是上一步而右边是下一步按钮,我们认为最右边的按钮是一个积极的方向

2.我们根据视线流方式来判断最右边的按钮是一个积极的方向置因为我们视线流不用折返

3.根据古腾堡法则来说用户在显示屏的浏览顺序是从左到右从上到下,我们认为左上是我们阅读的开始位置右下是落脚位置,所以右边位置放确认来说更加合理

注:如果需要达到一个特定的目标如避免用户退出应用,我们作为设计师可以使用反向设计来达到我们的商业目的。


确认在左取消在右(用户习惯依据)

如果在微软平台我们还是建议使用确认在左取消在右的,因为无论您遵循哪种设计规范都需要遵循统一的设计原则,如果全局都用的是确定在左取消在右,那么全局都应该统一(除为了达到商业目的的反向设计)。


微软培养的强大的使用习惯和交互体验方面肯定是相冲的,如果非要纠结一个对错,也只能找一个婴儿没有受到各种环境的影响来做对比统计了。究竟是确定在左还是右,无论哪种都应该遵循各家的规范,以及全局的统一性,以商业目标去做设计,也就是我们所说的目标导向设计。





vcnic

https://dribbble.com/vcnic

19粉丝/43关注

“劳模勋章”之蒲公英勋章
WDC·插画合集 如何运用Lottie库让动效落地

vcnic

vcnic

https://dribbble.com/vcnic

“劳模勋章”之蒲公英勋章

扫描二维码
去手机端查看海报

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2018 UI.CN