1.0.0-dev.19 proposed layout changes

[phet-steele]

@amanda-phet @dubson @ariel-phet @jessegreenberg I have a few layout questions with this sim. It's obvious to me that some panels are not aligned well (in my opinion) and some things look out of place. Look below, and if there was ever a reason that changes 1,2, and 3 shouldn't happen and they are the way they are for a reason, don't worry about it. I do think change 4 needs to happen regardless.

I made a mock up, it's not perfect (Microsoft Paint has its limitations). Original sim pictured second.

1. Moved the Values panel up and to the left to be horizontally aligned with the unit circle box and vertically aligned with the graph display.
2. Moved the radio/check-box panel up and to the right to be horizontally aligned with the unit circle box and vertically aligned with the graph display. (I might have moved it too high)
3. Moved the "X" variable inside the white rectangle and above the arrowhead.
4. Not pictured below, but the reset all button needs to be increased in size, it's much smaller than other sims (re-sizing it in Paint looked ugly so use your imagination!).

For phetsims/tasks/issues/486

[amanda-phet]

Thanks @phet-steele .

1-2. I'm fine with that change. The background and stroke around the circle came later in the design and we just never adjusted things.

3. I see where you're coming from but convention is to label to the right of the arrow. Instead I would vote for making that panel wider to fit the x (similar to the graph below).
4. How strange! Let's definitely fix that!

[phet-steele]

@amanda-phet making the panel wider to fix the x is probably a better idea. I just realized my way would have ran into problems with the y when labels were turned on:

[jessegreenberg]

Here is the proposed change list after comments from @phet-steele and @amanda-phet.

• [x] Move the Values panel up and to the left to be horizontally aligned with the unit circle box and vertically aligned with the graph display.
• [x] Move the radio/check-box panel up and to the right to be horizontally aligned with the unit circle box and vertically aligned with the graph display.
• [x] Make the unit circle panel wider to fit the x (similar to the graph below).
• [x] ReseAllButton should be default size.

@ariel-phet @dubson any other comments before I start this?

[dubson]

I don't think I have any objection with re-alignment, definitely worth trying to see what it looks like. As for ResetAllButton, I prefer a lighter, smaller button than the norm (but with the same size hit area).

[ariel-phet]

Those changes look fine to me.

[phet-steele]

@dubson wants to revise what he said above, I just spoke with him. He would prefer us to keep the button small but make the hit area larger (as large as the normal one I presume) because he realizes there is trouble hitting this button on a touch screen.

[jessegreenberg]

I made the above changes, keeping the size of the ResetAllButton and increasing the radius of the touch area. Here is the new layout.

Reassigning to @amanda-phet for review, but tagging @dubson @phet-steele @ariel-phet for any additional review comments.

[amanda-phet]

I appreciate the screenshot so I don't have to hunt down the dev version.

Looks good to me! However I see one minor tweak that would be nice but is not essential:

The y-axis for the unit circle goes edge-to-edge within the containing panel. Can we do the same with the y-axis for the graph of the function?

[jessegreenberg]

Sure @amanda-phet! Would you like to increase the height of the y-axis or decrease the height of the panel?

[amanda-phet]

Probably increase the height of the y-axis since the panel is already small.

Thanks!

[jessegreenberg]

Sounds good! Here is what the change looks like:

What do you think @amanda-phet?

[ariel-phet]

@jessegreenberg please do increase the size of the reset all button. I understand @dubson does not want it the default size, but we do also want consistency, and it is oddly small currently. It does not need to be the full default size, but perhaps split the difference between the current size and the default size.

[jessegreenberg]

I increased the radius of the button a bit so that it is between the default and the previous size. Here is the what the layout looks like now:

Back to @amanda-phet.

[amanda-phet]

It all looks great to me.

[jessegreenberg]

Great, thanks! Closing.