Why do Radio Buttons not fill the entire outer circle?












5















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





























    5















    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



























      5












      5








      5








      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
















      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




      forms icons radio-buttons






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited 5 hours ago









      maxathousand

      11.1k51944




      11.1k51944










      asked 7 hours ago









      RobbyReindeerRobbyReindeer

      5,53212244




      5,53212244






















          3 Answers
          3






          active

          oldest

          votes


















          7














          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































            6














            This is a nice article about the history of radio buttons: https://www.jitbit.com/alexblog/242-the-history-of-a-radio-button/



            As said in the article:




            Radio buttons are named after the actual buttons used on old radios to switch between radio waves and, sometimes, preset frequencies. When a button was pressed, all other buttons would pop out.




            So, it was a skeuomorphic reason.



            I believe a fully filled radio button would confuse users, based on the principle of "Match Between the System and the Real World". It states that:




            Interfaces that follow real-world conventions and make information appear in a natural and logical order demonstrate empathy and acknowledgement for users.




            Users are used to radio buttons in this format, so unless you have a really good reason to change that, I think you should use the standard.






            share|improve this answer































              -1














              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
























              • 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
                6 hours ago











              • I think your best assumption is not correct, because with radio elements you would have only one radio input selected at most.

                – Devin
                6 hours ago






              • 1





                @Devin that's not strictly true. you can have more than radio button selected if you're feeling like breaking with convention. it's not a great idea, but it's generally possible in most interfaces.

                – worc
                57 mins ago











              • @worc native radio buttons ARE a convention, and a convention that motivates the question. Furthermore, to "break the convention" you would need to use checkboxes and disguise then as radio (so it wouldn't be a radio, it would be a checkbox with an image over it). Radio buttons allows for just one selected option at a time, see developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio

                – Devin
                44 mins ago






              • 1





                @Devin you don't even have to be that clever to break conventions. just have multiple radiogroups right next to each other and a full circle is ambiguous

                – worc
                33 mins ago











              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

























              3 Answers
              3






              active

              oldest

              votes








              3 Answers
              3






              active

              oldest

              votes









              active

              oldest

              votes






              active

              oldest

              votes









              7














              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




























                7














                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


























                  7












                  7








                  7







                  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 6 hours ago









                  ZasulZasul

                  1,203215




                  1,203215

























                      6














                      This is a nice article about the history of radio buttons: https://www.jitbit.com/alexblog/242-the-history-of-a-radio-button/



                      As said in the article:




                      Radio buttons are named after the actual buttons used on old radios to switch between radio waves and, sometimes, preset frequencies. When a button was pressed, all other buttons would pop out.




                      So, it was a skeuomorphic reason.



                      I believe a fully filled radio button would confuse users, based on the principle of "Match Between the System and the Real World". It states that:




                      Interfaces that follow real-world conventions and make information appear in a natural and logical order demonstrate empathy and acknowledgement for users.




                      Users are used to radio buttons in this format, so unless you have a really good reason to change that, I think you should use the standard.






                      share|improve this answer




























                        6














                        This is a nice article about the history of radio buttons: https://www.jitbit.com/alexblog/242-the-history-of-a-radio-button/



                        As said in the article:




                        Radio buttons are named after the actual buttons used on old radios to switch between radio waves and, sometimes, preset frequencies. When a button was pressed, all other buttons would pop out.




                        So, it was a skeuomorphic reason.



                        I believe a fully filled radio button would confuse users, based on the principle of "Match Between the System and the Real World". It states that:




                        Interfaces that follow real-world conventions and make information appear in a natural and logical order demonstrate empathy and acknowledgement for users.




                        Users are used to radio buttons in this format, so unless you have a really good reason to change that, I think you should use the standard.






                        share|improve this answer


























                          6












                          6








                          6







                          This is a nice article about the history of radio buttons: https://www.jitbit.com/alexblog/242-the-history-of-a-radio-button/



                          As said in the article:




                          Radio buttons are named after the actual buttons used on old radios to switch between radio waves and, sometimes, preset frequencies. When a button was pressed, all other buttons would pop out.




                          So, it was a skeuomorphic reason.



                          I believe a fully filled radio button would confuse users, based on the principle of "Match Between the System and the Real World". It states that:




                          Interfaces that follow real-world conventions and make information appear in a natural and logical order demonstrate empathy and acknowledgement for users.




                          Users are used to radio buttons in this format, so unless you have a really good reason to change that, I think you should use the standard.






                          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, 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










                          answered 5 hours ago









                          AlineAline

                          838314




                          838314























                              -1














                              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
























                              • 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
                                6 hours ago











                              • I think your best assumption is not correct, because with radio elements you would have only one radio input selected at most.

                                – Devin
                                6 hours ago






                              • 1





                                @Devin that's not strictly true. you can have more than radio button selected if you're feeling like breaking with convention. it's not a great idea, but it's generally possible in most interfaces.

                                – worc
                                57 mins ago











                              • @worc native radio buttons ARE a convention, and a convention that motivates the question. Furthermore, to "break the convention" you would need to use checkboxes and disguise then as radio (so it wouldn't be a radio, it would be a checkbox with an image over it). Radio buttons allows for just one selected option at a time, see developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio

                                – Devin
                                44 mins ago






                              • 1





                                @Devin you don't even have to be that clever to break conventions. just have multiple radiogroups right next to each other and a full circle is ambiguous

                                – worc
                                33 mins ago
















                              -1














                              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
























                              • 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
                                6 hours ago











                              • I think your best assumption is not correct, because with radio elements you would have only one radio input selected at most.

                                – Devin
                                6 hours ago






                              • 1





                                @Devin that's not strictly true. you can have more than radio button selected if you're feeling like breaking with convention. it's not a great idea, but it's generally possible in most interfaces.

                                – worc
                                57 mins ago











                              • @worc native radio buttons ARE a convention, and a convention that motivates the question. Furthermore, to "break the convention" you would need to use checkboxes and disguise then as radio (so it wouldn't be a radio, it would be a checkbox with an image over it). Radio buttons allows for just one selected option at a time, see developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio

                                – Devin
                                44 mins ago






                              • 1





                                @Devin you don't even have to be that clever to break conventions. just have multiple radiogroups right next to each other and a full circle is ambiguous

                                – worc
                                33 mins ago














                              -1












                              -1








                              -1







                              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 6 hours ago









                              DanielilloDanielillo

                              3257




                              3257













                              • On your first example, the title of the "list" would probably be a question and in the list itself, only one of the option would be a black circle. The other one would be regular radios.

                                – Zasul
                                6 hours ago











                              • I think your best assumption is not correct, because with radio elements you would have only one radio input selected at most.

                                – Devin
                                6 hours ago






                              • 1





                                @Devin that's not strictly true. you can have more than radio button selected if you're feeling like breaking with convention. it's not a great idea, but it's generally possible in most interfaces.

                                – worc
                                57 mins ago











                              • @worc native radio buttons ARE a convention, and a convention that motivates the question. Furthermore, to "break the convention" you would need to use checkboxes and disguise then as radio (so it wouldn't be a radio, it would be a checkbox with an image over it). Radio buttons allows for just one selected option at a time, see developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio

                                – Devin
                                44 mins ago






                              • 1





                                @Devin you don't even have to be that clever to break conventions. just have multiple radiogroups right next to each other and a full circle is ambiguous

                                – worc
                                33 mins ago



















                              • On your first example, the title of the "list" would probably be a question and in the list itself, only one of the option would be a black circle. The other one would be regular radios.

                                – Zasul
                                6 hours ago











                              • I think your best assumption is not correct, because with radio elements you would have only one radio input selected at most.

                                – Devin
                                6 hours ago






                              • 1





                                @Devin that's not strictly true. you can have more than radio button selected if you're feeling like breaking with convention. it's not a great idea, but it's generally possible in most interfaces.

                                – worc
                                57 mins ago











                              • @worc native radio buttons ARE a convention, and a convention that motivates the question. Furthermore, to "break the convention" you would need to use checkboxes and disguise then as radio (so it wouldn't be a radio, it would be a checkbox with an image over it). Radio buttons allows for just one selected option at a time, see developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio

                                – Devin
                                44 mins ago






                              • 1





                                @Devin you don't even have to be that clever to break conventions. just have multiple radiogroups right next to each other and a full circle is ambiguous

                                – worc
                                33 mins ago

















                              On your first example, the title of the "list" would probably be a question and in the list itself, only one of the option would be a black circle. The other one would be regular radios.

                              – Zasul
                              6 hours ago





                              On your first example, the title of the "list" would probably be a question and in the list itself, only one of the option would be a black circle. The other one would be regular radios.

                              – Zasul
                              6 hours ago













                              I think your best assumption is not correct, because with radio elements you would have only one radio input selected at most.

                              – Devin
                              6 hours ago





                              I think your best assumption is not correct, because with radio elements you would have only one radio input selected at most.

                              – Devin
                              6 hours ago




                              1




                              1





                              @Devin that's not strictly true. you can have more than radio button selected if you're feeling like breaking with convention. it's not a great idea, but it's generally possible in most interfaces.

                              – worc
                              57 mins ago





                              @Devin that's not strictly true. you can have more than radio button selected if you're feeling like breaking with convention. it's not a great idea, but it's generally possible in most interfaces.

                              – worc
                              57 mins ago













                              @worc native radio buttons ARE a convention, and a convention that motivates the question. Furthermore, to "break the convention" you would need to use checkboxes and disguise then as radio (so it wouldn't be a radio, it would be a checkbox with an image over it). Radio buttons allows for just one selected option at a time, see developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio

                              – Devin
                              44 mins ago





                              @worc native radio buttons ARE a convention, and a convention that motivates the question. Furthermore, to "break the convention" you would need to use checkboxes and disguise then as radio (so it wouldn't be a radio, it would be a checkbox with an image over it). Radio buttons allows for just one selected option at a time, see developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio

                              – Devin
                              44 mins ago




                              1




                              1





                              @Devin you don't even have to be that clever to break conventions. just have multiple radiogroups right next to each other and a full circle is ambiguous

                              – worc
                              33 mins ago





                              @Devin you don't even have to be that clever to break conventions. just have multiple radiogroups right next to each other and a full circle is ambiguous

                              – worc
                              33 mins ago


















                              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

                              Ottavio Pratesi

                              Image
                              .mw-parser-output .avviso .mbox-text-div>div,.mw-parser-output .avviso .mbox-text-full-div>div{font-size:90%}.mw-parser-output .avviso .mbox-image div{width:52px}.mw-parser-output .avviso .mbox-text-full-div .hide-when-compact{display:block} Questa voce sull'argomento ciclisti italiani è solo un abbozzo . Contribuisci a migliorarla secondo le convenzioni di Wikipedia. Ottavio Pratesi Nazionalità   Italia Ciclismo Specialità Strada Ritirato 1927 Carriera Squadre di club 1910-1911 Individuale 1912   Alcyon-Dunlop 1913 Globo-Dunlop 1914   Alcyon-Dunlop 1915-1922 Individuale 1923 Lygie 1924 Ostende 1925 Individuale   Modifica dati su Wikidata  · Manuale Ottavio Pratesi (Rosignano Marittimo, 1º gennaio 1889 – Livorno, 3 novembre 1977) è stato un ciclista su strada italiano, professionista tra il 1910 ed il 1925, era soprannominato il "Falco di ...
                              Read more

                              Error adding annotation colours to pheatmap in R: “more elements supplied than there are to replace”

                              Image
                              0 I am a relative R newbie and am having some issues trying to change the colour palette used for annotations in pheatmap. I have created an annotated heatmap from the file Total_depth_avg_mag.txt using the following commands: library(vegan) library(gplots) library(dplyr) library('pheatmap') library(RColorBrewer) #Reads data into table, adds row names and deletes the first column dat<-read.table("Total_depth_avg_mag.txt", header = T) row.names(dat) <- dat$mag dat <- dat[, -1] # Produces annotation data_frame from input file data_annot_2 <- read.table("Mag_annot_taxonomy.txt", header = T) rownames(data_annot_2) = data_annot_2$mag data_annot <- data_annot_2["Taxonomy"] #Produces annotated heatmap pheatmap(dat, cluster_cols = F, cluster_rows = F...
                              Read more

                              15 giugno

                              Image
                              gennaio  · febbraio  · marzo  · aprile  · maggio  · giugno 2018  · luglio  · agosto  · settembre  · ottobre  · novembre  · dicembre Ve Sa Do Lu Ma Me Gi Ve Sa Do Lu Ma Me Gi Ve Sa Do Lu Ma Me Gi Ve Sa Do Lu Ma Me Gi Ve Sa ← 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 → Il 15 giugno è il 166º giorno del calendario gregoriano (il 167º negli anni bisestili). Mancano 199 giorni alla fine dell'anno. Indice 1 Eventi 2 Nati 3 Morti 4 Feste e ricorrenze 4.1 Civili 4.2 Religiose 5 Altri progetti Eventi | 763 a.C. – Gli Assiri registrano un'eclissi solare 923 – Battaglia di Soissons: re Roberto I di Francia viene ucciso, re Carlo il Semplice viene arrestato dai sostenitori del duca Rodolfo di Borgogna 1094 – Reconquista: Valencia cade nelle mani di El Cid 1215 – Re Giovanni d'Inghilterra appone i...
                              Read more