Experimental Design [Eyebrow Component]

cgednalske commented 11 months ago

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

Static above the H1 (visually)
Included as part of the H1 in code
Could be used for short or longer workflow names: example “Check-in” or “Review your information”
Does not act as a navigation element to “go back”
Not included on userflow start and completion pages

Recommended spacing:

0 pixels above the H1 line height
Recommend keeping to one line

Recommended font and size:

Uppercase Source Sans Pro, Regular, 16 (CSS used for uppercase styling)
Based on Lead text
Sans Pro in order to better differentiate from the H1

Examples

Check in process

Pre-check-in process

Accessibility

within the H1
All caps achieved via a CSS class rather than directly in HTML

Guidance

Similar to the label, but for an entire flow.
Similar to the forms header, but used for a subtask or a userflow that’s using the complete a subtask pattern.
Subtler than both label and forms header.

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.

"Very easy. It was clear. It wasn't a lot of steps. It's not a bunch of extra steps."

"I'm not sure how you could make it easier. It's very quick and convenient."

Code (optional)

HTML:

<h1 tabindex="-1" data-testid="header">
  <span class="check-in-eyebrow vads-u-font-family--sans vads-u-font-size--base vads-u-font-weight--normal">
    Check-In
  </span> 
  Is this your current contact information?
</h1>

CSS:

.check-in-eyebrow {
    display: block;
    text-transform: uppercase;
}

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 commented 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.

caw310 commented 10 months ago

Notes from DSC meeting: https://docs.google.com/document/d/1PFUmMNpcbBxZX1b7CvT1wTb_pHcDaKEG0Sz_TdXryCo/edit?usp=sharing

Put this on DST backlog.
Need some research to see if this is working

humancompanion-usds commented 6 months ago

@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.

humancompanion-usds commented 6 months ago

@cgednalske - Do you happen to have an eyebrow in Figma currently?

cgednalske commented 6 months ago

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.

caw310 commented 5 months ago

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

department-of-veterans-affairs / vets-design-system-documentation