介绍

您可能想知道有人如何为整个文章组成有关谦逊,无处不在的单选按钮的整体文章 - 以及设计人员是否应该选择默认选择的选项之一。在你击中之前回来按钮,想到旧格言“魔鬼在细节中,”今天这么多的单选按钮是彻头彻尾的狡猾。如此阅读,以避免创建恶魔设计。

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

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

无线电按钮线框。

在传统的应用程序设计中,默认情况下,列表中的第一个单选按钮始终选择。但是,网站设计的肆无忌惮的世界挑战了这种做法,使得默认情况下没有选择单选按钮相当常见。今天的网站,形式和应用程序不一致地选择一个或默认将所有单选按钮留空。如果默认情况下没有选择按钮,则用户无法在选择选择后恢复此原始状态。缺乏标准可能会对用户令人困惑。

历史隐喻

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

带镀铬按钮的机械收音机

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

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

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

放弃这种独特的隐喻的第二个原因是因为物理设计本身被缺陷。即,大多数人没有意识到,没有选择任何按钮,因为没有感受到的信号。在典型的使用中,按下按钮会弹出(取消选择)已经选择的按钮。但你也可以回到“未被选中”状态通过用力拉选中按钮,直到它变成未被选中状态。人们是怎么知道的?他们必须被告知,读过用户手册,或者只是简单地猜测这是可能的。(我姐姐黛布(Deb)在我们小的时候告诉我的,从那以后我就把她当成爱因斯坦(Einstein)了。)

这种最初的设计缺陷继续破坏着今天的网站、应用程序和手机设计。基本上,设计师不知道默认单选按钮选择的规则是向上的(或向内或向外)。

默认情况下选择单选按钮

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

  • 用户控制,
  • 快速任务,和
  • 暗示的力量。

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

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

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

在默认情况下选择单选按钮可以防止这些问题,并从一开始就告知用户需要在集合中选择一个按钮。

2.加快任务

当已知一组单选按钮中的选择是最需要的或频繁选择的选择时,在设计中默认选择此项非常有帮助。这样做减少了互动成本并且可以保存用户时间并单击。

举个例子,几年前,我在旅行时加入Care.com,为我的凯恩梗“哥伦布”找一个狗保姆。在我找到某人后,我决定退出该服务。当我取消我的会员资格时,网站迅速地呈现了一个带有两个单选按钮的页面:一个是取消订阅,另一个是保留我的会员资格,以备我需要备份护理或其他类型的护理。(也许我的无花果树需要照料?)

网站呈现的消息 -是的,切换我的会员资格,节省高达83%- May已经卖掉了一些人推迟取消,因为将促销放在号码按钮列表中的第一位置。但是,理解大多数人真正想要取消订阅,如果他们已经达到了这个特殊点,所以设计人员默认选择的单选按钮读取不,谢谢,继续降低我的会员资格。这个默认选项允许我扫描选项并单击继续按钮,而不是需要单击和选择没有,当我刚刚告诉网站时我想取消订阅时,感觉很烦恼。

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

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

在马萨诸塞州运输部网站上,更新汽车登记的支付页面提供了支付方法:电子支票要么信用卡,但没有默认选择。

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

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

3.利用建议的力量

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

帮助的人

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

选择典型的无线电,高级不是

Dropbox中的安装对话框通过提供默认选择来帮助用户。

摇摇欲坠

组织有动机并经常想要说服用户以有利于他们的方式行事,这是一个秘密。默认选择可以哄人沿着特定的道路。默认选择也可能导致一个人以特定方式感知组织,或可能会影响他的归属感。

以捐赠资金捐赠给一个原因的例子 - 对自我意识到他们计划捐赠金额的人的敏感话题。考虑一个人如何对单选按钮建议的金额作出反应,尤其是所选默认值。让我们想想2个简短的情景来指导我们:

场景1:某人计划捐30美元。他看到了单选按钮,然后:

  • 决定30美元不到组织想要的,所以他根本没有捐出。这种情况对于组织和用户来说是否定的。
  • 过度扩展自己给50美元。该决定对本组织(至少在短期内)和负责人的负面。

