rileyorr
commented
2 months ago Figma Prototype Audit
Audit Status: COMPLETED
[!TIP] The issues and recommendations are documented below and can also be referred to in the audit document (Google Doc).
- [x] A comment has been added to the parent intake ticket directing the team to this feedback.
- [x] This is in addition to a post in their Slack channel.
Issue: Annotations are missing
- Screen: All screens
- Version: All
- Experience standard: User can complete necessary flows
Description
Annotations have not been included on the prototype
Details
- Annotations help communicate accessibility decisions to other designers, developers, and the Platform Governance team.
- Annotations can help ensure that users with disabilities and people who use assistive technologies like screen readers have a smooth experience when using VA properties.
- Designers should add annotations before the design/developer hand-off. The Collaboration Cycle strongly recommends you go to midpoint review with annotations in your mockup files.
Recommendation
Consider adding annotations to the prototype prior to your team’s midpoint review
- If needed, you can reach out to CAIA to pair with an accessibility specialist on what annotations to add and how to add them.
Issue: Unclear language
- Screen: “Need help?” area, all screens
- Version: All
- Experience standard: User has enough information to complete a task
Description
- The “Need help?” description is very short - it just says to Email a specific address. But it’s unclear how someone receiving that email can “help.” Are they providing tech support? Can they clarify eligibility? Or both? (See screenshot below)
Recommendation:
Add some language to clarify what kind of help vettecpartner@va.gov can provide. This may look something like:
- “Email vettecpartner@va.gov if you have any questions about this program.” or
- “For help filling out this form, email vettechpartner@va.gov.”
Issue: Error messages are missing and required elements are unclear
- Screen: All pages with required inputs
- Version: All
- Experience standard: User encounters consistent, clear design components and patterns
Description
Error messaging isn’t mocked up; it’s unclear what fields are optional vs required
Details
- The demographics portion of Section 1 states that the rest of the questions in the form are voluntary, which I perceive as meaning optional. However, Section 2 has a required input field “Enter the highest level of education you’ve completed”. This may be confusing to folks both with and without cognitive disabilities. See screenshots below.
- If the input field “Enter the highest level of education you’ve completed” is a required field when selecting “Something else” (there’s a bug in the prototype) then is the question itself required? Are other questions in Section 2 required?
Image: Step 1 of 3 Your Personal Information
Image: Step 2 of 3 Your Education and Employment History
Recommendation
- If the questions in Section 2 are required you may consider moving the demographic questions to a separate section at the end of the form.
- If the questions in Section 2 are required, visually indicate they are required using the red (*Required) styling.
- Consider mocking error states or documenting error messages so they can be reviewed as part of a future audit
Issue: Inconsistent component styling
- Screen: Review submission screen
- Version: All
- Experience standard: User encounters consistent, clear design components and patterns
Description
- The statement of truth component doesn’t align with the VA Design System statement of truth component.
- “Note: According to federal law,...” should not be displayed within the card.
Image: Statement of Truth Component Card
Recommendation
- Utilize the Statement of truth USWDS component from the VA Design System.
Issue: The review page is missing a heading
- Screen: Review page
- Version: All
- Experience standard: User encounters components and patterns that meet best practices
Description
The review screen does not have a heading. All form pages should have a heading that provides context to the user about what the page is about.
Image: Step 3 of 3 Review
Recommendation
Add a heading describing the page’s purpose (ex. Review your application). There may be a standard heading used across all VA.gov forms that may be worth digging into.
CAIA A11y Support
CAIA A11ys can review the Figma prototype files for desktop and mobile (if available), in order to provide feedback that may help your team successfully prepare and pass your Midpoint review within the Collaboration Cycle.
Next Steps
Description
The team went through Design Intent on July 15, 2024, and is working on feedback from Brian (included in this ticket), with Midpoint being its next stop.
Timeframe
October/early fall project completion, per the intake ticket.
No Accessibility Specialist on Team
CAIA accessibility specialists are available to provide support to govcio-vfep (vebt) through this process with accessibility support, as this team does not have an accessibility specialist.
Details
What details are necessary for understanding the specific work or request tracked by this issue?
Toggle to view details from the intake ticket and design intent feedback
### Intake Ticket > - _Our initiative focuses on digitizing the current PDF form (22-10282) to enroll in IBM's free SkillsBuild training program._ > - _We're currently focusing on initial discovery and planning stages, alongside the early phases of digitization. Our primary efforts are centered around building and finalizing wireframes and developing a user flow that will guide our design intent for collaboration. While specific dates are still being refined, we're aiming for a prod push around October or early fall to ensure progress aligns with our timeline._ #### One-thing-per-page Content Team (Katherine) has addressed [one-thing-per-page via comment and link.](https://github.com/department-of-veterans-affairs/va.gov-team/issues/87265#issuecomment-2246286920) ### Design Intent Feedback #### Heading Structure > _**Should**: In the wireframes provided, some pages had an H3 heading (eg. "Employment and education") while others didn't (eg. the military affiliation page). A consistent heading structure on every page of the form makes it more predictable and easier to navigate for screen reader users, so if possible try to have an H3 on every page. There are times when the H2, the H3, and the question label are a little redundant, and that's okay. Try to phrase things a little differently so it's less repetitive ("military affiliation" and "Which military affiliation describes you best?" or something similar) as needed._ #### Hint Text or Additional Info. Components > _**Should**: Wherever possible, provide hint text or additional info components providing users with context for why you're asking for some piece of information. It may not be clear to Veterans what the eligibility or selection criteria are for the program, and they may hit a question and think certain answers are disqualifying --- even if they're not. Any information that you can provide for why you're asking for employment information, education information, military affiliation, etc. can help reduce some anxiety some users may experience and help them understand the form and the process._Supporting Artifacts
Provided via CAIA Intake
V2CAIA Assignee(s)
Toggle to view assignee info
- @rileyorr - @coforma-jamie - @EvanAtCoformaTeam Info
Toggle to view team info
- **Team name:** govcio-vfep (switching to vebt soon) - **OCTO product owner:** Darla van Nieukerk ([darla.vannieukerk@va.gov](mailto:darla.vannieukerk@va.gov)) - **Product name:** IBM Skillsbuild Training Program Intake Form (VA Form 22-10282) - **Product manager**: Kara Ciprich ([kara.ciprich@va.gov](mailto:kara.ciprich@va.gov)) - **Slack channel:** [#govcio-vebt-team](https://join.slack.com/share/enQtNzMzMDg5NDYwNTQ5NC01MTUzZGU3MTNkNDBiMjUwOWJiMTllNTgyMzMwMTZjYzlkZDU2YjYxZjJiNTI2NWQ2NTg1M2Q0NTA5ZTc4MTll) - **Dedicated content writer on your team (if you have one):** Garry Forbes @gforbes4 ([garry.forbes@va.gov](mailto:garry.forbes@va.gov)) - **Dedicated a11y specialist on your team (if you have one):** `None Listed`Definition of Done