Experimental Design [Badge Indicator]

[mattmarino-adhoc]

What

The badge indicator, an indicator of how many items of note are associated with a given link or section or content.

Purpose

The pattern serves to inform users of priority items with their account. This could also be used for similar scenarios in which there are new items that a user needs to view or otherwise address (for example, new test results).

Usage

The proposed initial use case for the badge indicator is to inform users on My VA of items in their MyHealtheVet (MHV) inbox that are new/unseen.

Behavior

The proposed component is associated with links, and is placed adjacent to them. Mobile web behavior mirrors desktop.

At this time, the proposal does not include considerations for native applications or other placements besides being next to links. However, this has the potential for broader usage.

Examples

Figma page

Accessibility

The component will be associated with aria text that announces how many items there as well as announcing the associated link. In the context of new messages, this includes ”You have 1 new message. Go to your inbox.”, or You have # new messages. Go to your inbox.” for multiple new messages.

This design has been tested with some colorblind participants as well, and the results indicated that the badge indicator is easier to perceive than the dot indicator used currently for the inbox.

Guidance

What would you want to tell other teams about this component or pattern? This pattern can be utilized for any scenarios that are similar.

Collaboration Cycle Ticket

#91542

History

Notification badges and dots have been researched and utilized on VA.gov in other ways as-is:

• MHV and My VA use a dot indicator to indicate when a user has new secure messages

• The Authenticated Experience team explored options for notifications beyond dot and badge indicators

  • The team researched and explored a "notification center" for My VA, a place for action items to be called out for users. This was shelved, primarily due to technical limitations.

Your team

My VA, Authenticated Experience

Research (optional)

Research findings

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.

[caw310]

@mattmarino-adhoc I have your request on the agenda for the Thursday, Sept 12 DSC meeting at 11am ET. Are you available to attend? I have sent you the meeting invite.

[mattmarino-adhoc]

@caw310 unfortunately I have a training seminar happening at that time and cannot make it. Can we plan on an alternative time (before then, or if we have to, the following DSC)?

[humancompanion-usds]

Carol was out for this one so just brief notes on what we decided:

• We agreed to bring this into the Design System but limit use in guidance to just the instances in MyVA and MHV for now.
• The design won't change from what was recommended.