Intermediate pixel polishes

[Denz1994]

This BAM dev has come across far enough where some pixel polishing could be addressed.

I'll note some points that I think are worth review but will leave to the design team for further input:

• [x] NextCollectionButton color scheme.
• [x] The color scheme of atoms, considering their view in the 3d representation dialog box
• [x] The overall presentation of the AllFilled box (shows when a collection is completed)
• [x] The zoom scale of molecules, rotational speed, and drag sensitivity in the 3d molecule dialog.
• [x] Position of resetAllButton and refill button

Note: There is an ?easyMode query parameter to fill collections easily.

Assigning @ariel-phet for intial review.

[Denz1994]

Raising priority. Many bug related issues have been addressed. It was suggested that we should include pixel polishes in the next round of dev testing.

[arouinfar]

For the ResetAllButton, we could bottom-align it with the body of the carousel and right-align it with the collection panel.

[ariel-phet]

@Denz1994 here are some polishes I would like:

• [x] Home screen and Navbar icons should probably use the sim play area background color, this will give them good contrast on the the homescreen and navbar, and follows the general convention of other sims

• [x] For the "Single" screen, reduce the size of the water molecule slightly (it is just a bit big in the navbar now, perhaps about 15% reduction

• [x] Implement @arouinfar ResetAllButton positioning suggestion from above

• [x] For the "Your Molecules" Panel, and the AllFilled box, match the corner radius to the radius used on the Carousel

• [x] For the AllFilled box, center the next collection button in the negative space below the "You completed your collection" line (like shown below)

• [x] As long a the color scheme used for the atoms is the same as Java, no need to change (I believe those follow some sort of chemistry standard)

• [ ] For the 3d view, I don't think we want to put the play/pause button between the radio buttons (translation issues for one thing). Probably something more like I suggest below, but perhaps wait until @arouinfar weights in, I will have two questions for her in the following comment:

[ariel-phet]

@arouinfar two questions for you

• It might be better in the 3d window to just have icons for "Space Filling" and "Ball and Stick" view, that would reduce issues we could run into with layout and translation and such. Thoughts?

• I was thinking on the playground screen it might be nice if the bottom of the buckets stayed aligned as you flip the carousel back and forth, on some carousel pages that would leave a fair bit of white space at top. Does that bother you as is, thoughts on aligning the buckets across carousel pages?

[arouinfar]

It might be better in the 3d window to just have icons for "Space Filling" and "Ball and Stick" view, that would reduce issues we could run into with layout and translation and such. Thoughts?

I like this idea, though I wonder if it's important to include the actual names of the representations of molecular structure. I've pinged @emily-phet to ask her thoughts.

Here's a rough mockup of what the dialog could look like.

I was thinking on the playground screen it might be nice if the bottom of the buckets stayed aligned as you flip the carousel back and forth, on some carousel pages that would leave a fair bit of white space at top. Does that bother you as is, thoughts on aligning the buckets across carousel pages?

@ariel-phet I think the tallest bucket is vertically centered in the carousel, with the other buckets bottom-aligned. The most noticeable contrast is between the 3rd page (containing a tall stack of chlorine) and the 5th page (relatively short bucket contents).

I am fine with the current behavior, though I can see that the vertical jumping could look a bit odd. My guess is the current alignment approach is likely the easiest, but if you feel strongly about the alignment, then I would suggest using the bucket position on the 3rd page everywhere within the carousel.

[arouinfar]

As long a the color scheme used for the atoms is the same as Java, no need to change (I believe those follow some sort of chemistry standard)

@Denz1994 we've defined the various colors for atoms in Nitroglycerin/Element. I believe BAM is already using this. While similar to the Java colors, we did end up making some changes to improve colorblind contrast in https://github.com/phetsims/nitroglycerin/issues/12.

[ariel-phet]

@Denz1994 let's leave the bucket alignment as is for now on the third screen.

Let's also wait until we get some chemist input from @emily-phet if we should consider icons or not.

[Denz1994]

Most of the changes have been committed. Just awaiting input from @emily-phet on text vs. icon representation for the radio button.

@Denz1994 we've defined the various colors for atoms in Nitroglycerin/Element. I believe BAM is already using this.

This is true. There would be nothing to change here.

[emily-phet]

Weighing in on text vs icon:

• I think it's a good idea to consider.
• There are situations where a teacher would appreciate the use of the written out form, but it's pretty secondary to the goals of the sim overall, so not a deal-breaker in its own right (in my mind).
• I think the important thing is for the icons to convey "generic" representations. Keep in mind, any molecule representation is itself a complex representation embedded many chemistry ideas and not simple for chemistry students to interpret (particularly when they're in a mode where they feel like they should* know what it means!). In Molecule Shapes, we use purple and white (or is it silver...@arouinfar would know) to convey "generic" molecules. I suggest considering using that same convention in this case, and probably a diatomic, or simple linear triatomic to further simplify the example. -If/when the sim has description, the words would be provided that way, and in a self-voicing future of PhET sims, may be available that way without a screen reader as well...so may be even less of an issue to use icons over text.

Let me know if that helps!

[arouinfar]

@emily-phet thanks for reviewing! Let's move forward with the iconic radio buttons.

n Molecule Shapes, we use purple and white (or is it silver...@arouinfar would know) to convey "generic" molecules. I suggest considering using that same convention in this case, and probably a diatomic, or simple linear triatomic to further simplify the example.

This is great to keep in mind. I think a diatomic molecule with the generic coloring would work nicely.

@Denz1994 the generic molecules in Molecule Shapes are purple/white:

rgb( 159, 102, 218 ) rgb( 255, 255, 255)

I cobbled together a rough mockup using screenshots (ignore the atom colors). I chose a molecule with a double bond so there'd be a bit more contrast between the two options.

[Denz1994]

@arouinfar Can you check this dev version to make sure this behavior and appearance are in the correct direction?

Note: I still need to add the radio buttons. Will need @jonathanolson advice to get pass assertion check for the parent type when rendering icons.

[arouinfar]

@Denz1994 that's exactly what I was thinking!

For future reference, icons in the dev version look like this:

[Denz1994]

During status meeting on 02/06/20, @arouinfar asked to be reassigned to this issue for additional input on the design of the radio buttons. Is this correct @arouinfar?

[arouinfar]

@Denz1994 here's a mockup of the RadioButtonGroup.

[Denz1994]

Master now includes the RadioButtonGroup for the two models. Can you review @arouinfar?

[arouinfar]

Looks great @Denz1994!