介绍

You are probably wondering how anyone could muster enough words for an entire article about the humble, ubiquitous radio button—and specifically, whether the designers should choose one of the options to be selected by default or not. Before you hit theBack按钮,想到旧格言“魔鬼在细节中,”今天这么多的单选按钮是彻头彻尾的狡猾。如此阅读,以避免创建恶魔设计。

首先,一个快速提醒的是什么是单选按钮所做的:它们显示了一组人可以从中显示一组互斥的选项完全选择一个。有时候人们混淆单选按钮和复选框但是,当用户可以选择任意数量的选择(零,一个或多个)时,复选框是使用的GUI小部件。

4选项1的单选按钮选择,选项2,3和4未选择

无线电按钮线框。

In traditional application design, the first radio button in the list was always selected by default. But the unbridled world of website design challenged this practice, making it fairly common to have no radio button selected by default. Today’s websites, forms, and applications inconsistently select one or leave all radio buttons blank by default. If none of the buttons is selected by default, users have no way to revert to this original state after they’ve made a selection. The lack of a standard can be confusing to users.

Historical Metaphor

模拟收音机的时间长期过去了。我开车的二手雪佛兰·普通峡湾(即当在1980年代的发动机实际翻过来时)吹嘘一个带有机械按钮的无线电,如下面的图像中的一个。

mechanical radio with chrome buttons

在旧车中找到了带有机械按钮的收音机的一个例子。

使用年龄的此和其他无线电需要体力以推动按钮并改变电台。您还需要硕士学位,以成功地“程序”其中一个按钮。(额外信用:将其中一个按钮编程到广播电台的步骤是什么?在本文末尾的回答。)

在这些物理单选按钮之后建模软件单选按钮。斯基因族反对者可能是Baulk,但是使用模拟物理世界的隐喻可能有用和吸引力。但是,在这种特殊情况下,这些陈旧的无线电今天是大多数网上用户群的外国。这是对匹配这个现实世界隐喻的论点。

放弃这种独特的隐喻的第二个原因是因为物理设计本身被缺陷。即,大多数人没有意识到,没有选择任何按钮,因为没有perceived affordance信号。在典型使用,按一个按钮pop out (deselect) the already selected button. But you could also go back to the “none selected” state by pulling quite hard on the selected button until it came out to the deselected state. How would people know this? They had to be told, read it in the owner's manual, or just plain guess it was possible. (My sister Deb told me when we were kids, and I thought she was Einstein from then on.)

This original design defect continues to mar today’s websites, applications, and mobile designs. Basically, designers don't know which way is up (or in or out) with the rules about default radio button selection.

Select a Radio Button by Default

单选按钮设计的主要准则是默认选择一个单选按钮(即,当页面加载时,在Web应用程序的情况下。)这是良好的可用性和优雅的设计。我说这不是因为我正在为传统主义挥手横幅,甚至是一致性的。相反,在这种情况下,我会在这种情况下游行的横幅将以概念为如下装饰:

  • 用户控制,
  • 快速任务,和
  • the power of suggestion.

1.让人们控制并与他们的期望保持一致

One of the10 UI设计的启发式说用户应该能够撤消(和重做)他们的行动。这意味着使人们能够将UI控件设置回其原始状态。对于大多数控件,您可以“取消选择”您所做的选择。(必需的元素可以稍后使用注释或错误消息捕获您。)但您无法单击或点击所选的单选按钮以取消选择。

默认选择未选择选择的选定操作的最终位置。这种互动模型令人困惑和意外,并导致人们感到失控。它还煽动人们做疯狂的事情,如回去,可能丢失内容,刷新页面,双击(或点击)单击(或点击)单选按钮取消选择它,并以其他迷信的方式行事。

Selecting a radio button by default prevents these issues and communicates to the user from the start that he is required to choose one in the set.

2. Expedite Tasks

当已知一组单选按钮中的选择是最需要的或频繁选择的选择时,在设计中默认选择此项非常有帮助。这样做减少了interaction cost和can save the user time and clicks.

For example, years ago I joined Care.com to find a dog sitter for my Cairn terrier, Columbo, when I traveled. After I found someone, I decided to unjoin the service. As I canceled my membership the site astutely presented a page with two radio buttons: one for unsubscribing and one for keeping my membership in case I needed backup care, or needed other types of care. (Perhaps my fig tree needed tending?)

网站呈现的消息 -是的,切换我的会员资格,节省高达83%--may have sold some people on postponing canceling, as did placing the promotion in the first position in the radio-button list. But, understanding that most people really do want to unsubscribe if they have reached this particular point, the designers selected by default the radio button which readsNo thanks, continue downgrading my membership.This default enabled me to just scan the choices and click theContinuebutton, rather than needing to click and select theNo,和feeling annoyed by having to do that when I had just told the site I wanted to unsubscribe.

Car.com消息说你几乎已经完成了,但展示了保持MEBERSHIP的好处

