Caroline's Corner: 表单中的按钮——如何放置及命名

Source: Caroline Jarrett, 3 September 2008 Submitted by Caroline Jarrett

翻译：october

校对：toMMy

原文：Caroline's Corner: Buttons on Forms - where to put them, and what to call them

经常有人问我：“OK按钮放在Cancel按钮的左边还是右边？”

还有另一种常见问法，要不要把“Cancel”换成“Back”、“Previous’”，或者“Next’”。

问题简单，答案复杂

我很乐意告诉你：OK按钮放在左边。或者放在右边。或者其他容易描述和记忆的方式。正如表单中的多种情况，最简单的答案不一定真正合适。有谁希望答案总是视情况而定？可用性中视情况而定的问题太多了。然而真正的答案依然是“视情况而定”。但我们可以从“视情况而定”中转移视线，我来告诉你一些规则。

规则1：参考其他表单

首先应当找出用户使用的其他表单，看看那些表单中如何放置按钮。比如，Jakob Nielsen几年前指出大多数用户在其他网站花费的时间远多于在你的网站花费的时间。或者如果你在创建一个与Microsoft Office软件共同使用的项目，那么你的用户倾向于期望你的项目沿用Microsoft Office软件惯例。如果你的用户同时使用PC和Mac，情况会有些棘手，因为这两种操作系统有些冲突的操作习惯。做些市场调研，看看哪种操作系统对用户更重要，你需要仔细考虑表单应遵循哪种操作系统。

规则2：把按钮列放在对话结束的地方

用户点击按钮表示结束本次对话后，表单继续询问用户问题，这是最大的问题。用户提交后接下来就是系统的任务了。此处需要按钮，它通常被称为“OK”、“Send”、“Submit”或者“Next”。要点是点击后任务结束。我见过的一个常见错误是：把重要指示甚至所有问题放在最终按钮的后面。对用户来说那是隐藏区域。不要这么做。

规则3：决定是否需要按钮

不久之前，我写过一个专题“The Piece of HTML created just for me: Reset”。主题是“Reset”按钮对表单设计人员来说很方便，填写表单后点击“Reset”按钮清除输入内容。不幸的是，大多数“Reset”按钮都无用，对其他用户来说很招人厌。真的需要其他按钮吗？用户希望放弃辛苦填写的数据吗？如果不是真的需要，就不要用。

规则4：决定按钮是不是看起来可点击

有时表单末尾明确需要两个或更多可能的动作：也许是 “Send” 和 “Throw away my work’”或者 “OK” 和 “Cancel”。Luke Wroblewski将最重要的动作称为“主动作”，其他称为“次动作”。他和Etre公司就表单中如何放置“Submit”和“Cancel”按钮以及是否将“Cancel”做成链接或者降低其视觉比重做了一些测试。

令人惊讶的是，他们发现将两个按钮放在一起的方案效果都差不多。仅有一例失败，就是将“Cancel”放在表单下方，将“Submit”放在远离右边的地方。（题外话：我曾期望将“Submit”放在表单下方，“Cancel”远离右边放置的效果等同于将按钮放在一起的方案，但出于一些原因没有测试该方案。）

就完成表单的时间而言，按钮看起来相似的方案效果最佳。降低Cancel按钮的视觉比重或者做成链接的方案会花费用户稍长时间。然而，重要的是用户倾向于以下方案：“用户在Cancel视觉比重较少的方案中表现得最佳，即使这些方案会降低他们的速度。这表明用户更关心避免数据丢失，而不是快速提交表单。”我认为几乎在所有案例中，精确度和用户舒适度比表单填写时间稍胜一筹。因此我会减少此动作的视觉比重——但也许会带来灾难行为，比如说“Throw away all my data（清除数据）”。

该规则有个补充：确保按钮看起来可点击。我经常使用网络银行，按钮仅是一个加了文字的普通橙色长方形，每次我都感觉困惑，没有阴影效果突出按钮，让其看上去可点击。如果你觉得缺乏创意，尝试搜索“web button（网站按钮）”图片，从特别难看到非常酷，应有尽有。或者更实际的办法是看看你最喜欢的网站是怎么做按钮的。

规则5：用标签说明按钮的功能最后一步是决定按钮应当配以什么样的标签。我经常看见以“OK”和“Cancel”标识的按钮，并没有清楚表达出按钮的含义。设想经常出现的Cancel对话框：你请求系统结束任务，系统跳出标识为“OK”和“Cancel”的对话框。“Cancel”的意思是结束任务，还是取消刚才的请求？请注意，没有规则表明“只能以一个词标识按钮”，很明显，也没有规则表示“必须要用‘OK’和‘Cancel’按钮”。