search

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
282 stars 203 forks source link

[UI] Questionnaire Error State Review #15125

Closed kristenmcconnell closed 3 years ago

kristenmcconnell commented 4 years ago

User Story

Related Documentation

Description

An audit of error states within the questionnaire and suggestions on any edits that need to be made to said error states.

Use cases to review/think about:

  1. No appointment ID being returned
    • When coming directly to questionnaire
    • When opening a questionnaire from questionnaire list
  2. Booking note is missing/can't be returned
    • Think through if anything else needs to happen besides the current behavior: we do not show the "What's the reason for your visit?" question.
  3. All the alert boxes that are part of the forms library, which deal with...
    • Authentication
    • In-progress
    • Submitting
  4. PDF creation errors
  5. Form field validation errors (we only really have one required form field).

Tasks

this is a list of design tasks that are needed for this ticket

  • [x] Receive audit of alert boxes related to errors and form field validation error from Mark Dewey.
  • This audit will include wherein the UI the alert boxes are, steps to see them in the UI, text and level of effort to customization
  • [x] Review design library for normal error states that they have already taken into account and see if any need to be added/reviewed for our project
  • [x] Review error states and wording
  • [x] Create documentation on the proposed changes.
  • [x] Complete a content review by sending Peggy Gannon a message within the vfs-platform-support channel and tagging her within the comments section of this story

Acceptance Criteria

when is the ticket done

  • [ ] UI review meeting with product/team for feature capabilities
  • [ ] UI review meeting with engineering for layout and callouts (can be the same meeting as above)
  • [ ] Published mockup link exists and it is added/updated within the appropriate front-end engineering story
  • [x] Feedback from content is incorporated into the mockup
kristenmcconnell commented 3 years ago

@mdewey I updated this story based upon our conversation this afternoon. It might be written more from my perspective and the tasks that I need to complete, but it should now include all of the use cases that we talked about. Let me know if I missed anything. Feel free to add them in this story, then copy to create a ticket for yourself.

mdewey commented 3 years ago

Thanks @kristenmcconnell! I only added what exactly the audit of alert boxes will produce. I will copy this ticket for myself!

kristenmcconnell commented 3 years ago

Review https://github.com/department-of-veterans-affairs/va.gov-team/blob/master/products/health-care/questionnaire/engineering/error-flows/README.md when completing this task.

The three use cases that @mdewey found during his audit that need UX are:

  1. When we can't generate the PDF on the Questionnaire list, because the services are down.
  2. When we can't generate the PDF on the confirmation page, because the services are down.
  3. When the service goes down, but a Veteran is already working on the questionnaire, so what to put on the questionnaire pages.
  4. Review the screenshots under the "Submitting an answer" section of https://github.com/department-of-veterans-affairs/va.gov-team/blob/master/products/health-care/questionnaire/engineering/error-flows/README.md
kristenmcconnell commented 3 years ago

WIP Selections from https://design.va.gov/patterns/messaging-dictionary were made to fulfill the below questionnaire error message states:

  1. When we can't generate the PDF on the Questionnaire list, because the services are down. Screen Shot 2021-01-14 at 2.26.59 PM.png Screen Shot 2021-01-14 at 2.28.25 PM.png

  2. When we can't generate the PDF on the confirmation page, because the services are down. Screen Shot 2021-01-14 at 2.26.59 PM.png Screen Shot 2021-01-14 at 2.28.25 PM.png

  3. When the service goes down, but a Veteran is already working on the questionnaire, so what to put on the questionnaire pages. Screen Shot 2021-01-14 at 3.23.00 PM.png Screen Shot 2021-01-19 at 10.30.21 AM.png

kristenmcconnell commented 3 years ago

Wireframe drafts (available in Zeplin at https://zpl.io/VOOek8j or https://scene.zeplin.io/project/5f3d86a458ea2231e60a4780). Still under review by Peggy.

  1. When we can't generate the PDF on the Questionnaire list, because the services are down. Questionnaire List - Completed - Error Message.jpg

  2. When we can't generate the PDF on the confirmation page, because the services are down. Confirmation Exploration 9 - Error Message.jpg

  3. When the service goes down, but a Veteran is already working on the questionnaire, so what to put on the questionnaire pages. Demographics - Error Message.jpg

kristenmcconnell commented 3 years ago

Regarding the white background, there is precedent for it. See the following Slack thread: https://dsva.slack.com/archives/C0NGDDXME/p1611176108064500. It would be a change to the base alert component. Platform asked to incorporate an updated alert style within our next usability test. This is possible from my end, but would need to be discussed with the rest of the team. Also, the timing on the test will need to be discussed, because we aren't testing immediately.

kristenmcconnell commented 3 years ago

Met with accessibility specialist, Josh Kim. He recommended..."As for placement, I’d recommend placing the error directly above the button rather than below. If the error is placed below the button it is referring to, should a screen reader user read out the contents of the error and key tab, they will be taken to the following card’s button which can cause confusion since they share the same string."

Therefore, the following changes have been made. Questionnaire List - Completed - Error Message.jpg Confirmation Exploration 9 - Error Message.jpg Demographics - Error Message.jpg

kristenmcconnell commented 3 years ago

After clarifying some of the use cases with engineering and getting feedback from content, the final proposed error messages can be viewed within the "Error Message" section of Zeplin. https://scene.zeplin.io/project/5f3d86a458ea2231e60a4780 or https://zpl.io/VOOek8j