search

phetsims / reactants-products-and-leftovers

"Reactants, Products and Leftovers" is an educational simulation in HTML5, by PhET Interactive Simulations.
GNU General Public License v3.0
1 stars 4 forks source link

location of 'Reset All' button #9

Closed pixelzoom closed 9 years ago

pixelzoom commented 9 years ago

As of 1.0.0-dev.10 ... The 'Reset All' button in the 'Sandwiches' and 'Molecules' screens is currently in the lower-left corner. In most sims (and the 'Game' screen), it's in the lower-right, but we don't have space there. Need to decide whether this is an acceptable location, or whether we need to move it. Moving it just about anywhere else will have major layout implications.

ariel-phet commented 9 years ago

I just took a look at this on iPad today...it seems we should discuss, on the iPad it looks like plenty of room exists in the lower right hand corner (although this is outside the dev bounds). The dev bounds on this sim do not seem to be matching the iPad bounds. Let's take a look together in person.

Screenshot for reference in a use case with large equations:

rpal

pixelzoom commented 9 years ago

How's this look? Feels a little crowded in the lower-right to me. We could move everything else slightly left, if you don't mind that the boxes/arrow are not perfectly centered.

http://www.colorado.edu/physics/phet/dev/html/reactants-products-and-leftovers/1.0.0-dev.22/reactants-products-and-leftovers_en.html?dev

img_0071

ariel-phet commented 9 years ago

@pixelzoom I think that is definitely an improvement. Especially since this sim has such a strong left to right flow, I think the reset all button definitely needs to be in that general area of lower-right. Not going to argue that it feels a bit crowded. Let's get @ycarpenterphet to give her opinion if the sim should shift a bit left.

pixelzoom commented 9 years ago

If we going to put the "Reset All" button in the lower-right, the first thing I would try is to horizontally center everything else in the space between left edge of the dev bounds and the left edge of the "Reset All" button. That would look like this:

screenshot_177

pixelzoom commented 9 years ago

I would also move the 'Reset All' button up a smidge, like this:

screenshot_178

ycarpenterphet commented 9 years ago

Although I haven't seen any issues with student usage of the reset-all button (they still find and use it just fine on the left in the sandwiches/molecules screens -- though they look to the left for it on the game screen too), I don't mind the first layout @pixelzoom suggested on the right-side, and agree it would be more consistent with our sims as a suite.

To be clearer, let's go with the relatively symmetric layout shown here (dev 22, I think?): https://cloud.githubusercontent.com/assets/3046552/5625046/d73c578a-952f-11e4-9522-6286138bc6ea.PNG

I'm not a fan of offsetting the content to the left to give the reset-all button more space, especially as I don't find it overly cramped visually, and there are no other conflicting controls in that corner (which makes it advantageous, since there would never be any accidental touching of the reset-all button).

pixelzoom commented 9 years ago

Yes, the screenshot you've indicated is from 1.0.0-dev.22. The screen's content will remain horizontally centered. Closing.