「确定」和「取消」按钮哪个该放在左边?

永恒之战
“确定/取消”党与“取消/确定”党在这场旷日持久的按钮排序之战中,各执己见,至今未能统一。

“确定/取消”党的见解:

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

2761e97e6f256945ac5a798967d17a77_b
“取消/确定”党的见解:

  • 增强交互的流程感。“取消”的后果是返回并不进行该操作,“确定”会执行操作并进入下一环节,“取消”在“确定”左边符合“Previous/Next”的顺序。符合“向右表示推进或下一个”的阅读习惯。(阿拉伯语再次被忽视。。。)

02547c86492f72bd3f095d6b45a1d5c6_b

  • 视线不需要折返。大多数时候用户点“确认”,如果“确认”在左边,用户在读完整个对话框后视线还需要返回,浪费了时间。(半秒左右?)

“确定/取消”党员:

  • Windows

a987baae57672388d404e71b5c43889d_b

  • Linux

914dcdc668dfe5a7f77473d00e664141_b
“取消/确定”党员:

  • OS X

3edfb60395c31be637dd7fea9797279f_b

  • iOS

dfd8bfdb6c5eecb4d57143b14a698355_b
叛徒:

  • Android(4.0后变成“取消/确定”党)

79109cc40e22aadf3193c880dd608d9c_b63df55b604e9e42cd8efffbd45e8aded_b

最后你们大家都别闹了,说说我的看法。

  • “视线”只是一种意淫。用户不是从左到右地逐字阅读对话框内容的,特别是对于右下角这两个按钮,不是“阅读”,是“扫描”,是模式识别(pattern recognition)。换句话说就是如果总是“OK/Cancle”的顺序并且总是一样的 layout,扫一眼就马上能根据图像特征(比如“OK”比“Cancel”短)辨别谁是谁。没有人会真的在脑子里阅读这两个词。也就是说所有基于阅读顺序的理由都不成立,同时也引出了下一条。
  • 统一最重要。电脑用着 OS X,手机用着 iOS 必然是幸福的,因为不会精神错乱。但是当用户在两党之间来回周旋,稍有不慎就会铸成大错(写了一天的文档点错没存上的人不是我)。作为UI 设计师,最好还是到什么山头唱什么歌,跟操作系统保持一致,这样可以节省用户模式识别的时间。就算你认为你与众不同的品位可以帮助用户节省半秒钟,但一旦用户因为惯性点错损失何止半秒钟?(同一个 App 内部还不能做到统一的还不赶紧点赞走人?)
  • 用动词代替“确定”。大家会发现 Apple 会尽量用执行的动作本身来代替“确定”按钮,这样可以更好地起到警示作用,原因是它打破了模式识别,用户不得不注意这个不同的按钮,引导用户理解将要进行的操作。

60d24ac13db9cf512aa322a2a0a4050c_b

  • 危险的按钮放远点。那些一失足成千古恨的按钮扔远点儿行不行啊!拿 Windows 里的 Notepad 跟 OS X 上的 Keynote 对比,当用户在有更改没有保存时试图关闭 App时,Notepad 的“不保存”按钮夹在“保存”和“取消”之间,用户无论是点“保存”还是“取消”都有可能误点到“不保存”而丢失更改。而 Keynote 把两个不会造成危害的“取消”和“保存”按钮放在右边,而把“删除”放在最左边。(由于 Keynote 会对已经存在在磁盘上的文档自动保存更改,所以图片截取得是关闭新文档时的对话框。因此按钮上是“Delete”,意思是点这个按钮文档就删除了,易于理解。)

280aae5cd7fac82f65f30c85e05b9b76_b9d5b53c5fa3d7fb8bb93bead7790aefd_b
你说啥?你是搞网页设计的?啥平台都能用?哪个平台用户多就按照哪个来呗!实在闲的蛋疼按照用户的系统动态切换一下。

== 20150913 更新 ==
拜托那些说某些平台在这个问题上做得并不统一的人,您先搞清楚什么是系统级别和第一方软件再开口。拿着一堆第三方软件截图说某平台上的软件根本不统一,我只能当您是装糊涂了。第三方软件跟操作系统本身规范不统一是第三方开发者自己的问题,关 Microsoft 和 Apple 什么事儿?

再重申一遍,我认为没有优劣,无关设计时尚,与操作系统保持统一是第一原则。

不要认为操作系统给用户培养的习惯不重要,你们看看 Android 4.0 改变之后有多少人点错就知道了。如果你不信,就跟系统对着干,或者让你的 App 里每一次弹出对话框,按钮顺序就改变一次,让你的用户体会一下这友好的易用性。

转载自知乎:

作者:高云 Vincent独立游戏搬砖人   原文地址

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

(0)
iouedioued
上一篇 2015-12-10 13:23
下一篇 2015-12-14 12:39

