On helpful errors
Success and error messages are important. Everyone of a certain age remembers the dreaded blue screen of death and how it’s often a puzzle to figure out what exactly went wrong and how to remedy it. When a message is confusing or unhelpful it can be the difference between a great user experience and a terrible one.
I used to be part of sales team for a tech company. Although I wasn’t involved with the day-to-day development efforts for our product roadmap, I was very much on the frontlines speaking with new customers and prospects about the software we offered. When I did meet with our product folks, one turn of phrase that often came up (both in the context of our services, but also in general with regards to apps we saw out in the wild) was the idea of the helpful error. This was our internal way of describing error messages displayed to users with the goal of accomplishing two things: A) clearly and concisely describe the issue so that the user can take the appropriate action to remedy the problem and B) avoid belittling the user or making them feel they did something really bad. This concept has always been something that stayed with me with all the software I use, long before I became a designer myself.
For my design challenge this week, I took this to heart and designed two simple flash messages for success and failure when inputting an email address. I decided that for this exercise the context of these messages was a user signing up for a fictional newsletter — one where you would simply need to input a valid email address to move forward.
I always strive to make my designs as simple and clear-cut as possible, and for this week’s exercise it didn’t take me too long to land on what I wanted to do, and that’s okay. I thought of making it a bit more stylish or a bit more “pretty” but in my mind the point of this particular exercise was to inform the user as clearly as possible what the next step was and then get out of the way for them to take action. I’ve always been a big proponent of the “KISS” principle.
I started with the pill-shaped buttons and then went with typical stop-light style colors, which everyone understands at a glance. I then chose a kind of blocky sans-serif font called Blinker (hmm, maybe the stop-light analogy goes further here than I thought!) to give the user a fun and funky vibe that I thought paired well with the happy/sad email icons.
The main challenge for this one was not overthinking the design. At the expense of looking a bit plain, I specifically didn’t want to add any superfluous design elements. I also wanted to make sure that the messaging was just long enough to be clear and processed quickly.
For the success and failure headlines, I considered lots of different words, but I decided ultimately to lean into the playful energy I was feeling with a hearty “Whoops!” to make the user not feel too bad about the issue, especially since that’s something I would think to myself if I entered my email incorrectly. Conversely, who can’t get behind a simple “Hooray!” success message?
I also considered how specific I wanted to be in letting the user know how there was an error. I thought maybe the message should indicate exactly where they went wrong: was it a “.con” or a comma typed accidentally instead of a period? At the end of the day, I decided almost everyone signing up for a newsletter would know the basic format of an email address, so whatever error it was would be plain to see when going back to try again. I recognize that this wouldn’t necessarily work in every context, but I deemed it suitable for this exercise. For the success message, I decided to add an enthusiastic welcome message with an additional note about setting up the newsletter subscription preferences on the next screen.
Overall, this was a really fun and simple exercise to again help me think about always putting the user first — even for something as simple as entering an email address.
