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
Error in master's thesis, I do not know what to do
Connection Between Knot Theory and Number Theory
How would a solely written language work mechanically
Comic-book: Kids find a dead female superhero in the woods
C++ lambda syntax
Box half filled color
Is divisi notation needed for brass or woodwind in an orchestra?
is this saw blade faulty?
Exposing a company lying about themselves in a tightly knit industry (videogames) : Is my career at risk on the long run?
Put the phone down / Put down the phone
python displays `n` instead of breaking a line
I keep switching characters, how do I stop?
Would this string work as string?
Has the laser at Magurele, Romania reached the tenth of the Sun power?
How are passwords stolen from companies if they only store hashes?
Control width of columns in a tabular environment
How to avoid the Conga Line of Death?
Why is "la Gestapo" feminine?
Get top 1 row value from third table while joining 3 tables mssql
"Marked down as someone wanting to sell shares." What does that mean?
Why do Radio Buttons not fill the entire outer circle?
Highest stage count that are used one right after the other?
Hot air balloons as primitive bombers
Are hand made posters acceptable in Academia?
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 5 hours ago
RobbyReindeerRobbyReindeer
5,52212244
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 5 hours ago
RobbyReindeerRobbyReindeer
5,52212244
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 5 hours ago
RobbyReindeerRobbyReindeer
5,52212244
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 5 hours ago
RobbyReindeerRobbyReindeer
5,52212244
edited 4 hours ago
maxathousand
11.1k51944
asked 5 hours ago
RobbyReindeerRobbyReindeer
5,52212244
edited 4 hours ago
maxathousand
11.1k51944
edited 4 hours ago
maxathousand
11.1k51944
edited 4 hours ago
maxathousand
11.1k51944
11.1k51944
asked 5 hours ago
RobbyReindeerRobbyReindeer
5,52212244
asked 5 hours ago
RobbyReindeerRobbyReindeer
5,52212244
asked 5 hours ago
RobbyReindeerRobbyReindeer
5,52212244
5,52212244
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,173215
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 4 hours ago
AlineAline
808314
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
3177
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');
var $window = $(window),
onScroll = function(e)
var $elem = $('.new-login-left'),
docViewTop = $window.scrollTop(),
docViewBottom = docViewTop + $window.height(),
elemTop = $elem.offset().top,
elemBottom = elemTop + $elem.height();
if ((docViewTop elemBottom))
StackExchange.using('gps', function() StackExchange.gps.track('embedded_signup_form.view', location: 'question_page' ); );
$window.unbind('scroll', onScroll);
;
$window.on('scroll', onScroll);
);
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,173215
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,173215
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,173215
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,173215
answered 5 hours ago
ZasulZasul
1,173215
answered 5 hours ago
ZasulZasul
1,173215
answered 5 hours ago
ZasulZasul
1,173215
1,173215
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 4 hours ago
AlineAline
808314
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 4 hours ago
AlineAline
808314
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 4 hours ago
AlineAline
808314
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 4 hours ago
AlineAline
808314
answered 4 hours ago
AlineAline
808314
answered 4 hours ago
AlineAline
808314
answered 4 hours ago
AlineAline
808314
808314
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
3177
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
3177
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
3177
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
3177
answered 5 hours ago
DanielilloDanielillo
3177
answered 5 hours ago
DanielilloDanielillo
3177
answered 5 hours ago
DanielilloDanielillo
3177
3177
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');
var $window = $(window),
onScroll = function(e)
var $elem = $('.new-login-left'),
docViewTop = $window.scrollTop(),
docViewBottom = docViewTop + $window.height(),
elemTop = $elem.offset().top,
elemBottom = elemTop + $elem.height();
if ((docViewTop elemBottom))
StackExchange.using('gps', function() StackExchange.gps.track('embedded_signup_form.view', location: 'question_page' ); );
$window.unbind('scroll', onScroll);
;
$window.on('scroll', onScroll);
);
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');
var $window = $(window),
onScroll = function(e)
var $elem = $('.new-login-left'),
docViewTop = $window.scrollTop(),
docViewBottom = docViewTop + $window.height(),
elemTop = $elem.offset().top,
elemBottom = elemTop + $elem.height();
if ((docViewTop elemBottom))
StackExchange.using('gps', function() StackExchange.gps.track('embedded_signup_form.view', location: 'question_page' ); );
$window.unbind('scroll', onScroll);
;
$window.on('scroll', onScroll);
);
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');
var $window = $(window),
onScroll = function(e)
var $elem = $('.new-login-left'),
docViewTop = $window.scrollTop(),
docViewBottom = docViewTop + $window.height(),
elemTop = $elem.offset().top,
elemBottom = elemTop + $elem.height();
if ((docViewTop elemBottom))
StackExchange.using('gps', function() StackExchange.gps.track('embedded_signup_form.view', location: 'question_page' ); );
$window.unbind('scroll', onScroll);
;
$window.on('scroll', onScroll);
);
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');
var $window = $(window),
onScroll = function(e)
var $elem = $('.new-login-left'),
docViewTop = $window.scrollTop(),
docViewBottom = docViewTop + $window.height(),
elemTop = $elem.offset().top,
elemBottom = elemTop + $elem.height();
if ((docViewTop elemBottom))
StackExchange.using('gps', function() StackExchange.gps.track('embedded_signup_form.view', location: 'question_page' ); );
$window.unbind('scroll', onScroll);
;
$window.on('scroll', onScroll);
);
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
