Why do Radio Buttons not fill the entire outer circle?Why are radio buttons circles?Interface for linking multiple email addresses and addresses to an accountSubmit button on top of the long formArrow keys on radio buttons: disable or not?Radio buttons menu with radio button submenuUsing radio buttons responsivelyWhy do radio buttons precede the labels?Widget to use for “diversity” formsWhy are radio buttons circles?Depending radio buttonsRadio buttons vs button groups
Find fails if filename contains brackets
Do these cracks on my tires look bad?
Is camera lens focus an exact point or a range?
What is this type of notehead called?
A social experiment. What is the worst that can happen?
does this mean what I think it means - 4th last time
tikz grid without top edge
Should my PhD thesis be submitted under my legal name?
Are taller landing gear bad for aircraft, particulary large airliners?
Identify a stage play about a VR experience in which participants are encouraged to simulate performing horrific activities
What does the "3am" section means in manpages?
You're three for three
Is there a word to describe the feeling of being transfixed out of horror?
How can "mimic phobia" be cured or prevented?
Could solar power be utilized and substitute coal in the 19th century?
What will be the benefits of Brexit?
What would you call a finite collection of unordered objects that are not necessarily distinct?
Hostile work environment after whistle-blowing on coworker and our boss. What do I do?
General topology proving something for all of its points
What does this horizontal bar at the first measure mean?
A car is moving at 40 km/h. A fly at 100 km/h, starts from wall towards the car(20 km away)flies to car and back. How many trips can it make?
Adding empty element to declared container without declaring type of element
How to open new tab in existing terminal instead of new terminal instance?
How will losing mobility of one hand affect my career as a programmer?
Why do Radio Buttons not fill the entire outer circle?
Why are radio buttons circles?Interface for linking multiple email addresses and addresses to an accountSubmit button on top of the long formArrow keys on radio buttons: disable or not?Radio buttons menu with radio button submenuUsing radio buttons responsivelyWhy do radio buttons precede the labels?Widget to use for “diversity” formsWhy are radio buttons circles?Depending radio buttonsRadio buttons vs button groups
My question is simple:
Why do most radio buttons not fill their entire outer circle?
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?
forms icons radio-buttons
|
show 6 more comments
My question is simple:
Why do most radio buttons not fill their entire outer circle?
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?
forms icons radio-buttons
46
How would you distinguish the states of a fully filled radio button and an empty radio button? For all the user knows, you might have chosen black as the color of an empty radio button. Good UX design should be obvious, and should not require fiddling with the controls to see how they behave.
– Cody Gray
Mar 19 at 23:14
16
Why would it be any more confusing than choosing white, or blue, or any other color? Maybe it's a "dark" user interface. The point is, the user doesn't know which color corresponds to which state independent of context, which means there is a UI problem.
– Cody Gray
Mar 20 at 7:38
13
I see that kind of design error everywhere. Two buttons, one is selected, the other is not. One is (for example) light blue and the other is orange. Clicking one toggles the colors, but there's no default understanding of which color is the 'selected' color.
– Graham
Mar 20 at 13:44
4
Something often forgotten about old physical radio buttons is that once you pressed one in, you could half-press a different button and it would cause the selected button to pop back out, while not actually engaging the newly pressed button. So you COULD return to a "no selection state" quite easily.
– Graham
Mar 20 at 14:25
4
@Graham Whilst it was physically possible to return to a "no selection state", I don't believe this served any purpose. In fact, I think the radio would continue to behave as if the button that just popped out were still pressed in. Hence not being able to do this with the GUI version.
– bornfromanegg
Mar 20 at 15:05
|
show 6 more comments
My question is simple:
Why do most radio buttons not fill their entire outer circle?
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?
forms icons radio-buttons
My question is simple:
Why do most radio buttons not fill their entire outer circle?
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?
forms icons radio-buttons
forms icons radio-buttons
edited Mar 19 at 15:43
maxathousand
11.2k51944
11.2k51944
asked Mar 19 at 14:24
RobbyReindeerRobbyReindeer
5,71422446
5,71422446
46
How would you distinguish the states of a fully filled radio button and an empty radio button? For all the user knows, you might have chosen black as the color of an empty radio button. Good UX design should be obvious, and should not require fiddling with the controls to see how they behave.
– Cody Gray
Mar 19 at 23:14
16
Why would it be any more confusing than choosing white, or blue, or any other color? Maybe it's a "dark" user interface. The point is, the user doesn't know which color corresponds to which state independent of context, which means there is a UI problem.
– Cody Gray
Mar 20 at 7:38
13
I see that kind of design error everywhere. Two buttons, one is selected, the other is not. One is (for example) light blue and the other is orange. Clicking one toggles the colors, but there's no default understanding of which color is the 'selected' color.
– Graham
Mar 20 at 13:44
4
Something often forgotten about old physical radio buttons is that once you pressed one in, you could half-press a different button and it would cause the selected button to pop back out, while not actually engaging the newly pressed button. So you COULD return to a "no selection state" quite easily.
– Graham
Mar 20 at 14:25
4
@Graham Whilst it was physically possible to return to a "no selection state", I don't believe this served any purpose. In fact, I think the radio would continue to behave as if the button that just popped out were still pressed in. Hence not being able to do this with the GUI version.
– bornfromanegg
Mar 20 at 15:05
|
show 6 more comments
46
How would you distinguish the states of a fully filled radio button and an empty radio button? For all the user knows, you might have chosen black as the color of an empty radio button. Good UX design should be obvious, and should not require fiddling with the controls to see how they behave.
– Cody Gray
Mar 19 at 23:14
16
Why would it be any more confusing than choosing white, or blue, or any other color? Maybe it's a "dark" user interface. The point is, the user doesn't know which color corresponds to which state independent of context, which means there is a UI problem.
– Cody Gray
Mar 20 at 7:38
13
I see that kind of design error everywhere. Two buttons, one is selected, the other is not. One is (for example) light blue and the other is orange. Clicking one toggles the colors, but there's no default understanding of which color is the 'selected' color.
– Graham
Mar 20 at 13:44
4
Something often forgotten about old physical radio buttons is that once you pressed one in, you could half-press a different button and it would cause the selected button to pop back out, while not actually engaging the newly pressed button. So you COULD return to a "no selection state" quite easily.
– Graham
Mar 20 at 14:25
4
@Graham Whilst it was physically possible to return to a "no selection state", I don't believe this served any purpose. In fact, I think the radio would continue to behave as if the button that just popped out were still pressed in. Hence not being able to do this with the GUI version.
– bornfromanegg
Mar 20 at 15:05
46
46
How would you distinguish the states of a fully filled radio button and an empty radio button? For all the user knows, you might have chosen black as the color of an empty radio button. Good UX design should be obvious, and should not require fiddling with the controls to see how they behave.
– Cody Gray
Mar 19 at 23:14
How would you distinguish the states of a fully filled radio button and an empty radio button? For all the user knows, you might have chosen black as the color of an empty radio button. Good UX design should be obvious, and should not require fiddling with the controls to see how they behave.
– Cody Gray
Mar 19 at 23:14
16
16
Why would it be any more confusing than choosing white, or blue, or any other color? Maybe it's a "dark" user interface. The point is, the user doesn't know which color corresponds to which state independent of context, which means there is a UI problem.
– Cody Gray
Mar 20 at 7:38
Why would it be any more confusing than choosing white, or blue, or any other color? Maybe it's a "dark" user interface. The point is, the user doesn't know which color corresponds to which state independent of context, which means there is a UI problem.
– Cody Gray
Mar 20 at 7:38
13
13
I see that kind of design error everywhere. Two buttons, one is selected, the other is not. One is (for example) light blue and the other is orange. Clicking one toggles the colors, but there's no default understanding of which color is the 'selected' color.
– Graham
Mar 20 at 13:44
I see that kind of design error everywhere. Two buttons, one is selected, the other is not. One is (for example) light blue and the other is orange. Clicking one toggles the colors, but there's no default understanding of which color is the 'selected' color.
– Graham
Mar 20 at 13:44
4
4
Something often forgotten about old physical radio buttons is that once you pressed one in, you could half-press a different button and it would cause the selected button to pop back out, while not actually engaging the newly pressed button. So you COULD return to a "no selection state" quite easily.
– Graham
Mar 20 at 14:25
Something often forgotten about old physical radio buttons is that once you pressed one in, you could half-press a different button and it would cause the selected button to pop back out, while not actually engaging the newly pressed button. So you COULD return to a "no selection state" quite easily.
– Graham
Mar 20 at 14:25
4
4
@Graham Whilst it was physically possible to return to a "no selection state", I don't believe this served any purpose. In fact, I think the radio would continue to behave as if the button that just popped out were still pressed in. Hence not being able to do this with the GUI version.
– bornfromanegg
Mar 20 at 15:05
@Graham Whilst it was physically possible to return to a "no selection state", I don't believe this served any purpose. In fact, I think the radio would continue to behave as if the button that just popped out were still pressed in. Hence not being able to do this with the GUI version.
– bornfromanegg
Mar 20 at 15:05
|
show 6 more comments
9 Answers
9
active
oldest
votes
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.
7
The radio buttons in my car do show selected state by staying pushed in. Also, you set them to the desired station by pulling them out (past the normal position) and pushing them back in.
– Glen Yates
Mar 20 at 15:08
@Yates: Stays pushed in? Interesting. What car/radio is that? What happens when you then turn the tuning knob? Does the button pop out automatically or does it continue to (falsely) show the preset as still in effect, which also prevents you from re-selecting the button?
– Michael Zuschlag
Mar 20 at 16:19
4
@MichaelZuschlag See for example the photo at uxplanet.org/radio-buttons-ux-design-588e5c0a50dc — These were extremely common (although I associate them more with tape/cassette players than radios). I’m not sure how the tuning button is relevant in this context; the button always showed the correct state (e.g. AM/FM, Playing/Paused/Stopped/Fwd/Rev/Record).
– Konrad Rudolph
Mar 20 at 18:08
4
My car has mechanical "radio buttons" for heat/ac settings (which location, external vent vs recirculate) and they definitely stay depressed once selected.
– R..
Mar 21 at 12:47
1
Check the third answer from this question to a example of a radio with classic radio buttons!
– T. Sar
Mar 21 at 19:34
|
show 5 more comments
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):

