Add "call to action" as helpText for screen buttons.

[kathy-phet]

On the home screen, each screen button should have helptext that invites users to "explore ..." or something similar, mentioning briefly what that screen is about. Like this for GHE:

[kathy-phet]

Assigned Diana, Nancy, Amy - to design these helptext phrases for each screen.

[pixelzoom]

This is a change request related to https://github.com/phetsims/models-of-the-hydrogen-atom/issues/67.

Also, this help text applies to home screen buttons and navigation bar buttons, so changing the title of this issue to reflect that.

[DianaTavares]

I added a space in the design doc not to forget this help text, now each screen in the document has the next titles:

Well, that is to continue building a template for a design doc that considers all the things designers need to get ready for, including a basic A11y view.

Talking about the helptext for Motha, I have this idea:

Screen 1 Explore what may be the model of the Hydrogen Atom that better adjusts to the data generated by the interaction of the atom and light.

or something smaller: Explore what Atom Models' data better adjusts to the Experiments' data.

Screen 2 Explore the changes in the electron’s state in the Electron Energy Level diagram.

[pixelzoom]

Looking at greenhouse-effect WavesScreen, here's the current API for specifying the helpText for the screen's associated buttons (on the home screen, and in the navigation bar):

      descriptionContent: GreenhouseEffectStrings.a11y.waves.homeScreenDescriptionStringProperty,

@arouinfar and I found homeScreenDescriptionStringProperty name to be very confusing, because it's not at all related to the Home screen/button. But this name was a sim-specific choice, not related to the programming API, and we will choose a better string key in MOTHA.

descriptionContent for Screen is also confusing here. Is this used only as the helpText for the buttons (home screen and navigation bar) associated with the screen, or is it used elsewhere. @jessegreenberg If it's used only for the buttons, can we rename this option from descriptionContent to screenButtonsHelpText?

So in ScreenView SelfOptions, the change would be:

- descriptionContent?: PDOMValueType | null;
+ // Help text that will be added to the Home screen button and navigation bar button for this screen.
+ screenButtonsHelpText?: PDOMValueType | null;

[pixelzoom]

@DianaTavares Thanks for adding to the design doc template. But for this:

Helptext in home screen

It's actually "Helptext for screen buttons". And those buttons appear on the Home screen, and in the navigation bar.

[jessegreenberg]

f it's used only for the buttons, can we rename this option from descriptionContent to screenButtonsHelpText?

Yes! Was thinking the same thing, Ill note in https://github.com/phetsims/joist/issues/989

[arouinfar]

@DianaTavares @Nancy-Salpepi how about:

Spectra Screen: Compare experimental spectroscopy data to historical models of the hydrogen atom.

Energy Levels Screen: Observe changes in the electron’s state and compare to quantum models of the hydrogen atom.

[pixelzoom]

I've implemented helpText for the screen buttons using the API currently provided by Screen.

@jessegreenberg As you address https://github.com/phetsims/joist/issues/989, feel free to change descriptionContent to screenButtonsHelpText in SpectraScreen.ts and EnergyLevelsScreen.ts.

I started with the helpText that @arouinfar proposed in https://github.com/phetsims/models-of-the-hydrogen-atom/issues/73#issuecomment-2457790013, easy to change. Here's how it looks in A11y View:

[Nancy-Salpepi]

@arouinfar I like them both! The only thing I don't love is the word "compare" for the Energy Levels screen. One alternative: Explore electron transitions and relate observations to quantum models of the hydrogen atom.

[arouinfar]

Explore electron transitions and relate observations to quantum models of the hydrogen atom.

Love it! Let's go with @Nancy-Salpepi's option if there are no objections.

[pixelzoom]

Updated as suggested by @Nancy-Salpepi. In A11y View:

[DianaTavares]

Love the text implemented!

[pixelzoom]

@DianaTavares @arouinfar and @Nancy-Salpepi have all reviewed and refined.

I identified API improvements, and @jessegreenberg is working on that in https://github.com/phetsims/joist/issues/989. I've added TODOs in the MOTHA code, and @jessegreenberg should feel free to update MOTHA when he updates the API.

@kathy-phet @terracoda Would you like to take a look before we close this issue? You can test drive in A11y View, or see the screenshot in https://github.com/phetsims/models-of-the-hydrogen-atom/issues/73#issuecomment-2457865689.

[terracoda]

Just adding the Home Screen for completeness. The helptext/calls-to-action look really great to me.

[kathy-phet]

Looks good to me. Thanks!

[pixelzoom]

Awesome, thanks everyone. Closing.