谈按钮“确定”与“取消”摆放位置及顺序的微妙关系

初入CS,就遇到一个很有歧义的问题:按钮“确定”与“取消”的摆放位置······对于圈内的其他设计师而言,可能都是过时的问题了,可是对于我这个一直使用苹果的人来说却第一次发现有这个问题的存在,之前的我可能过得太安逸了,一直就像是温水里煮的青蛙,连这种老生常谈的问题都没有发现·····
 
 
我开始向周边的同事及朋友咨询,结果就是:
1.对于windows用户来说,习惯于“确定”在左,“取消”在右。这已经深深的扎根在windows用户群体的操作习惯中。
2.对于苹果用户来说,则是习惯于“确定”在右,“取消”在左。而对于我这个常年用苹果的设计者来说,突然转变为windows来操作,很是不习惯,各种看着别扭······
 
 
于是网上搜罗出一堆关于此问题的探讨,至于左右对错的问题,各有各家的说法,最终的产品只能遵循实际的用户群体的操作习惯来进行相应的设计。以下为我找到的一些相关论断:

 

 

观点汇总:A:右侧是最好的,因为这样就更接近用户的眼球浏览顺序;B::左侧是最好的,符合自然说话/阅读习惯,能够更早看到/选到“确定”按钮
1.不是「跟别人一样就对了」!而应该要去思考放置这两个按钮位置的背后原因和用户体验(使用者习惯)。深思熟虑用户所面临的问题,不要受“设计法则”的约束
2.一个真正的设计师是需要了解问题的根本或这更深的层次,并了解为什么应该这样设计。
3.方法:用户测试、用户分析
 
 
A观点:右侧是最好的
1、从「用户眼球流程」来判断,视线不需要折返。大多数时候用户点“确认”,如果“确认”在左边,用户在读完整个对话框后视线还需要返回,浪费了时间。(半秒左右?)
不能忽略使用者习惯,使用者不会贸然决定点击任何一个按钮,当他们还没看到所有的选择之前。这意味着,大多数的用户不会盲目地点击他们眼球看到的第一个选项。
 
 
当「ok」按钮放置在左侧时:用户眼球必须看完所有可以选择的按钮,才会返回来点击。
当「ok」按钮放置在右侧时:当用户确认看完所有的按钮,眼球也朝一个方向流动,顺着进行点击的动作。
以上两张图明显表示,下图带给用户更快的视觉流程,用户在每个按钮上注视的次数只有一次,所以以速度或是用户使用上的流程来说,「确定」按钮放置于右侧是好的。
 
 
从「按钮功能」来判断
按钮功能?简单来说就是当用户点击「确认」或「取消」按钮时,他希望应用程序给他什么反馈?
「确定」按钮是当他们完成该页「阅读/填表」完后点击的按钮,并把它们推进到下一个页面。
「取消」按钮是让用户回到原始状态,回到上一个动作,例如清空所有已填写的字段。
OS X
 
iOS
 
 
这样的判断类似分页按钮的位置,以用户到「下一个」的按钮放至右侧,而需要使用者返回到「前一页」的按钮位置放在左侧。这样也反射到使用者的阅读和导览方向,「右进、左退」,这样直觉的思考也便于用户理解。符合“向右表示推进或下一个”的阅读习惯。
 
B观点:左侧是最好的
 
  • 统一最重要。电脑用着 OS X,手机用着 iOS 必然是幸福的,因为不会精神错乱。但是当用户在两党之间来回周旋,稍有不慎就会铸成大错(写了一天的文档点错没存上的人不是我)。作为UI 设计师,最好还是到什么山头唱什么歌,跟操作系统保持一致,这样可以节省用户模式识别的时间。就算你认为你与众不同的品位可以帮助用户节省半秒钟,但一旦用户因为惯性点错损失何止半秒钟?(同一个 App 内部还不能做到统一的还不赶紧点赞走人?)
  • 用动词代替“确定”。大家会发现 Apple 会尽量用执行的动作本身来代替“确定”按钮,这样可以更好地起到警示作用,原因是它打破了模式识别,用户不得不注意这个不同的按钮,引导用户理解将要进行的操作。
 
  • 危险的按钮放远点。那些一失足成千古恨的按钮扔远点儿行不行啊!拿 Windows 里的 Notepad 跟 OS X 上的 Keynote 对比,当用户在有更改没有保存时试图关闭 App时,Notepad 的“不保存”按钮夹在“保存”和“取消”之间,用户无论是点“保存”还是“取消”都有可能误点到“不保存”而丢失更改。而 Keynote 把两个不会造成危害的“取消”和“保存”按钮放在右边,而把“删除”放在最左边。(由于 Keynote 会对已经存在在磁盘上的文档自动保存更改,所以图片截取得是关闭新文档时的对话框。因此按钮上是“Delete”,意思是点这个按钮文档就删除了,易于理解。)
 
 

