search

getodk / collect

ODK Collect is an Android app for filling out forms. It's been used to collect billions of data points in challenging environments around the world. Contribute and make the world a better place! ✨📋✨
https://docs.getodk.org/collect-intro
Other
699 stars 1.35k forks source link

Adding a container for questions with checkboxes or radio buttons #6119

Open alyblenkin opened 2 weeks ago

alyblenkin commented 2 weeks ago

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.

Image

Figma

lognaturel commented 2 weeks ago

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 commented 2 weeks ago

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 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.