Slider behavior different than Java

[kathy-phet]

In the Java version, the slider is smooth when user slides it, but then snaps to the nearest tick when let go. This seems nice because its easier to make sure you have them on exactly equivalent tick marks. I like that it is still smooth though when sliding so it doesn't appear jerky like it would if it just snapped during the slide.

Any reason not to match this behavior in HTML5 sliders?

[pixelzoom]

"Snap to tick" was originally implemented in the port, then disabled in a commit on 2/5/14. I don't recall why it was disabled. I've restored it in 1.0.0-dev.15.

Now I'm wondering if we should make the minor tick marks longer. When the snap happens, you can't see the alignment between the tick and the slider thumb, because the thumb covers the tick.

@kathy-phet @emily-phet your opinion?

[pixelzoom]

Here's a dev version where you can see the alignment between tick and thumb. I made all tick marks longer, major tick marks a bit heavier (lineWidth:2) and minor tick marks a bit lighter (lineWidth:0.5). Opinions?

http://www.colorado.edu/physics/phet/dev/html/molecule-polarity/1.0.0-dev.16/molecule-polarity_en.html

[kathy-phet]

The comment on the thumb slider and being able to see its position relative to the minor ticks is more of a limitation of the current thumb slider design. It's why we used the pointy design previously. I think we should bring this discussion to the broader design team and discuss if there is a slider thumb variant option we want to design as an alternate in common code for places we decide it matters to see the alignement.

(I looked at the longer ticks and don't really care for them (asthetically)).

[kathy-phet]

Let's hear from @emily-phet re the snap to and non snap to behavior as well.

[kathy-phet]

I'm a bit on the fence about the snap too behavior now. But, if we had a slider design where it was easier to see the tick marks (with the regular sized marks), the snap too behavior would be less important I think.

[pixelzoom]

Slider thumb is totally customizable. It can be made to look like "the pointy design" if you prefer. I recall that it was explicitly changed to look like it does now for uniformity across sims.

"Snap to tick" behavior is your call - I don't know whether it's important to the learning goals, or important to have sliders set to identical values.

Let me know how you'd like to proceed.

[kathy-phet]

I would like to do a mini-design meeting on Thursday. If @ariel-phet and @emily-phet agree.

If these two behaviors don't impact other QA testing in your opinion, then Steele could still hammer to find what he finds.

[pixelzoom]

For the benefit of @emily-phet and @ariel-phet, here's a summary of the slider "looks".

Sliders in the Java version:

Sliders in 1.0.0-dev.15 with default look:

Sliders in 1.0.0-dev.16 with longer ticks, so that they extend above thumb:

Sliders in all of the above have "snap to tick" enabled.

[pixelzoom]

Here's a dev version with a custom "pointy thumb" ala the Java version. All other aspects of the slider (thumb colors, tick lengths and thicknesses,...) are defaults and can be easily tweaked. Vertical offset of the thumb (relative to the slider track) is also easy to change.

http://www.colorado.edu/physics/phet/dev/html/molecule-polarity/1.0.0-dev.17/molecule-polarity_en.html

... and I think it would look better to shorten the major tick marks, if we go with this.

[emily-phet]

@kathy-phet We're also creating a11y guidelines (keyboard nav) for phet sliders, might be nice to make a Thursday design meeting slightly broader to include the look and feel of phet sliders.

[pixelzoom]

Getting Molecule Polarity out the door is supposed to be a "quick" side project, and I need to get back to the higher priority things on my plate. If @kathy-phet and @ariel-phet want to reprioritize what I'm working on, I'll be happy to participate in a broader a11y discussion. Otherwise I'd like to focus on decisions for this specific GitHub issue, i.e.: (1) should "snap to tick" be enabled, (2) what should the thumb look like?

[emily-phet]

OK.

• Yes to "snap to tick"
• Could you (or someone else) create a mockup of the pointy slider thumb with slightly elongated thumb (maybe 15% more, upwards), increased tick marks (wit minor tick marks maybe 50% the length of your example with the really long minor tick marks).With this mockup suggestion, I'm trying to address a potential issue with the pointy thumb still "feeling" small for touch interfaces.

Then we can discuss briefly on Thursday and see if any of these options will work.

[pixelzoom]

increased tick marks (wit minor tick marks maybe 50% the length of your example with the really long minor tick marks)

@emily-phet I don't understand this, please clarify.

[pixelzoom]

This is all really easy/quick to tweak on the fly, so perhaps I should just change it while projecting on Thursday, until we get what makes everyone happy.

[pixelzoom]

7/13/17 design meeting:

• pointy slider
• shorter (20 length) ticks

[pixelzoom]

Changes have been completed, and internal documentation has been changed.

@kathy-phet or @emily-phet please verify in this dev version:
http://www.colorado.edu/physics/phet/dev/html/molecule-polarity/1.0.0-dev.19/molecule-polarity_en.html

Feel free to close if it looks OK.

[emily-phet]

Looks great!