Question

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.

Answer 1

A few easy options:

1. 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.

2. 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.