logo标签列表

Web可用性：保存和取消...还是...取消和保存？

usability
17

在这个问题上，Windows和OS X一直存在分歧，但是在Web应用程序中，Save按钮或Cancel按钮应该放在哪里的普遍共识是什么？

[保存] [取消]

还是

[取消] [保存]

注意：我将这些按钮置于表单顶部，并靠右对齐。

3
这是非常个体化和有争议的。 - Oskar Kjellin
请参见http://stackoverflow.com/questions/50335/ok-cancel-or-cancel-ok。 - Patrick McElhaney
你是否支持触摸屏设备？如果是的话，大多数人都是右撇子，因此将最常点击的按钮放在右下角，特别是如果“保存”是安全的，但“取消”会丢失您的工作。 - JBRWilkinson
9个回答
19

按照最小惊讶原则：除非你有理由相信Mac用户占据更大的用户基础，否则请按照Windows方式进行（[保存] [取消]）。

这似乎相当不寻常。有很多Windows表单的取消按钮在右上角吗？ - Bennett McElwee
18
这里的关键是我们在谈论“网页”可用性。因此，我认为很明显最小惊讶原则所提到的是右侧是前进操作（保存），左侧是后退操作（取消），而不是接受答案所建议的。

网络浏览器是用户界面中最熟悉的，15年以上的网络浏览使得回退按钮在前进按钮左侧变得非常清晰。它也符合最初开发网络的从左到右的语言。右边是你要去的地方，左边是你曾经去过的地方。

即使在一般的计算机术语中，正斜杠/向右倾斜，而反斜杠\向左倾斜。

Windows UI在这里是异常值，我认为基于Microsoft的先例来设计UI界面是一个错误的决定。

我可能会指出你两个按钮的右上角定位是非标准的，但我认为这与按钮本身的排序无关。

7

本能地，我总是把保存按钮放在最右边的位置。

我认为还有其他事情需要考虑。首先要考虑是否真的需要取消按钮，或者其他元素（例如指向上一页的面包屑导航）可能更合适。

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

4
这个问题可能引发激烈的争论，但实际上并没有在人类实际表现中产生太大影响。 每种方法的优缺点相当。用户在Web表单中 同样可能希望在左侧或右侧看到取消按钮。如果按钮间距很大，则倾向于在左侧使用取消按钮，但是不建议这样做，因为在Web表单上将执行按钮放在最右侧与响应速度缓慢和高错误率相关。
我认为最重要的是在您的应用程序中保持内部一致，并确保“取消”始终标记为“取消”（而不是像我在一个Web应用程序中看到的“返回”）。否则，请将按钮放在一起，并靠近用户查看的最后一个字段（可能不在表单的右上角）。
不要过于担心。
我同意。此外，我们应该牢记响应式设计。如果主按钮在右侧，那么在移动设备上它可能会落在取消按钮下面。当您看到取消按钮然后是主按钮时，这是完全不直观的。 - instead
2

这可能并没有太大的区别，只要清楚按钮的功能即可。我的个人建议是将“保存”放在左边，因为这是人们最常做的事情，而且人们从左到右阅读。

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

2

为什么需要取消按钮？

在网页表单中，用户几乎总是可以通过其他操作来取消。将“取消”放在“保存”附近会导致用户很可能在想要保存时误触“弹射座椅”（参考）。因此，不需要在表单中添加取消按钮。

2
我不同意第一部分，但第二部分说得很对。我曾考虑过使用比取消更大的按钮进行提交，但那看起来实在是太丑了。 - Keith Adler
1

通常我会把导致最多操作的按钮放在最远离中心的位置。如果你的按钮在右上角，我的顺序是[取消][保存]

1

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

人们使用他们的Windows PC或Mac比使用您的应用程序或网站更频繁。所以如果我是你，我会选择你认为最熟悉的用户顺序。如果主要是Mac受众，请按照Mac的方式进行。如果主要是PC受众，请按照PC的方式进行。

我想我可以做的一件事是检测用户代理，对于Safari用户使用CSS推送一种方式，对于非Safari用户则推送另一种方式，尽管这可能不太稳定。 - Keith Adler
1
@Nissan，请不要让不同的浏览器呈现不同的界面。这会让用户在切换浏览器时感到非常困惑。 - tster
1
在普通表单中，保存应该在表单字段下方。取消应该在保存的左侧或右侧，但不要太靠近以避免悲剧性错误。Luke W的Web Application Form Design page有一些启示性的图表。
你的表单很不寻常，因为你想把按钮放在顶部。在这种情况下，我需要知道页面的样子和它将如何使用。但既然你已经打破了表单字段和保存之间的任何流程，我怀疑保存应该在右边以支持自然的从左到右的路径。
（Windows和Mac在对话框上的按钮放置标准不同，它们都将按钮放在底部。这些标准不适用于网页。）
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接