你说啥?你是搞网页设计的?啥平台都能用?哪个平台用户多就按照哪个来呗!实在闲的蛋疼按照用户的系统动态切换一下。
  • 符合自然说话/阅读习惯。日常生活中当我们提出问题并伴随肯定与否定的选择时,往往会这样说:“Is this your axe? Yes? Or no?”而不是“No? Or yes?”。因为大多数语言都是从左往右阅读,所以把“确定”放在“取消”左边符合说话习惯。(阿拉伯世界您就忍了吧。。。)
  • 更早看到/选到“确定”按钮。如果用户视线是按照下图中的过程来浏览,且大多数时候用户会选择“确定”,这样排列用户可以更早地看到“确定”按钮。习惯用 Tab 键在按钮间跳转的用户可以少按一次 Tab 键。(这年头谁还用 Tab 键在按钮间导航。。。)

 

 
 
 
 
 
为什么按钮不能分别放在左下角及右下角呢?
是啊,就上面理解来说,那为什么不能直接把「取消」「确定」按钮各放置于左下角,这样不是更能直觉思考导览模式吗?
OH~NO NO NO,因为「取消」「确定」按钮不是完全属于“分页”按钮,所以就方向性严格的区分其实是不必要的,这样反而弊大于利。
而且除了按键之间巨大的视觉分离使得操作变得困难之外,在功能上,用户如果不能直接看到该程序有“撤回”的关键动作,反而会觉得不安。就像 Ctrl+ Z 功能,在软件操作上来说很重要一样。
所以让用户可以看到「取消」按钮随着「确定」按钮放置在旁是很重要的,因为取消按钮对于用户来说,也是一个安全按钮,以防有任何想要“撤回”的步骤,而且放置一起,也让使用者能更高效率地去二选一中采取最佳的下一步行动。
 
为什么按钮要放在页面的最右下角?
放置于右下角是为了让用户更方便点击,它遵循了 Gutenberg diagram (古腾堡图表) 的浏览模式,什么是古腾堡图表?美国发明家翰内斯•古腾堡提出当人们浏览页面或布局的时候,视线都趋向于从上到下,从左到右的眼动规律。左上角是视觉第一落点区,而右下角是视觉最终落点区。之后被人们采纳演变用于对角线平衡的设计理念之中。
右下角的位置刚好是用户浏览顺序的最后一个区块,把按钮放在右下角的位置刚好可以让用户阅读完文章后决定所要采取的行动按钮,顺势进行点击的动作。
 
总结:
  • 统一最重要。电脑用着 OS X,手机用着 iOS 必然是幸福的,因为不会精神错乱。但是当用户在两党之间来回周旋,稍有不慎就会铸成大错(写了一天的文档点错没存上的人不是我)。作为UI 设计师,最好还是到什么山头唱什么歌,跟操作系统保持一致,这样可以节省用户模式识别的时间。就算你认为你与众不同的品位可以帮助用户节省半秒钟,但一旦用户因为惯性点错损失何止半秒钟?(同一个 App 内部还不能做到统一的还不赶紧点赞走人?)
  • 用动词代替“确定”。大家会发现 Apple 会尽量用执行的动作本身来代替“确定”按钮,这样可以更好地起到警示作用,原因是它打破了模式识别,用户不得不注意这个不同的按钮,引导用户理解将要进行的操作。
 
  • 危险的按钮放远点。那些一失足成千古恨的按钮扔远点儿行不行啊!拿 Windows 里的 Notepad 跟 OS X 上的 Keynote 对比,当用户在有更改没有保存时试图关闭 App时,Notepad 的“不保存”按钮夹在“保存”和“取消”之间,用户无论是点“保存”还是“取消”都有可能误点到“不保存”而丢失更改。而 Keynote 把两个不会造成危害的“取消”和“保存”按钮放在右边,而把“删除”放在最左边。(由于 Keynote 会对已经存在在磁盘上的文档自动保存更改,所以图片截取得是关闭新文档时的对话框。因此按钮上是“Delete”,意思是点这个按钮文档就删除了,易于理解。)
 
 

你说啥?你是搞网页设计的?啥平台都能用?哪个平台用户多就按照哪个来呗!实在闲的蛋疼按照用户的系统动态切换一下。
 
 
暂无评论
    网站首页,Fiona Design,

    网站首页-Fiona Design

    网站首页,Fiona Design