The power of an example

I had a really stupid user experience yesterday, so I am trying not to squander my ignorance and understand what went wrong. More importantly, would a difference in the design have helped?

So I'm having to set up a two-layer authentication set of credentials for myself. I have a keychain fob with six digits electronically displayed, and the digits change every 30 seconds (these digits are in synch with the network I need to log onto). So I need to set up a PIN for myself, and then when I log in, I use both my PIN and the currently displayed digits from my fob. So if someone figures out my PIN, they still need my fob to get the digits du jour (or digits du demi-minute in this case) to log in. If I lose my fob, whoever finds it still needs my PIN to get into the network.

OK, for starters, that bit of conceptual knowledge would have been useful up front. I would have understood what I was setting up and how it needed to work when done.

I got an email with a set of instructions. There were liberal screen shots which initially made me feel good (even though I didn't want them to because I'd like to believe that users don't need screen shots.) As it turned out, the shots didn't help and even hurt in a way.

So the process had me create a PIN (4-8 alpha-numeric characters) and then asked me to log in on the screen shown below (click on image to enlarge it):


Up to this point, the instructions had talked about a CODE (the six digits on the fob) and a password (my original system password to get into this set-up-an-authentication task), but had never talked about a PASSCODE. The written instructions had a screen shot (just like the diagram above, but an actual screen capture) and said: Wait for the Next Code on your Token, then enter your PIN+CODE.

When I went back after finally being successful, I realized exactly what that meant and I wondered why I had had so much trouble. Here are the ways I got confused:

• The screen wanted two pieces of information but I had only one field.
• What does "response" mean?
• The screen capture with the asterisks didn't give me any clue as to what should be in there.
• What I call a fob they were calling a card.
  
• What the hell is a PASSCODE?

So I entered my new PIN and pressed Enter. Nope
Entered my system password. Nope
I experimented with CODE then PIN (because most applications I use with a PIN, that's the last thing I enter.) Nope.
Finally, I figured out that I had to type my PIN followed by the CODE on the fob and then click Continue. Well, that's exactly what the printed instructions said (after you wrangle with do you type a + sign or not).

Lessons learned:

• It's hard to bounce back and forth between screen shots of instructions and the actual screens.
• An upfront conceptual paragraph that described how two-level authentication worked would have helped.
• And how about this for the screen design (click on image to enlarge):

Since the code is always six digits and the PIN can be alpha-numeric, I think it's pretty clear what is being asked for once you see the example.