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:

• Using the +/- buttons on the accordion boxes could be difficult

Screenshots:

[pixelzoom]

• Using the +/- buttons on the accordion boxes could be difficult

I don't see any good/quick options for improve this.

The API for AccordionBox only supports symmetric dilation of the pointer areas. I.e., pointer areas expand the same amount above/below and left/right of the button.

AccordionBox's button is ExpandCollapseButton, whose superclass is sun's RectangularButtonView. So if we want to support shifting pointer areas, that will require adding the following options to RectangularButtonView:

touchAreaXShift: 0,
touchAreaYShift: 0,
mouseAreaXShift: 0,
mouseAreaYShift: 0,

My question is whether the need here is great enough to justify the amount of work involved.

[KatieWoe]

I'm not sure it is. Up to @kathy-phet and @amanda-phet

[pixelzoom]

Actually, this doesn't look that difficult. In RectangularButtonView, add the options shown above. Then change this:

    // set pointer areas
    this.touchArea = button.localBounds.dilatedXY( options.touchAreaXDilation, options.touchAreaYDilation );
    this.mouseArea = button.localBounds.dilatedXY( options.mouseAreaXDilation, options.mouseAreaYDilation );

to this:

    // set pointer areas
    this.touchArea = button.localBounds.dilatedXY( options.touchAreaXDilation, options.touchAreaYDilation ).shifted( options.touchAreaXShift,  options.touchAreaYShift );
    this.mouseArea = button.localBounds.dilatedXY( options.mouseAreaXDilation, options.mouseAreaYDilation ).shifted( options.mouseAreaXShift,  options.mouseAreaYShift );

[pixelzoom]

A better API for RectangularButtonView might be:

touchAreaXAlign: 'center', // left, right, center
touchAreaYAlign: 'center', // top, bottom, center

This doesn't support arbitrary shifting, but makes it easier to specify the typical cases.

[pixelzoom]

I've created https://github.com/phetsims/sun/issues/500 to track the general enhancement that would be required in RectangularButtonView.

@arouinfar Let me know whether you think we need to address this issue, because it will affect the priority of the more general issue.

[arouinfar]

The solution you've proposed seems pretty straightforward @pixelzoom. Generally, I think it would be a worthy investment to add support for asymmetric dilation of touch areas to RectangularButtonView, as the ExpandCollapseButton's are a bit hard to use on my phone.

The reality is that many teachers do have students pull up sims on their phones. Given that we have iOS and Android apps, it seems like a bit of a cop-out out not to optimize touch areas. However, it is entirely up to @kathy-phet and @ariel-phet to decide how much developer time we should be investing into common code changes.

[ariel-phet]

@pixelzoom @arouinfar I agree worth the time, especially since it seems like a generally good improvement to the flexibility of RectangularButtonView

[pixelzoom]

Blocked by phetsims/sun#500.

[pixelzoom]

Touch areas for all expand/collapse buttons in this sim are now shifted up, see sample screenshot below. @arouinfar could you please review?

[arouinfar]

👍