Flash Message Design

I remember reading about error messages in the book 'About Face' by Alan Cooper et al. It essentially said error messages usually suck. They don't tell you what the error is or how to fix it. Error messages accuse the user of wrongdoing when really it's the system/computer means of taking input etc. that may be incorrect. Furthermore, error messages stop the user from the flow. I do recommend reading more about error messages from a UX perspective.

There sometimes may be a need for error messages, but designers/developers should focus on guiding users before an 'error' can occur.

With all that being said, here is my UI design for a flash message of error / and success for a long wizard. I would actually put inline messages and microcopy as the user goes through the wizard.

For the message cards, I allowed the user to go back to change the "errors" or to move forward with them knowing why we are asking for more information. If the user wants to proceed, they should be allowed to in this case. They may not actually be making a mistake!

All in all, this was a fun one to design. I still want to work on my color schemes. Please let me know if you have any good articles, books, reads, listens etc about this topic or others.

More by Jordan Nguyen

View profile