Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:7Length:37 minutes
Displaying form errors 400x277
  • Overview
  • Transcript

2.2 Use Microcopy

Best practice number two is to embrace microcopy. Form microcopy can include things like short tips or instructions on field requirements. It’s usually best to use microcopy for complex fields, such as passwords where there is a certain format users need to adhere to.

Although this has nothing to do with how an error is displayed, microcopy might help prevent the error in the first place.

2.2 Use Microcopy

Best practice number two is to use micro copy. Now, micro copy is made of short tips or instructions on field requirements. And it's usually best to use it on complex fields like passwords. Where you have to respect a certain format. Now, although this has nothing with to do with how error messages are displayed, micro copy actually helps prevent Error messages in the first place. So, that's why it's included in this list. Now let's go ahead and see some examples. Imagine you're filling in this form and you get to the password, you put in a certain password and hit submit, and it tells you well hold on, the password is invalid. And okay, maybe you try something else, right? Submit, it's invalid again. Well, how are you supposed to know what format to use? For the password, why is the password that I've given you now not good? Well, this actually ties in to the previous lesson, avoid generic error messages. And while this one actually tells you what is wrong, it doesn't tell you how to fix it. So it's not actually generic, but still, it's not very helpful either. Now, what we can do to solve this problem or to prevent it in the first place is to use some micro copy. So on the same example, for the password, we can see that the password, actually needs to have at least eight characters, one digit and one uppercase letters. So now that is much better. It's a very helpful, it tells us the exact format we need to use, and it helps prevent future errors. So now I can go like this and an uppercase letter, and I'm done. So that's much better than not knowing what I did wrong. Now when it comes to micro copy, you can display it here. This is a common practice under the field. And you can lower the font size and make it Italic, or you can use a tool tip. Like I did here, so I have an information icon next to the label. And when I hover on it, it tells me the requirements for that field. In our case, our field must be at least eight characters. Now, there are pros and cons to both approaches for this one, the Pro is that you see it right away. It's also more accessible so, it can be read by screen readers. The con is that it takes up some extra vertical space. This one on the other hand, the pro is that it takes a very little space. The downside is that you might miss it. You might not realize that, hey, there is an actual tool tip here if I just hover it by mouse. It's not a great option for mobile but also for screen readers. Unless you code this properly as screen readers will not read this tool kit properly. So it's not very accessible. Personally, I would use this wherever possible. But don't overuse this because, If you're gonna put micro copy on every single field, you're just gonna have a really big form and most of the time this is not necessary. Like, on fields that are not required, they don't have to put any micro copy and on fields that don't have any kind of special validation rule, you don't need micro copy there either. On more complex fields, like for example the password,this is actually a good idea because if you're asking for a specific format for the password, then having a helper text like this or a micro copy, telling the user exactly how the password should look like is a very welcome addition. Now, let's move on to best practice number three and that is to use inline validation, that's coming up in the next class.

Back to the top