search

phetsims / curve-fitting

"Curve Fitting" is an educational simulation in HTML5, by PhET Interactive Simulations.
GNU General Public License v3.0
6 stars 3 forks source link

Difficult pointer areas around error bars #135

Closed KatieWoe closed 5 years ago

KatieWoe commented 5 years ago

Test device Dell Operating System Win 10 Browser Firefox Problem description For https://github.com/phetsims/QA/issues/394 I noticed that the pointer areas for the error bars can, by default overlap a bit with their point. The visible part of the bars can even overlap with the point's pointer area entirely. The first aspect can make grabbing the bars with a touchscreen difficult, and the later aspect can make it difficult in either case. Even though the bar's pointer areas extend to the side, there isn't a clear visual clue for this unless you use the query parameter. My two possible suggestions:

  1. Layer the bar's pointer areas over the point's. That way they can be moved out of the way to access the point if a full overlap happens.
  2. Extend the visual part of the bar to match the pointer areas, to give cue that they can be grabbed.

Visuals extendup pointareas

Troubleshooting information:

!!!!! DO NOT EDIT !!!!! Name: ‪Curve Fitting‬ URL: https://phet-dev.colorado.edu/html/curve-fitting/1.0.0-dev.15/phet/curve-fitting_all_phet.html?showPointerAreas Version: 1.0.0-dev.15 2019-08-06 21:04:15 UTC Flags: pixelRatioScaling User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:68.0) Gecko/20100101 Firefox/68.0 Language: en-US Window: 1536x750 Pixel Ratio: 2.5/1 WebGL: WebGL 1.0 GLSL: WebGL GLSL ES 1.0 Vendor: Mozilla (Mozilla) Vertex: attribs: 16 varying: 30 uniform: 4096 Texture: size: 16384 imageUnits: 16 (vertex: 16, combined: 32) Max viewport: 32767x32767 OES_texture_float: true Dependencies JSON: {}
SaurabhTotey commented 5 years ago

I haven't pushed these changes to master, but below is what it looks like when I change the width from 20 to 26. I can still further expand or reduce these. Assigning to @amanda-phet to review and decide on what is best.

withoutpointerareas withpointerareas

They still don't quite expand outside of the range of the point's touch area, so I can further widen deltas if that is what should be done.

SaurabhTotey commented 5 years ago

When I increased the size of the error bars, I forgot to decrease the dilation so that it wouldn't grow with the rectangle. I have done that now, so below is what it looks like right now on master.

I can further increase or decrease the size of the error bars and their touch dilations as necessary.

WithPointerAreas WithoutPointerAreas

amanda-phet commented 5 years ago

I liked the original size of the error bars, and I think the touch areas were working out ok.

@KatieWoe did you have trouble grabbing anything? or did you more just want the bars to appear bigger and grabbable?

I am interviewing this sim on touch tomorrow (8/13/19) and would like to keep the bars as they are and see how it goes before making this change. @SaurabhTotey you can revert your change or keep it, either way I can just use the dev version for the interview.

KatieWoe commented 5 years ago

I had a bit of trouble in the case when the the error bars have been shrunk beyond their default size

SaurabhTotey commented 5 years ago

I will revert my change for right now.

amanda-phet commented 5 years ago

The pointer areas posed no issues at all for both interviews done on touch.