Open cgednalske opened 11 months ago
@cgednalske this is on the agenda for the Oct 20 DSC meeting at 1pm ET. I will add you to the meeting invite so you can present this request. Thanks.
Notes from DSC meeting: https://docs.google.com/document/d/1PFUmMNpcbBxZX1b7CvT1wTb_pHcDaKEG0Sz_TdXryCo/edit?usp=sharing
@caw310 - To create 3 new tickets for adding this to Figma, guidance, and the CSS library. This can be an HTML/CSS library style at this point because it is just a text style.
@cgednalske - Do you happen to have an eyebrow in Figma currently?
Yes we do! Here's an example from the Unified Check-in flow we're working towards - shows how the eyebrow is used to clarify the Veteran is still within Check-in while answering demographics and travel questions.
Figma work: https://github.com/department-of-veterans-affairs/vets-design-system-documentation/issues/2579 Storybook: https://github.com/department-of-veterans-affairs/vets-design-system-documentation/issues/2580 Documentation: https://github.com/department-of-veterans-affairs/vets-design-system-documentation/issues/2581
What
Eyebrow components remind users they’re still within the same workflow when completing a subtask within that flow.
Purpose
Eyebrows help communicate and can resolve contextual differences between starting a workflow where the action link to start the flow is not able to clearly convey the upcoming screens that follow. E.g. For some users, checking in to an appointment online can start with filing for travel reimbursement before check in information appears.
The eyebrow can be used when a form header is not appropriate but a subtle reminder is still needed to clarify the workflow. E.g., when the “complete a sub task” pattern is being used, where each screen’s heading is dedicated to asking a question.
Usage
For Check-in and Pre-check-in, we have multiple scenarios where Veterans enter a workflow to review demographics questions or answer travel reimbursement questions. These workflows are within the Check-in flow, but the active links leading to them can vary (e.g., Review your information, Check-in now, etc.).
Depending on the scenario, the action link text may not always reflect the screens a Veteran is about to encounter because a background system check, happening asynchronously, informs the next screen the Veteran will review. The eyebrow paired with the H1 helps us clarify that, regardless of which version of the workflow is presented, the Veteran is still within the same Check-in or Pre-Check-in flow.
Behavior
Recommended spacing:
Recommended font and size:
Examples
Check in process
Pre-check-in process
Accessibility
Guidance
Research (optional)
Patient Check In (PCI) Unified Check-In Generative Research Usability Study
Although this research was generative and not specifically gathering feedback on the efficacy of eyebrows, 10 out of 10 Veterans thought it was easy or very easy to check in to an appointment. I.e., the design and content cues from the appointment list page through to the confirmation page (where each included the use of the eyebrow) were easily findable and felt very guided.
Code (optional)
HTML:
CSS:
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.