Updates to R&S design (based on Midpoint feedback & prototype needs)

[davidmpickett]

Changes to make

• Mobile layout of Detail page
• Color contrast for the filter chips 98001
  • This is fixed in the component and in the R3 designs
  • This is not fixed in the mobile prototype
• Must: revisit order of "Show filters" button and "Showing 1 - X of Y results" 98001
  • Alternative explorations were added to R3 page
  • Additional changes will wait until after Research
• Must: update the "Showing 1 - X of Y results" message to "Showing 1 - X of Y results for 'term' with 3 filters applied" 98001
• Must: "Clear all" button must be styled to look like a button 98001
• Should: Reword intro paragraph on landing page: "Search or filter for information related to VA benefits and services, including step-by-step instructions for using VA.gov tools." 97939
• Adjust vertical alignment of "close" icon and text in filter chip
  • This is fixed in the component and in the R3 designs
  • This is not fixed in the mobile prototype

Before	After

Decision points

Detail Page

• For first round of research, what word do we want to use to describe the group of tags?
  • "Topics" was too broad via Midpoint feedback
  • "Tags" is in current design
  • "Filters" and "Categories" were also suggested
  • 

Not yet actionable

• Language toggle to match new experimental design component 3564

Acceptance criteria

• Review with Product, A11y, Engineering
• Review with UX team
• Design is updated for R&S, to reflect collab cycle feedback

[aklausmeier]

Show filter behavior is different on desktop vs mobile, important to include desktop in research

[aklausmeier]

cc @davidmpickett @thejordanwood @laflannery

Revisions made so far in Figma 🟡 WIP - R3 search filters (revisions):

• Intro copy revised to include "search or filter" in the first few words so AT users know both options are available. @laflannery to discuss with Bryan on governance to see if this passes. If not, @thejordanwood can explore a design iteration. I started in this Figma frame.
• Included search term in: Showing 1–4 of 4 results for “appeal”
• Included # of filters applied in: Showing 1–4 of 4 results for “appeal” with 4 filters applied
• Clear all button styling to match icon button with minor revisions that will need to be added to experimental design ticket if tests well in research. This button has a white background, lower case for better readability, shares red X icon. The current icon buttons are currently only allowed when paired with a primary link and we do not have that use case.
• On detail page, updated "Topics" in front of filter chips to "Tags" which is currently used today. We can stick with this OR choose another term that encompasses all.
• increased size of "X" on chips from experimental design feedback, chip size may have also grown a bit taller when this changed
• increased spacing between chips so tappable area has a minimum affordance of 40px

[aklausmeier]

Also left comment on accessibility ticket:

Must: When viewing a details page linked from the results, the filter chips are present again to show the taxonomical labels for the page. But the chips play a different role here when clicked (navigational rather than action), and those differences need to be reflected in both the semantics and the visual presentation. Is there a reason why they couldn't just be ordinary links here?

@briandeconinck This was discussed during the experimental design ticket notes to some extent. It's also how it behaves today. I would prefer these stay consistent in design as filter options. Would love for you and @laflannery to discuss this a bit more. It seems like a grey area to me. It does take them to a new page but clicking on the filter chip in this scenario creates a new search results list like a search button might.

[davidmpickett]

Updated the Filter Chip component to 1) fix alignment of label text and X icon 2) make the three version true variants of one base component. I also updated instances of the chip in R3 to use new sub variants where applicable

[davidmpickett]

@jilladams @FranECross - FYI that while this ticket isn't fully refined, it is technically in progress. In addition to @aklausmeier's work, I am starting to pick away at it. This is one I will be continuing in Sprint 19

[davidmpickett]

End of sprint update

• Moving this back to "To Refine" as we still haven't fully parsed all the midpoint feedback and ensured all necessary changes are accounted for in the ACs of this ticket

[jilladams]

@davidmpickett @FranECross is the remainder of that refinement work blocked on having Amanda present to discuss? This'll be a topic in UX sync next time? Wondering if we can get it into sprint 19, or if it'll sit til after the convo guide / research plan advance.

[davidmpickett]

I don't think we need Amanda to refine it, we have a lot of notes that @FranECross took about Amanda's opinions on various aspects and what we should or shouldn't implement. Mostly this ticket just needs someone who to spend the time parsing what feedback has already been implemented, what feedback we won't be implementing and what's left to implement.

[davidmpickett]

Added border color exploration to address color contrast feedback. Tagged @thejordanwood and @Shamiaalam on slack for review

https://www.figma.com/design/cg8VNnxFOxw7lb10FVHpi5/Resources-support?node-id=67-6621

[davidmpickett]

End of sprint update:

• This will roll into next sprint, hope to have full draft by EOD
• Mitigating factors: sickness, short sprint, split priorities