Design Glossary / Tool Tips

[sydneywalcoff]

Dependency

• [ ] #1088

Overview

There was a glossary issue (https://github.com/hackforla/expunge-assist/issues/409) a year or so ago to create a glossary of terms and definitions for the website to make it easier for users to understand difficult legal language.

We will need the design to:

• be responsive
• be flexible enough to have handle definitions of different lengths (feel free to work with content if a definition is too long)
• consider usage/opening and closing. Is it a hover effect? Do you click to open the tip? and does it therefore have an exit button?
• show how the term (in the content) will show there's a tooltip to trigger. is the term a different color than the rest of the page text?

Action Items

• [ ] ...
• [ ] on #1090: remove dependency label, add design to Resources/Instructions, and move to New Issues waiting for approval

Resources/Instructions

[sydneywalcoff]

@jyehllow @anitadesigns also what are your thoughts about creating a glossary page after we finish this?

[jyehllow]

@jyehllow @anitadesigns also what are your thoughts about creating a glossary page after we finish this?

@sydneywalcoff Do you have any opinions on tooltips vs. glossary pages vs. footers or something? I'm not sure what other options exist actually.

[sydneywalcoff]

@jyehllow I'm thinking a glossary page would be similar to the FAQ page, kind of an info dump, but with all the terms and their definitions. I'm suggesting the glossary page as an additional task after we implement the tool tips.

The tooltips are going to be small, in-line little popups that define the terms. I'm attaching some examples below. I'm not sure what you mean in this context by footers, however.

[jyehllow]

Yeah I think in terms of tooltips the first image is closest to what I was thinking. The others that darken/lighten the background and create focus on the tooltip I'm not as a big fan of, it feels super interrupting.

For footers, I actually meant footnote LOL, I know textbooks and articles usually have a thing where if there's a word that needs to be defined, they put a tag next to the word (like a number) and then define it at the bottom of the page.

Might be outdated at this point though, maybe tooltips are better.

[anitadesigns]

This is great to have on our radar and something for the design team to discuss further! I know Content and Research are wrapping up terminology testing they were working on last year which will help us plan next steps. Will have to ask Content as well if they would like the glossary and tool tip ready for launch so that the design team can prioritize this issue once testing is complete and Content works on #1087

[sydneywalcoff]

@anitadesigns the glossary is just an idea that I had, and would def be low priority/something to think about after this, or even after launch depending on how things shake out.

@jyehllow sorry I thought I responded 😅 ah, footnotes, ok! I feel like footnotes might be a little academic for the ~vibe~ we're going for? But idk, maybe thats a discussion for the branding person? Plus we can make it pretty, so why not lol.

[github-actions[bot]]

Hey @jyehllow, @anitadesigns! Thanks again for taking this issue.

Time for an update! Please comment the following update:
**Progress:** What's the status of the project? What have you done and what still needs to be done?
**Estimated Time to Completion (ETC):** When do you estimate to be finished?
**Blockers:** Anything preventing you from finishing?

Thanks again!

[github-actions[bot]]

Hey @jyehllow, @anitadesigns! Thanks again for taking this issue.

Time for an update! Please comment the following update:
**Progress:** What's the status of the project? What have you done and what still needs to be done?
**Estimated Time to Completion (ETC):** When do you estimate to be finished?
**Blockers:** Anything preventing you from finishing?

Thanks again!

[github-actions[bot]]

Hey @jyehllow, @anitadesigns! Thanks again for taking this issue.

Time for an update! Please comment the following update:
**Progress:** What's the status of the project? What have you done and what still needs to be done?
**Estimated Time to Completion (ETC):** When do you estimate to be finished?
**Blockers:** Anything preventing you from finishing?

Thanks again!