Design keyboard help dialog

KatieWoe commented 3 months ago

The control instructions for sliders is not on the last screen, but those commands still work when moving the soccer balls or the fulcrum. Should the instructions be included?

amanda-phet commented 3 months ago

I'll probably reuse things from Center and Variability for the last screen, so if it's in that sim then it would be here too! This issue is here because I haven't done anything for the dialog yet for this sim.

amanda-phet commented 3 months ago

This is ready! Reviewed with @terracoda to come up with some ways to consolidate similar controls and make it sim-specific.

Level Out:

Distribute:

Fair Share:

Balance Point:

marlitas commented 3 months ago

I added the grab release keyboard help section to the scenery-phet demos. @jessegreenberg can you review that? https://github.com/phetsims/scenery-phet/commit/e7c83d599b6d5447cc4b8781ba06bd6f9d28136c

jessegreenberg commented 3 months ago

Great, thanks for adding that! Just minor formatting/copyright edits in the above commit.

marlitas commented 3 months ago

Thank you! Reminds me to update my template :-)

marlitas commented 3 months ago

This has been committed above. There are some small differences between the mockup and what you will see in the sim: Mostly there are some small language shifts such as "Adjust level or move pencil" is now "Adjust level or pencil" so that we can properly use the common code infrastructure we already have. If these seem especially disconcerting we can create our own custom usage, but this allows us to not re-invent the wheel with the implementation.

Any big differences are likely a mistake, but I looked through and didn't see anything that jumped out. @amanda-phet can you review and close if all looks well?

amanda-phet commented 3 months ago

"Adjust level or move pencil" is now "Adjust level or pencil"

I remember now that we aren't allowed to do this. Let me review with Taliesin and confirm how we want that to look.

terracoda commented 3 months ago

I would like to know more about why the verb restriction exists. Perhaps it is related to translation? Maybe for future work we can find a solution that is more flexible and allows us to combine content in the dialogs.

In the meantime, based on what @Amanda shared on Slack...

Screen 1 Corrections:

I suggest removing verb from heading and adding "position" to pencil:

Heading: “Water Level or Mean Prediction”
List item: “Adjust level or pencil position”

Screen 2 Corrections:

I suggest leaving the repetition (at least some of it) as that is how we have done it for all other Grab and drag interactions (to my knowledge). If we want to change this pattern, we should find a way to do it consistently for all Grab and Drag interactions. I am open to changing this pattern everywhere, and documenting the change in the pattern for designers and developers.

To create the best instructions on what object is being grabbed, it is best to use the "accessible name" of the actual visual candy bars. Do we have an idea of what that is? "Candy Bar", "Notepad Bar", or just "Bar". The reason I ask is that, I think "Notepad Bar" may not be the most engaging accessible name, so I would suggest not using it and "Bar" on its own is quite vague. If "Notepad" is important, it is good to have that word in at least one heading. If you really want to reduce further, it might work fine to leave "Candy" and "Soccer" after the first mention of them in the first heading. BUT let's check in on the accessible names for these interactions as well.

Heading: “Grab or Release Notepad Candy Bars” or "Grab or Release Candy Bars in Notepad"
List item: “Grab or Release Bar” + the keyboard combinations
Heading: “Move Grabbed Bar”
List item: “Move grabbed Bar” + the keyboard combinations

Screen 3 Corrections:

Heading: “Grab or Release Soccer Balls”
List item: “Grab or Release Ball” + the keyboard combinations
Heading: “Move Grabbed Ball”
List item: “Move grabbed Ball” + the keyboard combinations

amanda-phet commented 3 months ago

Thanks for adding more questions and ideas to this issue, @terracoda .

Some of my suggestions were based on the patterns used in Center and Variability, which is the other sim with group sort interaction. Before we do something different for this sim, we should decide on a general dialog design for group sort interaction and apply the changes to CaV as well.

Let's plan to discuss this synchronously.

amanda-phet commented 3 months ago

@marlitas updates are in pink:

amanda-phet commented 3 months ago

@marlitas never mind.. potentially changing this again

amanda-phet commented 3 months ago

OK the above is good to go now :)

marlitas commented 3 months ago

I implemented the above design requests except for removing "candy bar' and "soccer ball" from "Grab or release candy bar"/ "Grab or release soccer ball". There is not an easy way to do this with the way the common code is currently set up. I can create a custom help section that mimics everything else about the Grab Release section, but as we've talked through before that isn't necessarily ideal.

@amanda-phet let me know what you think.

amanda-phet commented 3 months ago

That's fine, I was just trying to be consistent with CaV.

I forgot to update the Distribute screen section about the prediction line. @terracoda does this look good to you?

marlitas commented 3 months ago

That's fine, I was just trying to be consistent with CaV.

Mmm. It's very possible a custom implementation was used there, but I think it's stronger overall to use the common code structure. 😃

Awesome! I'll get to it.

marlitas commented 3 months ago

Done above! @amanda-phet feel free to close if all looks well.

amanda-phet commented 3 months ago

Looks good! Thanks!

phetsims / mean-share-and-balance