2
On your first example, the title of the "list" would probably be a question and in the list itself, only one of the option would be a black circle. The other one would be regular radios.
– Zasul
Mar 19 at 14:54
2
I think your best assumption is not correct, because with radio elements you would have only one radio input selected at most.
– Devin
Mar 19 at 14:55
2
@Devin that's not strictly true. you can have more than radio button selected if you're feeling like breaking with convention. it's not a great idea, but it's generally possible in most interfaces.
– worc
Mar 19 at 20:44
1
@worc native radio buttons ARE a convention, and a convention that motivates the question. Furthermore, to "break the convention" you would need to use checkboxes and disguise then as radio (so it wouldn't be a radio, it would be a checkbox with an image over it). Radio buttons allows for just one selected option at a time, see developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio
– Devin
Mar 19 at 20:56
3
@Devin Suppose you had radio buttons with two choices (and a situation where radio buttons would be preferable to a checkbox, like say for Male/Female). How do you easily tell whether a circle filled with black or a circle filled with white represents the selected choice? I think the typical partially filled circle is clearer.
– jamesdlin
Mar 20 at 3:55
|
show 2 more comments
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.
New contributor
Sinstein is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
6
The second row has the same problem as the first. Is that a selected white dot with a circle around it, or a selected black dot with a circle around it?
– Mr.Mindor
Mar 21 at 15:10
@Mr.Mindor I would argue that is where the outer circles help. The inner circle being "filled" denotes that it is activated. What denotes "filled", while subjective, can be deduced from how the inner circle behaves w.r.t to the outer ring (in colour).
– Sinstein
Mar 22 at 7:09
I'll grant you that it does help, it's not quite as bad as the first row; however, if you have to argue, then there is clearly room for confusion. How is one to deduce the behavior of the inner circle? If you have to interact with it to be sure, then it clearly isn't communicating its state well enough. The standard radio button does a better job: only the selected option has an inner dot at all. (no 'empty' inner circle.)
– Mr.Mindor
Mar 22 at 15:51
add a comment |
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.
4
Radio buttons were inspired by the physical radio buttons ( obviously enough ). Perhaps not. Personally, I only know what real-life radio buttons are because I was told about them in the first web development class I took. I don't think I've ever seen them myself.
– Justin Lardinois
Mar 19 at 22:57
7
I don't understand how this addresses the difference between the icon being filled or not
– mowwwalker
Mar 20 at 1:12
1
@JustinLardinois - Here is an article about the history of radio buttons. jitbit.com/alexblog/242-the-history-of-a-radio-button To be honest in my family the last radio with "radio-buttons" was thrown away 5 - 6 years away. So not that far away.
– Zasul
Mar 20 at 6:58
@mowwwalker - Can you please detail ? I did try to explain why the radio button looks how it looks , where it came from and as it got standardized to look like it is looking this days, any changes might cause some confusion but not necesary. This would be better proven by doing some user testing.
– Zasul
Mar 20 at 7:00
@Zasul so why are these arguments (answers to the question "should I do this?") in comments and not in the actual answer?
– Pierre Arlaud
Mar 21 at 8:44
|
show 2 more comments
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.
3
Match Between the System and the Real Worldis 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.
– Private
Mar 20 at 5:04
3
But people are acclimated with radio buttons in another websites. It's like the floppy disk for saving, people don't use it anymore, but everyone recognizes as the save button.
– Aline
Mar 20 at 11:01
3
Yes, I think the principle here is "least surprise" or "most familiar" rather than any reference to the real world. If the aim was to make them look like the real world, we could create a much better visualisation with modern graphics resolutions; but the aim is actually to mimic older user interfaces, whose origins are of historical curiosity but mostly irrelevant.
– IMSoP
Mar 20 at 11:11
1
Since no picture in that article actually shows the buttons in a selected state, I went and dug one up Hopefully a useful example. Radio buttons were really really chunky. It's meant to be sight-unseen levels of tactile, you instantly know which button is currently pressed because you can feel it, whether you're wearing gloves or it's in your pocket.
– Ruadhan2300
Mar 21 at 9:17
add a comment |
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".
New contributor
kajacx is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
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.
New contributor
Kgee is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
I don't think that was a concern in the original HTML specs - but it surely is valid today.
– Mayo
Mar 22 at 13:08
add a comment |
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.
New contributor
AxGryndr is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
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.
New contributor
user124640 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
Your Answer
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "102"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
noCode: true, onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fux.stackexchange.com%2fquestions%2f124484%2fwhy-do-radio-buttons-not-fill-the-entire-outer-circle%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
9 Answers
9
active
oldest
votes
9 Answers
9
active
oldest
votes
active
oldest
votes
active
oldest
votes
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.
7
The radio buttons in my car do show selected state by staying pushed in. Also, you set them to the desired station by pulling them out (past the normal position) and pushing them back in.
– Glen Yates
Mar 20 at 15:08
@Yates: Stays pushed in? Interesting. What car/radio is that? What happens when you then turn the tuning knob? Does the button pop out automatically or does it continue to (falsely) show the preset as still in effect, which also prevents you from re-selecting the button?
– Michael Zuschlag
Mar 20 at 16:19
4
@MichaelZuschlag See for example the photo at uxplanet.org/radio-buttons-ux-design-588e5c0a50dc — These were extremely common (although I associate them more with tape/cassette players than radios). I’m not sure how the tuning button is relevant in this context; the button always showed the correct state (e.g. AM/FM, Playing/Paused/Stopped/Fwd/Rev/Record).
– Konrad Rudolph
Mar 20 at 18:08
4
My car has mechanical "radio buttons" for heat/ac settings (which location, external vent vs recirculate) and they definitely stay depressed once selected.
– R..
Mar 21 at 12:47
1
Check the third answer from this question to a example of a radio with classic radio buttons!
– T. Sar
Mar 21 at 19:34
|
show 5 more comments
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.
7
The radio buttons in my car do show selected state by staying pushed in. Also, you set them to the desired station by pulling them out (past the normal position) and pushing them back in.
– Glen Yates
Mar 20 at 15:08
@Yates: Stays pushed in? Interesting. What car/radio is that? What happens when you then turn the tuning knob? Does the button pop out automatically or does it continue to (falsely) show the preset as still in effect, which also prevents you from re-selecting the button?
– Michael Zuschlag
Mar 20 at 16:19
4
@MichaelZuschlag See for example the photo at uxplanet.org/radio-buttons-ux-design-588e5c0a50dc — These were extremely common (although I associate them more with tape/cassette players than radios). I’m not sure how the tuning button is relevant in this context; the button always showed the correct state (e.g. AM/FM, Playing/Paused/Stopped/Fwd/Rev/Record).
– Konrad Rudolph
Mar 20 at 18:08
4
My car has mechanical "radio buttons" for heat/ac settings (which location, external vent vs recirculate) and they definitely stay depressed once selected.
– R..
Mar 21 at 12:47
1
Check the third answer from this question to a example of a radio with classic radio buttons!
– T. Sar
Mar 21 at 19:34
|
show 5 more comments
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.
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.
edited Mar 20 at 12:32
answered Mar 20 at 12:21
Michael ZuschlagMichael Zuschlag
33.7k45294
33.7k45294
7
The radio buttons in my car do show selected state by staying pushed in. Also, you set them to the desired station by pulling them out (past the normal position) and pushing them back in.
– Glen Yates
Mar 20 at 15:08
@Yates: Stays pushed in? Interesting. What car/radio is that? What happens when you then turn the tuning knob? Does the button pop out automatically or does it continue to (falsely) show the preset as still in effect, which also prevents you from re-selecting the button?
– Michael Zuschlag
Mar 20 at 16:19
4
@MichaelZuschlag See for example the photo at uxplanet.org/radio-buttons-ux-design-588e5c0a50dc — These were extremely common (although I associate them more with tape/cassette players than radios). I’m not sure how the tuning button is relevant in this context; the button always showed the correct state (e.g. AM/FM, Playing/Paused/Stopped/Fwd/Rev/Record).
– Konrad Rudolph
Mar 20 at 18:08
4
My car has mechanical "radio buttons" for heat/ac settings (which location, external vent vs recirculate) and they definitely stay depressed once selected.
– R..
Mar 21 at 12:47
1
Check the third answer from this question to a example of a radio with classic radio buttons!
– T. Sar
Mar 21 at 19:34
|
show 5 more comments
7
The radio buttons in my car do show selected state by staying pushed in. Also, you set them to the desired station by pulling them out (past the normal position) and pushing them back in.
– Glen Yates
Mar 20 at 15:08
@Yates: Stays pushed in? Interesting. What car/radio is that? What happens when you then turn the tuning knob? Does the button pop out automatically or does it continue to (falsely) show the preset as still in effect, which also prevents you from re-selecting the button?
– Michael Zuschlag
Mar 20 at 16:19
4
@MichaelZuschlag See for example the photo at uxplanet.org/radio-buttons-ux-design-588e5c0a50dc — These were extremely common (although I associate them more with tape/cassette players than radios). I’m not sure how the tuning button is relevant in this context; the button always showed the correct state (e.g. AM/FM, Playing/Paused/Stopped/Fwd/Rev/Record).
– Konrad Rudolph
Mar 20 at 18:08
4
My car has mechanical "radio buttons" for heat/ac settings (which location, external vent vs recirculate) and they definitely stay depressed once selected.
– R..
Mar 21 at 12:47
1
Check the third answer from this question to a example of a radio with classic radio buttons!
– T. Sar
Mar 21 at 19:34
7
7
The radio buttons in my car do show selected state by staying pushed in. Also, you set them to the desired station by pulling them out (past the normal position) and pushing them back in.
– Glen Yates
Mar 20 at 15:08
The radio buttons in my car do show selected state by staying pushed in. Also, you set them to the desired station by pulling them out (past the normal position) and pushing them back in.
– Glen Yates
Mar 20 at 15:08
@Yates: Stays pushed in? Interesting. What car/radio is that? What happens when you then turn the tuning knob? Does the button pop out automatically or does it continue to (falsely) show the preset as still in effect, which also prevents you from re-selecting the button?
– Michael Zuschlag
Mar 20 at 16:19
@Yates: Stays pushed in? Interesting. What car/radio is that? What happens when you then turn the tuning knob? Does the button pop out automatically or does it continue to (falsely) show the preset as still in effect, which also prevents you from re-selecting the button?
– Michael Zuschlag
Mar 20 at 16:19
4
4
@MichaelZuschlag See for example the photo at uxplanet.org/radio-buttons-ux-design-588e5c0a50dc — These were extremely common (although I associate them more with tape/cassette players than radios). I’m not sure how the tuning button is relevant in this context; the button always showed the correct state (e.g. AM/FM, Playing/Paused/Stopped/Fwd/Rev/Record).
– Konrad Rudolph
Mar 20 at 18:08
@MichaelZuschlag See for example the photo at uxplanet.org/radio-buttons-ux-design-588e5c0a50dc — These were extremely common (although I associate them more with tape/cassette players than radios). I’m not sure how the tuning button is relevant in this context; the button always showed the correct state (e.g. AM/FM, Playing/Paused/Stopped/Fwd/Rev/Record).
– Konrad Rudolph
Mar 20 at 18:08
4
4
My car has mechanical "radio buttons" for heat/ac settings (which location, external vent vs recirculate) and they definitely stay depressed once selected.
– R..
Mar 21 at 12:47
My car has mechanical "radio buttons" for heat/ac settings (which location, external vent vs recirculate) and they definitely stay depressed once selected.
– R..
Mar 21 at 12:47
1
1
Check the third answer from this question to a example of a radio with classic radio buttons!
– T. Sar
Mar 21 at 19:34
Check the third answer from this question to a example of a radio with classic radio buttons!
– T. Sar
Mar 21 at 19:34
|
show 5 more comments
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):

