表单中的重置与取消要慎用

重置按钮可能会伤害到用户
服务器君一共花费了325.681 ms进行了5次数据库查询,努力地为您提供了这个页面。
试试阅读模式?希望听取您的建议

Most Web forms would have improved usability if the Reset button was removed. Cancel buttons are also often of little value on the Web.

在大部分网页表单中,移除重置按钮会有效提升可用性,同样的,取消按钮对网页的意义也不太大。

It is one of the most basic heuristics for interaction design to support user control and freedom by allowing users an "emergency exit" out of any situation they may have entered. Undo was truly one of the greatest advances in usability.

启发式的交互设计中最基本的一点是在任何情况下为用户提供“紧急出口”,离开当前环境。撤销功能是最好的解决方法之一,基本原则只是告诉我们要提供撤销功能但并没有告诉我们怎么做。往往,不同的原则适用于不同的用户界面:

The basic rule says to support undo; it doesn't say how. More specific rules are needed for different types of user interfaces:

  • In window-based GUI applications, it is standard to have a Cancel button that closes any dialog box and discards any changes the user may have made within that dialog box. A great way to support exploratory learning. Compare with older systems where you were trapped if you ever activated the wrong command.
  • In editing systems it is usual to have an Undo command that makes the document revert to the state before the user's most recent changes. Sometimes, multi-level undo and redo is supported: this can be very useful but confusing.
  • 在基于窗口环境的用户界面中,取消按钮可以让用户通过对对话框的操作,实现探索性的学习。相比较而言,你在老些的系统中下达了错误的命令往往意味着你将陷入绝境。
  • 在编辑系统中通常会有撤销命令来使文档回复到用户编辑之前的状态。有时,多级撤销和重复命令是很有用但又令人困扰的功能。

The Reset and Cancel buttons are the Web's attempt at mirroring these features, but users usually prefer to use the Back button instead when they want to escape from an undesired state.

网页试图通过重置和取消按钮来复制以上特性,但用户往往更愿意通过浏览器的后退按钮来离开误入的页面。

Reset: Don't Use 不要使用重置按钮!

The Web would be a happier place if virtually all Reset buttons were removed. This button almost never helps users, but often hurts them.

如果去掉所有重置按钮,网页将变为一片净土。这些按钮非但不能帮助用户,还可能伤害到他们。

Reset clears away the user's input on a Web form, but why would people want to do that? The Web is characterized by frequent movement between pages and users rarely encounter the same form twice. Thus, a Web form is almost always cleared when the user sees it. Even when a user revisits a form in a single session, it is usually faster to edit the old data than to erase it and start over.

重置功能会把用户输入到表单中的所有信息清除掉,但为什么用户要使用这样的功能呢?用户浏览网页的时候会在页面之间频繁转换,他们很少重复访问相同的表 单,因此,表单在呈现给用户的时候就是干干净净的。而当用户使用相同的进程重新访问一个表单时,编辑原有的数据往往比重新填写更便捷。

The Reset button hurts users in three ways:

重置按钮会在以下三个方面伤害用户:

  • The worst problem about Reset is that users click the button by mistake when they wanted to click Submit. Bang - all your work is gone!
  • Having two buttons at the bottom of a form clutters up the interface and makes it harder for users to clearly see their next step. Some small amount of wasted time is spent scanning the useless button and deciding which of the two buttons is the correct one.
  • Even when users do want to eliminate some of the data they have entered into a form, it may slow them down to have a dedicated button for doing so, since the extra button means that users have a choice:
    • edit the erroneous fields and replace the old text with the new text
    • click Reset and type the new text into nice clean fields

    The extra choice requires extra thinking, and the time saved by using an optimal interaction technique is often smaller than the time wasted on having to think instead of just moving ahead with a single interaction technique that is always used. It takes at least one second and often two seconds to decide between two possible interaction techniques which is why it is usually better not to offer users a choice. (A second may not seem like much, but it translates into about $100 million in lost productivity per year world-wide.)

  • 最糟糕的问题是用户想点击提交却误点了重置,他们填写的信息将一下子付之东流。
  • 在表单底部提供两个按钮将混淆交互界面并让用户难以搞清下一步要做什么。用户会把一小部分时间浪费在浏览无用的按钮和决定哪一个才是该点的上面。
  • 当用户希望在表单中修改已经填写的信息时,面对额外的按钮会做出以下两个选择:
    • 在输入框中修改不正确的内容
    • 点击重置,在清空的输入框中重新填写内容

    额外的选择会迫使用户进行额外的思考,而使用最佳的交互方式所节省的时间往往小于用户考虑决定使用最常用的方式所花费的时间。这将浪费用户一到两秒的时间来从中取舍,这也是 尽量不要让用户选择的原因。(一秒钟听起来没什么了不起,但它意味着每年一亿美元左右的生产力浪费。)

