网站可用性：保存并取消...或...取消并保存？

Question

Windows和OS X总是在这方面遇到问题，但是对于Web应用程序中的“保存”按钮或“取消”按钮是否首先出现的一般共识是什么？

[保存] [取消]

或

[取消] [保存]

注意：表格顶部的这些按钮向右冲洗。

Answer 1

按照principle of least astonishment：以Windows方式（[保存] [取消]）进行操作，除非您有理由相信Mac用户占用户群的更大部分。

Answer 2

这里的关键是我们正在谈论 “web” 可用性。到目前为止，我认为很明显，接受的答案中引用的principal of least astonishment表明权利是前向行动（保存）而左侧是向后行动（取消），而不是接受的答案表明

网络浏览器是网络用户最习惯的用户界面，15年以上的网页浏览使得后退按钮位于前进按钮的左侧非常清楚。它还使用最初为其开发的从左到右的语言进行评判。右边是你要去的地方，左边是你去过的地方。

即使是一般的计算机白话，正斜杠，/，向右倾斜，而反斜杠，\，向左倾斜。

Windows UI是这里的异常值，我认为根据微软的优先权来确定你的UI设计是一个糟糕的决定。

我可能会指出，你的两个按钮的右上角定位是非标准的，但我认为它不符合按钮本身的顺序。

Answer 3

本能地，我总是把“保存”按钮作为最右边的元素。

我认为还有其他事情需要考虑。主要是实际上是否需要取消按钮，或者是否更适合其他元素（例如指向前一页的面包屑痕迹）。

编辑：http://www.lukew.com/resources/articles/web_forms.html - “主要和次要操作”部分显示了如何使用视觉加权产生良好效果。

Answer 4

对于这个问题可以产生的所有激烈争论，它似乎并没有对人类的实际表现产生太大影响。 advantages and disadvantages of each work out to a wash。equally likely to expect Cancel on either the left or right。用户在网络表单中显示putting the Execute button the far right is associated with slow responses and high error rates。如果按钮被广泛分开，似乎偏向于支持左侧的取消，但是您不希望在网络表单上{{3}}之后执行此操作。

我认为最重要的是在你的应用程序内部保持一致，并确保取消总是标记为“取消”（不是说，像我在一个网络应用程序中看到的“返回”）。否则，将按钮放在彼此旁边并靠近用户将看到的最后一个字段（可能不在表单的右上角）。

不要太担心。

Answer 5

这可能不是一个很大的区别，只要它清楚按钮的作用。 我的个人投票是保留在左边，因为这是人们最常做的事情，人们从左到右阅读。

另外，我还会在按钮之间放置一些空格，以确保用户在尝试点击另一个按钮时不会意外点击一个。

Answer 6

为什么你需要一个取消按钮？

在网络表单上，用户几乎总能通过其他操作取消。将“取消”置于“保存”附近会产生一种情况，即当用户想要保存时，用户很有可能firing the ejection seat。

Answer 7

我通常把按钮放在最远离中心的位置。如果您的按钮是右上角，我的订单将是[取消] [保存]

Answer 8

熟悉通常比客观正确更重要，因为默认情况下，不熟悉的东西通常不太可用。

人们使用他们的Windows PC或他们的Mac比你的应用程序或网站更多。所以，如果我在你的鞋子里，我会选择你认为对你最关心的用户来说熟悉的订单。如果它是一个主要是mac的观众，那么就这样做吧。如果主要是PC受众，那就用PC方式吧。

Answer 9

在普通表单上，保存应位于表单字段下。取消应该在保存的左侧或右侧，但不要太近以避免悲剧性错误。 Luke W的Web Application Form Design page有一些有启发性的图表。

您的表单很不寻常，因为您希望按钮位于顶部。在这种情况下，我需要知道页面的样子以及如何使用它。但由于你已经打破了表单字段和保存之间的任何流量，我怀疑保存应该在右侧以支持自然的从左到右的路径。

（Windows和Mac在对话框上有按钮放置的标准不同，它们底部都有按钮。这些标准不适用于网页。）