Centers for Medicare & Medicaid Services
Defining consistent and accessible error validation across web products
Role
Senior UX Designer
Timeline
03/24 - Present
Background
As the sole designer on the team, I work closely with product, engineering, and stakeholders to maintain and mature the CMS design system: a set of open-source design and front-end development resources for creating accessible, responsive, consistent websites across federal healthcare products.
Deliverables
Guidance for ‘Instant Validation’ and ‘Validation on Submit’ error styles, including use cases, content criteria, and accessibility standards
Figma patterns, including Error Summary component, form fields, inline errors, and final ‘Submit’ button
See it live:
Discovering user needs
We audited existing use of error validation styles across products and use cases and feedback on error states in usability testing. This information was used to form affinity maps identifying opportunites for improvement.
Key Insights
Both ‘Instant Validation’ and ‘Validation on Submit’ are used frequently and somewhat interchangeably.
Teams generally did not have guidance in choosing the appropriate error validation style for different use cases.
Overuse or misuse of instant validation was found to be frustrating and confusing in usability testing.
Accessibility standards are unclear and inconsistent across products.
Some instances relied heavily on color alone to indicate an error.
There were unclear standards for color contrast on different backgrounds.
Insufficient considerations were provided for screen readers and low visibility users.
Use of non-specific messages and unlinked summaries not specifically correlated to the incorrect field.
Many error messages did not clearly communicate the problem and used vague or generic language.
Unlinked error summaries did not provide specific steps to solve the error.
Solutions
-
Validation on Submit recommended as default for most use cases.
Instant Validation proved to be frustrating for users and had accessibility concerns, so we chose to recommend Validation on Submit as the default error validation style, except for specific use cases indicated for product teams.
I defined guidance and use cases for both Validation on Submit and Instant Validation error styles.
I showed appropriate use for Instant Validation, limited to complex, short forms such as password and username creation. I also informed of potential drawbacks in use, like user confusion and frustration, inconsistent UI, etc.
-
Standards defined for accessibility.
I defined guidance for accessibility criteria and standards, including:
1. Defined guidance for aria attributes and appropriate screen reader considerations.
2. Required text and icons, so as to not rely solely on color.
3. Provided accessible color options for different backgrounds.
4. Recommended capacity for forced colors mode for optimum accessibility.
5. Discouraged use of disabled buttons, instead allowing a user to submit an incomplete form — the incomplete inputs will be included as part of the returned error messaging.
6. Recommended testing to validate understanding of what went wrong and how to fix it.
-
Content framework provided for clear, consistent error messages.
I defined guidance for clear and consistent error messaging for both inline errors and error summaries.
Error summaries include anchor links from the error summary to each corresponding error field.
-
Reusable Figma components and patterns for rapid design, prototyping, and development.
Figma patterns were created for quick configuration of forms with consistent error validation in product designs.
Patterns include an Error Summary component, form fields, and an active submit button.
Key wins
Clarified guidance and improved support to product teams by identifying existing problems and expanding resources.
Expanded Figma resources, including a new Error Summary component and a ‘Validation on Submit’ form pattern.
Defined standards for consistent and inclusive form experiences across CMS products by providing systemized accessibility, content, and interaction standards.
