search

phetsims / calculus-grapher

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

Polish width slider #257

Closed pixelzoom closed 1 year ago

pixelzoom commented 1 year ago

From 3/6/2023 design meeting to review interview results (@amanda-phet @catherinecarter @kathy-phet @veillette @pixelzoom)

For the width slider, make the minor tick marks a bit more subtle.

pixelzoom commented 1 year ago

Before and after shown in the screenshots below. Minor ticks are now lineWidth: 0.5 and stroke: 'rgb( 120, 120, 120 )'.

@amanda-phet please review, close if OK.

screenshot_2357 screenshot_2359
catherinecarter commented 1 year ago

Lighter minor tick marks looks good to me. Sort of draws my attention to the ends and the middle - not sure if this is a good, bad, or indifferent thing, but that's what it's doing for me.

amanda-phet commented 1 year ago

I agree @catherinecarter . Not sure this is doing much for me, and seems to accentuate the middle and ends. Should all of the tick marks get a thinner stroke? Or maybe the intermediate tick marks should just be shorter?

amanda-phet commented 1 year ago

Assigning back to @pixelzoom to comment and possibly try other tweaks. Maybe just keep them back and not change the stroke to gray?

pixelzoom commented 1 year ago

It's very typical to emphasize "major" marking and deemphasize "minor" markings. We're doing it with the graph grid lines. And I was hoping to tone down the "lots of vertical lines" look that this sim suffers from. But now I'm kind of sorry that I mentioned this, because the cost has now exceeded any imaginable benefit.

Or maybe the intermediate tick marks should just be shorter?

If by "intermediate" you mean the minor tick marks... All tick marks need to be long enough to stick out above/below the slider thumb. So making the minor ticks shorter is not an option.

Maybe just keep them back and not change the stroke to gray?

I'm assuming you mean "black". I'll do this.

pixelzoom commented 1 year ago

All tick marks are now black. Major are lineWidth: 1, minor are lineWidth: 0.5. Screenshot below.

screenshot_2370
catherinecarter commented 1 year ago

What if every other line were greyed out and middle tick mark is the same size as the others? Just a thought.

pixelzoom commented 1 year ago

Slider has no ability to do what you're suggesting. All major ticks have the same style, all minor ticks have the same style.

amanda-phet commented 1 year ago

I like them all black, but whichever you prefer @pixelzoom is fine with me. Please feel free to switch them to gray again, or leave as black and close this issue.

pixelzoom commented 1 year ago

I'm good with black. It's 1 less line of code :)

Closing.