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.

Patterns

Supplemental content

VA.gov uses supplemental content to provide the user background information related to a form or service. This information is often nuanced and dense, but not critical, so we typically place it behind an interaction or somewhere that is not disruptive to the user's ability to complete a task.

Contextual help

In cases where a person’s input can have large or complicated impact on outcomes we use the contextual help to locate expanded guidance next to the relevant interaction.

The following example depicts how to use contextual help to describe a medical condition if the user is unsure what to call it.

Closed (default)
Open

Most VA forms have a large amount of instructional text that tries to make VA processes, or the requirements of the application process clear. Unfortunately they are frequently several pages of tiny type that the person has to read and retain. Much of it may not even be relevant to that specific person’s situation. We use the Additional info component to situate plain language help at the point of the process where it is most relevant. For example, a group of three inputs that make sense in a particular order, and the middle one has some nuance to it.

The help is triggered by clicking on a uniquely styled text link with a plain language hook. The helper text is revealed with a sliding drawer type animation (like the accordion) and is typically 1-3 short paragraphs. Shorter is better, and references to static content pages is encouraged when the situation is complicated.

Where to place contextual help

Whenever there is a chance to enhance the understanding a user has about a particular choice, the contextual help can be used! For instance:

  • “What if I don’t know the name of my condition?”
  • “Which evidence type should I choose?”
  • “Why does this matter?” When the user clicks, they see a short explanation of the situation and a link to more information if necessary.

Pattern guidance

Do

  • Help users by providing contextual, relevant information that brings clarity to interactions.
  • Get help into the middle of a series of inputs
  • Address questions that apply to a small set of people

Don’t

  • Don’t use this pattern to house information that is critical to the form
  • Don’t use this pattern in the page’s body content (places not a form or tool), use an accordion instead

Why not use an Accordion component?

Accordions are designed for page body content (outside forms or tools) and are disruptive when inserted in between inputs. Think of using the additional info component to provide a speed bump whereas an accordion would provide a stop sign.