department-of-veterans-affairs / va.gov-team

Public resources for building on and in support of VA.gov. Visit complete Knowledge Hub:
https://depo-platform-documentation.scrollhelp.site/index.html
281 stars 197 forks source link

[Feature-Request]: Progress bar in form pages is not indicative of true progress #70094

Open carly-yamrus opened 10 months ago

carly-yamrus commented 10 months ago

Describe the problem

The progress bar at the top of form pages is not indicative of true progress made when completing a form, for example when there are multiple pages within a step. This can cause confusion to users trying to advance to the next step when they’re not receiving that visual confirmation through the progress bar that they have successfully moved to the next screen.

Note: this is not an issue of counting steps possible for the component. The challenge lies in tracking the progress within the individual steps.

Who will benefit

Veterans, service members, or family members trying to fill out a form on VA.gov.

An updated progress bar would give users a more accurate time frame for progress through a form and better reflect how much is left for completion. Users should be able to clearly identify how much progress they’ve made in the form at any given step and should be able to identify additional sub-steps that may occur in variable situations. Language changes should also be considered to help users understand that there may be steps within steps that will lengthen or shorten the form.

Describe your idea

Consider usability testing to gain insight into how users are interacting with the progress bar, and how it may be hindering users' ability to quickly and accurately complete the form. Solutions may include changes to language, color, or placement of the progress bar, as well as the addition of sub-steps, or potentially implementation of a new type of component that does the above.

Provide evidence

Pre-Need Integration usability study 07/2023 - One participant noted that the progress bar doesn’t seem to move as they’re making their way through the form.

Users throughout the years have expressed confusion and frustration with the lack of visual confirmation and accuracy when moving through the form.

An a11y team study on short form 10EZ concluded that the progress bar interrupted screen reader users. There was confusion surrounding the language used and the belief that the continue button "doesn't work" because the progress bar did not advance when clicked.

A usability study conducted on the VA Form 28-8832 found users to struggle with the progress bar while using screen readers. Users felt that the form was longer than it actually is because of the indication of progress by step rather than volume or questions/pages. It was also found that the color implies the progress bar is interactive, when it is not.

Platform Mission

Other:

No response

humancompanion-usds commented 9 months ago

Is this a bug or a feature request? Sounds like an implementation bug, rather than a bug with the Design System component. The component itself doesn't dictate how many steps you have or how to advance the current step based on user action. There is nothing stopping teams from advancing the step indicator how and when they see fit.

If this is a feature request, it's unclear to me what the request is. My opinion is that we need a step indicator can accommodate a variable number of steps as many larger forms add steps depending on branching logic using the information provided thus far in the form flow. Thus some larger forms can have many more than 13 steps, which is the max the v3 Progress bar - Segmented can support (and 10 is much more comfortable as a max). Therefore we need a vertically oriented progress bar that can expand and collapse rather than a horizontally oriented progress bar for more complex form flows. If that's what is being request then that's great, except that the Design System Team cannot provide that. Such a design would need to be contributed by a VFS team. Once such a design were proposed it could come to Design System Council and we could decide to test that design and go from there.

carly-yamrus commented 9 months ago

Hi @humancompanion-usds , it is a feature request because it is still unclear how much progress is being made through each step. Not so much about the max amount of steps we can have.

humancompanion-usds commented 9 months ago

The problems indicated in research all revolve around the progress bar not progressing. Some teams choose to only move the step indicator forward once a group or section is complete rather than a page. So there isn't a 1 to 1 of page to step. That's an implementation choice made by those teams.

For example:

Pre-Need Integration usability study 07/2023 - One participant noted that the progress bar doesn’t seem to move as they’re making their way through the form.

This is likely the same issue:

An a11y team study on short form 10EZ concluded that the progress bar interrupted screen reader users. There was confusion surrounding the language used and the belief that the continue button "doesn't work" because the progress bar did not advance when clicked.

This not a bug in the component. If the team decides that they don't want to increment the step indicator then it doesn't increment and the user is confused.

It was also found that the color implies the progress bar is interactive, when it is not.

I'm not sure what that means though I'll guess that some users would expect it to be interactive. That's a different and larger discussion. The USWDS component is not interactive. Also, this was likely a research finding on v1 of the component and there is now a v3 available. A future component could be interactive but it presents coding challenges around validation of input if a user bounces back and forward within a form flow. Thus we'd need to discuss what navigation was allowed.

I completely agree we need a design that handles forms that:

However, that's not all of our forms. There are a far number that don't change the number of steps and don't go beyond 13 steps. For those, leaving the navigation aside for the moment, the v3 progress bar component should be sufficient when implemented properly. For other use cases, longer forms or undetermined length, I agree a new component is needed.

However, the Design System Team does not design solutions for VFS Teams. Instead, we document the solutions that VFS teams come up with that pass Design System Council review. My previous comment stands: A VFS team will need to design a solution to this problem, test it with users, and submit an experimental request to the Design System.

humancompanion-usds commented 7 months ago

Update: The Veteran-facing Forms team completed research on a number of form related items. One of the things they tested was a change to the Progress bar - Segmented that used Chapters instead of tests. A primary finding was:

Users are confused by the relationship between a section and a given page. They expected the stepper component to reflect incremental progress on each new page-load.

Essentially, users expect the step indicator to behave as a step indicator and to increment on each step. They do not expect it to be a chapter or section indicator. Thus we still very much need a design for longer forms that have many steps, changing number of steps based on user input, sub-tasks/steps, etc. I would recommend a horizontally oriented progress indicator on the left or right rail of a page that can expand as needed and can provide context.

barron-charles commented 6 months ago

@humancompanion-usds That vertical step indicator is similar in respect to this component USWDS. The issue with this is the number of pages would be numerous for larger applications. If it's selectable folding in and out with the options, it could be a solution, but also could be a bit confusing with user experience.

humancompanion-usds commented 6 months ago

The issue with this is the number of pages would be numerous for larger applications. If it's selectable folding in and out with the options, it could be a solution, but also could be a bit confusing with user experience.

Yes, I'm fully aware of the challenges. That's why it needs design work and testing. I have designed a vertical progress indicator in the past that was successful. It can be done.

gopixelsgo commented 4 months ago

Hi @humancompanion-usds - is this one considered still in review, or is there any progress to report? Thanks!

humancompanion-usds commented 3 months ago

@gopixelsgo - @tygindraux is about to bring a new progress bar design to Design System Council. So progress is being made!

gopixelsgo commented 3 months ago

That's great! Thanks for the update @humancompanion-usds. I see that thread now in platform-design-system Slack with @tygindraux. I'll keep an eye out, but feel free to update here when the ticket is ready to progress along.

gopixelsgo commented 2 months ago

@humancompanion-usds @tygindraux - Are there any updates on this item? Thanks!

humancompanion-usds commented 2 months ago

Came to DSC. Carol will add the notes to this issue.

gopixelsgo commented 2 months ago

Thank you @humancompanion-usds !