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













40















My question is simple:



Why do most radio buttons not fill their entire outer circle?



Example of standard radio button:



Example of standard radio button



(Unusual) Example of an entirely filled radio button:



enter image description here



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?










share|improve this question



















  • 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















40















My question is simple:



Why do most radio buttons not fill their entire outer circle?



Example of standard radio button:



Example of standard radio button



(Unusual) Example of an entirely filled radio button:



enter image description here



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?










share|improve this question



















  • 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













40












40








40


2






My question is simple:



Why do most radio buttons not fill their entire outer circle?



Example of standard radio button:



Example of standard radio button



(Unusual) Example of an entirely filled radio button:



enter image description here



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?










share|improve this question
















My question is simple:



Why do most radio buttons not fill their entire outer circle?



Example of standard radio button:



Example of standard radio button



(Unusual) Example of an entirely filled radio button:



enter image description here



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






share|improve this question















share|improve this question













share|improve this question




share|improve this question








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












  • 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










9 Answers
9






active

oldest

votes


















89














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:



Simply a black and white circle on a gray background



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:



White filled circle for selected



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.






share|improve this answer




















  • 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



















34














I guess a completely full radio button can be easily confused with a bulleted text:



enter image description here



Whereas an empty circle perceptually gives the feeling of incompleteness: needs filling or has to be filled:



enter image description here



Even in many cases one of these rings is already filled, which increases the feeling that they must be filled (checked):



enter image description here






share|improve this answer


















  • 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


















30














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.




Radio button styles



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.






share|improve this answer








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


















22














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.






share|improve this answer


















  • 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


















16














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.






share|improve this answer




















  • 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






  • 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



















7














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".






