Request to retire the current "magic" (progressive disclosure) version of the wizard

[joshkimux]

Bug Report

• [x] I’ve searched for any related issues and avoided creating a duplicate issue.

There is something similar to this in the backlog, but I don't believe it involves retiring this pattern completely.

What happened

The current dynamic nature of the wizard is creating usability and accessibility issues for all Veterans. We may want to consider retiring it in favor of gov.uk's check eligibility pattern before it is used even more.

Specifically:

• a submit button to provide an easily discoverable method of finding out what's wrong / receiving feedback
• questions should be presented page by page as opposed to dynamically on one page
• a final results page should be presented upon completion

Issues include the following:

It's a bad experience for screen reader users

1. There's no clear end point

https://user-images.githubusercontent.com/14154792/107518553-26bdf780-6b7d-11eb-8ac3-013d9c28c857.mov

Since there is no clear submit or continue button, screen reader users will have no clear "end point" to this form. Should they be navigating the form using the tab key, they may accidentally jump out of the wizard and receive irrelevant/confusing content or unintentional instructions to proceed (as seen in the video).

2. Validation is not explicit

Even if the user is aware that this is a wizard, and that more choices will unravel as they proceed-- they may become confused about how to proceed as no clear method of validation is available (since there's no submit/continue button). Without a clear submit button, there’s no way of definitively checking for errors in what’s been filled out or determine a way forwards.

3. A series of dynamic, nested fieldsets are undesirable

The wizard as a whole is a group, but it is not programmatically established as one. Even if it were to be programmatically established as one where the entire wizard is a large fieldset with smaller fieldsets self-contained within it, there are still concerns.

It is possible to nest one <fieldset> element inside another, but it is not recommended. Screen readers do not automatically indicate the end of the <fieldset> element, so it is impossible for screen reader users to confidently know which fields belong within which fieldset. Using the fieldset element - gov.uk

4. We never tested this pattern on mobile or with screen readers

Not testing patterns of this scale on multiple devices and in multiple use cases is risky. Until further testing is completed, we pose a risk of excluding statistically significant populations. At the very least this should be acknowledged.

Reference this sample gap analysis.

5. Providing results using dynamic show/hide behavior is spotty for screen reader users

We've encountered several challenges attempting to remediate the accessibility of the show/hide wizard results design:

• https://github.com/department-of-veterans-affairs/va.gov-team/issues/18581
• https://github.com/department-of-veterans-affairs/va.gov-team/issues/18254
• https://github.com/department-of-veterans-affairs/va.gov-team/issues/16745
• https://github.com/department-of-veterans-affairs/va.gov-team/issues/316

Issues often resolve around band aid fixes using aria-describedby and aria-live-- the latter performing awkwardly due to the form system as it must be present on page load to work correctly (not added in dynamically).

Using gov.uk's check eligibility pattern would resolve all of these tickets in a more elegant and semantic way.

Heavy cognitive load

Gov.uk's check eligibility pattern follows one thing per page, where a limited amount of information is provided to the user at any given time to minimize cognitive load. See the following articles:

• https://www.smashingmagazine.com/2017/05/better-form-design-one-thing-per-page/
• https://designnotes.blog.gov.uk/2015/07/03/one-thing-per-page/
• https://service-manual.nhs.uk/content/how-to-write-good-questions-for-forms/get-the-questions-into-order

VA.gov's wizard, on the other hand, suffers from the following issues:

• Often placed within a pool of content, adding bloat to an already cognitively heavy page
• Is difficult to keep track of on a screen reader with no clear explicit end

Users have to go through an enormous amount of content before reaching the wizard which is cognitively exhausting. Even in the new versions of the wizard where it is isolated on its own page, users must still answer a series of questions in a row with varying results. The design itself is limiting as space is crunched within the confines of the wizard; this may discourage providing more detailed instructions (which is easier to do following one thing per page on gov.uk).

https://user-images.githubusercontent.com/14154792/107684800-37e83080-6c71-11eb-962d-6b74f1366b86.mov

Large expandable and collapsible areas are disorientating

1. On mobile, expanding and collapsing the wizard may become frustrating.

https://user-images.githubusercontent.com/14154792/107681233-cd34f600-6c6c-11eb-8e2d-2d7151c0c24f.mov

2. Unintentional bugs can create disorientation.

On live production right now, if a keyboard user were to press enter on any of the buttons, the wizard will collapse and reset.

https://user-images.githubusercontent.com/14154792/107682563-7af4d480-6c6e-11eb-8c42-b935dd8dfde1.mov

Other issues

• Relies on javascript to expand/collapse additional questions
• Can stack a potentially indefinite amount of errors within a single page (depending on how many questions are asked) …Which ultimately may create more cognitive load than what it was meant to offload

Suggestion

I recommend considering implementing gov.uk's check eligibility pattern for the above reasons. It may also be helpful to have more clear forms guidance similar to NHS.

Improving research standards to include testing with mobile and screen readers devices may also help to mitigate inaccessible/exclusive design patterns in the future.

I'm more than happy to talk about this in more detail or demo the issues in a live environment if more clarification is needed. I also understand that this is definitely a difficult, and long-tail effort. However, in the long run, I believe this is the right direction to move towards for Veterans.

[caw310]

Started discussion at the DSC 2/19 meeting. We will continue to discuss this next week.

[joshkimux]

Linking @AngelaFowler82 recent issue 21078 on the wizard here

[CrystabelReiter]

Decision: The group agreed that the Collab Cycle team will keep an eye out for a wizard to come thru the cycle and ask them to test the one page per question option

[caw310]

@GnatalieH per our discussion with Allison and Sean, and Ryan's response on Slack, the decision has been made to deprecate the wizards pattern. Please update this page on design.va.gov with "Deprecated" next to the word Wizard. https://design.va.gov/patterns/wizards

[joshkimux]

@caw310 , for our VSA teams, is there an alternative pattern (e.g. check eligibility) we can point folks to in the future?

[caw310]

@joshkimux will let you know once we are working on deprecating.

@GnatalieH , let's try to remember to keep Josh in the loop for an alternative once we identify that.

[GnatalieH]

@caw310 , for our VSA teams, is there an alternative pattern (e.g. check eligibility) we can point folks to in the future?

@joshkimux where is the check eligibility pattern you are referring to? I'd love to take a look. Thanks!

[joshkimux]

@GnatalieH as always, the check eligibility pattern is derived from gov uk. I'm not sure if we have any active instances/examples of it in va.gov at the moment.

[ehuntdsva]

unsubscribe

Thanks

Elizabeth Hunt, RN, MSN Clinical Operations Nurse Manager (Nashville) VA TN Valley Health Care Services Cell: 615-426-8778 Office: 615-873-6832 @.**@.>

@.*** Integrity Commitment Advocacy Respect Excellence ("I CARE")

From: Natalie Hill @.> Sent: Tuesday, December 21, 2021 9:23 AM To: department-of-veterans-affairs/vets-design-system-documentation @.> Cc: Subscribed @.***> Subject: [EXTERNAL] Re: [department-of-veterans-affairs/vets-design-system-documentation] Request to retire the current "magic" (dynamic) version of the wizard (#399)

@caw310https://gcc02.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fcaw310&data=04%7C01%7C%7C9827c11c5a154bc4c9cf08d9c495ca15%7Ce95f1b23abaf45ee821db7ab251ab3bf%7C0%7C0%7C637756969885005178%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000&sdata=yejrEwAO8CAGQ5He0WauPFEo%2FGVcvg5cuYDw3HevS0o%3D&reserved=0 , for our VSA teams, is there an alternative pattern (e.g. check eligibility) we can point folks to in the future?

@joshkimuxhttps://gcc02.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fjoshkimux&data=04%7C01%7C%7C9827c11c5a154bc4c9cf08d9c495ca15%7Ce95f1b23abaf45ee821db7ab251ab3bf%7C0%7C0%7C637756969885005178%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000&sdata=tBVGs8WA1hKK%2FczwnSoTUSe5TJj2yopdqO7FUcmEy2E%3D&reserved=0 where is the check eligibility pattern you are referring to? I'd love to take a look. Thanks!

- Reply to this email directly, view it on GitHubhttps://gcc02.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fdepartment-of-veterans-affairs%2Fvets-design-system-documentation%2Fissues%2F399%23issuecomment-998866881&data=04%7C01%7C%7C9827c11c5a154bc4c9cf08d9c495ca15%7Ce95f1b23abaf45ee821db7ab251ab3bf%7C0%7C0%7C637756969885005178%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000&sdata=%2F93lGq%2BlK3mJTkdOHrVzPB8PBOJOWuhAnzcpwC0%2BDqI%3D&reserved=0, or unsubscribehttps://gcc02.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAID5OAUMXS4RVGBVK5VRAN3USCLVRANCNFSM4XPL74OQ&data=04%7C01%7C%7C9827c11c5a154bc4c9cf08d9c495ca15%7Ce95f1b23abaf45ee821db7ab251ab3bf%7C0%7C0%7C637756969885005178%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000&sdata=cBlWFgBsC9XTv1wg7Ftqy9h8AGiAPBtvrpZlH%2BUeKDo%3D&reserved=0. Triage notifications on the go with GitHub Mobile for iOShttps://gcc02.safelinks.protection.outlook.com/?url=https%3A%2F%2Fapps.apple.com%2Fapp%2Fapple-store%2Fid1477376905%3Fct%3Dnotification-email%26mt%3D8%26pt%3D524675&data=04%7C01%7C%7C9827c11c5a154bc4c9cf08d9c495ca15%7Ce95f1b23abaf45ee821db7ab251ab3bf%7C0%7C0%7C637756969885005178%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000&sdata=OTsYgR9qqNljAPGUp4qSXWUBEA1dnO8cYmDejfGF1EY%3D&reserved=0 or Androidhttps://gcc02.safelinks.protection.outlook.com/?url=https%3A%2F%2Fplay.google.com%2Fstore%2Fapps%2Fdetails%3Fid%3Dcom.github.android%26referrer%3Dutm_campaign%253Dnotification-email%2526utm_medium%253Demail%2526utm_source%253Dgithub&data=04%7C01%7C%7C9827c11c5a154bc4c9cf08d9c495ca15%7Ce95f1b23abaf45ee821db7ab251ab3bf%7C0%7C0%7C637756969885005178%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000&sdata=oiqKcCHi8OUlvkSJMBHUAqg6AVWvQH9T37I0r7XuSQg%3D&reserved=0. You are receiving this because you are subscribed to this thread.Message ID: @.**@.>>

[GnatalieH]

@k80bowman and @caw310, can we take a look at prioritizing this item soon? @allison0034 says they see Wizards come through the Collab Cycle 1-2 times per month. Thx.

[allison0034]

@GnatalieH @k80bowman @caw310 even if we could just update our documentation to say that we are no longer using the wizard and list some possible solutions that need to be tested that would be a big help. New teams come on and see the wizard as an option : (

[GnatalieH]

@GnatalieH @k80bowman @caw310 even if we could just update our documentation to say that we are no longer using the wizard and list some possible solutions that need to be tested that would be a big help. New teams come on and see the wizard as an option : (

@allison0034 the one-question-per-page pattern is our suggested alternative pattern. We should put that in the documentation.

[k80bowman]

Just to be clear about what needs to be done here, this is what I'm reading:

• Add "deprecated" to the wizards pattern documentation
• Add the recommendation to use the one-question-per-page pattern instead to the wizards pattern documentation

Is that correct? If so, I'm assuming that we will need to revisit this documentation in the future as well.

[allison0034]

@k80bowman I would say you are correct, however we should probably discuss at a DSC meeting and make sure Josh is ok with that solution

[joshkimux]

I'm ok with that solution! Also happy to hop on a DSC meeting to help hash things out 😄

[humancompanion-usds]

@joshkimux and @allison0034 - We have deprecated the Wizard pattern: https://design.va.gov/patterns/wizards

Let me know if the text under the Status heading is appropriate. It's temporary while I work on defining a template for patterns and write up the patterns that will replace this one. But let me know if it needs to say more, less, or something else. Thanks. Sorry this took over a month. Now that we have a maturity scale in place we'll be able to deprecate things faster. Still testing out the maturity scale next week so there may be some adjustments so open to feedback on any aspect of this.

[joshkimux]

@humancompanion-usds the new updated status is wonderful, appreciate this a ton and the thought behind a maturity scale. Closing this out as this request is complete ✌️

If y'all have some extra time, the only little thing I might add to the design system page is a link to this ticket just in case folks are looking for context on why this has been deprecated 🙏

[allison0034]

@humancompanion-usds this is awesome! I do have a suggestion...

"Status

The Wizard pattern is now deprecated and the Design System Team is in the process of replacing it with patterns and guidance that will roughly adhere to the following:

Content: Writing questions for forms Pattern: Check a service is suitable Principle: One thing per page

You should not create any new instances of this pattern and should instead speak with the Design System Council or CollabCycle team who can direct you."

Can you change that last sentence? I fear some people might confuse "this pattern" with the one you reference directly above it. Maybe something like...

"You should not create any new instances of the wizard pattern and should instead speak with the Design System Council or Collab Cycle team who can direct you."

[humancompanion-usds]

Thank you both for your input. I've fixed up the text and added a link to this issue. Should go out early next week. I'll file new issues for the new patterns we want to have. Would love for a team to try out one thing per page and check suitability sometime soon.