Why do Radio Buttons not fill the entire outer circle?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
Weird lines in Microsoft Word
Why is indicated airspeed rather than ground speed used during the takeoff roll?
Friend wants my recommendation but I don't want to give it to him
Did I make a mistake by ccing email to boss to others?
How do you justify more code being written by following clean code practices?
Started in 1987 vs. Starting in 1987
Why do Radio Buttons not fill the entire outer circle?
How can I extract data from text file?
Strange behavior in TikZ draw command
How do I lift the insulation blower into the attic?
What's the meaning of "what it means for something to be something"?
Pre-Employment Background Check With Consent For Future Checks
Why didn't Voldemort know what Grindelwald looked like?
Do people actually use the word "kaputt" in conversation?
Can creatures abilities target that creature itself?
What is this high flying aircraft over Pennsylvania?
Put the phone down / Put down the phone
Do native speakers use "ultima" and "proxima" frequently in spoken English?
Hashing password to increase entropy
Travelling in US for more than 90 days
Exposing a company lying about themselves in a tightly knit industry (videogames) : Is my career at risk on the long run?
Why would five hundred and five same as one?
How would a solely written language work mechanically
Magnifying glass in hyperbolic space
Why do Radio Buttons not fill the entire outer circle?
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
edited 4 hours ago
maxathousand
11.1k51944
asked 6 hours ago
RobbyReindeerRobbyReindeer
5,52712244
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 4 hours ago
maxathousand
11.1k51944
asked 6 hours ago
RobbyReindeerRobbyReindeer
5,52712244
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 4 hours ago
maxathousand
11.1k51944
asked 6 hours ago
RobbyReindeerRobbyReindeer
5,52712244
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 4 hours ago
maxathousand
11.1k51944
asked 6 hours ago
RobbyReindeerRobbyReindeer
5,52712244
edited 4 hours ago
maxathousand
11.1k51944
asked 6 hours ago
RobbyReindeerRobbyReindeer
5,52712244
edited 4 hours ago
maxathousand
11.1k51944
edited 4 hours ago
maxathousand
11.1k51944
edited 4 hours ago
maxathousand
11.1k51944
11.1k51944
asked 6 hours ago
RobbyReindeerRobbyReindeer
5,52712244
asked 6 hours ago
RobbyReindeerRobbyReindeer
5,52712244
asked 6 hours ago
RobbyReindeerRobbyReindeer
5,52712244
5,52712244
add a comment |
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 5 hours ago
ZasulZasul
1,183215
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 5 hours ago
AlineAline
818314
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 5 hours ago
DanielilloDanielillo
3257
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
5 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
5 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 5 hours ago
ZasulZasul
1,183215
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 5 hours ago
ZasulZasul
1,183215
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 5 hours ago
ZasulZasul
1,183215
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 5 hours ago
ZasulZasul
1,183215
answered 5 hours ago
ZasulZasul
1,183215
answered 5 hours ago
ZasulZasul
1,183215
answered 5 hours ago
ZasulZasul
1,183215
1,183215
add a comment |
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 5 hours ago
AlineAline
818314
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 5 hours ago
AlineAline
818314
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 5 hours ago
AlineAline
818314
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 5 hours ago
AlineAline
818314
answered 5 hours ago
AlineAline
818314
answered 5 hours ago
AlineAline
818314
answered 5 hours ago
AlineAline
818314
818314
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 5 hours ago
DanielilloDanielillo
3257
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
5 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
5 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 5 hours ago
DanielilloDanielillo
3257
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
5 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
5 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 5 hours ago
DanielilloDanielillo
3257
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 5 hours ago
DanielilloDanielillo
3257
answered 5 hours ago
DanielilloDanielillo
3257
answered 5 hours ago
DanielilloDanielillo
3257
answered 5 hours ago
DanielilloDanielillo
3257
3257
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
5 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
5 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
5 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
5 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
5 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
5 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
5 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
5 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
