CMS Design Intent - UI/UX Feedback - VBA Regional Office Product

[BlakeOrgan]

VFS actions

• Assign this ticket to the team member(s) responsible for addressing feedback provided by the CMS Team.
• Comment on this ticket:
  • If the CMS Team reviewer has any Thoughts/Questions that require responses.
  • When Must feedback has been incorporated. As appropriate, link to any other GitHub issues or PRs related to this feedback.
  • When Should/Consider feedback has been incorporated, or if any feedback will not be addressed. As appropriate, link to any other GitHub issues or PRs related to this feedback.
• Close the ticket when all feedback has been addressed.

Feedback from CMS Team

The CMS Team practice areas will document their feedback on artifacts provided by VFS teams following the Must, Should, and Consider Framework. CMS Team reviewers may also provide additional notes that don’t comment on the artifacts themselves but are important for implementation (eg. engineering/coding notes or design system feedback).

Must

• All character counters MUST behave the same across all screens of this product and MUST align with other character counters in the CMS. Collaboration between a designer on this team and the CMS team may be necessary to determine the best path forward on how character counters are handled in this product.
• Error messages MUST be determined for all input fields prior to product launch. Use clientside validation in as many places as it makes sense to display errors prior to form submit.

Should

• All Forms, Details Components SHOULD all be left aligned and full width, unless there is reason for them not to be.
• Radio and checkbox inputs SHOULD be unselected by default, unless there is reason for them not to be.
• All input fields SHOULD have meaningful help text that use plain lanague. Several fields in the VA Service Taxonomy page currently do not have help text or have help text that uses technical jargon.
• Service Region name input field on the VA Service Regions page should have help text. Is there any standardized way that these should be named? If so, describe that.

Consider