Make All Form Entries Undoable 让所有输入可撤销

To eliminate the Reset button, it becomes necessary to offer users another escape route for erroneous form entries. In the case of text fields or check boxes, the user can always erase the entry and revert to the original state.

去掉了重置按钮,我们有必要为用户提供其他的修改错误输入的方式。对于文本框和选择框来说,用户可以随时输入或恢复到最初的状态。

Unfortunately, some Web forms use radio buttons and pull-down menus in a non-standard manner and do not offer a neutral choice. A classic design mistake on the Web is to have radio buttons that initially do not have a selection. Often, there is no way for the user to select a "nothing" option, once he or she has selected one of the choices. Always include an explicit radio button for the default choice and always include a selectable menu entry in pull-down menus for the default choice. Otherwise you do trap users. (See also all 13 guidelines for checkboxes and radio buttons.)

不幸的是,有些使用了非标准风格的单选框(radio button)和下拉菜单的表单并没有提供回到初始状态的选项,而这是网页设计的典型错误之一。往往,一旦用户选择了一个选项,就没有办法作出“什么都不选” 的选择。永远别忘了在单选按钮和下拉菜单中加入明确的默认选项,否则你用户的麻烦就大了。

Exception: Use Reset for Repeated Form-Filling 例外:重复输入表单的重置按钮

Reset can be useful for forms that satisfy both of the following criteria:

当同时满足以下两个条件时,重置按钮将发挥它的作用:

  • the form is filled-in repeatedly by the same user
  • the data to be entered differs significantly from one use of the form to the next
  • 表单总是由一个用户反复填写
  • 填写的内容每次都有较大差异

Even if a user were to use a form frequently, the reset button would still not be necessary if the data was mostly the same from one use to the next. In these cases, it would be easier for the user to edit the old data than to erase it and start from scratch.

即使某个用户经常使用一个表单,当填入的数据每次都很相似时重置按钮也不是十分必要的。在这种情况下编写原有的数据要比重新来过简单得多

Cancel: Use Sparingly 保守地使用取消按钮

The Web is not an application environment, and it usually doesn't have dialog boxes. Instead, the Web is a navigation environment where users move between pages of information. Since hypertext navigation is the dominant user behavior, users have learned to rely on the Back button for getting out of unpleasant situations. Whenever users arrive at pages they don't want, they slam their mouse directly onto the Back button.

网页并不像软件一样拥有对话框,而是一个用户游走于各个页面之间的导航环境。自从超文本导航成为用户的使用习惯,人们开始依赖后退按钮来逃离窘境。 每当用户误入了不想进入的页面,他们就会自然而然地把鼠标放到后退按钮上。

Because Back is such a strong behavior on the Web, it is usually not necessary to offer explicit Cancel buttons. If the user asks for something but doesn't want it, then you can be sure that it's Back button time.

因为后退是网页浏览中很常规的行为,单独的取消功能也就不是那么重要了。如果用户不喜欢当前的页面,可以肯定,后退按钮就要出场了。

Offer a Cancel button when users may fear that they have committed to something they want to avoid. Having an explicit way to Cancel provides an extra feeling of safety that is not afforded by simply leaving.

当用户害怕自己提交了不想提交的信息时,可以为他们提供取消按钮,这样能够提供给他们比直接退出更安全的的感觉。

Cancel is mainly useful for multi-step dialogs where the user has progressed past one or more pages with actions. At this time, pressing the Back button will not undo these actions and it would be better if the user would click Cancel.

在需要多步填写的表单中用户会在超过一个页面上进行输入,这时取消按钮是个不错的选择,因为后退按钮不会撤销之前的输入。

