Difficult to press a few items

samreid commented 1 year ago

Testing on the iPhone 12 running iOS 16.1.2.

Test device iPhone 12

Operating System iOS 16.1.2

Browser Safari

Problem description

For https://github.com/phetsims/qa/issues/870, I was pretty much able to tap everything, except the play/pause and rewind button on the stopwatch was surprisingly difficult to tap. Let's check its pointer area and see if it should be improved. After zooming in, it is much easier. Other buttons and controls are working great on the small screen. UPDATE: Also tapping on a track control point (to show its controls) is difficult--swipe to drag works OK but tapping on it to show delete/cut is difficult. Summarizing recommendations to dilate touch areas:

play/pause button on the stopwatch
Eraser button on the chart
Tap area on the track control points.
Expanding and collapsing accordion boxes

Steps to reproduce

Launch sim and try to tap things.

Visuals Here are the pointer areas. Note the problematic ones are on the small side and not dilated:

Troubleshooting information: !!!!! DO NOT EDIT !!!!! Name: ‪Energy Skate Park‬ URL: https://phet-dev.colorado.edu/html/energy-skate-park/1.2.0-rc.1/phet/energy-skate-park_all_phet.html Version: 1.2.0-rc.1 2022-12-22 16:17:42 UTC Features missing: applicationcache, applicationcache, touch Flags: pixelRatioScaling User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36 Language: en-US Window: 1440x704 Pixel Ratio: 2/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: 31 uniform: 1024 Texture: size: 16384 imageUnits: 16 (vertex: 16, combined: 32) Max viewport: 16384x16384 OES_texture_float: true Dependencies JSON: {}

arouinfar commented 1 year ago

Good idea, thanks @samreid. @AgustinVallejo please dilate the touch areas @samreid identified.

AgustinVallejo commented 1 year ago

Dilated some of the touch areas mentioned above:

[x] play/pause button on the stopwatch (This is in common code, so other sims that use the Stopwatch also got their touch areas improved, see: capacitor-lab-basics, masses-and-springs, pendulum-lab, waves-on-a-string. They all look good!)
[x] Eraser button on the chart
[x] Tap area on the track control points. (I might need help setting TouchArea on a DragListener, see TrackDragHandler.ts)
[x] Expanding and collapsing accordion boxes

AgustinVallejo commented 1 year ago

We increased the touchArea of the control node, as well as the cut and delete buttons. However, there seems to be an inevitable overlap in some edge cases, just to let you guys know:

arouinfar commented 1 year ago

I tested on my phone and the touch areas all seem good @AgustinVallejo

Nancy-Salpepi commented 1 year ago

The highlighted touch area for the expanding/collapsing button on the Energy Graph on Screens 1 and 4 is still the original size. However, I didn't have any trouble expanding/collapsing because touching anywhere along the entire top portion of the panel (where the title is) will cause the change.

I didn't have any issues pressing anything on my iPhone. Closing.

phetsims / energy-skate-park

Difficult to press a few items #369