I was moved to write a post this morning (After somewhat of a hiatus) when I noticed a tweet from Ryan Florence pointing out a frustrating interaction with Input fields which is likely familiar to many of us:
In a Nutshell – The error message that appears here is to inform us that there are certain requirements around email formatting, but friction is introduced into the conversation because the message is presented when the user attempts to type into the field.
I refer to this interaction as a conversation not only because that’s how I like to think about UI, but also because it is so fitting in this scenario.
Nobody want’s to be interrupted mid-sentence and told that what they’re saying is erroneous, even when it is! It’s not very polite.
A technical Red Herring
It would be easy for a Developer to fall into a trap at this point. Why not move the prompt to the
<input>‘s blur event – That would be less abrasive.. right? No, we can do better. Look at the content of this message..
‘Email address must be populated, follow the format firstname.lastname@example.org, and cannot contain special characters.’
That’s not strictly an error message and however you feel about what is polite and what isn’t, there is a more proactive way to approach this situation that I want to share.
Prevention over Cure
First of all, here is a replication of the problem:
A better example
For the sake of comparison, let’s look at an example of this interaction as I might solve it with the Red Herring approach above.
In the following Codepen I have created an equivalent UI but softened the interaction, moving the prompt from the fields Keyup event to its Blur event. You will notice I have also given the error message an animation effect to lighten it’s impact. These kinds of subtleties can go a long way in changing what was once an interruption into a suggestion.
Above we noted that the message itself is not strictly an error message. In this version I have interpreted it as information that can provide context rather than friction to the conversation. Supporting the user as they engage with the field using the focus trigger.
Isn’t this all so obvious? Well, yes it is..
But the point really is that it’s important for User Experience to be a consideration of Development and Development (Opportunity, not only restriction) to be a consideration of UX Design.
Not every development ‘problem’ needs to be solved technically and design challenges can absolutely benefit from technology!