USWDS-Site - Link form-related components to form component page

[jaclinec]

During top tasks usability testing 🔒, users expected to be able to find form-related components (such as the step indicator) by going to the form component itself.

It may be beneficial to link form-related components to the form component page, much like we link them to the form patterns pages. Better cross-linking would help with discovery.

Additional context

To give more context on how to prioritize the new issues and feature requests that came out of top task testing, here's the full list of issues divided into 3 buckets and in order of priority (though it is somewhat flexible):

Low lift recommendations:

• Implement better synonym searching in the component search function. #2724
• Make design kits stand out more on the page and consider offering access to the kits in more visible places on the site (such as the homepage). #2723
• Provide a “Show all” link near the showcase list on the homepage that takes users to the entire list of sites that use USWDS. #2725
• Change the names of the step indicator and in-page navigation components to better match user expectations. #2728
• Link to form-related components (like step indicator) from the form component page (better cross-linking in general) #2729
• Indent subgroups in the left navigation. #2730
• Consider putting “References” at the very bottom of the component page (see data visualizations page). #2732
• Make the language selector preview have dark text with white background. (need to discuss before creating issue)
• Make the icons above the components, patterns, templates, etc. on the homepage clickable. #2734

Medium lift recommendations:

• Offer component previews on the components page. #2736
• Provide a glossary of definitions of heading labels (patterns, components etc.). (First we need to create a glossary component (see proposal discussion). Then we can address adding it to USWDS site.)
• Provide more context around showcase sites that use USWDS. #2737

High lift recommendations:

• Consider how we might reorganize the information architecture to better match users’ mental models of how information should be grouped and found. #2738

[jaclinec]

We received more feedback from a community member recently that reinforces findings from the top tasks study, particularly the findings that it can be difficult to find needed form-related components and guidance on our site.

A couple of weeks ago, I met with a researcher and designer in COE (Centers of Excellence) who was working on a forms project with 10x. She wanted to find code specifically for hint text on simple form inputs. She had difficulty locating what she needed b/c she was looking for guidance under "input" - she looked in input mask, input prefix and suffix components, form component, and also looked through patterns and templates. She never noticed text input (didn't scroll that far). Finally, she went to input mask and inspected the page (she didn't notice the "component code" accordion) and grabbed the code for the hint text there.

A few takeaways from my conversation with her:

• Unfamiliar terminology - She wasn’t sure what the thing she needed was called, or it didn’t match what we call it. She was looking for “input” and “hint text”
  - Expected form components to be on the form components page. Would love to have all form components in one place.
• Suggested text input be more comprehensive and things like hint text, prefix and suffix, and input mask, could be variants.
• It was hard to find the component code - she just inspected the page instead. She just didn’t notice the “component code” collapsed accordion.

Here's the notes doc 🔒 with more details from my meeting with her.

All this to say, it reinforces the idea that we should link to form-related components (like text input, button, date picker, etc.) from the form component page, because that is where many users expect to find them.