Experimental Design [Colored tags]

[jfriedrich-va]

What

An enhancement of the current Tag component, adding nine color options.

Purpose

In data-heavy staff-facing applications, the Tag component could be used to declare commonly repeating values, and increase scannability for key pieces of information.

Usage

Veteran records can be tagged in the staff-facing system with flags for sensitivity, eligibility factors, and statuses. Individual pieces of information in tables can be simplified into groups, and tags may help with filtering and scanning long lists of items. If accepted into the Veteran-facing library, this may also help with statuses on applications or alerting users to new content in lists.

Behavior

No direct interactions.

Examples

Accessibility

Each colorway has sufficient contrast between the text and the background, with gold-darker exceeding 4.5:1 for AA contrast and all others exceeding 7:1 for AAA contrast. All backgrounds or borders exceed 3:1 contrast with white to create a perceivable edge against a white page. As long as no content is described by color alone in the usage of this component, it should introduce no problems. Icons can be described with alt-text.

Guidance

Unless dealing with tables and other dense data, use sparingly, only when the content recurs and is under 30 characters or so.

Collaboration Cycle Ticket

We are not part of the collaboration cycle.

Your team

VES

Research (optional)

Stakeholder elaboration has described value for this kind of value componentization, but without any rigorous testing.

Next steps

You may present your work to the Design System Council at an upcoming meeting. If you do not or cannot attend the Design Council Meeting, you can opt to get an asynchronous approval.

Submit requests to join an upcoming Design System Council meeting in #platform-design-system.

During the meeting, the Design System Council Working Group will evaluate the request and make a decision.

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.

[jfriedrich-va]

Just for awareness, a similar proposal was made some time ago but was turned down. I think this presents more specific use cases that make sense for staff-facing applications.

[caw310]

@jfriedrich-va this is on the agenda for the July 18 DSC.

[rtwell]

What known user problem does this solve, and how will we measure it? There are lots of variables that can make something more or less scannable.

[babsdenney]

DSC Decision: This isn't ready for the design system quite yet as we would have a bigger task of creating guidance about alert status and colors across the VA. Continue to experiment and test the tags in your designs and consider some of the issues brought up in the council meeting about the messaging and colors being used. It would helpful if the tags status's aligned with the colors and status of the alerts in the design system.

Council meeting notes

[jrfbz]

An update to the tag component I've been using on VES:

Instead of sticking to the VA DS color system, I've pulled swatches from the following scales from the USWDS:

• orange
• green-warm
• mint
• blue
• indigo-warm
• violet-warm
• magenta

to provide a set of reasonably spaced hues with sufficient contrast and arbitrary meaning, reserving VA DS's:

• error
• warning
• info
• success

for tags directly related to those states, with a baked-in associated icon. I've also ditched the dark versions, to avoid suggesting a meaning where there isn't one.

[jrfbz]

A few newer examples with the styling changes!

[caw310]

Notes from DSC

• There are concerns with bringing this into the VADS although see value in alert variations.
• We can make note of alert variations.
• Talk to Amanda if it would be useful in clinical system.

Link to DSC notes: https://docs.google.com/document/d/1H8B989-PbHIqdrNZppsEGE-Oyxriuou3jryD0YRpJzA/edit?usp=sharing

[humancompanion-usds]

I'm for bringing in the Alert variations of these Tags.

[jrfbz]

Thanks @caw310 and @humancompanion-usds . Please let me know if there's anything else I should do from here!