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

pixel polishing for Questions #152

Closed pixelzoom closed 7 years ago

pixelzoom commented 7 years ago

A few members of the design team are not happy with the current layout of the Questions accordion box, so we'll do some pixel polishing. As of 1.0.0-dev.56, it looks like this:

screenshot_294

arouinfar commented 7 years ago

@pixelzoom I can mock up some alternatives later this afternoon.

arouinfar commented 7 years ago

Currently, I have a two main concerns with the current layout of the Questions panel.

I've mocked up a few alternatives for the Questions panel. In all options, I've moved the edit buttons and challenge refresh button to the right side of the panel. The green check mark will replace the edit button once a question is correctly answered. I've also reduced the spacing between the questions and answers by 2px. The relative vertical spacing between the text box, numbers, fraction bar, etc. has been unchanged.

Here are a few alternatives:

  1. Leave questions centered. There's still quite a bit of trapped space around the edit buttons, but the buttons come after the beginning of the sentence, so I find it less bothersome. image

  2. Left-align the questions with "Questions" title. This leaves quite a bit of white space beneath the left side of the questions. image

  3. Left-align the questions with "Questions" and move text box/correct answer 10 px to the left. image

I think option (3) is the most aesthetically pleasing, but I recognize it introduces more work, particularly when handling i18n. I think the simplest option would certainly be (1), which I think is still an improvement. I don't particularly like option (2), as it feels a bit unbalanced.

One way to handle i18n would be to allow the string to expand to the right until it hits the right-most boundary (1), and then expand left it hits the left-most boundary (2), and then scale down the font size (3). image

Any thoughts @ariel-phet @pixelzoom?

amanda-phet commented 7 years ago

I personally like option (1) quite a bit. It seems odd to me to mix left-aligned questions with centered answers. But I think the suggestion to move the edit button to the right and replace it with a check makes SO much sense!

arouinfar commented 7 years ago

Thanks @amanda-phet! I think the reason that I like (3) is that it looks less crowded, though it uses a somewhat wonky alignment. Realistically, I think (1) is the best option, and it's definitely an improvement.

pixelzoom commented 7 years ago

I like option (1).

For all 3 options, the location of the refresh button (lower-right) puts it dangerously close to the Reset All button -- see screenshot in https://github.com/phetsims/unit-rates/issues/152#issue-208539519. Highly recommended to move it to lower-left.

arouinfar commented 7 years ago

Good suggestion @pixelzoom. Here's what option (1) would look like with the refresh button on the left. image

Let's keep the button on the left side of the panel.

ariel-phet commented 7 years ago

@arouinfar @pixelzoom generally think this is an improvement

One thing I was thinking...not sure if there is any way to make it work, but is there some way the edit button could be in the readout box? The readout box is kind of just a place holder, and don't we have some functionality where tapping the readout box opens the entry keypad? Maybe that idea is crazy, but it seems like if it were able to be executed it could clean things up a little.

pixelzoom commented 7 years ago

@ariel-phet asked:

... but is there some way the edit button could be in the readout box? ...

Presumably you mean inside the box with the value, and not instead of the value.

This would be inconsistent with the marker editor (and other sims) where the edit button is placed outside the box.

This would also make it impossible to align edit buttons for multiple boxes. You'd be forced to make all boxes the same width.

pixelzoom commented 7 years ago

I'm going to proceed based on the updated version of option (1) shown in https://github.com/phetsims/unit-rates/issues/152#issuecomment-281527166.

pixelzoom commented 7 years ago

New layout implemented in: http://www.colorado.edu/physics/phet/dev/html/unit-rates/1.0.0-dev.58/unit-rates_en.html?showAnswers&randomEnabled=false

@arouinfar @ariel-phet please review.

arouinfar commented 7 years ago

Looks great! Thanks @pixelzoom.

@ariel-phet I'll leave the issue open so you also have the chance to review.

ariel-phet commented 7 years ago

Looks good, closing