Of course, one cannot rely on having the user click Cancel, even if it is offered, so the back-end logic must be able to handle abandoned multi-step dialogs where the user decided to leave through the use of the Back button. This added complexity is one of the reasons I don't recommend trying to implement advanced applications inside a Web browser. It is better to use another form of Internet-enabled applications.

当然,不能指望用户每次都点取消,应该有一个后端/后台逻辑来处理点击后退来中断多步输入的行为。额外的复杂性是我不推荐在网页中加入复杂应用的原 因之一,更好的办法是使用另一种形式来实现。

Remove Button in Shopping Carts 购物车中的移除按钮

It is necessary to have a special button in shopping carts for removing a product. Users cannot be assumed to understand that they can cancel a purchase by buying zero copies (even though this technique should be supported as well since it does not interfere with users unless they decide to use it on their own initiative).

很有必要在购物车中添加特殊的按钮来帮助用户移除商品,我们无法知道用户是不是了解他们能够通过购买“0”件商品来取消购物。(但是反正这个小技巧 也不影响其它用户,所以还是应该实现出来给懂的人用)

Clarification: When Cancel Is Necessary 到底什么时候使用用取消按钮

Lisa Padol asks:

Lisa Padol 问道:

When you talk about cancel and reset buttons, you do not mean the stop (as in "stop the page from loading") and reset/refresh buttons, correct?

"当你讨论取消和重置按钮时并没有提及停止(即在载入时停止页面)和刷新按钮,不是吗?我觉得这不仅是可以接受的,也很必要为比如下载文件的过程加入取消按钮。"

I presume it's not only acceptable, but also required to have a cancel button for things like downloading files?

She is correct in both assumptions. The browser's Stop button is a great example of a technique to increase the user's control of the dialogue. Same for a way to interrupt file transfers or any other actions that take more than a few seconds. Designers must include such features in any applets or other design elements that can take time.

她的假定完全正确,浏览器的“停止”按钮很好地加强了用户的控制权。而对于文件传输和其它一些得花好几秒钟的操作也应该这样做。设计师必须给 Applet(网页上的Java应用)和其它耗时的设计元素都加上停止功能。

本文地址:http://www.nowamagic.net/librarys/veda/detail/543,欢迎访问原出处。

不打个分吗?

转载随意,但请带上本文地址:

http://www.nowamagic.net/librarys/veda/detail/543

如果你认为这篇文章值得更多人阅读,欢迎使用下面的分享功能。
小提示:您可以按快捷键 Ctrl + D,或点此 加入收藏

大家都在看

阅读一百本计算机著作吧,少年

很多人觉得自己技术进步很慢,学习效率低,我觉得一个重要原因是看的书少了。多少是多呢?起码得看3、4、5、6米吧。给个具体的数量,那就100本书吧。很多人知识结构不好而且不系统,因为在特定领域有一个足够量的知识量+足够良好的知识结构,系统化以后就足以应对大量未曾遇到过的问题。

奉劝自学者:构建特定领域的知识结构体系的路径中再也没有比学习该专业的专业课程更好的了。如果我的知识结构体系足以囊括面试官的大部分甚至吞并他的知识结构体系的话,读到他言语中的一个词我们就已经知道他要表达什么,我们可以让他坐“上位”毕竟他是面试官,但是在知识结构体系以及心理上我们就居高临下。

所以,阅读一百本计算机著作吧,少年!

《代码之美》 聂雪军 (译者)

《代码之美》介绍了人类在一个奋斗领域中的创造性和灵活性:计算机系统的开发领域。在每章中的漂亮代码都是来自独特解决方案的发现,而这种发现是来源于作者超越既定边界的远见卓识,并且识别出被多数人忽视的需求以及找出令人叹为观止的问题解决方案。《代码之美》33章,有38位作者,每位作者贡献一章。每位作者都将自己心目中对于“美丽的代码”的认识浓缩在一章当中,张力十足。38位大牛,每个人对代码之美都有自己独特的认识,现在一览无余的放在一起,对于热爱程序的每个人都不啻一场盛宴。 虽然《代码之美》的涉猎范围很广,但也只能代表一小部分在这个软件开发这个最令人兴奋领域所发生的事情。

更多计算机宝库...