Care.commarly巧妙地制作了与取消会员资格相关的单选按钮默认选择。

On Massachusetts’ Department of Transportation site, the payment page for renewing a car registration offers payment methods:Electronic Check或者Credit Card,但没有默认选择。

电子支票和信用卡单选按钮都是空白的

网站审查metrics并下订单可以快速确定最受欢迎的付款方式,将设计师删除其中哪一个应该是默认选择。

3.利用建议的力量

使用默认选择的单选按钮设计强烈的建议 - 即使是用户的认可。默认选择可能导致用户做出最佳决定,并且可以随着他的收益而增加他的信心。特别是,默认的无线电选择可以帮助这个人,并以组织希望他去的方向摇摆一个人。

Assist the Person

默认值帮助用户。它们在选择可能复杂或不熟悉的情况下特别义务。当标签和描述是外国的时,默认值将用户指向他可能无法理解的最佳选择。例如,Dropbox的安装屏幕中的一个选择标有的单选按钮典型的帮助人们开始安装。此外,这个术语先进的juxtaposed against典型的使后者更有吸引力,对较少的掌握用户更具吸引力。和这些话推荐的normalalso instill confidence.

typical radio is selected, advanced is not

进攻的Dropbox协助用户安装对话框ring a default selection.

摇摇欲坠

It’s no secret that organizations have motives and often want to persuade their users to act in ways that are beneficial to them.默认选择可以哄人沿着特定的道路。默认选择也可能导致一个人以特定方式感知组织,或可能会影响他的归属感。

Take the example of donating money to a cause—a sensitive topic for people who are self-conscious about the amount they plan to donate. Consider how a person might react to the amounts suggested by the radio buttons, and especially to the selected default. Let’s think of 2 short scenarios to guide us:

Scenario 1: Person plans to give $30. He sees the radio buttons and:

  • 决定30美元不到组织想要的,所以他根本没有捐出。这种情况对于组织和用户来说是否定的。
  • overextends himself to give the $50. The decision is positive to the organization (at least in the short term) and negative to the user.

Scenario 2: Person wants to donate $10,000. He sees the radio buttons and:

  • 决定给予所有10,000美元是过高的,并将其捐赠减少到更小的金额。这个选择对组织负是负面的。
  • 遵循推荐并提供50美元(并捐赠其他10万美元其他地方。)再次,这一决定对本组织负面。

Occasionally, users’ assumptions may be wrong or they may go against the organization’s goals or best interest. They may also make the user feel alienated if his intended choice is very different from the available or suggested choices. A selected amount could be presumptuous, off-putting to some, and may lower donation amounts of others. So, to make the best selection,一定要了解您的组织的目标和您的用户典型行为。

If you can’t confidently collect the information about your users, consider an alternative UI control (besides radio buttons with none selected.) Maybe do what the World Wildlife Fund does for their monthly donation section for the polar bears: an empty field with a suggested amount appearing after the field.

捐赠字段中没有默认金额

World Wildlife Fund allows people to type the amount they want to donate monthly, but makes a suggestion for the amount after the field.

在另一个例子中,环境防范基金网站建议捐赠金额在25美元至5,000美元之间。尽管有默认选择,但拟议金额的事实只是通过告诉用户该组织预计人们至少25美元,因此拟议的额度设定了舞台。

选择了50美元的收音机,25美元,100美元,500美元,1,000美元和5,000美元都是空白的Radio buttons wrap on the phone making it hard to tell which amount corresponds with which radio

环保基金网站将50美元纳入违约捐赠,如两者所见responsive-design笔记本电脑(左)和手机上的版本(右边)

The radio button associated with $50 is selected by default. I don’t know exactly how EDF arrived at this default, but I can guess that they chose it to assists users, and that conceivably $50 is the most common donation amount. Or maybe the site is personalized or uses a cookie, and knows that $50 is what the person donated in the past.

但是,让我们假设动机是为了摇摆人们donating50美元或以上。在这种设计中,人们认为,人们捐赠5,000美元是合理的;50美元是trivial in comparison。因此,该网站基本上说,“人们给5,000,但我们满意50美元。”这种谦卑甚至可能魅力一些捐赠者,以筹备100美元或500美元。

设计笔记

  • 水平单选按钮有时难以扫描。从EDF示例中看出,单选按钮的水平布置可以使其具有挑战性地告诉信息单选按钮对应的标签对应:按钮之前的标签或之后的标签。在手机上观看此EDF响应设计网站时,此问题更加明显。单选按钮的垂直定位更安全。
  • 单选按钮本质上很小,因此,根据Fitts的法律,它们很难单击或点击。要扩大目标区域,让用户通过单击或不仅仅是该按钮来选择一个选项,还可以选择标签或相关单词。这比不得不获得按钮本身的微小目标更容易。

Overcome the Excuses

下面我确定了留下无线电空白的一些共同防御。

Not Knowing What Most Users Want or Do

