Usability on small screens review

[KatieWoe]

Per @kathy-phet's request in https://github.com/phetsims/QA/issues/295 I am making issues in each published sim repo detailing the pointer areas and usability of sims on phone sized screens. Done on an iPhone 7 iOS 12 device.

Potential Difficulties Noticed:

• Very strange looking leftover pointer areas of blocks when switching scenes on the first screen. Pictured below
• plus/minus buttons at top of screen were sometimes hard to press

Screenshots:

[amanda-phet]

I agree those accordion box buttons are tricky on phones. This is likely the case for all accordion boxes, right? Since we have the space, I think it would be nice to increase those. Assigning @jbphet to make that change.

As for the leftover touch areas, a quick search in past area-model issues shows that this is a known "issue" but doesn't cause any usability issues. See https://github.com/phetsims/area-builder/issues/89.

[SaurabhTotey]

The touch areas that show up for invisible blocks can be safely ignored I think. In addition to #89, this seems all very similar to https://github.com/phetsims/circuit-construction-kit-dc/issues/178 and https://github.com/phetsims/balancing-act/issues/87 to me. The touch areas show, but aren't actually usable unless the relevant elements are present.

In my latest commit, increased the touch dilation area for the accordion boxes so they look like the picture below.

[amanda-phet]

Thanks @SaurabhTotey I think those larger areas look like a nice improvement.