With the recent introduction of their much–maligned two-factor authentication system, HSBC overhauled their internet banking interface. The Secure Key system prompts users to enter a memorable answer followed by a code generated dynamically from a separate hardware device (the “secure key”). Consistent with guidelines on the importance of providing timely and useful feedback (e.g. Nielsen; ISO 9241-17), entering one’s details triggers a visual indicator whose meaning is apparently obvious but which actually differs to one’s expectations and is therefore ultimately misleading.

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!