Ever since I learned about Norman Doors some odd years ago, I feel like my life now consists on seeing usability issues everywhere I go like a UX subscription I can’t turn off. To not be the only one with this intriguing yet ignorance-killing vision, I want to share some of what I see in my day-to-day.
Maybe, just maybe you'll be in a team trying to solve similar issues and can thank this blog for the proactive insights from a person behind a keyboard. Doubtful, but I can dream.
Today’s usability principles of interest are about speaking the users' language and how to help them recognise and recover from errors. If there is ONE usability theme I care about most, it’s wanting a signposted way to get out of a jam that the thing I’m using will inevitably put me in.
Take this online payment form for example.
I was trying to make a purchase before I got this delightful error message that "Nonce is required,” and I had nonce an idea what that meant.
I’m still not sure, and I’ve had time to look it up!
On one hand, it seems to mean “for the time being” which I don’t understand how that relates in this context. But worse, like far worse, it appears to be a British slang word for a seriously reprehensible act. I wonder if anybody might have let them know.
I couldn’t tell you what CVV stood for, but it’s at least a term I’d recognise in this context. I’m almost starting to wonder if they were trying to say “CVV is required” but some very unfortunately revealing copy-and-paste replaced the word CVV to make this an accidentally concerning statement of what is required.
All things considered, the error message itself is a very minor issue, although it wouldn’t have hurt to see an arrow drown to what field or issue made this pop.
What led to the error popping is the key one.
On the surface, this skeuomorphic credit card representation was unexpected yet pretty neat. At first I wondered why it wasn’t used in all checkout flows, but that question quickly answered itself when—surprise, surprise—I didn’t notice the CVV field seemingly hidden on the ‘back’ of the on-screen keyboard.
I assume it was purposeful design to show the back-of-card CVV vertically and horizontally unaligned to the other fields in attempt to help it visually stand out. However, in being used to working through left-justified forms everywhere else on the web, I never noticed this field.
There was even a moment of conscious curiosity in thinking, “Hmm. Interesting that I don’t have to enter my CVV.” Really makes me wonder how the user tests of this form shook out.
It reminds me of the “CARP” gestalt principles of design; using contrast, alignment, repetition, and proximity to help users recognise what’s possible and needed. Or, in the words of David Travis, “If you don’t do CARP, you get CRAP!”