2.6 Use Colors, Icons, and Animations
In this final lesson of the course, we’ll discuss the sixth best practice: using colors, icons, and animations.
Out of these three, you should at least use a different color (usually red) to highlight a given error. Icons and animations are optional, but they too can improve the user experience.
1.Introduction1 lesson, 00:52
2.Best Practices for Displaying Form Errors6 lessons, 35:54
2.6 Use Colors, Icons, and Animations
In this final lesson, we'll discuss the sixth best practice, which is to use colors, icons and animations when displaying error messages. Now, out of these three, you should at least use a color, usually red, to differentiate, or to highlight the error messages. Icons and animations are optional, but if you're using them properly, they can create a better user experience. So let's see some examples. So here's an example before that when you submit, it shows you some errors here below the fields. But these errors, they're not highlighted in any way. They're no different than your normal form elements. So it's not easy to notice that these are the error messages. Well, the first thing we can do to improve on that is to color them. So in this form, the text is a nice red, but also the background and the border around the text has shades of the same red. So now, they immediately stand out. You can immediately see hey, this is an error. I gotta deal with it. Now with that said, color can also be used for positive feedback like you saw in a previous lesson, the one with the inline validation. You saw that when I filled in the field correctly, the style changed to a success state. So I had a green border, a green background telling me that hey, that field is filled in correctly. But for errors, you should usually go for red. Yellow or orange, or more like orange is also acceptable, but that's usually or typically used for warnings, not necessarily errors. Now, the next element you can add to make this a little bit better is an icon. And using icons makes the forums easier to scan, and also adds context to one error. Like for example, you can differentiate between an error and a warning. In my case, I just used this simple icon for the error, although it's more suitable for a warning. But I used the same red color as the text. And since it's placed in this error message, it immediately draws my attention to this telling me that hey, we have an error here. So using icons is really straightforward. In this example, I'm using font Awesome, which is a free set of icons. It's really easy to load in your page and use the icons. And you can use them in a variety of different ways like in the H channel directly, or you can use them in a pseudo element. I can after or before. So, they are super simple to use. Then you can use animations, and you actually saw an animation here. Let me submit this form again. See how the error message just slides up and down? This is a little bit better than the message just appearing instantly. And also instantly changing the height of my form. Here, you can actually see that transition taking place, so that's a little bit better. Now, you can also use animations to draw attention to a specific field. So, I actually added a very short animation to this confirm-password field. If I don't have a correct value in here, you'll notice that when I submit, the field will shake. Saw that? So with that subtle animation, my attention is drawn to that particular field. And that's something you can add very easily. I'm using the animate CSS library by Dan Eden. It's also free. You just have to load a single CSS file, add two classes to the element that you want to animate, and you're done. It's super easy to use. Now, be careful when using animations, like this one for example, the shake, or a bounce, or a pulse. You should use them on the actual field, because as I was saying, it will draw the user's attention to that field. But you shouldn't animate the actual error, because animated text is hard to read. And whatever animation you're using, just don't go too crazy with it. I know that you can create some very interesting animations with CSS. But that doesn't mean that you should actually go and do it. Just keep your animations simple. A shake like this, like I showed you, or a simple balance, short, very low duration, 2, 300 milliseconds will be just fine. Just enough to get your attention to that particular point. Also, just don't go overboard with these animations and apply them to every single field in the form. That will just defeat their purpose. You should use them for maybe one, two fields tops. For the rest, just skip the animation entirely, and just display the error messages normally. You can use the animation here in this fashion by sliding up and down. That's fine, but for the other types of animations, you should just limit yourself to the fields that are really, really needed. And that's about it for this short course on best practices for displaying form errors. All the examples that you saw here can be found in a project that's linked in all the lesson notes. And I hope it gave you a better understanding on what you should do. And what you shouldn't do when validating forms and creating error messages. Thank you very much for watching this course. I'm Adi Purdila, and until next time. Take care.