18/09/2024
I was shocked at this unfortunate website design decision, so let's learn from it.
Radio buttons are used to allow selection of only one item in a list. Typically, they are designated with a circular outline, and when you select one, it fills in the circle. In this case, the form background is gray, so the centers of the radio buttons are gray, which makes it look like every button is selected (impossible for radio buttons). When I clicked an option, it looked like I UNselected it.
I work with website forms all day every day, and if this gave me pause, I guarantee you the average website user is going to be even more confused. Good design will not significantly deviate from accepted norms for user flow, because people tend to default to habits and assumptions about how things should work.
Solutions: While the green checkbox animation definitely clarifies the selection, it's not enough, because you only see it after clicking Vote (which feels extremely final: I didn't know it wasn't going to just submit immediately). The easiest solution is to not use a colored background for the voting box (use black text/circle outlines on white). Otherwise, thinner circle outlines would make it look more obvious items are not actually selected, and a different fill color (think bright red) for the selected option would better confirm your choice.
Side note: the extra thin type is/would also be a problem. However, I can guarantee you that isn't intentional. There's some sort of bug in a recent Chrome update (I think) that makes certain web fonts look way too thin, and it hasn't been a high enough priority for me to troubleshoot. So I'm ignoring that because it's not actually supposed to look that way, but it's definitely not good for accessibility/readability.
This is why it's important to work with a designer, not just a developer. While some developers have an understanding of design best practices, someone who can both design and build equally well is actually pretty rare. It's why I highlight "well-designed websites" in all my marketing for https://buff.ly/4e8xKFu. You can have a website that is technically solid AND looks and feels beautiful too.