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

Repository for design.va.gov website
https://design.va.gov
37 stars 57 forks source link

Experimental Design [Review page pattern for complex forms] #2040

Open mgleo opened 1 year ago

mgleo commented 1 year ago

What

This is a MVP solution for the Review page on the Financial Status Report.

Purpose

FSR is one of the longest forms on VA.gov and users are currently not able to edit their answers on the Review page. Making each question editable on the Review page is not feasible due to the large amount and complexity of questions. Adding an edit button for each question on the review page became unwieldily and users were confused by which button they should select. There were also limitations with the Form System that made this difficult to develop.

Usage

User is on the Review page and sees an error. This is how they will be able to edit and correct that error

Behavior

User Flow

review-user-flow

User selects "Edit section" to begin

reviewpage

First page seen after selects "Edit section" on Review page

first -page-review

Last page before user is taken back to Review page

last-page-review

Research (optional)

eFSR Research study 06/2023 | Participants were briefly asked about their preference in editing their answers on the Review page or being sent back to the form to edit their answers. Most answered that they would prefer to edit on the Review page itself. Their reasoning was they did not want to be sent back into the form and have to fill it out all over again. This was a preference question and participants did not view both experiences in a built out staging environment. Only one question was expanded and editable on the prototype and one participant was confused by the button needed to select to save his answer.

More research will be needed to create the final version of this and this current version is a MVP solution.

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.

KevinMHoffmanUSDS commented 1 year ago

In order to keep the team moving forward, this is approved pending an accessibility review. If any accessibility launch blocking issues identified in staging have been addressed, it is fine to move forward. CC @allison0034 @shiragoodman @humancompanion-usds

humancompanion-usds commented 5 months ago

The Veteran-facing Forms team is going to build out the new Review page. At that time we'll document how to handle complex forms.