Component Proposal: Glossary

[debjudy]

Examples
https://design.va.gov/content-style-guide/word-list
https://www.fec.gov/help-candidates-and-committees/registering-political-party/

https://github.com/18F/glossary

https://www.usaspending.gov/

DESIGN ASSETS

• 10% - Collect and analyze examples; draft research insights and list of features for team/client feedback
• 20% - Draft user story & clarify the problem(s) / user needs
• 30% - Low-fi design review
• 40% - Get community feedback on initial, Hi-fi designs
• 50% - Hi-fi Sketch assets review
• 60% - Hi-fi Adobe XD assets review
• 80% - Sketch and XD assets review w/ Dan + merged into master working files
• 100% - PR approved by Dan

GUIDANCE

• 10% - Summarize insights from research (desk + interviews)
• 20% - Draft guidance review no. 1 (minimum 2 bullets each section)
• 40% - Get community feedback on draft guidance
• 50% - Draft guidance review no. 2 (accessibility focus)
• 60% - Draft guidance review no. 3 (w/ Dan)
• 80% - Add component to research report and slide deck
• 100% - PR approved by Dan

CODE

• 10% - Code review no. 1 (Federalist preview) - interaction design focus
• 20% - Code review no. 2 (Federalist preview) - visual design focus
• 40% - Get community feedback or conduct tests with users, round 1
• 60% - Code review no. 3 (Federalist preview) - accessibility focus
• 80% - Get community feedback or conduct tests with users, round 2
• 100% - PR approved by Dan

[smcharg-ohss]

Here's another example: https://revenuedata.doi.gov/

When I was at Interior, we had the book icon like the FEC site linked above has and found during user interviews that people didn't always understand what the icon meant. Many didn't associate the book with getting more information or help and some thought it was a bible, so we switched to the question mark icon. Many more participants associated the question mark with getting more information about a term.

We would definitely use a glossary component at the Office of Homeland Security Statistics.

[mejiaj]

I see the tooltips explaining in the link you sent

And I also see the top nav link to a Glossary page.

---

I can see the usefulness of combining the approaches like:

• A Glossary Box at the top of the page with terms used specifically on that page.
• A link to view the full glossary terms via a drawer menu or something similar.

[smcharg-ohss]

That site used to have a drawer glossary, but it had accessibility issues with the entire drawer being read by screen readers before the contents on the page, so we moved the full glossary to a page.

[afeijoo]

Digital.gov has several glossaries, and we'd make heavy use of a glossary component. Examples:

• https://pra.digital.gov/
• https://digital.gov/guides/hcd/

[amycole501]

There are accessibility issues with some of these examples (especially ones with a hover-only option).

That said, there would be a huge benefit to having a component/method for explaining complex terms. We are researching this on a project where some American terms don't translate well in other languages.

A complicating factor is taking someone off a page to a glossary section or distracting them with a widget that opens on the side with additional terms. Testing with people with ADHD for example, indicates they want to stay as focused on a single task as possible.

I was considering a method of keeping a person on a page and allowing them to "learn more" or explore a topic more deeply without a hover or tooltip interaction. The USWDS accordion could be repurposed into a "details" component. See the UK design system example.