用于输入激活码的 UI 元素
我遇到了一些可用性问题，我希望得到一些意见。
我网站的初始页面包含两组控件，一组用于用户登录，另一组用于新用户激活。
问题在于后者。当用户注册该服务时，他们会收到格式为 XXXX-XXXX-XXXX-XXXX 的激活码。目前，他们必须将其输入到四个单独的文本字段中。虽然我添加了一些 JavaScript 来自动在文本字段之间来回移动它们，就好像它是一个单独的控件（效果很好），但问题是它缺乏一种让用户将数据粘贴到其中的方法，并且作为这有点痛苦。
现在这不是一个大问题，但它可能意味着人们对我的网站的第一次体验有点令人沮丧，必须在包含其激活码的电子邮件和我的页面之间来回跳转。这显然不是最佳的。
此时，您可能认为显而易见的答案是将激活码输入到一个文本字段中。你是对的，但如果我这样做，我会失去一件非常重要的事情：我失去了一种表单和另一种表单之间的关键视觉区别，它会自动告诉用户他们需要使用哪种表单，而无需阅读任何内容或不必阅读任何内容分析某事。目前，页面上实际上有两个不同形状的孔，用户数据显然只适合其中一个，因此在某种程度上，哪种形式与他们相关是显而易见的。
那么，大家有什么好的解决办法吗？唯一的限制是我需要将所有控件保留在一个页面上。
预先感谢您的任何帮助。
编辑：
感谢您迄今为止提供的所有意见，其中的每一点都很有价值。我目前认为最好的解决方案不是单一的一件事，而是实际上将不同方法结合起来，使整个事情变得更可用。
在此基础上，根据您的所有建议，我要做的就是：
- 在购买电子邮件中，设置链接 到初始页面，这样它 包含激活码 查询字符串。设置初始页面 检查并转发它们 直接。这可能意味着 绝大多数用户甚至不会 看到初始页面，但会有 仍然存在人们收到的情况 他们的代码将通过其他方式 必须直接输入它们
- 将四个文本字段转换为 单个文本字段 “XXXX-XXXX-XXXX-XXXX”作为内联 标签。
- 设置登录控件以转发 对于任何错误输入的用户 他们的激活码在这里，而不仅仅是将它们转储到错误屏幕。
我不知道为什么我一开始没有包含它，但是这是网址对于任何想要查看当前实现的人（您必须原谅它是意大利语的事实，但它应该相当简单，什么是什么）。
已向布莱恩给出答案，其中包含我将要使用的大部分内容。如果我有必要的声誉，我会投票赞成您的所有答案，因为它们都有帮助。再次感谢。
I've got a bit of a usability issue that I'd value some input on.
The initial page to my site contains two groups of controls, one for users to login, the other for new users to activate.
The issue is with the latter. When users signup for the service, they recieve an activation code that's in the form XXXX-XXXX-XXXX-XXXX. At the moment they have to enter this into four separate textfields. Whilst I've added some javascript to this to automatically move them back and forwards between textfields as if it were a single control (which works pretty well) the issue is that it lacks a way for the user to paste their data into it and as such is a bit of a pain.
Now this is not a huge issue, but it potentially means that peoples very first experience with my site is a slightly frustrating one, having to hop backwards and forwards between the email containing their activation code and my page. That's obviously not optimal.
At this point you're probably thinking that the glaringly obvious answer would be to make the activation code entry into one single textfield. And you would be right, but I lose one very important thing if I do this: I lose the key visual differentiator between one form and the other, which automatically tells the user which is the form they need to use without reading anything or having to analyse anthing. As it is at the moment, effectively there are two different shaped holes on the page and the users data will obviously only fit one of them so, to an extent, it's a no-brainer which form is relevant to them.
So, does anyone have any good solutions to this? The single restriction is that I need to keep all controls on one single page.
Thanks in advance for any help.
Edit:
Thanks for all the input so far, every bit of which has been valuable. I'm currently thinking that the best solution is not one single thing, but actually an amalgamation of different approaches to make the whole thing more usable.
On that basis, here's what I'm going to do, based on all your suggestions:
- In the purchase email, setup the link
to the initial page such that it
contains the activation code in the
querystring. Setup the initial page
to check this and forward them
straight on. This probably means that
the vast majority of users won't even
see the initial page, but there will
still be cases whereby people receive
their codes by other means and will
have to input them directly - Convert the four textfields to a
single textfield with
"XXXX-XXXX-XXXX-XXXX" as an inline
label. - Setup the login controls to forward
on any user that mistakenly enters
their activation code here without just dumping them to an error screen.
And I don't know why I didn't include it in the first place, but here's the URL for anyone that wants to take a look at the current implementation (you'll have to excuse the fact that it's in Italian, but it should be fairly straightforward what's what).
Have given the answer to bryan which contains most of what I'm going to use. If I had the necessary reputation I'd vote up all your answers as they've all helped. Thanks again.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
一些简单的选项：
您可以将它们保留在相同的物理页面上，只需在发送激活码时更改查询字符串即可。如果查询字符串可用，则隐藏一组控件。如果您必须显示这两个部分，请根据查询字符串信息将其中一个部分变灰。
将控件更改为只有一个文本字段，但在新用户激活中包含“XXXX-XXXX-XXXX-XXXX”作为默认文本。如果用户单击文本框，请删除该文本，以便他们的激活码中不包含提示文本。如果人们期待这种模式，他们会看到默认文本并倾向于它。登录的人将看到默认文本并将其屏蔽。
A few easy options:
You can keep them the same physical page, just alter the querystring when you send the activation code. Hide one set of controls if the querystring is available. If you have to display both sections, then grey out one section based on the querystring information.
Change the control to have one textfield, but include "XXXX-XXXX-XXXX-XXXX" as the default text in the New User Activation. If the user clicks on the textbox, remove the text so they don't include the prompting text with their activation code. People will see the default text and gravitate towards it if they're expecting that pattern. People logging in will see the default text and block it out.
您可以在 JavaScript 中编写一个 onpaste 函数，它将粘贴的字符串切成 4 个字符的块，然后通过 dom 将它们写入适当的文本框。
You could write an onpaste function in JavaScript which chops up the pasted string in to 4character blocks and them writes them to the appropriate textbox's via the dom.
在我看来，您遇到了用户混淆两个文本框的问题，但是您通过将一个文本框分成四个而使情况变得更糟。例如，通过字段自动选项卡的可用性很差 - 请参阅“当输入文本字段达到最大长度时移动焦点。”
假设这不是一个假设的问题，并且您实际上观察到人们使用了错误的字段，您需要为用户混淆字段找到另一种解决方案：
使用简洁的字段标签。将字段标记为“激活码”而不是“输入您注册时我们向您发送的电子邮件中的十六个字符的破折号分隔的激活码”。解释从哪里获取激活码所需的文本应位于文本框之后。
在文本框外部使用提示文本或图形设计来指示它有四个子字符串。例如，在文本框下方输入“XXXX-XXXX-XXXX-XXXX”。
从页面中删除所有无关元素 - 页面上的图形和文本干扰越多，两个文本框之间的差异就越少。
从页面
让用户使用哪个文本框并不重要。如果在“用户名”文本框中输入的字符串与任何用户名都不匹配，则查看它是否与任何激活码匹配，反之亦然。
删除激活码文本框。相反，当您发送激活请求时，请包含一个注册 URL，其中包含激活代码作为参数（更多详细信息请参见 bryanjonker）。
抱歉，这可能应该是一条评论，而不是一个答案，但它不适合。
Sounds to me you’ve a problem of users confusing two text boxes but then you’re making it worse by dividing one text box into four. For example, auto-tabbing through fields is bad usability -see comments and answers to “Moving a focus when the input text field reaches a max length.”
Assuming this isn’t a hypothetical problem and you’ve actually observed people use the wrong field, you need to find another solution for users confusing the fields:
Use terse field labels. Label the field “Activation Code” not “Enter your sixteen character dash-delimited activation code from the email we sent you when you signed up.” Text necessary for explaining where to get the activation code should be after the text box.
Use cueing text or graphic design on the outside of the text box to indicate it has four substrings. For example, put “XXXX-XXXX-XXXX-XXXX” under the text box.
Remove all extraneous elements from the page –the more graphic and text distractions on the page, the less the differences between the two text boxes will be noticed.
Make it so it doesn’t matter which text box the users use. If the string entered in the Username text box doesn’t match any username, then see if it matches any activation code, and vice versa.
Eliminate the activation code text box. Instead, when you send the activation request, include a sign-up URL that includes the activation code as a parameter (more details in answer by bryanjonker).
Sorry, this should probably be a comment, not an answer, but it wouldn’t fit.