How can I address forms that require many similar interactions?

Question

edit: I just noticed there was a very similar question asked as I was typing up my question, but still hoping for some feedback on mine

I have a form that has many inputs. Two of them are very similar visually yet distinctive in their interactions. They are a part of a tagging system. The first category can only accept 1 tag at least/most whereas the second category can accept many tags.

Most commonly, these categories can be represented and offer high affordance as radio buttons (single select) and check boxes (multiple select). However, when the form fields are expanded, these lists can take up a lot of space (note: each form in the real app has closer to 14 options each). And I am unsure whether or not their similarity in visual shapes, squares vs. circles, is enough to distinguish as single vs multiple selects.

As an alternative, I mocked up the same screen using what I believe are comparable replacements of each form input. The radio buttons are replaced by a sliding tab select and the check boxes are replaced by pills. I am not convinced this is the best interaction, however it solves the two problems I originally faced of reducing space and increasing the distinction visually.

Now of course these create their own problems that I am not sure how to proceed with.

• The scrolling tab selection may be too long and makes it harder for the user to see and remember all the options (14 total)
• Browsing the pills can feel cluttered, despite be ordered sequentially (14 total)

I'd appreciate any feedback, similar experiences, or case studies that pertain to the similar topic.

Answer 1

For excellent form UX and Ui, take a look at Typeform. We do our own forms internally and we view Typeform as the gold standard.

That said, both work. I'd argue that the tagging-look is better because there's a clearer distinction between what is and isn't selected. Checkboxes are also harder to click, and spending the time to build it so selecting the entire text field too is superfluous when the tagging way is both cleaner, easier for users, and more compact to boot.