It is important to study users when suggesting any choices, and it is possible to do this effectively with methods listed in the next section of this article.

避免撤消或易默认的默认选择

A radio button default selection that designers often struggle with is whether to select a gender or a designation such as Mr., Mrs., Ms., or Miss. Designers don't want to offend customers or risk addressing a person with the wrong designation, so they leave the radio buttons all blank by default. This doesn't solve the problem though, because even the order in which designations are presented may have an effect similar to that of a default selection. Better alternatives to no default selection include the following:

  • Study your user population to determine the designation most people fall under. Select it by default.
  • 确保可显示单选按钮,以便该人可以批准或更改选择。
  • 如果您已经知道用户是谁(例如,通过基于角色的系统,)选择正确的指定。
  • 提供一个人们可以键入指定的开放领域,并且该网站对后端的工作进行了处理,以保持数据库清洁。
  • 考虑是否需要询问此信息。了解用户的指定确实提供了为您的人添加一定程度的形式和尊重人的界限提供机会。但如果该手势并不是特别重要的,您可能会采取一个提示表单网站,如Johndeeregifts.c​​om,并仅询问人名,没有指定。

The form asks for first name and last name, but not mr. mrs. ms. miss, etcis

JohnDeereGifts.com doesn’t ask for Mr., Mrs., Miss, Ms. designations at all.

需要安全网

一些设计师担心人们不会看到默认选择选项。或者组织的律师或联邦机构的任务是用户积极点击并接受选择。在其中一些情况下,设计提供无线电无默认选择。例如,用户可能无法提交表单,例如,直到他选择单选按钮,或者如果他可以提交表格,他会收到错误消息骂他以进行选择。

这是一个难以想象的设计安全网。处理令人不愉快的是,是一种迫使注意力的令人难以理解的方式。考虑其他选择,例如:

  • 使用线性逐步处理,使人们虽然可能的选择。
  • 使用足够的间距,文本,尺寸和颜色设计页面布局,以指示用户对重要选择的关注。
  • 考虑重构内容并提供复选框以确认选择。
  • 如果足够简单,请将确认作为按钮名称的一部分,以继续或提交页面或对话框。

How to Determine the Best Default Radio-Button Choice

Designers have many choices for UX research methods—rapid or involved, cheap or expensive, high or low confidence—to help them find the answer about what’s best for users. Start with these research methods to determine what a reasonable default may be:

至于业务需求和欲望,与业务所需的权力讨论以擅长擅长的权力,并将人们指向那些选择,公正地和截然不同。

摘要:默认选择一个单选按钮

以默认选择为单选按钮中使用的设计问题和选择是有帮助的,并以积极的方式提出建议。如果您正在考虑默认选择单选按钮,请仔细考虑您的理由。

默认选择的原因

  • 匹配旧收音机的隐喻(坏):这不是一个充分的理由,因为它没有必要(或可能有用)来匹配这个特定的隐喻。
  • 加快任务(好):如果您对任务分析和大多数用户进行了相同的选择,请制作默认选择是有用的。
  • 让人们控制并与他们的期望(好)对齐:默认情况下,最好有一个选定的单选按钮,因为在选择后,人们无法取消选择并将按钮设置回其原始状态。默认选择设置正确的用户期望。
  • Power of suggestion (Good): Selecting is directive. Some things to watch out for though are being presumptuous, pushy, offensive, or alienating. Consider the content and the default selection, how users will react to it, and the effect the selection will have on the user and the organization in both the short and long term. Unless it’s been thoroughly tested (via observational methods as well as with metrics) and proven successful, avoid presumptuous default selections.

没有默认选择的借口

  • 不了解用户想要或做什么:在此和任何设计情况下,它都会让我们了解我们的用户以及他们想要的东西和需要的东西,最常做。
  • Presumptuous or alienating choice: This is probably the most valid reason for not selecting a radio button by default. But consider whether you need to ask for the information at all, or whether you can use a different UI control to capture the data you need.
  • 安全网:抓住人,​​确保他们看到并积极选择一个选择:可能有更优雅的方式设计互动,而不是预计用户错过命令并在事实之后用错误消息捕捉他。寻求替代方法,以指导用户的注意力。

If you cannot confidently and contently provide a default selection in the list of radio buttons, consider using an alternate UI control that accommodates the particular situation and its goals and constraints.

额外的信用答案

您是否放弃了如何与那些老学校,机械按钮“编程”一站?这是怎么做的。使用调谐器拨盘到达您想要的电台,然后将按钮定位为“程序”站。现在将该按钮拉出,超过“未选择”状态。尽管你真的试图打破收音机,但它很难。然后将其全部推回来,所以它被选中。通常是有效的。要测试它,请更改站,然后再按按钮,看看它是否调整到您想要的电台。如果它有效,请用尼尔钻石的漂亮一点点放松。如果它不起作用然后重复,更好。

For more about radio buttons and other GUI widgets, also see ourWeb和桌面的应用设计course.