Experimental Design [accordion menu print and download (list) button]

[BobbyBaileyRB]

What

Give a brief description of the component or pattern you want to propose.

A new design accordion menu component that contains three interactive items.

Purpose

What problem does this component or pattern solve for the user?

When a Veteran is needing to download or print their medical records, they have a few options. They can print, download as PDF or download as TXT files. If we don't have these within an accordion menu, it pushes the important information on the page further down due to having three separate buttons. If we add this new component, it increases the visibility of the important information while still giving the Veterans the ability to print, download as PDF, or download as TXT files.

Usage

Context or task: Explain the scenario or user tasks where this component is, or could be, used.

This component can be used in many situations where there are multiple types of download(s) along with a print option. In our situation, it is being used for Medical records in different places. Such as: Lab and test results, Care summaries and notes, Vaccines, Allergies, Health conditions, and vitals along with the Download all your medical records experience for MHV on VA.

Behavior

Describe the key interactions for this component, calling out any specific considerations for mobile.

The interactions of this component are straightforward. It is a button with text that opens up with a list of items (more buttons and text) for the Veteran to interact with.

Examples

Include any examples you have of this component or pattern. These can be screenshots, links to a Sketch file, or links to staging or production.

The button can be reviewed on the VA staging website found at (https://staging.va.gov/my-health/medical-records/health-history/allergies/123) NOTE: The What to know about downloading records underneath the button is being removed. As of now, the button above covers up the What to know about downloading records and we are aware this is not a good experience.

Accessibility

Include any accessibility considerations.

We have tested this component with accessibility specialists on staging with iPhone and Android, it worked well. We have also tested this with screen readers for desktops, it worked well.

Guidance

What would you want to tell other teams about this component or pattern?

Research (optional)

Include any research you have already conducted, or plan to conduct, on this component or pattern.

Most participants understood how to download or print an individual record, a list, and their entire medical record. 18 of 21 successfully downloaded the ‘Complete blood count’ results without assistance. All three participants who struggled with or failed the task were in their 70s but attempted to save the results with methods that indicated confidence with technology. Two participants wanted to right-click and choose ‘save as,’ while the other was looking for the download option available in the browser.

19 of 21 chose PDF as their preferred file format. One participant chose TXT, and one did not answer the question. Two participants stated they prefer to print rather than download.

Among the reason participants gave for their preference for PDF are that they are easier to read than TXT files, they are universally accessible, they are difficult to alter, and they are more familiar.

20 of 20 successfully printed the list of vaccines without assistance. Three participants were delighted with how easy it was with two comparing it to their current EHR.

“This is easy! Boy, it’s so much better than my own. It’s like day and night.”

16 of 19 successfully printed the Penicillin record on the ‘Allergies’ page without assistance. All three participants who struggled with the task thought they had to download the list to get the one record. They were all My HealtheVet users.

12 of 17 successfully downloaded the Blue Button report of all medical records on the ‘Share your medical record page’ without assistance. The average time on task for successful participants was 31 seconds with desktop/laptop users performing an average of 2 seconds faster than mobile users.

Participants expressed concern that downloading the Blue Button would take hours and result in a lengthy file.

All participants (5 of 5) who failed the task are current My HealtheVet users.

Note: ignore the BB column in the image above, this is a different button

Code (optional)

Include any existing code.

import React, { useState } from 'react'; import PropTypes from 'prop-types'; const PrintDownload = props => { const { download, list } = props; const [menuOpen, setMenuOpen] = useState(false); let toggleMenuButtonClasses = 'toggle-menu-button vads-u-justify-content--space-between'; let menuOptionsClasses = 'menu-options'; let menuIconClasses = 'fas fa-angle-down vads-u-color--primary vads-u-margin-left--0p5'; if (menuOpen) { toggleMenuButtonClasses += 'toggle-menu-button-open vads-u-justify-content--space-between'; menuOptionsClasses += ' menu-options-open'; menuIconClasses = 'fas fa-angle-up vads-u-color--primary vads-u-margin-left--0p5'; } return (

setMenuOpen(!menuOpen)} data-testid="print-records-button" aria-expanded={menuOpen} > Print or download this {list ? 'list' : 'record'}

• Print {list && 'list'}
• Download {list && 'list '} as PDF
• Download {list && 'list '} as a text file

); }; export default PrintDownload; PrintDownload.propTypes = { download: PropTypes.any, list: PropTypes.any, };

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]

@BobbyBaileyRB can you attend the Design System Council meeting on Friday, June 30 to present and discuss this?

[caw310]

This was discussed in the June 30 DSC meeting. From meeting notes:

• Will add to DST backlog.
• Coulton / Bobby - will take first stab at guidance
• Bobby work with engineers with how to have it as an experimental component

[humancompanion-usds]

Some other things we decided:

• Likely going to be named Button - Menu as it is a collection of buttons in a menu.
• We'll likely suggest that some, but not all, specific actions get an icon to be consistent with usage elsewhere (e.g. print, download)
• We will likely recommend that Button - Icon be used when there are 1 or 2 actions to be displayed and Button - Menu be used when there are 3 or more.
• Guidance should set clear expectations for the label for the "bucket" of actions in the menu.