share|improve this answer








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.



























    2














    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.






    share|improve this answer








    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


















    2














    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.






    share|improve this answer








    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.



























      0














      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.






      share|improve this answer








      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.



















        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
        );



        );













        draft saved

        draft discarded


















        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









        89














        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:



        Simply a black and white circle on a gray background



        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:



        White filled circle for selected



        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.






        share|improve this answer




















        • 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
















        89














        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:



        Simply a black and white circle on a gray background



        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:



        White filled circle for selected



        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.






        share|improve this answer




















        • 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














        89












        89








        89







        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:



        Simply a black and white circle on a gray background



        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:



        White filled circle for selected



        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.






        share|improve this answer















        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:



        Simply a black and white circle on a gray background



        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:



        White filled circle for selected



        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.







        share|improve this answer














        share|improve this answer



        share|improve this answer








        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













        • 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














        34














        I guess a completely full radio button can be easily confused with a bulleted text:



        enter image description here



        Whereas an empty circle perceptually gives the feeling of incompleteness: needs filling or has to be filled:



        enter image description here



        Even in many cases one of these rings is already filled, which increases the feeling that they must be filled (checked):



        enter image description here






        share|improve this answer


















        • 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















        34














        I guess a completely full radio button can be easily confused with a bulleted text:



        enter image description here



        Whereas an empty circle perceptually gives the feeling of incompleteness: needs filling or has to be filled:



        enter image description here



        Even in many cases one of these rings is already filled, which increases the feeling that they must be filled (checked):



        enter image description here






        share|improve this answer


















        • 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













        34












        34








        34







        I guess a completely full radio button can be easily confused with a bulleted text:



        enter image description here



        Whereas an empty circle perceptually gives the feeling of incompleteness: needs filling or has to be filled:



        enter image description here



        Even in many cases one of these rings is already filled, which increases the feeling that they must be filled (checked):



        enter image description here






        share|improve this answer













        I guess a completely full radio button can be easily confused with a bulleted text:



        enter image description here



        Whereas an empty circle perceptually gives the feeling of incompleteness: needs filling or has to be filled:



        enter image description here



        Even in many cases one of these rings is already filled, which increases the feeling that they must be filled (checked):



        enter image description here







        share|improve this answer












        share|improve this answer



        share|improve this answer










        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












        • 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











        30














        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.




        Radio button styles



        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.






        share|improve this answer








        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















        30














        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.




        Radio button styles



        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.






        share|improve this answer








        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













        30












        30








        30







        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.




        Radio button styles



        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.






        share|improve this answer








        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.




        Radio button styles



        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.







        share|improve this answer








        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.









        share|improve this answer



        share|improve this answer






        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












        • 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











        22














        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.






        share|improve this answer


















        • 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















        22














        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.






        share|improve this answer


















        • 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













        22












        22








        22







        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.






        share|improve this answer













        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.







        share|improve this answer












        share|improve this answer



        share|improve this answer










        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












        • 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











        16














        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.






        share|improve this answer




















        • 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






        • 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
















        16














        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.






        share|improve this answer




















        • 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






        • 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














        16












        16








        16







        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.






        share|improve this answer















        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.







        share|improve this answer














        share|improve this answer



        share|improve this answer








        edited Mar 20 at 11:06

























        answered Mar 19 at 15:42









        AlineAline

        938315




        938315







        • 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






        • 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





          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





          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












        7














        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".






        share|improve this answer








        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.
























          7














          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".






          share|improve this answer








          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.






















            7












            7








            7







            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".






            share|improve this answer








            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".







            share|improve this answer








            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.









            share|improve this answer



            share|improve this answer






            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.





















                2














                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.






                share|improve this answer








                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















                2














                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.






                share|improve this answer








                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













                2












                2








                2







                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.






                share|improve this answer








                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.







                share|improve this answer








                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.









                share|improve this answer



                share|improve this answer






                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

















                • 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











                2














                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.






                share|improve this answer








                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.
























                  2














                  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.






                  share|improve this answer








                  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.






















                    2












                    2








                    2







                    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.






                    share|improve this answer








                    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.







                    share|improve this answer








                    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.









                    share|improve this answer



                    share|improve this answer






                    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.





















                        0














                        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.






                        share|improve this answer








                        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.
























                          0














                          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.






                          share|improve this answer








                          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.






















                            0












                            0








                            0







                            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.






                            share|improve this answer








                            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.







                            share|improve this answer








                            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.









                            share|improve this answer



                            share|improve this answer






                            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.



























                                draft saved

                                draft discarded
















































                                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.




                                draft saved


                                draft discarded














                                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





















































                                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







                                Popular posts from this blog

                                Is flight data recorder erased after every flight?When are black boxes used?What protects the location beacon (pinger) of a flight data recorder?Is there anywhere I can pick up raw flight data recorder information?Who legally owns the Flight Data Recorder?Constructing flight recorder dataWhy are FDRs and CVRs still two separate physical devices?What are the data elements shown on the GE235 flight data recorder (FDR) plot?Are CVR and FDR reset after every flight?What is the format of data stored by a Flight Data Recorder?How much data is stored in the flight data recorder per hour in a typical flight of an A380?Is a smart flight data recorder possible?

                                Which is better: GPT or RelGAN for text generation?2019 Community Moderator ElectionWhat is the difference between TextGAN and LM for text generation?GANs (generative adversarial networks) possible for text as well?Generator loss not decreasing- text to image synthesisChoosing a right algorithm for template-based text generationHow should I format input and output for text generation with LSTMsGumbel Softmax vs Vanilla Softmax for GAN trainingWhich neural network to choose for classification from text/speech?NLP text autoencoder that generates text in poetic meterWhat is the interpretation of the expectation notation in the GAN formulation?What is the difference between TextGAN and LM for text generation?How to prepare the data for text generation task

                                Is there a general name for the setup in which payoffs are not known exactly but players try to influence each other's perception of the payoffs?Osborne, Nash equilibria and the correctness of beliefsIs there a name for this family of games (Binomial games?)?Perfect Bayesian EquilibriumCalculating mixed strategy equilibrium in battle of sexesPure Strategy SPNEIs there a commitment mechanism which allows players to achieve pareto optimal solutions?Extensive Form GamesAn $n$-player prisoner's dilemma where a coalition of 2 players is better off defectingTit-For-Stat Strategy Best RepliesPotential solutions of the $n$-player Prisoner's Dilemma