Is your feature request related to a problem? Please describe.
During top tasks usability testing 🔒, participants often didn’t know the names for components, but they did know what they should look like visually. The components participants had the most difficulty with in this test due to not knowing the correct names were step indicator and in-page navigation.
“I know what I'm looking for visually more than I know what it's called Often. So I think like, I don't know that another word comes to mind, but I think being able to see a preview in like how I'm searching for it would be helpful to me.”
Describe the solution you'd like
Users mentioned that having some kind of visual preview on the components page would help them select the component they needed, since they wouldn't have to rely on knowing or finding the proper name. I agree and suggest we add visual previews to our main component page.
I have also suggested better synonym searching functionality in our component search (#2724 ), but I think also offering visual previews would further enhance component browsing and 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
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
Is your feature request related to a problem? Please describe.
During top tasks usability testing 🔒, participants often didn’t know the names for components, but they did know what they should look like visually. The components participants had the most difficulty with in this test due to not knowing the correct names were step indicator and in-page navigation.
Describe the solution you'd like
Users mentioned that having some kind of visual preview on the components page would help them select the component they needed, since they wouldn't have to rely on knowing or finding the proper name. I agree and suggest we add visual previews to our main component page.
Here is an example of how the State of California Design System is using component previews, for inspiration.
Describe alternatives you've considered
I have also suggested better synonym searching functionality in our component search (#2724 ), but I think also offering visual previews would further enhance component browsing and 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:
Medium lift recommendations:
High lift recommendations:
Code of Conduct