In addition to your brand and accent colors, you have to remember to provide additional indications to the user when something goes right or wrong.
People make mistakes. We’re all human. So when designing user input elements, you must understand that errors will arise. When this happens, users should be alerted to understand where they went wrong. A common design pattern color used for this indicator is red.
Red is also used to provide more emphasis for delete buttons. If the user wishes or is required to delete something, it should be abundantly clear that the delete action is different from a normal action.
On the other hand, when a user achieves their goal without issue or does something right, you should reward them! A good way to do that is through the use of green as a success message. Green is also often used for actions that entice the user to submit, move forward, or go.
Not all errors are caused by the user. Sometimes, the code just breaks! If an error occurs on the website and we need to notify the user, we should consider selecting a color that indicates the issue level and one that does not conflict with our action colors. A typical color for these warning situations is yellow.
The visual feedback you provide users with when they interact with your interface is incredibly important. It can help alleviate pain points some users might experience.
Instructions
Now we need to show our users they made an error. One way to do this is to keep an active border state on the input that was not filled out correctly.
In the styles.css file, find the selectors .input-error and change the border-color property value from #F2F3F5 to #FC472E.
Since we already established the color that represents an error, we will apply that to our alert. But since we know color shouldn’t be the only thing to communicate an error to our users, note the alert icon we placed inside of the alert component.
In the styles.css file, find the selectors .alert-error and change the background-color property value from #CCCCCC to #FC472E.
You can find this selector in section 5, Component Styles.