2
On your first example, the title of the "list" would probably be a question and in the list itself, only one of the option would be a black circle. The other one would be regular radios.
– Zasul
Mar 19 at 14:54
2
I think your best assumption is not correct, because with radio elements you would have only one radio input selected at most.
– Devin
Mar 19 at 14:55
2
@Devin that's not strictly true. you can have more than radio button selected if you're feeling like breaking with convention. it's not a great idea, but it's generally possible in most interfaces.
– worc
Mar 19 at 20:44
1
@worc native radio buttons ARE a convention, and a convention that motivates the question. Furthermore, to "break the convention" you would need to use checkboxes and disguise then as radio (so it wouldn't be a radio, it would be a checkbox with an image over it). Radio buttons allows for just one selected option at a time, see developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio
– Devin
Mar 19 at 20:56
3
@Devin Suppose you had radio buttons with two choices (and a situation where radio buttons would be preferable to a checkbox, like say for Male/Female). How do you easily tell whether a circle filled with black or a circle filled with white represents the selected choice? I think the typical partially filled circle is clearer.
– jamesdlin
Mar 20 at 3:55
|
show 2 more comments
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):

2
On your first example, the title of the "list" would probably be a question and in the list itself, only one of the option would be a black circle. The other one would be regular radios.
– Zasul
Mar 19 at 14:54
2
I think your best assumption is not correct, because with radio elements you would have only one radio input selected at most.
– Devin
Mar 19 at 14:55
2
@Devin that's not strictly true. you can have more than radio button selected if you're feeling like breaking with convention. it's not a great idea, but it's generally possible in most interfaces.
– worc
Mar 19 at 20:44
1
@worc native radio buttons ARE a convention, and a convention that motivates the question. Furthermore, to "break the convention" you would need to use checkboxes and disguise then as radio (so it wouldn't be a radio, it would be a checkbox with an image over it). Radio buttons allows for just one selected option at a time, see developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio
– Devin
Mar 19 at 20:56
3
@Devin Suppose you had radio buttons with two choices (and a situation where radio buttons would be preferable to a checkbox, like say for Male/Female). How do you easily tell whether a circle filled with black or a circle filled with white represents the selected choice? I think the typical partially filled circle is clearer.
– jamesdlin
Mar 20 at 3:55
|
show 2 more comments
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 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):

