Experimental Design [Medical Records lab and test results imaging]

[BobbyBaileyRB]

What

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

This is for Medical Records and Radiology images. It is designed to feel and act like a gallery of images.

Purpose

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

It allows the Veteran to review lab images in a fast and efficient way.

Usage

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

A veteran is looking to review their x-rays or other imaging. They can navigate to Lab and test results page which will show a list of cards containing all types of lab and test results. After the Veteran interacts with the Details link on a Radiology card, it sends them to a new page. This page displays all their Details and Results about the Lab. A Veteran can select Review all Images to see a list of the images for this Lab.

There are three pages for this flow.

1. Lab and test result page for Radiology.

• This page contains the type of test
• Details about this test
• Results

2. Review all x images

• This page contains a list of images
• It displays the first five images with a load more button
• It has the ability to review the images in full size.

3. Review the full size of an image

• Contains a next and previous button to filter through all images for this test.

Behavior

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

Key interactions

• Load more features (for images)
• Next and previous buttons (for reviewing images in larger form)

Mobile

• Mobile follows the same type of interactions but the gallery becomes a vertical display of images instead of a grid system displayed in the desktop view.

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.

Contains both mobile and desktop design(s) and flow(s) of the Lab and Test results for a Radiology report.

Sketch browser link for quick access to the Radiology images and flow https://www.sketch.com/s/7b1208f5-c12d-4d87-9d67-1665f245cc92/v/Z73xYY/prototypes

Sketch browser link for a full overview of Medical Records https://www.sketch.com/s/f6118ebb-966d-4f83-afba-f9e987b65eac/prototype/a/E9F3F0B1-5C09-4E1D-8659-4822D08164CE

We understand there are some design bugs - Sketch has some interesting bugs when it comes to reviewing prototypes in the browser. Here are PNG images of the designs.

Sketch Images

Accessibility

Include any accessibility considerations.

Alt tags As of writing this, we are unsure what ALT tags we can provide for the images. We are currently reviewing the metadata that we can pull from. The accessibility team during design review said "For x-ray images, or any other test images that might show up --- If there's a way to have meaningful alt text that describes the image, that would be amazing. Otherwise, I think you might best be served with empty alt attributes rather than repeating the test name as the alt text for each image. If there's not a way to provide screen reader users value with the alt text, I think it's probably better to get them to the download link sooner rather than later. But other a11y folks might disagree with that, so it's worth some conversation with the CAIA folks!"

Links "Review full image" link will need a unique accessible name. The accessibility team during design review said "Each “Details” link and "View full image" link will need a unique accessible name. That can be either… Unique link text that's visible to all users (Details about back pain from April 1, 2022) An aria-label to provide unique text to screen reader users (<a href=”#” aria-label=”Details about back pain from April 1, 2022”>Details).

Guidance

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

We are working closely with accessibility, design, and development. For any questions please reach out to the MR design team.

Research (optional)

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

None at this time.

Code (optional)

Include any existing code.

Not fully developed yet.

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 Would like to put this in the Design System Council meeting agenda for Friday, June 2 at 1pm ET. Are you available to attend?

[BobbyBaileyRB]

Yes - thank you for reaching out. Alexia Wunder will be presenting these designs for Friday, June 2 at 1pm ET.

[caw310]

Notes from 6/2 meeting.

• Add link variation for pagination (circle back when design is finalized)
• Document best practices around how we use images especially when it comes to medical images
• Possibly add gallery image view to DS
• Design decisions still need to be finalized before we make any action items

[humancompanion-usds]

@allison0034 to track down what happened to the link pagination. Might need to update Breadcrumb to point to Link as navigation and update Link and Pagination to talk about using links as navigation between pages.

[alexiawunder]

We've decided to reassess our approach for the current images flow. As part of our MVP strategy, we'll be moving forward without incorporating images in Phase 0. Should we integrate an image browsing feature, it won't be until Phase 1, with a tentative timeline set for this summer. Thanks for your patience!