Experimental Design - improvements to va-button disabled variation

[andaleliz]

What

I'm proposing one improvement and one addition to va-button.

1. Increase the contrast of the background color for the current disabled state to improve accessibility. The current background color doesn't have sufficient contrast ratio against background colors on va.gov (modal variations + standard white page background)
2. Add a loading variation to va-button to improve consistency across VA.gov and have a variation and guidelines available for teams

Purpose

1. If we think about "accessibility beyond compliance", we can do better than the current background color and make sure it stands out clearly against all background colors on va.gov.
2. A loading variation would help users understand when an action they initiated is in progress, and provide context to why the button has entered a disabled state.

Usage

1. Disabled variation is already part of the design system. This variation is used on VA.gov to communicate loading states, and possibly for other reasons. I didn't fully audit the site to see where disabled buttons may be used, but there are 3 examples here.
2. Loading buttons/states are already used on VA.gov to communicate when a user-initiated action is in progress. Here are 5 examples of different approaches in use on VA.gov today.

Behavior

1. Nothing would change about the behavior of the disabled button.
2. In a loading state, the button variation would change from primary or secondary, to loading; the color of the button would change and an animated loading icon would appear.

Examples

• We recommend using this design for the loading state, and updating the background color for the disabled variation to match, to improve contrast.
  • If the design system team doesn't want to make changes to the existing disabled state, then adding a loading icon to the disabled variation makes sense for a loading button.
• Here are 5 examples of different approaches in use on VA.gov today.
• Design options I explored
• Example flows with the button variation we feel would work best of the options explored

Accessibility

• Admittedly, I haven't dug into the code enough to know about how the disabled button variation, or other loading buttons are coded today, but this article may have some relevant ideas for improvement under the hood, if they are needed

Guidance

I don't think any changes to disabled button guidance would be needed. For the loading variation, I would say:

• Consider using this when the user has interacted with a button to perform an action, like submitting a form.
• The button label should reflect the process initiated by the user in plain language

Other things we considered

• We considered replacing the buttons with the loading component, as done on the 10-10ez form, but that option introduces more movement to the page on desktop since the height of the component is greater than buttons, and the center alignment is in a totally different place. It also creates cognitive disconnect since the elements get completely swapped out.
  • We thought about creating a shorter variation of the loading component, possibly where the icon is on the left so it could more easily replace left aligned buttons. We didn't pursue this because loading buttons are a very common pattern on modern websites (and in other design systems, e.g. Adobe) that Veterans are likely to be familiar with, and that seems like a better solution here.
• We also considered replacing whatever form a person interacted with with a skeleton UI and using the loading component on top (overly complicated, potentially challenging for people w/ cognitive considerations or magnification, especially on a long form)
• We considered using some kind of progress bar in place of buttons (fancy for no reason, not accessible, and overkill for what is needed)

Code (optional)

• Code for profile's current loading button is here, and our "processing update" button code is here, if that's helpful.
• Our FE has created the proposed button but I believe it's just stored locally for now.

Next steps

If your request is approved, you can add your component or pattern to the system. If you have any questions on how to add your component or pattern to the system, please reach out to the Design System Team at #platform-design-system.

[caw310]

@andaleliz This is on the agenda for the DSC meeting on June 6 at 11:05AM ET. I will add you to the invite.