Design of comparison toggle

phetsims / number-line-integers

"Number Line: Integers" is an educational simulation in HTML5, by PhET Interactive Simulations.

GNU General Public License v3.0

0 stars 4 forks source link

Design of comparison toggle #76

Closed ariel-phet closed 1 year ago

ariel-phet commented 4 years ago

Overall, this sim is looking quite polished, but I think the comparison toggle could use some refinement. The "chosen" comparison looks disabled to me, and I think it is a bit of a confusing UI from that perspective. Since this component is likely to be used in future sims I feel like it is deserving of some improvement to make it clearer. I don't have a great idea off the top of my head, but perhaps we could brainstorm a bit?

numberline

jbphet commented 4 years ago

I agree that this could be improved. How about a highlight-ish sort of color indicator, like a light yellow or yellow-green?

Thinking a little more outside the box, we could have a different style of selector, such as a small vertically aligned pair of radio buttons.

amanda-phet commented 4 years ago

I think there are some easy ways to improve this element.

(1) To make the button look less disabled, we shouldn't be reducing the opacity. I understand why @jbphet did that, to make it look depressed, but a simple fix would be to keep the symbol at 100% opacity.

(2) I looked for examples of buttons that inspired this design, and a common one uses a color and inverts the active button. I find this to be too bright and would possibly be distracting for an element that isn't very important. a) I suppose we could use gray though, instead of blue.

(3) Lastly, we could make the button that is not selected look slightly more disabled, so the selected button looks active.

My preference is for option (3), but I also like (2b).

ariel-phet commented 4 years ago

@amanda-phet thanks for putting some options together...I agree, I think (3) would be my preference. I think the mapping is cleanest there since the selected comparison symbol is "full black" and matches the comparison statement. I might even lighten the unselected symbol a bit more, but I think that is a nice improvement.

amanda-phet commented 4 years ago

Let's go with (3) then. I think the lightest we can go for that gray text is #949494 if we want enough contrast on the white background.

@jbphet can you please make this change to the button? The only thing that should change between the two states are the background color and the symbol color. Nothing should reduce in opacity (including the outer stroke).

jbphet commented 4 years ago

I made this change. It seems like an improvement, but I still don't love it. We're using gray as the fill color to indicate selection, and while it is not eye catching (which is the intent), it does seem a bit non-standard. @amanda-phet and @ariel-phet - please try it out on master and let me know if you'd like to just go with this or try some other variations. It is now set up so that color changes are easy, so we could meet and tweak if you like.

ariel-phet commented 4 years ago

@jbphet @amanda-phet I definitely feel like this modification is an improvement. I could live without it being colored, but if we want it to be colored I feel like we would need something fairly neutral so as not to be eye catching ( a pale-ish blue would probably be my first guess). I will leave that to @amanda-phet discretion. I think we could publish as-is.

amanda-phet commented 4 years ago

I looked up this style of button and found that gray and blue were the two common colors being used for the active button, and I think it's working well here. So I'm happy to close this issue.

If we end up wanting to use this kind of toggle button in the future in another sim (since we often find UI elements that work in one sim can work in others) I think it would be worth spending additional time on the design, but I think this is working well for now in this sim.

amanda-phet commented 4 years ago

Oops, I should leave this open for QA to verify in the next RC.

KatieWoe commented 4 years ago

I agree this looks better.

amanda-phet commented 4 years ago

Another example of this button that could help clean up our design:

Here is how it would look in this sim:

I'm still unsure about the gray, but if we re-release this sim at any time in the future, the design of this component should be reconsidered.

marlitas commented 1 year ago

@amanda-phet do we want to include the polish for this toggle as part of the character set publication? Adjusting colors is a quick and easy dev fix.

amanda-phet commented 1 year ago

I'm not sure why I reopened this in Feb 2020... let's keep this as-is since we liked the outcome back in Jan 2020 and haven't had further discussions or complaints about it.