search

phetsims / build-a-molecule

"Build a Molecule" is an educational simulation in HTML5, by PhET Interactive Simulations.
GNU General Public License v3.0
8 stars 7 forks source link

Small atoms can be hard to grab with touch #116

Closed KatieWoe closed 4 years ago

KatieWoe commented 4 years ago

Test device Dell Operating System Win 10 Browser chrome Problem description For https://github.com/phetsims/QA/issues/459 When your finger drags part of the screen when not starting on an atom, a cutting action is done. However, this means that dragging to pick up an atom doesn't work. This makes the margin of error for picking up an atom, particularly a small one, smaller.

Visuals easytomiss

Troubleshooting information:

!!!!! DO NOT EDIT !!!!! Name: ‪Build a Molecule‬ URL: https://phet-dev.colorado.edu/html/build-a-molecule/0.0.0-dev.23/phet/build-a-molecule_all_phet.html Version: 0.0.0-dev.23 2019-11-20 23:29:39 UTC Features missing: touch Flags: pixelRatioScaling User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.97 Safari/537.36 Language: en-US Window: 1536x722 Pixel Ratio: 2.5/1 WebGL: WebGL 1.0 (OpenGL ES 2.0 Chromium) GLSL: WebGL GLSL ES 1.0 (OpenGL ES GLSL ES 1.0 Chromium) Vendor: WebKit (WebKit WebGL) 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: {}
Denz1994 commented 4 years ago

A grabbable offset was assigned to the mouseArea/touchArea of the atomNodes. I will create a new dev version to compare.

arouinfar commented 4 years ago

I doubt we can support both touchSnag and the swipe-to-cut, but the mechanism for cutting bonds is still open for discussion in #113. Seems like the best course of action would be to dilate the touch bounds for Hydrogen.

It looks like @Denz1994 has already increased the pointerAreas in master. However, it looks like the areas were dilated for both touch and mouse, and dilated for large atoms. Given that the atoms will be in close proximity to one another, I think it would be preferable not to dilate the pointerAreas unless need be.

@Denz1994 let's just dilate the touchArea of Hydrogen for now. The touchArea currently in master looks good to me.

Denz1994 commented 4 years ago

Sounds good @arouinfar. I've removed the mouseArea dilation and kept the touchArea dilation. I'll close this issue since the touchArea looks good in master.

jonathanolson commented 4 years ago

It looks like the touch areas on atoms can be big enough where it's possible to press your finger directly over an atom and actually pick up a different one. Has this been an issue? This has been resolved in other sims by having a background that detects "misses" and searches for the closest item.

Screen Shot 2020-05-12 at 1 35 43 PM
Denz1994 commented 4 years ago

For usability purposes, this would only be concerning if this occurred in the play area. The separation threshold prevents this from happening in the play area. Atoms in the bucket are homogenous and if a user picks up the incorrect hydrogen atom that shouldn't be an issue. Thoughts @arouinfar?

arouinfar commented 4 years ago

For usability purposes, this would only be concerning if this occurred in the play area. The separation threshold prevents this from happening in the play area. Atoms in the bucket are homogenous and if a user picks up the incorrect hydrogen atom that shouldn't be an issue.

Agreed! I think we can close.