Why do Radio Buttons not fill the entire outer circle?
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
edited 10 hours ago
maxathousand
11.1k51944
asked 11 hours ago
RobbyReindeerRobbyReindeer
5,54212244
add a comment |
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
edited 10 hours ago
maxathousand
11.1k51944
asked 11 hours ago
RobbyReindeerRobbyReindeer
5,54212244
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
2 hours ago
add a comment |
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
edited 10 hours ago
maxathousand
11.1k51944
asked 11 hours ago
RobbyReindeerRobbyReindeer
5,54212244
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 10 hours ago
maxathousand
11.1k51944
asked 11 hours ago
RobbyReindeerRobbyReindeer
5,54212244
edited 10 hours ago
maxathousand
11.1k51944
asked 11 hours ago
RobbyReindeerRobbyReindeer
5,54212244
edited 10 hours ago
maxathousand
11.1k51944
edited 10 hours ago
maxathousand
11.1k51944
edited 10 hours ago
maxathousand
11.1k51944
11.1k51944
asked 11 hours ago
RobbyReindeerRobbyReindeer
5,54212244
asked 11 hours ago
RobbyReindeerRobbyReindeer
5,54212244
asked 11 hours ago
RobbyReindeerRobbyReindeer
5,54212244
5,54212244
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
2 hours ago
add a comment |
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
2 hours ago
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
2 hours ago
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
2 hours ago
add a comment |
3 Answers
3
active
oldest
votes
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 11 hours ago
ZasulZasul
1,243216
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
3 hours ago
I don't understand how this addresses the difference between the icon being filled or not
– mowwwalker
53 mins ago
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, so unless you have a really good reason to change that, I think you should use the standard.
answered 10 hours ago
AlineAline
858314
add a comment |
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 11 hours ago
DanielilloDanielillo
3657
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
11 hours ago
I think your best assumption is not correct, because with radio elements you would have only one radio input selected at most.
– Devin
11 hours ago
1
@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
5 hours ago
@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
5 hours ago
1
@Devin you don't even have to be that clever to break conventions. just have multiple radiogroups right next to each other and a full circle is ambiguous
– worc
4 hours ago
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
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
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 11 hours ago
ZasulZasul
1,243216
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
3 hours ago
I don't understand how this addresses the difference between the icon being filled or not
– mowwwalker
53 mins ago
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.
answered 11 hours ago
ZasulZasul
1,243216
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
3 hours ago
I don't understand how this addresses the difference between the icon being filled or not
– mowwwalker
53 mins ago
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.
answered 11 hours ago
ZasulZasul
1,243216
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 11 hours ago
ZasulZasul
1,243216
answered 11 hours ago
ZasulZasul
1,243216
answered 11 hours ago
ZasulZasul
1,243216
answered 11 hours ago
ZasulZasul
1,243216
1,243216
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
3 hours ago
I don't understand how this addresses the difference between the icon being filled or not
– mowwwalker
53 mins ago
add a comment |
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
3 hours ago
I don't understand how this addresses the difference between the icon being filled or not
– mowwwalker
53 mins ago
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
3 hours ago
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
3 hours ago
I don't understand how this addresses the difference between the icon being filled or not
– mowwwalker
53 mins ago
I don't understand how this addresses the difference between the icon being filled or not
– mowwwalker
53 mins ago
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, so unless you have a really good reason to change that, I think you should use the standard.
answered 10 hours ago
AlineAline
858314
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, so unless you have a really good reason to change that, I think you should use the standard.
answered 10 hours ago
AlineAline
858314
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, so unless you have a really good reason to change that, I think you should use the standard.
answered 10 hours ago
AlineAline
858314
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, so unless you have a really good reason to change that, I think you should use the standard.
answered 10 hours ago
AlineAline
858314
answered 10 hours ago
AlineAline
858314
answered 10 hours ago
AlineAline
858314
answered 10 hours ago
AlineAline
858314
858314
add a comment |
add a comment |
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 11 hours ago
DanielilloDanielillo
3657
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
11 hours ago
I think your best assumption is not correct, because with radio elements you would have only one radio input selected at most.
– Devin
11 hours ago
1
@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
5 hours ago
@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
5 hours ago
1
@Devin you don't even have to be that clever to break conventions. just have multiple radiogroups right next to each other and a full circle is ambiguous
– worc
4 hours ago
add a comment |
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 11 hours ago
DanielilloDanielillo
3657
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
11 hours ago
I think your best assumption is not correct, because with radio elements you would have only one radio input selected at most.
– Devin
11 hours ago
1
@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
5 hours ago
@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
5 hours ago
1
@Devin you don't even have to be that clever to break conventions. just have multiple radiogroups right next to each other and a full circle is ambiguous
– worc
4 hours ago
add a comment |
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 11 hours ago
DanielilloDanielillo
3657
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 11 hours ago
DanielilloDanielillo
3657
answered 11 hours ago
DanielilloDanielillo
3657
answered 11 hours ago
DanielilloDanielillo
3657
answered 11 hours ago
DanielilloDanielillo
3657
3657
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
11 hours ago
I think your best assumption is not correct, because with radio elements you would have only one radio input selected at most.
– Devin
11 hours ago
1
@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
5 hours ago
@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
5 hours ago
1
@Devin you don't even have to be that clever to break conventions. just have multiple radiogroups right next to each other and a full circle is ambiguous
– worc
4 hours ago
add a comment |
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
11 hours ago
I think your best assumption is not correct, because with radio elements you would have only one radio input selected at most.
– Devin
11 hours ago
1
@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
5 hours ago
@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
5 hours ago
1
@Devin you don't even have to be that clever to break conventions. just have multiple radiogroups right next to each other and a full circle is ambiguous
– worc
4 hours ago
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
11 hours ago
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
11 hours ago
I think your best assumption is not correct, because with radio elements you would have only one radio input selected at most.
– Devin
11 hours ago
I think your best assumption is not correct, because with radio elements you would have only one radio input selected at most.
– Devin
11 hours ago
1
1
@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
5 hours ago
@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
5 hours ago
@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
5 hours ago
@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
5 hours ago
1
1
@Devin you don't even have to be that clever to break conventions. just have multiple radiogroups right next to each other and a full circle is ambiguous
– worc
4 hours ago
@Devin you don't even have to be that clever to break conventions. just have multiple radiogroups right next to each other and a full circle is ambiguous
– worc
4 hours ago
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
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
2 hours ago