Experimental Design [combo-box for 526ez conditions submission page]

What

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

The Contention Classification team is releasing a new condition submission page to fix different issues discovered during research. We want to make it easier for Veterans to find the conditions they are applying for and make clear instructions to guide them in this process.

One key element of this page is the combo-box for adding new conditions. The issues we are addressing include:

Improvement in the string-matching algorithm to provide users with relevant results
Make it clear that free-text is an option while also encouraging Veterans to select conditions from the list if there is a match (because we can identify those conditions and enable some automation downstream, plus, the listed conditions contain critical information VSRs need for each specific condition)
Address important accessibility issues in the page detected by using the Screen Reader functionality
Make instructions more effective

Purpose

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

This component help Veterans add the conditions they are applying for.

Usage

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

This component could be used in any scenario where a text input admits autosuggestions.

We have customize it to optimize our use case and several details could become options if the VA decides to include it in the design system and make it available for other teams. Those settings may include:

Enable/Disable free-text option
String-matching/Search algorithm
Max number of results
Expand dropdown list on click or after typing characters

Behavior

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

When the users starts typing, after the first character, the combo-box expands a dropdown list with up to 20 suggestions. We are using an optimized string matching algorithm to provide terms related to what the user enters.

We created this Codepen prototype for usability testing. Please note that:

We didn't implement all the test cases in the prototype
It doesn't represent the final design we'll code in production because we wanted to test how some decisions perform with the users.
We are defining and tracking the final use cases of this component in this spreadsheet (Please, filter by the Combo-box categories in the Category column. Other tests may apply to other parts of the condition submission page).

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.

Please, check the Codepen linked above

Accessibility

Include any accessibility considerations.

Please, check the spreadsheet linked above

Guidance

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

Use this component when you require a text input field with autosuggestions.

Research (optional)

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

We ran usability testing with Veterans in October 2023 using the current version of the page. We validated that the concept of the combo-box for adding conditions is working very well. Research revealed the current implementation has several usability and accessibility issues that we want to address in this new version.

We finished usability testing in the past sprint with the prototype linked above and are currently in the synthesis phase.

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.

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