用于输入激活码的 UI 元素答案

【问题标题】：UI elements for entry of an activation code用于输入激活码的 UI 元素
【发布时间】：2010-01-28 15:42:49
【问题描述】：

我遇到了一些可用性问题，我会重视一些意见。

我网站的初始页面包含两组控件，一组供用户登录，另一组供新用户激活。

问题在于后者。当用户注册该服务时，他们会收到一个格式为 XXXX-XXXX-XXXX-XXXX 的激活码。目前，他们必须将其输入到四个单独的文本字段中。虽然我已经添加了一些 javascript 来自动在文本字段之间来回移动它们，就好像它是一个单独的控件（效果很好），但问题是它缺乏一种让用户将数据粘贴到其中的方法，并且作为这有点痛苦。

现在这不是一个大问题，但这可能意味着人们对我的网站的第一次体验有点令人沮丧，不得不在包含他们的激活码的电子邮件和我的页面之间来回跳转。这显然不是最优的。

此时您可能认为显而易见的答案是将激活码输入到单个文本字段中。你是对的，但如果我这样做，我会失去一件非常重要的事情：我失去了一种形式和另一种形式之间的关键视觉区别，它会自动告诉用户他们需要使用哪种形式，而无需阅读或不必阅读任何内容分析一件事。就目前而言，页面上有两个不同形状的洞，用户数据显然只适合其中一个，所以在某种程度上，哪个表格与他们相关是显而易见的。

那么，有人对此有什么好的解决方案吗？唯一的限制是我需要将所有控件保留在一个页面上。

提前感谢您的帮助。

编辑：

感谢到目前为止的所有输入，其中的每一点都很有价值。我目前认为最好的解决方案不是单一的东西，而是不同方法的融合，以使整个东西更有用。

在此基础上，根据您的所有建议，我将执行以下操作：

在购买电子邮件中，设置链接到初始页面，使其包含激活码请求参数。设置初始页面检查并转发它们直接上。这大概意味着绝大多数用户甚至不会看到初始页面，但会有仍然是人们收到的情况他们的代码以其他方式和将必须直接输入它们
将四个文本字段转换为单个文本字段 “XXXX-XXXX-XXXX-XXXX”作为内联标签。
将登录控件设置为转发任何错误输入的用户他们的激活码在这里，而不仅仅是将它们转储到错误屏幕。

我不知道为什么我一开始就没有包含它，但是 here's the URL 对于任何想要查看当前实现的人来说（你必须原谅它是意大利语的事实，但它应该是相当简单的）。

已经给出了 bryan 的答案，其中包含了我将要使用的大部分内容。如果我有必要的声誉，我会投票赞成你所有的答案，因为它们都有帮助。再次感谢。

【问题讨论】：

标签： html input usability user-experience

【解决方案1】：

一些简单的选择：

您可以让它们保持相同的物理页面，只需在发送激活码时更改查询字符串。如果查询字符串可用，则隐藏一组控件。如果您必须显示这两个部分，则根据查询字符串信息将一个部分变灰。
将控件更改为具有一个文本字段，但在新用户激活中包含“XXXX-XXXX-XXXX-XXXX”作为默认文本。如果用户单击文本框，请删除文本，这样他们的激活码就不会包含提示文本。如果人们期望这种模式，人们会看到默认文本并倾向于它。登录的人将看到默认文本并将其屏蔽。

【讨论】：

选项 1 是我没有考虑过的一种可能性，因为我当然可以控制他们将点击的链接。这实际上让我感到有点愚蠢！选项 2 也很好，我什至可以与 1 一起使用来澄清。感谢这两个。我仍然会坚持并尝试保留我的四个文本字段，但如果理由占上风，我可能会选择这些。
回复：选项 1。有时只是从问题中退后一步。 :-)。许多网站通过查询字符串发送激活码，您可以考虑。

【解决方案2】：

您可以在 JavaScript 中编写一个 onpaste 函数，将粘贴的字符串分成 4 个字符块，然后通过 dom 将它们写入适当的文本框。

【讨论】：

我确实考虑过这一点，但问题是让用户知道他们可以以直观的方式做到这一点。我认为大多数用户会一看，假设他们无法粘贴并放弃而不尝试。而且我有点想避免必须按照“你可以粘贴”的方式编写或显示一些东西，因为我认为当你不得不拼出它时，你无法制作一个特别有用的系统！这是我的大脑失败的地方......不过我更喜欢它，因为它看起来不错。
我同意。它不是我自然期望从 4 个文本框获得的那种功能，但我认为它可能是合适的。当然，如果您决定坚持使用 4 个单独的文本框，您应该实施这一点，因为尝试粘贴的少数人会感到惊喜。不过，我会继续思考这个问题，并希望看到其他人的建议

【解决方案3】：

在我看来，您遇到了用户混淆两个文本框的问题，但您将一个文本框分成四个文本框会使情况变得更糟。例如，通过字段自动切换是不好的可用性 - 请参阅 cmets 和对“Moving a focus when the input text field reaches a max length”的回答。

假设这不是一个假设的问题，并且您实际上观察到人们使用了错误的字段，您需要为用户混淆字段找到另一种解决方案：

使用简洁的字段标签。将字段标记为“激活码”而不是“输入您注册时我们发送给您的电子邮件中的 16 个字符的破折号分隔的激活码。”解释从何处获取激活码所需的文本应在文本框之后。
在文本框外部使用提示文本或图形设计来指示它有四个子字符串。例如，在文本框下方输入“XXXX-XXXX-XXXX-XXXX”。
从页面中删除所有无关元素 - 页面上的图形和文本干扰越多，两个文本框之间的差异就越少。
让用户使用哪个文本框无关紧要。如果在用户名文本框中输入的字符串不匹配任何用户名，则查看它是否匹配任何激活码，反之亦然。
去掉激活码文本框。相反，当您发送激活请求时，请包含一个注册 URL，其中包含作为参数的激活码（bryanjonker 回答的更多详细信息）。

抱歉，这应该是评论，而不是答案，但它不适合。

【讨论】：

关于字段自动选项卡的要点。你是绝对正确的，因为即使我喜欢实施，它也会让我烦恼。我没有观察到任何人实际上使用了错误的字段，但之前我观察到用户有一段时间犹豫不决，因为两种表单都包含相同的文本字段，因此他们必须弄清楚他们需要哪个字段。因此，渴望在视觉上进行区分。你所有的观点都很好（见我的编辑），但我想说第四点尤其如此。没有看到这一点，我显然是以过于程序化的方式来解决这个问题的，所以谢谢你。