search

phetsims / unit-rates

"Unit Rates" is an educational simulation in HTML5, by PhET Interactive Simulations.
GNU General Public License v3.0
0 stars 2 forks source link

co-locate controls for selecting an item? #139

Closed pixelzoom closed 7 years ago

pixelzoom commented 7 years ago

This occurred to me while testing this sim, which involves lots of switching between items to compare things.

Selecting a Shopping item often requires using 2 controls - a radio button and the combo box. And it seems odd that those 2 controls are on opposite sides of the screen. The radio buttons are also a bit close to the Reset All button, which could be an issue on iPad. And the lower-right corner of the screen generally looks a little cramped to me. E.g.:

separate

I'm not sure if there are pedagogical reasons for the above separation of controls. But co-locating those controls would seem to provide a better user experience for navigating between items - select a radio button and you see the combo box change directly above it. It reduces the probability of accidentally brushing across the Reset All button on iPad. And it looks more balanced to my eye. E.g.:

screenshot_278

Compare in these dev version:

• Controls spread out: 1.0.0-dev.36 • Controls co-located: 1.0.0-dev.37

@arouinfar your thoughts? Something we should run past the design team?

pixelzoom commented 7 years ago

If we moved the radio buttons, we'd presumably want to do that for the "Shopping Lab" screen too.

Here's what it looks like now.

screenshot_281

Here's a rough mockup (Photoshop) with the radio buttons at lower left. Right side of the screen looks a little empty, but we could (and probably should!) make the double number line wider.

screenshot_280

amanda-phet commented 7 years ago

I really like those scene selection/ radio buttons over by the combo box!

arouinfar commented 7 years ago

Thanks for your input @amanda-phet! I also like the new location of the scene selection buttons. Thanks for the suggestion @pixelzoom. :)

pixelzoom commented 7 years ago

Great. The change was made to the new Shopping screen in https://github.com/phetsims/unit-rates/commit/8cf7826071023f78e45f7d7840abd9617a8e8c67. And I will use the same location in the new Shopping Lab screen.

Closing.