Usability on Small Screen 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:

• Orbits and Cloud radio buttons can be difficult to press. No pointer areas to determine exact size
• Trying to select parts of the periodic table in the game were the hardest
• Selecting checkboxes and opening boxes also proved difficult
• Many of these issues are constrained by elements around them and may not be easily changed

Screenshots:

[arouinfar]

Orbits and Cloud radio buttons can be difficult to press. No pointer areas to determine exact size

The text label should be included as part of the pointer areas for all radio buttons, including those appearing in the game.

Selecting checkboxes and opening boxes also proved difficult

The checkboxes in the "Show" panel already include the text, and don't really have any obvious way to increase the touch areas. Testing on my phone, these seem pretty usable, so I think we can leave it as-is.

For the ExpandCollapseButton, it looks like there's enough room to dilate the touch areas a bit more.

Trying to select parts of the periodic table in the game were the hardest

This will take some design changes to address, and it may be beyond the scope of a maintenance release.

• Increase size of periodic table by 20% (shift Find the Element, Neutral/Ion radio group, and Check buttons so they remain centered).
• Re-center protons/neutron/electrons prompt or atom diagram in the negative space to the left of the periodic table.

Here's a mockup showing the changes layered above the original

[SaurabhTotey]

I believe I have implemented the changes regarding expand/collapse button sizing and the sizing of the ToElementChallenge in master. I changed the game's periodic table from a scaling of 0.85 to a scaling of 1.02. The expand/collapse buttons have their touch dilation increased from 8 to 12.

As for the issue of the Orbits and Clouds radio buttons, they seem to be instances of common-code AquaRadioButtons, which don't show touch areas. However, the text is included as a part of the touch area. I don't know how to make the buttons show their touch areas short of changing the type of button they are.

[arouinfar]

I believe I have implemented the changes regarding expand/collapse button sizing and the sizing of the ToElementChallenge in master. I changed the game's periodic table from a scaling of 0.85 to a scaling of 1.02. The expand/collapse buttons have their touch dilation increased from 8 to 12.

This is all looking really nice @SaurabhTotey!

As for the issue of the Orbits and Clouds radio buttons, they seem to be instances of common-code AquaRadioButtons, which don't show touch areas. However, the text is included as a part of the touch area. I don't know how to make the buttons show their touch areas short of changing the type of button they are.

No need to make the bounds of the pointer areas visible, but glad to confirm the text is part of the touch area. Thanks @SaurabhTotey.