Usability on small screens review

[KatieWoe]

Per @kathy-phet's request in phetsims/qa#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:

• The faucet of the water in the second screen could be difficult to control. This was likely due to how close it is to the top of the screen and may not be easily fixed.

Screenshots:

[arouinfar]

@chrisklus can you dilate the touch area for the FaucetNode handle a bit more?

[chrisklus]

I have a very difficult time checking the energy symbols and link heaters checkboxes on my iPhone SE (smaller screen than any other current iPhone, so perhaps doesn't matter).

[chrisklus]

@arouinfar how does this look?

[kathy-phet]

I have a very difficult time checking the energy symbols and link heaters checkboxes on my iPhone SE (smaller screen than any other current iPhone, so perhaps doesn't matter).

@arouinfar - What do you think about making these touch areas for the checkboxes bigger in any direction - so its easier to hit? Perhaps the checkboxes could have a bit more vertical padding/space.

[arouinfar]

@arouinfar how does this look?

Looks good!

I have a very difficult time checking the energy symbols and link heaters checkboxes on my iPhone SE (smaller screen than any other current iPhone, so perhaps doesn't matter).

@arouinfar - What do you think about making these touch areas for the checkboxes bigger in any direction - so its easier to hit? Perhaps the checkboxes could have a bit more vertical padding/space.

I can't remember if we added asymmetric touch area dilation to checkboxes or not, so perhaps @chrisklus can comment about whether this is currently supported or not. I think we could certainly add a bit more vertical padding between the checkboxes. Perhaps a few extra pixels @chrisklus?

[chrisklus]

@chrisklus can comment about whether this is currently supported or not.

It doesn't look like we support this with the typical dilation options but I think I can pass in a custom touch area that has a pre-calculated size. I'll ask if this is the standard way for checkboxes.

[chrisklus]

I think I can pass in a custom touch area that has a pre-calculated size. I'll ask if this is the standard way for checkboxes.

That is what's done for the usages I found, so I went ahead with this pattern. Per #239 (comment), I increased the padding between the two checkboxes by 2px, and dilated the touch areas by 5px on the top and bottom.

Before:

After:

I dilated the "Energy Symbols" checkbox on the Systems screen as well. They are now much easier to select on my iPhone SE.

Anything left for this issue @arouinfar?

[arouinfar]

Nice, thanks @chrisklus! I think that takes care of everything, closing.