Experimental Design [in-product education tips]

[underpaid1ntern]

What

A dismissable component that draws attention to and provides helpful, supplementary information about UI / feature changes.

Purpose

This component looks to help ease Veterans into changes to their digital tools on VA.gov by helping draw attention to changes while providing helpful, but not required information.

Usage

Context or task:

• Introducing new features: Highlight new tools or functionality with concise, actionable descriptions. Think about if the answer is “yes” to at least two of these questions:
  • Are you introducing a change you anticipate or know users may initially struggle with?
  • Is it a change that affects a lot of users (not just a small subset or power users)?
  • Is it a change to or introduction of critical functions (important for the tool to accomplish what it needs to)?
• Giving brief help that doesn’t get in the way: This component is designed for brief, contextual education that will aid user understanding without having to disrupt workflow.

As the health apt works to replatform to fully be on VA.gov, there will be a lot of new features, interactions, and patterns introduced to Veterans who have been doing something the same way for quite a long time.

Behavior

When used, the component appears for 3 unique sessions + pageload of the component OR until the Veteran clicks "Don't show again" When a Veteran using SR brings focus to the element the in-product education tip is about, at the end of the normal string, appended will be the first sentence of the content in the in-product education tip.

Examples

https://www.figma.com/design/5uTyxzQa92awJV0dcVEhM6/X-linked-Internal-Navigation?node-id=3547-173294&t=JFw6QSdzXV1Mjtmz-4

Accessibility

Preferred placement of the in-product education is 1 tab stop away from the "parent element" it is mapped to, preferably "after" so that it can appear under it on the screen and be "discovered" after tabbing away from the "parent element." If the "parent element" cannot be 1 tab stop away, we provide a link* to the element. If the "parent element" is a link, the link* will be a duplicate of that. If the "parent element" is something like a button, the link* will be a "jump link" to that item and function similarly to the "on this page" jump. We are experimenting with having the dismiss be an "X" while the "Don't show again" as a button. We would use aria to append "dismiss" to the x for SR readout. Headers may be used in the in-product education component; however, they must follow the html structure of the page / hierarchy of headings.

Guidance

out guidance is listed in the figma file which can be found here.

Collaboration Cycle Ticket

our collaboration cycle ticket 90137.

Your team

Messages: MHV on VA.gov

Research (optional)

We are planning to do research in the next month or so.

Code (optional)

Include any existing code.

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.

[underpaid1ntern]

CC: @emilytaylorux

[caw310]

Notes from DSC meeting.
Final Decision

• This request needs more thought and to see if there is a 2nd use case.
• Figure out what works in your app,

Action Items

• Explore visual changes, that take it away from alert.
• Maybe primary action is show me the thing that this tip is telling me about. That might reduce some of the weight.
• Consider limiting text to character count instead of 3 sentences.
• See how this does amidst other elements.

https://docs.google.com/document/d/16ZhC8XVD_nFlVGjbl-FLADcLTiDA8aVL9qGVMp5KXDY/edit?usp=sharing