场景2:有人想捐1万美元。他看到了单选按钮,然后:

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

有时,用户的假设可能是错误的,或者可能与组织的目标或最佳利益相违背。如果用户的意向选择与可用的或建议的选择有很大的不同,它们也会让用户感到疏远。选择的数额可能是武断的,让一些人反感,并可能降低其他人的捐款数额。所以,为了做出最好的选择,一定要了解您的组织的目标和您的用户典型行为。

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.

捐赠字段中没有默认金额

世界野生动物基金允许人们输入他们每月捐赠的金额,但为该领域的金额提出了建议。

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

选择了50美元的收音机,25美元,100美元,500美元,1,000美元和5,000美元都是空白的手机上的单选按钮会让你很难分辨哪个数量对应哪个收音机

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

默认情况下会选择与$50关联的单选按钮。我不知道EDF是如何达到这个默认值的,但我猜他们选择它是为了帮助用户,可以想象,50美元是最常见的捐款数额。或者这个网站是个性化的,或者使用cookie,并且知道50美元是这个人过去的捐赠。

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

设计笔记

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

克服借口

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

不知道大多数用户想要或做什么

在建议任何选择时研究用户非常重要,并且可以在本文的下一部分中列出的方法有效地执行此操作。

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

单选按钮的默认选择,设计师常常纠结于是否选择一个性别或指定如先生,夫人,小姐,小姐或设计师不想得罪客户或风险应对的人错误的指示,所以他们离开单选按钮默认所有的空白。但是,这并不能解决问题,因为即使是指定的顺序也可能具有与默认选择类似的效果。更好的替代没有默认选择包括以下:

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

表格要求名字和姓氏,但不是先生。太太。多发性硬化症。小姐等

Johndeeregifts.c​​om并不要求先生先生,小姐,斯文女士。

需要安全网

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

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

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

如何确定最佳默认的单选按钮选择

设计师对UX研究方法有许多选择 - 快速或涉及,便宜或昂贵,高或低信心 - 帮助他们找到对用户最适合的答案。从这些研究方法开始,以确定合理的默认值可能是:

  • 跟踪网站指标,查看过去的订单和选择(考虑对重复用户的个性化和cookie)
  • 调查用户
  • 进行任务分析民族志研究
  • 个人,故事和场景

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

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

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

默认选择的原因

  • 匹配旧收音机的隐喻(坏):这不是一个充分的理由,因为它没有必要(或可能有用)来匹配这个特定的隐喻。
  • 加快任务(好):如果您对任务分析和大多数用户进行了相同的选择,请制作默认选择是有用的。
  • 让人们控制并与他们的期望(好)对齐:默认情况下,最好有一个选定的单选按钮,因为在选择后,人们无法取消选择并将按钮设置回其原始状态。默认选择设置正确的用户期望。
  • 建议的力量(好):选择是指导性的。有些事情需要注意,尽管是专横的,咄咄逼人的,冒犯,或疏远。考虑内容和默认选择,用户将如何对其作出反应,以及该选择在短期和长期内对用户和组织的影响。除非它经过了彻底的测试(通过观察方法和度量)并被证明是成功的,否则避免自以为是的默认选择。

没有默认选择的借口

  • 不了解用户想要或做什么:在此和任何设计情况下,它都会让我们了解我们的用户以及他们想要的东西和需要的东西,最常做。
  • 专横或疏远的选择:这可能是不默认选择单选按钮的最合理的原因。但是要考虑是否需要询问信息,或者是否可以使用不同的UI控件来捕获所需的数据。
  • 安全网:抓住人,​​确保他们看到并积极选择一个选择:可能有更优雅的方式设计互动,而不是预计用户错过命令并在事实之后用错误消息捕捉他。寻求替代方法,以指导用户的注意力。

如果您无法自信地提供无线电按钮列表中的默认选择,请考虑使用备用UI控件,该控件适应特定情况及其目标和约束。

额外的信用答案

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

有关单选按钮和其他GUI小部件的更多信息,请参见我们的Web和桌面的应用设计课程。