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).
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.
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!
I’m also not sure why the securecode field uses asterisks. Its a 1x entry code, for the users perspective, consisting of random numbers. Makes it hard to verify if one entered the correct sequence. Goes kind of hand-in-hand with the faux-checkbox comment you made.
I’m with you, Paul. I do have this handy bookmarklet for such occasions that injects a checkbox next to password fields. Uncheck the box to reveal the actual characters:
scripts ftw. That and notepad.
Thanks for writing that. Funny enough, I just assumed I always entered the correct info (as the green tick would suggest). I often wondered how it managed to verify it so quickly, but am always too distracted by the whole annoying palava of logging in to investigate further. Now I know!