search

phetsims / pendulum-lab

"Pendulum Lab" is an educational simulation in HTML5, by PhET Interactive Simulations.
GNU General Public License v3.0
4 stars 10 forks source link

UX/UI issues with Energy Graph #184

Closed ariel-phet closed 6 years ago

ariel-phet commented 6 years ago

@jonathanolson @kathy-phet @arouinfar before we proceed with an RC for pendulum lab (which overall is looking great), I have a few polishes/questions.

I see two issues with the energy graph:

  1. I think this is minor and easy to change, but the zoom in/out and info button being gray just looks odd to me. It seems these buttons should have SOME color different than the grey background. Perhaps something subtle (like a light blue or yellow or such). I understand we don't want to draw major attention to these buttons, but they just look funny to me matching the background color of the panel.

  2. This is likely a slightly larger change, but something I want to consider. I find the "grayed out/disabled" radio button for mass 2 to be not a good UX. It feels a bit broken and I am tempted to click it. Since the scene changes quite a bit when you go to 2 masses (new control panels appear), perhaps when there is only one mass there are no radio button options, and then when there are 2 masses the radio button options appear. It seems like it would be cleaner and more obvious to the user.

Thoughts?

For context here is the energy graph with no spacing changes, but the radio buttons invisible at first

energy graph

ariel-phet commented 6 years ago

https://github.com/phetsims/QA/issues/45

arouinfar commented 6 years ago

@ariel-phet you've raised some excellent points. After discussion with @kathy-phet we've decided:

  1. A pale color seems like an appropriate choice for zoom in/out button. Let's try the light blue used in the play/pause button.

  2. The mockup removing the 1/2 radio buttons when in 1-pendulum mode looks clean, and it is better UX. Let's go for it.

jonathanolson commented 6 years ago

Implemented, let me know how it looks.

arouinfar commented 6 years ago

Looks good @jonathanolson, but @ariel-phet should also review.

ariel-phet commented 6 years ago

I also asked @jonathanolson to tweak the "info" a bit, we added some color and tried the button as round. Looks good to me. Closing

arouinfar commented 6 years ago

Love the new info button!! Thanks @ariel-phet @jonathanolson.

BryceAG commented 6 years ago

Just a question: when working with just one mass do we want to remove the a-b switch on the period timer as well, or just leave it grayed out?

ariel-phet commented 6 years ago

Excellent point @BryceAG - what say you @arouinfar?

jonathanolson commented 6 years ago

Will re-center play/pause button on timer when toggled.

jonathanolson commented 6 years ago

Implemented, added to 1.0 branch for next RC (or whatever). Let me know how it looks.

arouinfar commented 6 years ago

Love it!

arouinfar commented 6 years ago

Guess we should leave this open until the "next RC (or whatever)" 😄

arouinfar commented 6 years ago

Looks like these changes were present in rc.2, and testing has concluded. @jonathanolson will this require further testing?

jonathanolson commented 6 years ago

If it was in rc.2, then it shouldn't need further testing.