Product Error Handling & Mapping
Visioning Micro Copy for Micro User flows
-You were on the right track
-Oops, You made a mistake
-You got back to the right track again
A pleasant user experience can’t avoid one or two detours. So the “scenery” of these detours also contribute to part of your product’s brand.
If it is a quite established/stable product, the common way we do is by showing all the error messages in the mockups and share them with our developers using tools like Invision which allows collaboration and comments. It‘s’ a very direct method, but if there are many error types or the product itself is updating fast, it will become hard to track ,critique or update.
Moreover, before getting right into wording a specific error message, have you really visioned the whole picture of your product’s error handling?
Error Messages != Error Handling
It reminds me of the old days when I was learning to draw. My teacher always pulled me away from my easel and told me not to fall into the details too early. “Your drawing should always be a complete picture at any time although it isn’t completed yet.”
It’s the same with designing a product. I’m sure you already get the idea of toning the error messages in coherence with the other copy, making them specify the situation and educate the users along the way… But, the error messaging is still a part of a complete error handling process and you may be falling into the details because you neglected other components’ existence.
I’d like to consider the error handling process as designing “Micro User Flows” because we should design these process the same way as the macro ones. So, what could be a micro user flow for error handling? For example:
- Fill in your birthday : User sees the label “Birth Date” — Then sees the hint text “DD/MM/YYYY” — the user entered 01/01/2020 — Error message says “ It can’t be a future date. Please check.”
- EVS(Electronic Verification): The user finished filling out personal info on the page —All the inline validations are passed — — The user clicks the “SUBMIT” button — Got a system message “ Sorry, it seems your personal info doesn’t match. We can’t verify your identity. Please check again.”
Basically, as long as there is a system feedback from an interaction, it could be counted as a single micro user flow. So with the two examples I gave above, you can tell that the error messaging is just a small part of the chain. The labels, form, hint text, tooltips ,CTA buttons …are all part of the flow which help the user stay on the right track. These components are very crucial and need to be separated from the other UI elements in order for us to critique & design without disruptions. I suggest constructing/mapping them in a single Excel sheet.
Here is a basic flowchart of how this spreadsheet map should be structured.
Horizontally, it is consist of a single micro flow as shown in the picture.
Vertically, it is consist of all possible micro flows in the order of the complete user flow of the page. These micro flows could be inline validations; form validations; API gateways; or other system error types..
After completing the Map/Structure built, you can start fleshing out the messaging content without worrying about getting lost.
Here are some reasons why your product needs this sheet map.
- A single sheet helps keeping the tone of your messaging cohesive.
When I was working on my company’s signup flow design, it took me a while before I found out our developer team also have a set of their own error handling codes and error messages. I feel dumb when I ran into “Error 413- Invalid IP address”…?! during testing and not knowing what it is. Of course the error messages they have constructed are more inline with their code development and debugging. These messages should never be what the end users see when they run into errors. However these developer codes are very important for you to keep track of so you can handle each and every error possibilities and deliver effective error messages to communicate with the end user. So make sure you communicate with the developers on gathering all the error types just in case any feedback messaging is missing.
On the other aspect, It’s also convenient for you to inspect the details for example — Using “Email” label on this page but using “Email Address”label on another page. I know it may sound boring and picky, but these details build up the product credibility.
2. A single text-only map is easy to maintain and update when the flow got changed.
I always had a hard time communicating the wording updates with our product owner and developers. It will be much more convenient to have a collaborative messaging sheet that they can always refer to and for me to update instead of creating tons of mockups.
3. Easier for styling
Assigning a style to a certain error type will also be helpful to be reflected in this sheet to facilitate tracking and maintenance.
Besides, other aspects of styles can also be added into this single sheet. For example the timing and positioning of the error messages.
This mapping tool is helpful for designing experience like a multi-page signup flow. If it’s not a linear , you can alter the vertical structure of the sheet into a tree form or others..
As a UI/UX designer, I deeply understand the vagueness in this job title. And I choose to embrace it as an opportunity to define this role inside the company. Personally I enjoy putting the same amount of design thinking into improving design workflow and team collaborations as I put into designing the product itself.
Visioning design before starting design, because we are working on a product that hopefully will be growing and living for a long time.