phetsims/vector-addition

Tension between radio buttons and interactive equation on Equations screen

Closed this issue · 9 comments

ariel-phet commented

When playing with the sim, even though I know the intention of the UI, I felt a bit of tension between whether I should be paying attention to the highlighted radio button or the interactive equation as to which was actually representing what I was seeing. I feel like the interactive equation could be more emphasized on this screen with some minor UI tweaks. My suggestions are:

  1. Reduce the size of the radio button selections slightly (by about 10 percent) to create more contrast, and de-emphasize them a bit.

  2. Increase the size of the accordion box slightly (a few pixels vertically), and move it up a few pixels

  3. Do (2) to accommodate a white background on the interactive equation to make it "pop" more

Obviously open to other possibilities, but mainly I think we should aim to emphasize the interactive equation more. I have done a (rough) mockup below, first the original, and then the mockup

vacurrent

VA

ariel-phet commented

@pixelzoom @arouinfar assigning for your thoughts.

kathy-phet commented

Maybe that whole control panel would pop more if you gave the whole thing a white background. This would help it stand out as a "play with me" signal.

Amy - Can you shed some light on this from your interviews? My understanding of your interviews was that they played with this screen quite a bit? How long did it take to start interacting with the equation.

pixelzoom commented
  1. Reduce the size of the radio button selections slightly (by about 10 percent) to create more contrast, and de-emphasize them a bit.

This will affect all screens. Do we really want to do that at this late date?

  1. Increase the size of the accordion box slightly (a few pixels vertically), and move it up a few pixels

The sizes are computed. We'll either need to decrease y margin (top and bottom space) of the screen (which will affect all screens, and cause other layout issues), or decrease the space between the accordion boxes -- which is currently a uniform constant used for all spacing of panels, in all screens.

Do (2) to accommodate a white background on the interactive equation to make it "pop" more

Sorry, but I'm not a fan of adding more boxes inside of boxes.

Alternative proposal:

  • add color to the pickers, color coded to the scene
  • increase the font size for the interactive equation from 18 to 20

Here's what that would look like (not committed):

screenshot_1629

screenshot_1630

pixelzoom commented

And I would of course use the correct math font for the vector symbols in the above mockups.

arouinfar commented

Reduce the size of the radio button selections slightly (by about 10 percent) to create more contrast, and de-emphasize them a bit.
This will affect all screens. Do we really want to do that at this late date?

@pixelzoom not sure I understand this. The proposal is to reduce the size of the Equation radio buttons by 10%, and they only appear on one screen. All other radio buttons would remain unaffected (components, cartesian/polar).

Alternative proposal:
add color to the pickers, color coded to the scene
increase the font size for the interactive equation from 18 to 20

This looks good to me. @ariel-phet and @kathy-phet agree. Let's proceed with this change.

Here's a rough mockup showing 10% smaller equation radio buttons and color-coordinated pickers.
image

pixelzoom commented

Reduce the size of the radio button selections slightly (by about 10 percent) to create more contrast, and de-emphasize them a bit.

This will affect all screens. Do we really want to do that at this late date?

@pixelzoom not sure I understand this. The proposal is to reduce the size of the Equation radio buttons by 10%, and they only appear on one screen. All other radio buttons would remain unaffected (components, cartesian/polar).

Sorry, I misunderstood. I'll reduce the size of the radio buttons, but I'm not going to resort to some hack like setting scale: 0.9. It will be a bit more involved.

  • 👍1
pixelzoom commented

I said:

I'll reduce the size of the radio buttons, but I'm not going to resort to some hack like setting scale: 0.9. It will be a bit more involved.

I am indeed going to resort to scaling the entire radio button group. The alternative at this point is too involved.

pixelzoom commented

Done. @arouinfar please review in master. @ariel-phet @kathy-phet also feel free to have a look.

arouinfar commented

Reviewed master with @kathy-phet and @ariel-phet. The changes look good. Thanks @pixelzoom.