Skip to main content
U.S. flag

An official website of the United States government

Dot gov

The .gov means it’s official.
Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site.

Https

The site is secure.
The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

Experimental Design

Suggested by: Leyda Hughes, VSA Facilities Team

Mobile friendly expandable alert

To be used When an alert box is too visually prominent and additional information needs to be communicated without leaving the page.

Description

Mobile friendly expandable alerts combine the Additional Info component within Background Color Only alert color schemes, and includes an icon.

Example:

image

image

UXPin design specs

Code reference:

Vet Center expandable alert code

Accessibility requirements:

Icon: Must provide alternative text (use sr-only text or an aria-label) so screen readers have an equivalent understanding of the purpose/nature of the message

Heading: e.g. “Facility closed” should be one heading level below its parent

Research findings

Medical copay enhancement tool usability - July 2021

The alert was tested as part of a usability study with 9 participants. The alert was used to display copay charges referred to the Department of Treasury that needed to be resolved ASAP, so it was pertinent that the alert was immediately noticeable by Veterans.

View the component in the prototype here.

Findings:

  • The alert was often the first thing Veterans noticed when arriving on the page
  • Some clicked on the alert to read more about the referred charge while others moved on to looking at other sections of the prototype
  • Veterans generally understood that they could interact with the alert. However, one asked themselves, “Can I click on this?” before clicking on it. That may have been because they were interacting with a prototype where not every element was interactive rather than because they were unsure that the alert was clickable in general.
Edit this page in GitHub (Permissions required)
Last updated: Aug 17, 2021