Modern design tools, like Figma, make it easier for design and development teams to collaboratively document error states.

Product designers are invariably optimists. They’re bringing something new into the world, whether an entire platform or just a feature, which requires a determined focus on ideal usage scenarios so that key aspects of a product perform as well as possible.

This optimism keeps them — and their teams — motivated when they encounter the inevitable challenges that arise in product work. Yet it can also prevent designers from accounting for all of the ways in which a product can fail its users: interactions that don’t fire, content that doesn’t load, mistakes a user might make, or even simply accounting for all possible empty states, an often overlooked aspect of UI design.

Thoughtful empty state examples from Empty States.

While developers inherit a history of robust error-testing practices, there isn’t much of an analogue in design. Designers often critique their work mainly for design issues (e.g., “this color combination doesn’t pass accessibility”) without digging into potential implementation issues (e.g., “what happens if this table doesn’t load?”). Designers are biased toward best-case scenarios, whereas developers instinctively consider all the ways something could go wrong, then test for it.

Yet products earn trust and retain users by the ways in which they gracefully fail. A product is only as good as its most error-prone interaction (insert quote about how failure reveals character).

As important as the perceived quality of a product is, error handling design and copy are often an afterthought, written on the spot when a developer identifies a potential erroneous scenario in an interface. This isn’t a knock on developers — they’re the ones doing the needed work of anticipating feature failures — but rather a recognition that designers may not take the initiative to make thoughtful, thorough, and consistent error messages across entire interfaces. I’m including myself here, too.

Some choice error messages from Instructional Design.

There are a few reasons why designers may neglect error handling UI. For one, designers often aren’t aware of the potential error states of their designs, so they need to have intentional conversation with their developers.

Second, design tools haven’t historically been friendly to state management. Designing error states meant duplicating artboards in order to document all possible permutations, resulting in unwieldy files with arcane naming systems.

With the advent of improved component design features, designing numerous states for the same element or screen has become quicker and easier. Each issue concerns communication: designers and developers identifying and documenting error states together, and designers making and sharing error handling UI in a more manageable way. Below, I’ll describe some ways to handle both.

#figma #web-development #programming #developer