相关推荐

  • 设计神器Figma出马!Sketch、PS有些慌了,因为...

    这年头真的是“长江后浪推前浪,一浪更比一浪强”,许多新产品、新工具纷纷冒出头来,就拿我们设计师的设计工具来说吧,Photoshop 算是一名老将了,它也是我们走上设计不归路的第一个敲门砖(当然还有 CDR);被 PS 折磨的要死要活的时候 Sketch 和 Affinity 杀了出来,一个是专攻用户界面的矢量设计,另一个则像是加强版的 PS 和 AI;Sketch 和 Affinity 还没用熟又冒出个 Figma:说出来你可能不相信,...

    2018-04-17
  • 在不同屏幕和设备上,创建用户体验设计的8个步骤

    从具有微型屏幕的智能手表到最广泛的电视屏幕,其中所开发的内容,应以便在各种屏幕尺寸之间进行查看和交互。但针对不同设备的设计更多的只是调整在不同的屏幕上显示的内容大小。它涉及到很多复杂性:设计师需要把每个设备中的用户体验最大化,以便用户相信实际上应用程序是为他们的设备设计的,而不是简单地拉伸到适合屏幕。为了创建一个好的用户体验,有必要制定一个针对各种设备和屏幕尺寸的策略。

    2017-04-29
  • 【STARCAST】用Sketch表现不了的"孝敏"清纯日常画报

    ——还没关注?点击上方蓝字——大家好。STARCAST的家族们!!!!!!我们孝敏终于携Sketch回归了,这是她的第4次STARCAST!如果觉得我们孝敏已经展示了她的全部,那你就错了!她还有很多都没有展示给大家哦!今天就为大家送上,脸也没法用Sketch来表现,身材也没法用Sketch来表现的孝敏隐藏的一面,就像日常生活一样的画报,就像画报一样的日常生活照!这个秘密只告诉STARCAST 家族的大家哦,不是秘密>.大家已经开始紧张了...

    2018-03-02
  • 车载系统交互设计畅想Part1:仪表数据展示

    智能车载系统的概念变得越来越火热,智能驾驶的理念也越来越普及。现阶段,国内外各大互联网巨头都在联合传统汽车企业一起探索智能汽车的设计研发。可以预见的是,在不久的将来,驾驶员在车内将更加自由,就像智能手机一样,智能汽车将为驾驶员带来前所未有的丰富体验。本文作者Adhithya,通过一系列的访谈调研,探索现阶段驾驶员在驾驶过程中的行为方式,并依此为未来的智能车载系统的交互方式设计提供了科学的思路。“我知道在手动挡车上转速表的作用,但当我换了自动挡后我就很少去看它了“
    ——被采访人1
    ”我并没有真正的去关注过它,对我来说,这部分信息没有什么意义。“
    ——-被采访人2
    ”可能在爬坡的路面上我会看一下转速表了解一下车况,但当我在城市里平坦的路况行驶时,我很少会看它。“
    ——-被采访人3

    2017-05-01
  • 《用户体验要素》读书笔记:要理解为何这样做产品

    《用户体验要素》是一本实用类书,试图回答如何以用户体验为中心进行产品设计。作者通过构建自下而上的五层模型:战略层,范围层,结构层,框架层,表现层;来将以用户体验用户需求为中心的设计方式层次清晰的表达出来。并指出;一开始对战略层的深思熟虑,会帮助我们在整个产品设计中节约大量的时间。作者这本书写于pc时代,大多案例都是网站的建设。但是整个思考产品的思路,直到今天;都没有过时。一、 以用户体验为中心设计产品用户体验是指产品如何与外界发生接触,...

    2018-04-08
  • 2015年移动端UI/UX设计风格报告与2016年仍会持续火热的5大UI/UX设计趋势

    概述:随着响应式Web设计的持续升温以及Google移动友好性的提升,2015流行的一些UI/UX设计趋势将会在新的一年里持续升温。本文就来预测下2016年仍会持续火热的5大UI/UX设计趋势。 预测:2016年仍会持续火热的5大UI/…

    2016-01-03
  • 两个交互设计鸿沟-评估与执行

    译者 / 熊猫小生校对 / 不器作者 /Kathryn Whitenton前言:通过每次交互,用户都必须克服理解系统当前状态和了解如何改变系统当前状态的双重挑战。设计师可以通过意识到这些鸿沟并用透明的概念模型来消除这些鸿沟,从而为他们提供支持。上周,我买了一款很棒的新蓝牙耳机 ; 但遗憾的是,我花了一个多小时才把它连接到我的电脑上。尽管耳机手册和电脑支持网站作出了承诺,但耳机并未自动与计算机连接。我在重新阅读说明书之后,检查了耳机和电脑...

    2018-03-28
  • 光鲜背后:Pokemon Go的用户体验现状

    今天,我像往常一样走路去上班。但我不是孤身一人。在我周围,从店铺与餐馆门口的人行道,到城市公园里的绿色草坪,人们举着手机四处徘徊。小巷和公园入口这样的普通场所,聚满了人,在计算机算法作用下随机地聚集起来。这就是Pokemon Go。

    2017-05-21
  • 设计心理学 | 设计中的防呆设计

    最近读到设计心理学的再次接触到防呆设计的概念,联系交互设计做一些总结。

    2017-05-25
  • 一篇文章读懂用户体验(上)

    前言:一直有在梳理自己的知识结构,也靠这些所谓经验做了几年行业培训,今年是从业的第十一年,觉得差不多是时候把这些最初来自同行、互联网和书籍的知识再还给行业,我会把所有所得分章节逐渐整理发出,希望能对行业尽一份绵薄之力,同时也作为一种仪式,好让自己重新出发。

    2017-06-01