answered Mar 19 at 14:51
DanielilloDanielillo
639110
639110
2
On your first example, the title of the "list" would probably be a question and in the list itself, only one of the option would be a black circle. The other one would be regular radios.
– Zasul
Mar 19 at 14:54
2
I think your best assumption is not correct, because with radio elements you would have only one radio input selected at most.
– Devin
Mar 19 at 14:55
2
@Devin that's not strictly true. you can have more than radio button selected if you're feeling like breaking with convention. it's not a great idea, but it's generally possible in most interfaces.
– worc
Mar 19 at 20:44
1
@worc native radio buttons ARE a convention, and a convention that motivates the question. Furthermore, to "break the convention" you would need to use checkboxes and disguise then as radio (so it wouldn't be a radio, it would be a checkbox with an image over it). Radio buttons allows for just one selected option at a time, see developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio
– Devin
Mar 19 at 20:56
3
@Devin Suppose you had radio buttons with two choices (and a situation where radio buttons would be preferable to a checkbox, like say for Male/Female). How do you easily tell whether a circle filled with black or a circle filled with white represents the selected choice? I think the typical partially filled circle is clearer.
– jamesdlin
Mar 20 at 3:55
|
show 2 more comments
2
On your first example, the title of the "list" would probably be a question and in the list itself, only one of the option would be a black circle. The other one would be regular radios.
– Zasul
Mar 19 at 14:54
2
I think your best assumption is not correct, because with radio elements you would have only one radio input selected at most.
– Devin
Mar 19 at 14:55
2
@Devin that's not strictly true. you can have more than radio button selected if you're feeling like breaking with convention. it's not a great idea, but it's generally possible in most interfaces.
– worc
Mar 19 at 20:44
1
@worc native radio buttons ARE a convention, and a convention that motivates the question. Furthermore, to "break the convention" you would need to use checkboxes and disguise then as radio (so it wouldn't be a radio, it would be a checkbox with an image over it). Radio buttons allows for just one selected option at a time, see developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio
– Devin
Mar 19 at 20:56
3
@Devin Suppose you had radio buttons with two choices (and a situation where radio buttons would be preferable to a checkbox, like say for Male/Female). How do you easily tell whether a circle filled with black or a circle filled with white represents the selected choice? I think the typical partially filled circle is clearer.
– jamesdlin
Mar 20 at 3:55
2
2
On your first example, the title of the "list" would probably be a question and in the list itself, only one of the option would be a black circle. The other one would be regular radios.
– Zasul
Mar 19 at 14:54
On your first example, the title of the "list" would probably be a question and in the list itself, only one of the option would be a black circle. The other one would be regular radios.
– Zasul
Mar 19 at 14:54
2
2
I think your best assumption is not correct, because with radio elements you would have only one radio input selected at most.
– Devin
Mar 19 at 14:55
I think your best assumption is not correct, because with radio elements you would have only one radio input selected at most.
– Devin
Mar 19 at 14:55
2
2
@Devin that's not strictly true. you can have more than radio button selected if you're feeling like breaking with convention. it's not a great idea, but it's generally possible in most interfaces.
– worc
Mar 19 at 20:44
@Devin that's not strictly true. you can have more than radio button selected if you're feeling like breaking with convention. it's not a great idea, but it's generally possible in most interfaces.
– worc
Mar 19 at 20:44
1
1
@worc native radio buttons ARE a convention, and a convention that motivates the question. Furthermore, to "break the convention" you would need to use checkboxes and disguise then as radio (so it wouldn't be a radio, it would be a checkbox with an image over it). Radio buttons allows for just one selected option at a time, see developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio
– Devin
Mar 19 at 20:56
@worc native radio buttons ARE a convention, and a convention that motivates the question. Furthermore, to "break the convention" you would need to use checkboxes and disguise then as radio (so it wouldn't be a radio, it would be a checkbox with an image over it). Radio buttons allows for just one selected option at a time, see developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio
– Devin
Mar 19 at 20:56
3
3
@Devin Suppose you had radio buttons with two choices (and a situation where radio buttons would be preferable to a checkbox, like say for Male/Female). How do you easily tell whether a circle filled with black or a circle filled with white represents the selected choice? I think the typical partially filled circle is clearer.
– jamesdlin
Mar 20 at 3:55
@Devin Suppose you had radio buttons with two choices (and a situation where radio buttons would be preferable to a checkbox, like say for Male/Female). How do you easily tell whether a circle filled with black or a circle filled with white represents the selected choice? I think the typical partially filled circle is clearer.
– jamesdlin
Mar 20 at 3:55
|
show 2 more comments
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.
New contributor
Sinstein is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
6
The second row has the same problem as the first. Is that a selected white dot with a circle around it, or a selected black dot with a circle around it?
– Mr.Mindor
Mar 21 at 15:10
@Mr.Mindor I would argue that is where the outer circles help. The inner circle being "filled" denotes that it is activated. What denotes "filled", while subjective, can be deduced from how the inner circle behaves w.r.t to the outer ring (in colour).
– Sinstein
Mar 22 at 7:09
I'll grant you that it does help, it's not quite as bad as the first row; however, if you have to argue, then there is clearly room for confusion. How is one to deduce the behavior of the inner circle? If you have to interact with it to be sure, then it clearly isn't communicating its state well enough. The standard radio button does a better job: only the selected option has an inner dot at all. (no 'empty' inner circle.)
– Mr.Mindor
Mar 22 at 15:51
add a comment |
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.
New contributor
Sinstein is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
6
The second row has the same problem as the first. Is that a selected white dot with a circle around it, or a selected black dot with a circle around it?
– Mr.Mindor
Mar 21 at 15:10
@Mr.Mindor I would argue that is where the outer circles help. The inner circle being "filled" denotes that it is activated. What denotes "filled", while subjective, can be deduced from how the inner circle behaves w.r.t to the outer ring (in colour).
– Sinstein
Mar 22 at 7:09
I'll grant you that it does help, it's not quite as bad as the first row; however, if you have to argue, then there is clearly room for confusion. How is one to deduce the behavior of the inner circle? If you have to interact with it to be sure, then it clearly isn't communicating its state well enough. The standard radio button does a better job: only the selected option has an inner dot at all. (no 'empty' inner circle.)
– Mr.Mindor
Mar 22 at 15:51
add a comment |
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.
New contributor
Sinstein is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
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.
New contributor
Sinstein is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
New contributor
Sinstein is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
answered Mar 20 at 4:56
SinsteinSinstein
28127
28127
New contributor
Sinstein is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
New contributor
Sinstein is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
Sinstein is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
6
The second row has the same problem as the first. Is that a selected white dot with a circle around it, or a selected black dot with a circle around it?
– Mr.Mindor
Mar 21 at 15:10
@Mr.Mindor I would argue that is where the outer circles help. The inner circle being "filled" denotes that it is activated. What denotes "filled", while subjective, can be deduced from how the inner circle behaves w.r.t to the outer ring (in colour).
– Sinstein
Mar 22 at 7:09
I'll grant you that it does help, it's not quite as bad as the first row; however, if you have to argue, then there is clearly room for confusion. How is one to deduce the behavior of the inner circle? If you have to interact with it to be sure, then it clearly isn't communicating its state well enough. The standard radio button does a better job: only the selected option has an inner dot at all. (no 'empty' inner circle.)
– Mr.Mindor
Mar 22 at 15:51
add a comment |
6
The second row has the same problem as the first. Is that a selected white dot with a circle around it, or a selected black dot with a circle around it?
– Mr.Mindor
Mar 21 at 15:10
@Mr.Mindor I would argue that is where the outer circles help. The inner circle being "filled" denotes that it is activated. What denotes "filled", while subjective, can be deduced from how the inner circle behaves w.r.t to the outer ring (in colour).
– Sinstein
Mar 22 at 7:09
I'll grant you that it does help, it's not quite as bad as the first row; however, if you have to argue, then there is clearly room for confusion. How is one to deduce the behavior of the inner circle? If you have to interact with it to be sure, then it clearly isn't communicating its state well enough. The standard radio button does a better job: only the selected option has an inner dot at all. (no 'empty' inner circle.)
– Mr.Mindor
Mar 22 at 15:51
6
6
The second row has the same problem as the first. Is that a selected white dot with a circle around it, or a selected black dot with a circle around it?
– Mr.Mindor
Mar 21 at 15:10
The second row has the same problem as the first. Is that a selected white dot with a circle around it, or a selected black dot with a circle around it?
– Mr.Mindor
Mar 21 at 15:10
@Mr.Mindor I would argue that is where the outer circles help. The inner circle being "filled" denotes that it is activated. What denotes "filled", while subjective, can be deduced from how the inner circle behaves w.r.t to the outer ring (in colour).
– Sinstein
Mar 22 at 7:09
@Mr.Mindor I would argue that is where the outer circles help. The inner circle being "filled" denotes that it is activated. What denotes "filled", while subjective, can be deduced from how the inner circle behaves w.r.t to the outer ring (in colour).
– Sinstein
Mar 22 at 7:09
I'll grant you that it does help, it's not quite as bad as the first row; however, if you have to argue, then there is clearly room for confusion. How is one to deduce the behavior of the inner circle? If you have to interact with it to be sure, then it clearly isn't communicating its state well enough. The standard radio button does a better job: only the selected option has an inner dot at all. (no 'empty' inner circle.)
– Mr.Mindor
Mar 22 at 15:51
I'll grant you that it does help, it's not quite as bad as the first row; however, if you have to argue, then there is clearly room for confusion. How is one to deduce the behavior of the inner circle? If you have to interact with it to be sure, then it clearly isn't communicating its state well enough. The standard radio button does a better job: only the selected option has an inner dot at all. (no 'empty' inner circle.)
– Mr.Mindor
Mar 22 at 15:51
add a comment |
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.
4
Radio buttons were inspired by the physical radio buttons ( obviously enough ). Perhaps not. Personally, I only know what real-life radio buttons are because I was told about them in the first web development class I took. I don't think I've ever seen them myself.
– Justin Lardinois
Mar 19 at 22:57
7
I don't understand how this addresses the difference between the icon being filled or not
– mowwwalker
Mar 20 at 1:12
1
@JustinLardinois - Here is an article about the history of radio buttons. jitbit.com/alexblog/242-the-history-of-a-radio-button To be honest in my family the last radio with "radio-buttons" was thrown away 5 - 6 years away. So not that far away.
– Zasul
Mar 20 at 6:58
@mowwwalker - Can you please detail ? I did try to explain why the radio button looks how it looks , where it came from and as it got standardized to look like it is looking this days, any changes might cause some confusion but not necesary. This would be better proven by doing some user testing.
– Zasul
Mar 20 at 7:00
@Zasul so why are these arguments (answers to the question "should I do this?") in comments and not in the actual answer?
– Pierre Arlaud
Mar 21 at 8:44
|
show 2 more comments
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.
4
Radio buttons were inspired by the physical radio buttons ( obviously enough ). Perhaps not. Personally, I only know what real-life radio buttons are because I was told about them in the first web development class I took. I don't think I've ever seen them myself.
– Justin Lardinois
Mar 19 at 22:57
7
I don't understand how this addresses the difference between the icon being filled or not
– mowwwalker
Mar 20 at 1:12
1
@JustinLardinois - Here is an article about the history of radio buttons. jitbit.com/alexblog/242-the-history-of-a-radio-button To be honest in my family the last radio with "radio-buttons" was thrown away 5 - 6 years away. So not that far away.
– Zasul
Mar 20 at 6:58
@mowwwalker - Can you please detail ? I did try to explain why the radio button looks how it looks , where it came from and as it got standardized to look like it is looking this days, any changes might cause some confusion but not necesary. This would be better proven by doing some user testing.
– Zasul
Mar 20 at 7:00
@Zasul so why are these arguments (answers to the question "should I do this?") in comments and not in the actual answer?
– Pierre Arlaud
Mar 21 at 8:44
|
show 2 more comments
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.
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.
answered Mar 19 at 14:49
ZasulZasul
1,352216
1,352216
4
Radio buttons were inspired by the physical radio buttons ( obviously enough ). Perhaps not. Personally, I only know what real-life radio buttons are because I was told about them in the first web development class I took. I don't think I've ever seen them myself.
– Justin Lardinois
Mar 19 at 22:57
7
I don't understand how this addresses the difference between the icon being filled or not
– mowwwalker
Mar 20 at 1:12
1
@JustinLardinois - Here is an article about the history of radio buttons. jitbit.com/alexblog/242-the-history-of-a-radio-button To be honest in my family the last radio with "radio-buttons" was thrown away 5 - 6 years away. So not that far away.
– Zasul
Mar 20 at 6:58
@mowwwalker - Can you please detail ? I did try to explain why the radio button looks how it looks , where it came from and as it got standardized to look like it is looking this days, any changes might cause some confusion but not necesary. This would be better proven by doing some user testing.
– Zasul
Mar 20 at 7:00
@Zasul so why are these arguments (answers to the question "should I do this?") in comments and not in the actual answer?
– Pierre Arlaud
Mar 21 at 8:44
|
show 2 more comments
4
Radio buttons were inspired by the physical radio buttons ( obviously enough ). Perhaps not. Personally, I only know what real-life radio buttons are because I was told about them in the first web development class I took. I don't think I've ever seen them myself.
– Justin Lardinois
Mar 19 at 22:57
7
I don't understand how this addresses the difference between the icon being filled or not
– mowwwalker
Mar 20 at 1:12
1
@JustinLardinois - Here is an article about the history of radio buttons. jitbit.com/alexblog/242-the-history-of-a-radio-button To be honest in my family the last radio with "radio-buttons" was thrown away 5 - 6 years away. So not that far away.
– Zasul
Mar 20 at 6:58
@mowwwalker - Can you please detail ? I did try to explain why the radio button looks how it looks , where it came from and as it got standardized to look like it is looking this days, any changes might cause some confusion but not necesary. This would be better proven by doing some user testing.
– Zasul
Mar 20 at 7:00
@Zasul so why are these arguments (answers to the question "should I do this?") in comments and not in the actual answer?
– Pierre Arlaud
Mar 21 at 8:44
4
4
Radio buttons were inspired by the physical radio buttons ( obviously enough ). Perhaps not. Personally, I only know what real-life radio buttons are because I was told about them in the first web development class I took. I don't think I've ever seen them myself.
– Justin Lardinois
Mar 19 at 22:57
Radio buttons were inspired by the physical radio buttons ( obviously enough ). Perhaps not. Personally, I only know what real-life radio buttons are because I was told about them in the first web development class I took. I don't think I've ever seen them myself.
– Justin Lardinois
Mar 19 at 22:57
7
7
I don't understand how this addresses the difference between the icon being filled or not
– mowwwalker
Mar 20 at 1:12
I don't understand how this addresses the difference between the icon being filled or not
– mowwwalker
Mar 20 at 1:12
1
1
@JustinLardinois - Here is an article about the history of radio buttons. jitbit.com/alexblog/242-the-history-of-a-radio-button To be honest in my family the last radio with "radio-buttons" was thrown away 5 - 6 years away. So not that far away.
– Zasul
Mar 20 at 6:58
@JustinLardinois - Here is an article about the history of radio buttons. jitbit.com/alexblog/242-the-history-of-a-radio-button To be honest in my family the last radio with "radio-buttons" was thrown away 5 - 6 years away. So not that far away.
– Zasul
Mar 20 at 6:58
@mowwwalker - Can you please detail ? I did try to explain why the radio button looks how it looks , where it came from and as it got standardized to look like it is looking this days, any changes might cause some confusion but not necesary. This would be better proven by doing some user testing.
– Zasul
Mar 20 at 7:00
@mowwwalker - Can you please detail ? I did try to explain why the radio button looks how it looks , where it came from and as it got standardized to look like it is looking this days, any changes might cause some confusion but not necesary. This would be better proven by doing some user testing.
– Zasul
Mar 20 at 7:00
@Zasul so why are these arguments (answers to the question "should I do this?") in comments and not in the actual answer?
– Pierre Arlaud
Mar 21 at 8:44
@Zasul so why are these arguments (answers to the question "should I do this?") in comments and not in the actual answer?
– Pierre Arlaud
Mar 21 at 8:44
|
show 2 more comments
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.
3
Match Between the System and the Real Worldis 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.
– Private
Mar 20 at 5:04
3
But people are acclimated with radio buttons in another websites. It's like the floppy disk for saving, people don't use it anymore, but everyone recognizes as the save button.
– Aline
Mar 20 at 11:01
3
Yes, I think the principle here is "least surprise" or "most familiar" rather than any reference to the real world. If the aim was to make them look like the real world, we could create a much better visualisation with modern graphics resolutions; but the aim is actually to mimic older user interfaces, whose origins are of historical curiosity but mostly irrelevant.
– IMSoP
Mar 20 at 11:11
1
Since no picture in that article actually shows the buttons in a selected state, I went and dug one up Hopefully a useful example. Radio buttons were really really chunky. It's meant to be sight-unseen levels of tactile, you instantly know which button is currently pressed because you can feel it, whether you're wearing gloves or it's in your pocket.
– Ruadhan2300
Mar 21 at 9:17
add a comment |
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.
3
Match Between the System and the Real Worldis 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.
– Private
Mar 20 at 5:04
3
But people are acclimated with radio buttons in another websites. It's like the floppy disk for saving, people don't use it anymore, but everyone recognizes as the save button.
– Aline
Mar 20 at 11:01
3
Yes, I think the principle here is "least surprise" or "most familiar" rather than any reference to the real world. If the aim was to make them look like the real world, we could create a much better visualisation with modern graphics resolutions; but the aim is actually to mimic older user interfaces, whose origins are of historical curiosity but mostly irrelevant.
– IMSoP
Mar 20 at 11:11
1
Since no picture in that article actually shows the buttons in a selected state, I went and dug one up Hopefully a useful example. Radio buttons were really really chunky. It's meant to be sight-unseen levels of tactile, you instantly know which button is currently pressed because you can feel it, whether you're wearing gloves or it's in your pocket.
– Ruadhan2300
Mar 21 at 9:17
add a comment |
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.
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.
edited Mar 20 at 11:06
answered Mar 19 at 15:42
AlineAline
938315
938315
3
Match Between the System and the Real Worldis 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.
– Private
Mar 20 at 5:04
3
But people are acclimated with radio buttons in another websites. It's like the floppy disk for saving, people don't use it anymore, but everyone recognizes as the save button.
– Aline
Mar 20 at 11:01
3
Yes, I think the principle here is "least surprise" or "most familiar" rather than any reference to the real world. If the aim was to make them look like the real world, we could create a much better visualisation with modern graphics resolutions; but the aim is actually to mimic older user interfaces, whose origins are of historical curiosity but mostly irrelevant.
– IMSoP
Mar 20 at 11:11
1
Since no picture in that article actually shows the buttons in a selected state, I went and dug one up Hopefully a useful example. Radio buttons were really really chunky. It's meant to be sight-unseen levels of tactile, you instantly know which button is currently pressed because you can feel it, whether you're wearing gloves or it's in your pocket.
– Ruadhan2300
Mar 21 at 9:17
add a comment |
3
Match Between the System and the Real Worldis 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.
– Private
Mar 20 at 5:04
3
But people are acclimated with radio buttons in another websites. It's like the floppy disk for saving, people don't use it anymore, but everyone recognizes as the save button.
– Aline
Mar 20 at 11:01
3
Yes, I think the principle here is "least surprise" or "most familiar" rather than any reference to the real world. If the aim was to make them look like the real world, we could create a much better visualisation with modern graphics resolutions; but the aim is actually to mimic older user interfaces, whose origins are of historical curiosity but mostly irrelevant.
– IMSoP
Mar 20 at 11:11
1
Since no picture in that article actually shows the buttons in a selected state, I went and dug one up Hopefully a useful example. Radio buttons were really really chunky. It's meant to be sight-unseen levels of tactile, you instantly know which button is currently pressed because you can feel it, whether you're wearing gloves or it's in your pocket.
– Ruadhan2300
Mar 21 at 9:17
3
3
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.– Private
Mar 20 at 5:04
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.– Private
Mar 20 at 5:04
3
3
But people are acclimated with radio buttons in another websites. It's like the floppy disk for saving, people don't use it anymore, but everyone recognizes as the save button.
– Aline
Mar 20 at 11:01
But people are acclimated with radio buttons in another websites. It's like the floppy disk for saving, people don't use it anymore, but everyone recognizes as the save button.
– Aline
Mar 20 at 11:01
3
3
Yes, I think the principle here is "least surprise" or "most familiar" rather than any reference to the real world. If the aim was to make them look like the real world, we could create a much better visualisation with modern graphics resolutions; but the aim is actually to mimic older user interfaces, whose origins are of historical curiosity but mostly irrelevant.
– IMSoP
Mar 20 at 11:11
Yes, I think the principle here is "least surprise" or "most familiar" rather than any reference to the real world. If the aim was to make them look like the real world, we could create a much better visualisation with modern graphics resolutions; but the aim is actually to mimic older user interfaces, whose origins are of historical curiosity but mostly irrelevant.
– IMSoP
Mar 20 at 11:11
1
1
Since no picture in that article actually shows the buttons in a selected state, I went and dug one up Hopefully a useful example. Radio buttons were really really chunky. It's meant to be sight-unseen levels of tactile, you instantly know which button is currently pressed because you can feel it, whether you're wearing gloves or it's in your pocket.
– Ruadhan2300
Mar 21 at 9:17
Since no picture in that article actually shows the buttons in a selected state, I went and dug one up Hopefully a useful example. Radio buttons were really really chunky. It's meant to be sight-unseen levels of tactile, you instantly know which button is currently pressed because you can feel it, whether you're wearing gloves or it's in your pocket.
– Ruadhan2300
Mar 21 at 9:17
add a comment |
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".
New contributor
kajacx is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
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".
New contributor
kajacx is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
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".
New contributor
kajacx is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
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".
New contributor
kajacx is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
New contributor
kajacx is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
answered Mar 20 at 10:57
kajacxkajacx
1713
1713
New contributor
kajacx is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
New contributor
kajacx is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
kajacx is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
add a comment |
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.
New contributor
Kgee is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
I don't think that was a concern in the original HTML specs - but it surely is valid today.
– Mayo
Mar 22 at 13:08
add a comment |
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.
New contributor
Kgee is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
I don't think that was a concern in the original HTML specs - but it surely is valid today.
– Mayo
Mar 22 at 13:08
add a comment |
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.
New contributor
Kgee is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
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.
New contributor
Kgee is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
New contributor
Kgee is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
answered Mar 20 at 20:23
KgeeKgee
211
211
New contributor
Kgee is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
New contributor
Kgee is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
Kgee is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
I don't think that was a concern in the original HTML specs - but it surely is valid today.
– Mayo
Mar 22 at 13:08
add a comment |
I don't think that was a concern in the original HTML specs - but it surely is valid today.
– Mayo
Mar 22 at 13:08
I don't think that was a concern in the original HTML specs - but it surely is valid today.
– Mayo
Mar 22 at 13:08
I don't think that was a concern in the original HTML specs - but it surely is valid today.
– Mayo
Mar 22 at 13:08
add a comment |
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.
New contributor
AxGryndr is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
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.
New contributor
AxGryndr is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
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.
New contributor
AxGryndr is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
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.
New contributor
AxGryndr is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
New contributor
AxGryndr is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
answered Mar 21 at 22:10
AxGryndrAxGryndr
1212
1212
New contributor
AxGryndr is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
New contributor
AxGryndr is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
AxGryndr is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
add a comment |
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.
New contributor
user124640 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
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.
New contributor
user124640 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
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.
New contributor
user124640 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
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.
New contributor
user124640 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
New contributor
user124640 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
answered 8 hours ago
user124640user124640
1
1
New contributor
user124640 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
New contributor
user124640 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
user124640 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
add a comment |
Thanks for contributing an answer to User Experience Stack Exchange!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fux.stackexchange.com%2fquestions%2f124484%2fwhy-do-radio-buttons-not-fill-the-entire-outer-circle%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
46
How would you distinguish the states of a fully filled radio button and an empty radio button? For all the user knows, you might have chosen black as the color of an empty radio button. Good UX design should be obvious, and should not require fiddling with the controls to see how they behave.
– Cody Gray
Mar 19 at 23:14
16
Why would it be any more confusing than choosing white, or blue, or any other color? Maybe it's a "dark" user interface. The point is, the user doesn't know which color corresponds to which state independent of context, which means there is a UI problem.
– Cody Gray
Mar 20 at 7:38
13
I see that kind of design error everywhere. Two buttons, one is selected, the other is not. One is (for example) light blue and the other is orange. Clicking one toggles the colors, but there's no default understanding of which color is the 'selected' color.
– Graham
Mar 20 at 13:44
4
Something often forgotten about old physical radio buttons is that once you pressed one in, you could half-press a different button and it would cause the selected button to pop back out, while not actually engaging the newly pressed button. So you COULD return to a "no selection state" quite easily.
– Graham
Mar 20 at 14:25
4
@Graham Whilst it was physically possible to return to a "no selection state", I don't believe this served any purpose. In fact, I think the radio would continue to behave as if the button that just popped out were still pressed in. Hence not being able to do this with the GUI version.
– bornfromanegg
Mar 20 at 15:05