1. Parse word

After a successful application, the user sees the following:

I read the word passcode and it made me think. Presumably this was something distinct from a password, otherwise they would have asked for one those. As it’s a code I assumed they wanted only wanted digits – but in which case, why not ask for a PIN? This is a financial institution after all.

When I submitted the form, this is the error I received:

My guess about the digits had been correct, but there was no way of knowing beforehand that precisely six were required. Why hide this specific information behind post-action validation? Who would know that a Barclaycard passcode should be six digits? iPhone users would be familiar with the term, but not the format: they’re four digits, extendable to include alphanumerics – a.k.a. a password!

The form’s designers could improve matters by providing up-front advice on the passcode format. But from a user’s point-of-view, the best solution would be to use a good old-fashioned alphanumeric password – familiar to users and more secure to boot.

2. Help, text!

Similar to many sign-up processes, I was prompted to choose a memorable word as a security token – plus a way to remember it if it wasn’t as memorable as I’d first thought.

Upon submission I was informed the reminder was invalid because it didn’t contain both letters and numbers:

This seemed strange: why should a number be a typical component of a reminder which could literally be anything? Obedient user that I am, I followed the prompt, but to no avail:

The issue, of course, was the apostrophe. Once removed, the erroneous error message disappeared and I could proceed.

The sole purpose of the help text was to inform about the specific requirements of a particular form field. Not only did it fail to do this, it caused confusion and delay. And, to top it all, it left me staring at bad grammar. Tsk.

P.S. My first pet wasn’t called Charlie.

First, a bit of background.

There, in a tick ✓

What does a tick signify? In the UK, the tick symbol indicates positivity. It means the same in North America, although there they call it a check mark. In Japan, the tick is akin to the cross symbol in the Western world, indicating negativity (although somewhat confusingly for a Briton they use a cross for this purpose too). To indicate positivity they use a circle (check your Playstation controller).

Green: gauges

What does the colour green mean? It can signify something ecological, such as the movement against pollution, or represent important information like an emergency exit. But, like the tick, it can also signify positivity, as in road traffic signals: “green for Go”.

The Green Tick

The green tick is a commonly occurring feature in user interfaces, yang to its red cross yin. The meaning – at least in the West – is unequivocal: what you’ve done is correct. In human perception colour dominates shape, so the impact of the green will be stronger than that of the tick although they reinforce each other. Combining the colour and the shape also provides redundancy – the concept of purveying the same information in more than one way: a colour-blind person would still understand the meaning of the tick by its shape.

So it’s a strong symbol which, along with its counterpart, has become well-established in user interfaces. Unfortunately, HSBC’s Internet Banking web app breaks the convention.

HSBC Internet Banking

When I used the new Secure Key authentication system for the first time, I entered my memorable answer and tabbed on, as is my wont. A green tick appeared adjacent to the text box. It was pretty immediate.

I took the tick to mean that my answer was correct. The developer inside me thought it appeared too quickly for an Ajax round-trip to the server, so perhaps what I’d typed was compared with something stored in the HTML or JavaScript. It seemed like a risky approach, but I pressed on anyway. With the separate hardware device I generated a secure key, typed it in and tabbed to the Continue button. Again, a green tick appeared instantly.

There was no way the code was already in the browser – that would defeat the object of the new system – so I investigated further and discovered that I could type anything into the text boxes to elicit a nice, positive, encouraging green tick. (In fact, these screenshots were created using bogus information.)

I was taken aback at how misleading these green ticks are. In this context, their only purpose is to relay to the user that they’ve entered something anything. They are utterly superfluous: what better way to relay the fact that nothing has been entered than an empty text box? By implying that what the user typed is correct, the application is misleading in the extreme, and HSBC is guilty of misappropriating an established convention.

In any case, if you do leave the boxes empty and click Continue, good, salient, meaningful warning messages appear:

And another thing

This is the error message presented when you use incorrect information:

Don’t get me started!

My study investigated how the deleterious effects of interruptions might be mitigated by the provision of a post-interruption cue – a visual hint to assist people in resuming their tasks. I found that cues were extremely effective in both minimising the resumption time and reducing the error rate.

I looked at two cue types: the first highlighted whichever action was taken by users prior to being interrupted; the second accentuated the next action that ought to be taken. The hypothesis was that the latter variety would be more effective because users would require less mental effort. But I found that, statistically speaking, there was no difference between the cue types.

This was an important finding: it is trivial for a computer program to log the last action taken by a user; it is easy to detect when a computer program loses focus in the operating system; and thus it is straightforward to provide a cue after an interruption that will be effective in helping users resume their tasks. By contrast, it is difficult if not impossible to know the intention of a user at any given time, so cueing the next action to take is unachievable. Since the effects were found to be equivalent, the use of last-action cueing can be recommended.

If you want to know the nitty gritty details, here’s my dissertation in full (PDF, 3.1MB).

Because it doesn’t work.

Let’s get started. “Login or connect with Twitter”. Overlooking the questionable use of “login”, it sounds good.

Up pops a pop-up with a familiar-looking and thus somewhat reassuring authorisation message:

I click the Sign In button and the authorisation apparently takes place, and presently the pop-up now contains the following options:

At this stage, I had expected to be logged in, connected, authorised, whatever… Instead I have to make a choice. Already have an account? Well, I’m authorised, so maybe. But that’s prompting me for a password which doesn’t seem right. Need an account? Perhaps I do. Perhaps the Twitter authorisation simply allows me to make a Huffington Post account, and I can’t post without one. So I opt for this second avenue and provide my email address.

The Sign Up button momentarily changes to an ajax/loading animated GIF and then… the Sign Up button returns. Now what?

What is there left to do? Close the pop-up; see what happens. Nothing happens: the original window appears unchanged. Hmm. I click the comment box and the pop-up pops up again. In a last ditch attempt I enter my email address once more – but apparently someone’s already using it:

So at this point I appear to have successfully created an account, but have no way to use it. I have received no emails to the registered address and am completely stumped. Is it broken, or am I missing something?