• CONSIDER where client side validation can be used in this product. For example, if there is guidance for users to provide no more than 6 bullet points within a rich text editor, CONSIDER if client side validation could be appropriate for this type of situation to prevent users from doing so.
• CONSIDER whether Forms, Details Components in the service location paragraph type will be open or closed by default.
• CONSIDER how updates to rich text editors from upgrading to Drupal 10 might change your design.
• For sections where users will be able to add multiple contact methods in the service location paragraph type, CONSIDER how users will be able to easily distinguish between the contact methods in the UI when multiple are added.
• CONSIDER whether free text inputs on the VA Service Taxonomy page would be the most appropriate for this type of content.
• For fields that are hidden depending on if certain conditions are met (for example, "Use the facility street address" and "Use the facility phone number" checkboxes, CONSIDER showing both of the states in your design for fields that show depending on when the box is checked vs unchecked.

Tracking Implementation

• Shoulds and considers:
  • Addressed in Figma in 15989
  • Implemented in Drupal in 16327
• Character Counters
  • Added to Figma designs for VBA in 16523
  • Documented current and ideal state in 16659
  • Updated instance in VBA Centralized Content that didn't match intended design in 16807
  • Updated styling in of all instances in CMS in 16732
  • Possible enhancement documented for CMS Platform to consider at future date 16800
  • Some additional VBA character counter issues were probably addressed as part of Service Location launch
  • Additional updates to VBA character counters will happen in Add Character counter on phone paragraph type field in Drupal #18281
  • Add character counter on Additional Hours field in Drupal #18714
  • Implement UX recommendations for VBA fieldset of VA Service Taxonomy  #18716
• Error Messages
  • Added to Figma in #16068
  • Next step is feasibility review 16906
  • Add server-side validation on ext field in phone paragraph in Drupal #17863
  • Add client-side validation on phone paragraph type field in Drupal #18280

[jilladams]

Added Facilities team label per Slack thread, so this issue will show in our board, for prioritizing / addressing changes. FYI @xiongjaneg

[davidmpickett]

All character counters MUST behave the same across all screens of this product and MUST align with other character counters in the CMS. Collaboration between a designer on this team and the CMS team may be necessary to determine the best path forward on how character counters are handled in this product.

@BlakeOrgan - Follow-up question on this. Are we required/encouraged to show character counts for all text input fields? Plain text fields in Drupal are all limited to 255 characters (unless we indicate a shorter limit), but I don't think we've typically used the field widget with /counter for those inputs. Rich text fields are more often the scenario where we've been displaying character counts.

Also, just noting the FE design system patterns for Max Length:

• https://design.va.gov/components/form/text-input#max-length
• https://design.va.gov/components/form/textarea#max-length

[BlakeOrgan]

@davidmpickett I was speaking more on rich text fields. Sorry about that!

[xiongjaneg]

scheduled cross-product discussion for Dec. 11

[xiongjaneg]

Noted in #16068, "Some error messages are predetermined in Drupal. We may only need to write error messages for specific fields, but additional information will be needed from the CMS team to determine this."

Also, feedback mentioned client-side validation, which isn't yet available from CMS Team.

[xiongjaneg]

Noted in #16345, "Character counts are currently handled in a couple different ways" across Drupal. Standardization across Drupal is a larger question that will need CMS Team involvement. Facilities team can select and use one character count method across this product.

[xiongjaneg]

For "Service Region name input field on the VA Service Regions page should have help text. Is there any standardized way that these should be named? If so, describe that." Service Region will be a dropdown menu vetted by stakeholders, not a text field. There will plain language instructions to select the region.

[maortiz-27-80]

@xiongjaneg - See below for response and let us know if you have any questions/concerns:

Noted in #16068, "Some error messages are predetermined in Drupal. We may only need to write error messages for specific fields, but additional information will be needed from the CMS team to determine this."

Also, feedback mentioned client-side validation, which isn't yet available from CMS Team.

CMS team response: For error messages, these must be determined prior to launch (including any new error messaging written for specific fields). Past reviews from CMS team included only happy path, so ensure error handling has been internally reviewed by Facilities team. For client-side validation, understood this is not yet available, but would be great to include in designs and when these are triggered (implementation of client-side validation is NOT a blocker for launch).

Noted in #16345, "Character counts are currently handled in a couple different ways" across Drupal. Standardization across Drupal is a larger question that will need CMS Team involvement. Facilities team can select and use one character count method across this product.

CMS team response: @BlakeOrgan and @thejordanwood to have a working session regarding desired state. Can @thejordanwood schedule once she's ready to collaborate on this work?

For "Service Region name input field on the VA Service Regions page should have help text. Is there any standardized way that these should be named? If so, describe that." Service Region will be a dropdown menu vetted by stakeholders, not a text field. There will plain language instructions to select the region.

CMS team response: Dropdown menus should still have help text. Use the CMS style-guide for guidance.

cc: @BlakeOrgan

[xiongjaneg]

@maortiz-27-80 Thanks for the follow-up. Summing up my understanding here.

For Pilot MVP

• Determine error messages prior to launch and ensure error handling has been internally reviewed by Facilities team.
• Jordan to schedule meeting with Blake to discuss character counter standard.
• Service Regional dropdown menu has help text that meets the CMS style-guide.

Not a blocker

• Include client-side validation in designs and when these are triggered. CMS Team working on client-side validation.

[maortiz-27-80]

That's correct, @xiongjaneg. Let us know if you need anything else! cc: @BlakeOrgan

[mmiddaugh]

@davidmpickett are any tasks remaining from this feedback?

[davidmpickett]

@mmiddaugh @Agile6MSkinner @jilladams Here's my read on the current state

• Shoulds and considers:
  • Addressed in Figma in 15989
  • Implemented in Drupal in 16327
• Character Counters
  • Added to Figma designs for VBA in 16523
  • Documented current and ideal state in 16659
  • Updated instance in VBA Centralized Content that didn't match intended design in 16807
  • Updated styling in of all instances in CMS in 16732
  • Possible enhancement documented for CMS Platform to consider at future date 16800
  • Some additional VBA character counter issues were probably addressed as part of Service Location launch
  • Additional updates to VBA character counters will happen in Add Character counter on phone paragraph type field in Drupal #18281
  • Add character counter on Additional Hours field in Drupal #18714
  • Might need a final review to compare Figma to Drupal and confirm all outstanding issues were ticketed/resolved
• Error Messages
  • Added to Figma in #16068
  • Next step is feasibility review 16906
  • Add server-side validation on ext field in phone paragraph in Drupal #17863
  • Add client-side validation on phone paragraph type field in Drupal #18280

[davidmpickett]

I have done another review of Drupal and Figma and made note of any remaining instances of missing character counters throughout the VBA product to the body of the ticket.