Adding a container for questions with checkboxes or radio buttons

[alyblenkin]

As we are looking at improving web forms interactions, we noticed an opportunity to improve the checkbox and radio buttons in form entry within Collect as well.

Currently Collect has an older Material partial divider between the options, but we would like to improve the experience by adding a light border around the option to help with visual processing and make it easier to select.

The border isn't part of the M3 components, so this would be a deviation. The border needs to be grey, so that it doesn't become visually distracting from the content.

Figma

[lognaturel]

Here's a related forum thread: https://forum.getodk.org/t/better-radio-buttons-and-checkboxes/27775

I think we need to consider the impact on vertical spacing. Does it have to be as much as in the mockups? If so, maybe we should consider introducing this as a new appearance rather than the default. This additional spacing works really well when there are few options and it generally helps with tappability but the tradeoff is that there can be less context and more to scroll through with a lot of options. Not sure how to reason about that tradeoff!

Did you consider shading in addition to an outline to really make the selected item stand out? I'm not sure it's a good idea but feels worth trying.

[alyblenkin]

I love that the user linked to the Laws of UX website.

I think there are a few factors at play here that are impacting the vertical spacing in the mockups, which we can play around with and adjust!

• I increased the height of the containers from 40px to 48px. I think ours are around 40px, but I wanted to check when we discuss this on Tuesday.
• The current list of options is stacked, but I added 20px between each element.

I think we should prioritize making the buttons easier to interact with and process, rather than trying to reduce vertical spacing so the user doesn't have to scroll. If they are too close together you may have the context, but it's harder to read. I've played around with a few more variations in figma with longer lists so we can see the trade-offs.

Did you consider shading in addition to an outline to really make the selected item stand out? I'm not sure it's a good idea but feels worth trying.

I considered the selected state having a filled button, but not when unselected. I added a few mockups to show you what it would look like.