My question is simple:
Example of standard radio button:
(Unusual) Example of an entirely filled radio button:
Is this for some skeuomorphic reasoning or something entirely different?
Bonus Question: Is it ever acceptable in an interface or design system to use fully filled radio buttons?
It’s not entirely clear that a black circle means “yes” or selected, while a white circle means “no” or non-selected. Depending on what the user regards as foreground and background, it may go either way. Consider this (rather contrived) example:
Which one is selected? The one that “lit up” like a light? Or the one that is “filled with ink”?
There is an implicit assumption that being selected should include a graphic addition of something. Thus the addition of a circle within the circle. It may also be thinking by analogy with checkboxes, where you add a check to the square to show selection.
This “works” even when we break the standard and reverse the colors:
This implies it also works when users don’t know the colors, something which matters especially today when we are not confined to grayscale. For this reason, in addition to it just being non-standard, I would always avoid fully filled radio buttons.
Personally, I think the term “radio buttons” refers metaphorically to the behavior (that it’s one-of-many selection), not to the appearance. Other historical factors may have determined the general appearance. At the time GUIs were being invented in the 1970s and 1980s, the most common radio buttons were the presets in car radios. While I’m sure you can find an exception (I have), these generally were (1) rectangular, not circular, and (2) did not indicate a selected state –once pressed, they popped back out, and did not show a mechanical flag or light. So I don’t think skeuomorphism had anything to do with it.
I guess a completely full radio button can be easily confused with a bulleted text:
Whereas an empty circle perceptually gives the feeling of incompleteness: needs filling or has to be filled:
Even in many cases one of these rings is already filled, which increases the feeling that they must be filled (checked):
I would consider accessibility to be one of the reasons of this style of radio buttons in addition to the physical button it originated from.
When a button is fully filled, you are relying on the colour of the button to signify its state. This could confuse a lot of people, especially when using non standard colours.
In the first row of images, one of the pictures in itself does not convey the information regarding the state of the button. Maybe with black and white you could assume a state but this will fail for other colours.
In the second row of images, the state of the inner circle clearly denotes what the state of the button is.
Radio buttons were inspired by the physical radio buttons ( obviously enough ). Buttons were popping out from a frame or were "3d". I would consider these as signifiers. Those signifiers made their way to the first interfaces. Practically a button popping out from a frame that when pressed would cancel all the other pressed buttons.
As of today, the radio button should also be recognizable even after it is checked. So having it according to the "standards" would be best. Even though I have seen examples of radio buttons like your example and inside the context I did identify them as radio buttons for some users it might cause some confusion or it might not but some user testing might be needed.
This is a nice article about the history of radio buttons: https://www.jitbit.com/alexblog/242-the-history-of-a-radio-button/
As said in the article:
Radio buttons are named after the actual buttons used on old radios to switch between radio waves and, sometimes, preset frequencies. When a button was pressed, all other buttons would pop out.
So, it was a skeuomorphic reason.
I believe a fully filled radio button would confuse users, based on the principle of "Match Between the System and the Real World". It states that:
Interfaces that follow real-world conventions and make information appear in a natural and logical order demonstrate empathy and acknowledgement for users.
Users are used to radio buttons in this format in other websites, so unless you have a really good reason to change that, I think you should use the standard.
Match Between the System and the Real World is only applicable when users are acclimated with the real world item. In today's world, most people don't know or haven't even seen the actual Radio button.
Because if a checked radio button would be completely filled, it would be confusing to tell which button is actually selected, especially if there are only 2 radio buttons. You could just as easily think the "white filled" button is active instead of the "blacked out one".
While the other answers are quite valid, I think they miss a key point: an entirely filled radio button would be invisible on a black background. Having alternating colors on the selected item prevents this by causing contrast to be forced within the radio button.
This is not directly an answer to your question but some interesting information about the subject as a whole.
Skeumorphism is an aspect of Human Computer Interaction - its a design choice that relates a real world object with known function to a digital object with similar function. This usually works because people develop mental models for how things operate so when we reproduce an item digitally with a similar function its purpose is conveyed automatically.
The mental model for the radio button is that a radio button can be depressed to make a single selection. From this understanding multi-selections were reserved for check boxes because the mental model is that a check next to an item in a list indicates selection.
There are some issues with relying on skeumorphsim and mental models, such as, what if your user had never encountered a radio button in the real world? In that case they would have no mental model for how this work. This is becoming ever more likely because some of the real world items used as bases for various digital constructs were from the 1960s and 1970s. This is what I think you were touching on; is the radio button the right object to use as the basis of skeumorphism for a single selectable item from a list today? Maybe.
Even though people are less likely to come in contact with an old radio, the prevalence of radio button selectors in digital form has given most people a mental model of their function. As mentioned in other answers, a good design should be able to indicate which selection was made by two users with different mental models. With that said, a radio button does not have to be the basis for this type of selection. Keep in mind that going against the majority of people's mental models can be a struggle. User testing can help you identify if the change you are suggesting will translate well to your intended audience. Some good advances in design have come about because someone was willing to try a new approach and honed their design via testing.
I can remember seeing radios with mechanical buttons where there was a visual indicator that showed which of the buttons was pressed. The one I remember had black buttons, and inside it was moving parts, shaped like a kind of a beak that opened up when the button was pressed showing the white indicator at the center of the top of the button. This looks the same as your illustration, just with colors reversed.
