Thursday, January 14, 2010

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.


Larry said...

Nice! Mike, if they let you design everything in the world, life would be a bowl of cherries.

Interesting that you settled on the term "token" for the screen shot, rather than "card" or (your original impulse) "fob." Was that, in the end, your preference? Or did you choose it merely to be consistent with the written instructions?

Michael Hughes said...

Mainly to be consistent with the existing instructions. "Card" did not convey the physical thing that I attach to my keychain, and "fob" seemed like a word a 60-year-old man would use, but I wasn't sure if the mainstream audience would know what a fob was :-)

Your comment made me think what it would be like if we could have tool tips for everything in the world. Imagine being able to point your cell phone at an object and click a Help button and you would get a tool tip for that object. How cool would that be?

Margaret said...

Tool tips for everything in the world (or at least all those with embedded chips we have to communicate with) would indeed be cool, but everyone would be updating the hardware to the next best thing, and forget to update the tooltips too.

It would be like having a GPS with last year's maps. Some parts of the Atlanta Metro area got stimulus money because they had road projects ready to go. This included realigning some intersections to make them safer. So our GPS keeps telling us to turn right where a right turn no longer exists.

Sean Romer said...

"Imagine being able to point your cell phone at an object and click a Help button and you would get a tool tip for that object."

Sounds like an extension of an augmented reality app for iPhones -- e.g. see a demo of the Yelp restaurant app at