用于输入激活码的UI元素

时间:2010-01-28 15:42:49

标签: html input usability user-experience

我有一些可用性问题,我很重视一些输入。

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

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

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

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

那么,有没有人对此有任何好的解决方案?唯一的限制是我需要将所有控件保留在一个页面上。

提前感谢您的帮助。

修改

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

在此基础上,根据你的所有建议,这就是我要做的事情:

  • 在购买邮箱中,设置链接 到初始页面这样 包含激活码 请求参数。设置初始页面 检查并转发它们 直接这可能意味着 绝大多数用户甚至都不会 看到初始页面,但会有 仍然是人们收到的案件 他们的代码通过其他方式和意志 必须直接输入
  • 将四个文本字段转换为a 单个文本域 “XXXX-XXXX-XXXX-XXXX”作为内联 标签
  • 设置要转发的登录控件 对任何错误输入的用户 他们的激活码只是将它们转储到错误屏幕。

我不知道为什么我没有首先包含它,但here's the URL对于任何想要查看当前实现的人来说(你必须原谅它是这样的事实)在意大利语中,但它应该是相当简单的。)

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

3 个答案:

答案 0 :(得分:1)

您可以在JavaScript中编写一个onpaste函数,将粘贴的字符串切换为4个字符块,然后通过dom将它们写入相应的文本框。

答案 1 :(得分:1)

一些简单的选择:

  1. 您可以将它们保持为相同的物理页面,只需在发送激活码时更改查询字符串即可。如果查询字符串可用,则隐藏一组控件。如果必须显示两个部分,则根据查询字符串信息将一个部分灰显。

  2. 将控件更改为包含一个文本字段,但在“新用户激活”中包含“XXXX-XXXX-XXXX-XXXX”作为默认文本。如果用户单击文本框,请删除文本,以便它们不包含带有激活码的提示文本。人们会看到默认文本,如果他们期待这种模式,就会倾向于它。登录的人将看到默认文本并将其阻止。

答案 2 :(得分:1)

听起来你有一个用户混淆两个文本框的问题,但是你通过将一个文本框分成四个来改善它。例如,通过字段自动切换是糟糕的可用性 - 请参阅“Moving a focus when the input text field reaches a max length的评论和答案。”

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

  • 使用简洁字段标签。标记字段“激活码”而不是“从我们注册时发送给您的电子邮件中输入您的十六个字符划线划分的激活码。”解释在何处获取激活码所需的文字应该是之后文本框。

  • 在文本框外部使用提示文字或图形设计,表示它有四个子字符串。例如,在文本框下方放置“XXXX-XXXX-XXXX-XXXX”。

  • 从页面中删除所有无关的元素 - 页面上的图形和文本分心越多,两个文本框之间的差异就越小。

  • 使其成为用户使用哪个文本框无关紧要。如果在“用户名”文本框中输入的字符串与任何用户名不匹配,请查看它是否与任何激活码匹配,反之亦然。

  • 删除激活码文本框。相反,当您发送激活请求时,请包含一个注册网址,其中包含激活码作为参数(详细信息请参阅bryanjonker)。

对不起,这应该是一个评论,而不是一个答案,但它不合适。