When users make changes to their profiles, the design of our site/platform should be such that it provides sufficient feedback to confirm that the changes have been made, and in case of an error – that they have not. This could be done in a number of ways, one of which is the use of Toast messages.
You can, of course, use other ways to achieve the same result.
In general, for changing a small detail in the profile, the user does not need toast messages. Here is an example of a way to show the user that the changes they wanted to make have been made and saved in your system:
You show the action that is required to save the changes (for example, pressing a button). Initially (before a change is made), the action could be disabled, which we also demonstrate visually – with color – and symbolically/technically as the mouse pointer does not turn into a finger, which, as we all know, demonstrates the possibility of interaction.
The state (as well as the color and interactivity) of the button change when the user makes any (even minimal) change to the data. Such a change can be as little as one letter. The button should “light up” to indicate that there are changes waiting to be saved.
The change in the color of the button serves not only to activate it, but also to attract the user’s attention, so that he to have information about what to do when the changes are complete.
Once the user is ready with the changes they want to make, they press the button. The text changes and it shows that the system is in a save/load state. Here, depending on the speed of your system, you could also make a small progress bar, but fortunately in most cases this is not necessary.
In general, a rotating element is placed to show the user that the system is performing an operation.
Use a mini toast message to confirm to the user that the action has been completed. The Page may or may not reload, but leave the message long enough and make it contrasting enough against the background to make sure the user reads it. A black message on a white background, as we have shown below, is more than enough. Don’t go to extremes and stick to the colors of the brand, and if not possible – try to choose neutral ones.
Once the user is informed that their changes have been saved, they can rest assured that the next time they access your system, they will use the already changed data.
