Placement of More Information/Help Icon button for Radio ButtonsReplace radio-input with “buttons”? (web forms)Radio Buttons in the header?Form design and placement of action buttonsUse of Radio Buttons (Identification Context)Best placement for “ultimate” page actionsBest approach to presenting collapsible/expandable panels with radio button headersHow to show static (user initiated) and dynamic help text for radio buttons and dropdowns?Placement for next, prev and complete form later actionsIs it better to use Checkboxes or Radio Buttons, when there are two or more fields and at least one of them must be filled out to pass validation?Should read-only fields hide or disable icons?

What is this scratchy sound on the acoustic guitar called?

Bullying boss launched a smear campaign and made me unemployable

Why can't we say "I have been having a dog"?

Why do I get negative height?

Am I breaking OOP practice with this architecture?

Is it "common practice in Fourier transform spectroscopy to multiply the measured interferogram by an apodizing function"? If so, why?

How do I exit BASH while loop using modulus operator?

What reasons are there for a Capitalist to oppose a 100% inheritance tax?

OP Amp not amplifying audio signal

How dangerous is XSS

Can someone clarify Hamming's notion of important problems in relation to modern academia?

Can I hook these wires up to find the connection to a dead outlet?

Is there a hemisphere-neutral way of specifying a season?

Send out email when Apex Queueable fails and test it

What is a Samsaran Word™?

Different meanings of こわい

What is the opposite of "eschatology"?

Is this draw by repetition?

Why didn't Boeing produce its own regional jet?

Why is the sentence "Das ist eine Nase" correct?

Is it possible to create a QR code using text?

What are the G forces leaving Earth orbit?

Were days ever written as ordinal numbers when writing day-month-year?

What is the most common color to indicate the input-field is disabled?



Placement of More Information/Help Icon button for Radio Buttons


Replace radio-input with “buttons”? (web forms)Radio Buttons in the header?Form design and placement of action buttonsUse of Radio Buttons (Identification Context)Best placement for “ultimate” page actionsBest approach to presenting collapsible/expandable panels with radio button headersHow to show static (user initiated) and dynamic help text for radio buttons and dropdowns?Placement for next, prev and complete form later actionsIs it better to use Checkboxes or Radio Buttons, when there are two or more fields and at least one of them must be filled out to pass validation?Should read-only fields hide or disable icons?













2















Throughout our system we are going to be standardizing when and how more information/help is used on specific input fields.



In general the standard will be to have the icon/button follow the field like so:
enter image description here



enter image description here



I am wondering where the placement should be for radio buttons? The more information/help will be referencing the radio set as a whole.



These are the potential options and I am wondering what would follow best practices for radio buttons and more information/help?



enter image description here










share|improve this question


























    2















    Throughout our system we are going to be standardizing when and how more information/help is used on specific input fields.



    In general the standard will be to have the icon/button follow the field like so:
    enter image description here



    enter image description here



    I am wondering where the placement should be for radio buttons? The more information/help will be referencing the radio set as a whole.



    These are the potential options and I am wondering what would follow best practices for radio buttons and more information/help?



    enter image description here










    share|improve this question
























      2












      2








      2


      1






      Throughout our system we are going to be standardizing when and how more information/help is used on specific input fields.



      In general the standard will be to have the icon/button follow the field like so:
      enter image description here



      enter image description here



      I am wondering where the placement should be for radio buttons? The more information/help will be referencing the radio set as a whole.



      These are the potential options and I am wondering what would follow best practices for radio buttons and more information/help?



      enter image description here










      share|improve this question














      Throughout our system we are going to be standardizing when and how more information/help is used on specific input fields.



      In general the standard will be to have the icon/button follow the field like so:
      enter image description here



      enter image description here



      I am wondering where the placement should be for radio buttons? The more information/help will be referencing the radio set as a whole.



      These are the potential options and I am wondering what would follow best practices for radio buttons and more information/help?



      enter image description here







      buttons input-fields radio-buttons help placement






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked 5 hours ago









      L. LemmerL. Lemmer

      1067




      1067




















          3 Answers
          3






          active

          oldest

          votes


















          3














          There is a difference in the understanding at the level of the concept (label) vs. the available choices. You may need a couple of patterns for flexibility.



          If you are trying to impart understanding regarding the label and it's choices, you can put the i close to the label, and give some info on hover, with some links to documentation for further understanding if need be.



          Think of scale and complexity, and have a resilient system.



          I realize I'm not giving a straightforward 'Do it this way!', but providing a way of thinking of prioritized contexts, so you have some flexibility. Here's a couple of situations I've seen come up.



          Unfamiliar label, few choices that can be somewhat familiar:



          enter image description here



          Unfamiliar label, many choices, some complex:



          Either way, the ? (or i) is close to what it needs to describe.



          enter image description here



          If you top align your forms:



          enter image description here



          You'll also see this in some dropdown menus (which function the same as a long list of radio buttons). Here's an example from Google Analytics:



          enter image description here






          share|improve this answer
































            2














            Think of a logical order and good placement



            enter image description here




            Instead you may use this:



            enter image description here






            share|improve this answer

























            • So I am limited to the options that I have provided. It's standard in our system to have the controls go to the right of the label, not beneath it (like you have in your suggestion). If all the options I presented are going to provide a poor user experience then maybe this as a standard: If a more information needs to be used for a radio set (it should be uncommon) instead of using a radio set use a combo box. Thoughts?

              – L. Lemmer
              49 mins ago


















            1














            I would use the info at the right centered in the label.



            Why? The wrist tends to the right so, It will be easier for the user to click and it doesnt break the layout of the questions.



            Radio buttons works best if they are vertically align because the eye can scan from top to bottom than going from left to right, going down and to the left and continuing scanning.



            BUT, after testing it, if the user is prompt to check the info tooltip, use it at left, aligned to the radio buttons. You can see the mouse movement in each case.



            enter image description here



            You can read more about the Fitt's Law here: https://en.wikipedia.org/wiki/Fitts%27s_law.



            if you use a grid for the label and the radio buttons, the user will learn the pattern and complete the form asap.



            In my opinion, it depends about the frequency of tooltip use. If the user are going to use this information frequently, left, if not, right.






            share|improve this answer










            New contributor




            Juan Jesús Millo 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%2f124819%2fplacement-of-more-information-help-icon-button-for-radio-buttons%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









              3














              There is a difference in the understanding at the level of the concept (label) vs. the available choices. You may need a couple of patterns for flexibility.



              If you are trying to impart understanding regarding the label and it's choices, you can put the i close to the label, and give some info on hover, with some links to documentation for further understanding if need be.



              Think of scale and complexity, and have a resilient system.



              I realize I'm not giving a straightforward 'Do it this way!', but providing a way of thinking of prioritized contexts, so you have some flexibility. Here's a couple of situations I've seen come up.



              Unfamiliar label, few choices that can be somewhat familiar:



              enter image description here



              Unfamiliar label, many choices, some complex:



              Either way, the ? (or i) is close to what it needs to describe.



              enter image description here



              If you top align your forms:



              enter image description here



              You'll also see this in some dropdown menus (which function the same as a long list of radio buttons). Here's an example from Google Analytics:



              enter image description here






              share|improve this answer





























                3














                There is a difference in the understanding at the level of the concept (label) vs. the available choices. You may need a couple of patterns for flexibility.



                If you are trying to impart understanding regarding the label and it's choices, you can put the i close to the label, and give some info on hover, with some links to documentation for further understanding if need be.



                Think of scale and complexity, and have a resilient system.



                I realize I'm not giving a straightforward 'Do it this way!', but providing a way of thinking of prioritized contexts, so you have some flexibility. Here's a couple of situations I've seen come up.



                Unfamiliar label, few choices that can be somewhat familiar:



                enter image description here



                Unfamiliar label, many choices, some complex:



                Either way, the ? (or i) is close to what it needs to describe.



                enter image description here



                If you top align your forms:



                enter image description here



                You'll also see this in some dropdown menus (which function the same as a long list of radio buttons). Here's an example from Google Analytics:



                enter image description here






                share|improve this answer



























                  3












                  3








                  3







                  There is a difference in the understanding at the level of the concept (label) vs. the available choices. You may need a couple of patterns for flexibility.



                  If you are trying to impart understanding regarding the label and it's choices, you can put the i close to the label, and give some info on hover, with some links to documentation for further understanding if need be.



                  Think of scale and complexity, and have a resilient system.



                  I realize I'm not giving a straightforward 'Do it this way!', but providing a way of thinking of prioritized contexts, so you have some flexibility. Here's a couple of situations I've seen come up.



                  Unfamiliar label, few choices that can be somewhat familiar:



                  enter image description here



                  Unfamiliar label, many choices, some complex:



                  Either way, the ? (or i) is close to what it needs to describe.



                  enter image description here



                  If you top align your forms:



                  enter image description here



                  You'll also see this in some dropdown menus (which function the same as a long list of radio buttons). Here's an example from Google Analytics:



                  enter image description here






                  share|improve this answer















                  There is a difference in the understanding at the level of the concept (label) vs. the available choices. You may need a couple of patterns for flexibility.



                  If you are trying to impart understanding regarding the label and it's choices, you can put the i close to the label, and give some info on hover, with some links to documentation for further understanding if need be.



                  Think of scale and complexity, and have a resilient system.



                  I realize I'm not giving a straightforward 'Do it this way!', but providing a way of thinking of prioritized contexts, so you have some flexibility. Here's a couple of situations I've seen come up.



                  Unfamiliar label, few choices that can be somewhat familiar:



                  enter image description here



                  Unfamiliar label, many choices, some complex:



                  Either way, the ? (or i) is close to what it needs to describe.



                  enter image description here



                  If you top align your forms:



                  enter image description here



                  You'll also see this in some dropdown menus (which function the same as a long list of radio buttons). Here's an example from Google Analytics:



                  enter image description here







                  share|improve this answer














                  share|improve this answer



                  share|improve this answer








                  edited 1 hour ago

























                  answered 5 hours ago









                  Mike MMike M

                  11.1k12331




                  11.1k12331























                      2














                      Think of a logical order and good placement



                      enter image description here




                      Instead you may use this:



                      enter image description here






                      share|improve this answer

























                      • So I am limited to the options that I have provided. It's standard in our system to have the controls go to the right of the label, not beneath it (like you have in your suggestion). If all the options I presented are going to provide a poor user experience then maybe this as a standard: If a more information needs to be used for a radio set (it should be uncommon) instead of using a radio set use a combo box. Thoughts?

                        – L. Lemmer
                        49 mins ago















                      2














                      Think of a logical order and good placement



                      enter image description here




                      Instead you may use this:



                      enter image description here






                      share|improve this answer

























                      • So I am limited to the options that I have provided. It's standard in our system to have the controls go to the right of the label, not beneath it (like you have in your suggestion). If all the options I presented are going to provide a poor user experience then maybe this as a standard: If a more information needs to be used for a radio set (it should be uncommon) instead of using a radio set use a combo box. Thoughts?

                        – L. Lemmer
                        49 mins ago













                      2












                      2








                      2







                      Think of a logical order and good placement



                      enter image description here




                      Instead you may use this:



                      enter image description here






                      share|improve this answer















                      Think of a logical order and good placement



                      enter image description here




                      Instead you may use this:



                      enter image description here







                      share|improve this answer














                      share|improve this answer



                      share|improve this answer








                      edited 1 hour ago

























                      answered 1 hour ago









                      Mo'athMo'ath

                      486211




                      486211












                      • So I am limited to the options that I have provided. It's standard in our system to have the controls go to the right of the label, not beneath it (like you have in your suggestion). If all the options I presented are going to provide a poor user experience then maybe this as a standard: If a more information needs to be used for a radio set (it should be uncommon) instead of using a radio set use a combo box. Thoughts?

                        – L. Lemmer
                        49 mins ago

















                      • So I am limited to the options that I have provided. It's standard in our system to have the controls go to the right of the label, not beneath it (like you have in your suggestion). If all the options I presented are going to provide a poor user experience then maybe this as a standard: If a more information needs to be used for a radio set (it should be uncommon) instead of using a radio set use a combo box. Thoughts?

                        – L. Lemmer
                        49 mins ago
















                      So I am limited to the options that I have provided. It's standard in our system to have the controls go to the right of the label, not beneath it (like you have in your suggestion). If all the options I presented are going to provide a poor user experience then maybe this as a standard: If a more information needs to be used for a radio set (it should be uncommon) instead of using a radio set use a combo box. Thoughts?

                      – L. Lemmer
                      49 mins ago





                      So I am limited to the options that I have provided. It's standard in our system to have the controls go to the right of the label, not beneath it (like you have in your suggestion). If all the options I presented are going to provide a poor user experience then maybe this as a standard: If a more information needs to be used for a radio set (it should be uncommon) instead of using a radio set use a combo box. Thoughts?

                      – L. Lemmer
                      49 mins ago











                      1














                      I would use the info at the right centered in the label.



                      Why? The wrist tends to the right so, It will be easier for the user to click and it doesnt break the layout of the questions.



                      Radio buttons works best if they are vertically align because the eye can scan from top to bottom than going from left to right, going down and to the left and continuing scanning.



                      BUT, after testing it, if the user is prompt to check the info tooltip, use it at left, aligned to the radio buttons. You can see the mouse movement in each case.



                      enter image description here



                      You can read more about the Fitt's Law here: https://en.wikipedia.org/wiki/Fitts%27s_law.



                      if you use a grid for the label and the radio buttons, the user will learn the pattern and complete the form asap.



                      In my opinion, it depends about the frequency of tooltip use. If the user are going to use this information frequently, left, if not, right.






                      share|improve this answer










                      New contributor




                      Juan Jesús Millo is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                      Check out our Code of Conduct.
























                        1














                        I would use the info at the right centered in the label.



                        Why? The wrist tends to the right so, It will be easier for the user to click and it doesnt break the layout of the questions.



                        Radio buttons works best if they are vertically align because the eye can scan from top to bottom than going from left to right, going down and to the left and continuing scanning.



                        BUT, after testing it, if the user is prompt to check the info tooltip, use it at left, aligned to the radio buttons. You can see the mouse movement in each case.



                        enter image description here



                        You can read more about the Fitt's Law here: https://en.wikipedia.org/wiki/Fitts%27s_law.



                        if you use a grid for the label and the radio buttons, the user will learn the pattern and complete the form asap.



                        In my opinion, it depends about the frequency of tooltip use. If the user are going to use this information frequently, left, if not, right.






                        share|improve this answer










                        New contributor




                        Juan Jesús Millo is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                        Check out our Code of Conduct.






















                          1












                          1








                          1







                          I would use the info at the right centered in the label.



                          Why? The wrist tends to the right so, It will be easier for the user to click and it doesnt break the layout of the questions.



                          Radio buttons works best if they are vertically align because the eye can scan from top to bottom than going from left to right, going down and to the left and continuing scanning.



                          BUT, after testing it, if the user is prompt to check the info tooltip, use it at left, aligned to the radio buttons. You can see the mouse movement in each case.



                          enter image description here



                          You can read more about the Fitt's Law here: https://en.wikipedia.org/wiki/Fitts%27s_law.



                          if you use a grid for the label and the radio buttons, the user will learn the pattern and complete the form asap.



                          In my opinion, it depends about the frequency of tooltip use. If the user are going to use this information frequently, left, if not, right.






                          share|improve this answer










                          New contributor




                          Juan Jesús Millo is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                          Check out our Code of Conduct.










                          I would use the info at the right centered in the label.



                          Why? The wrist tends to the right so, It will be easier for the user to click and it doesnt break the layout of the questions.



                          Radio buttons works best if they are vertically align because the eye can scan from top to bottom than going from left to right, going down and to the left and continuing scanning.



                          BUT, after testing it, if the user is prompt to check the info tooltip, use it at left, aligned to the radio buttons. You can see the mouse movement in each case.



                          enter image description here



                          You can read more about the Fitt's Law here: https://en.wikipedia.org/wiki/Fitts%27s_law.



                          if you use a grid for the label and the radio buttons, the user will learn the pattern and complete the form asap.



                          In my opinion, it depends about the frequency of tooltip use. If the user are going to use this information frequently, left, if not, right.







                          share|improve this answer










                          New contributor




                          Juan Jesús Millo 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








                          edited 5 hours ago





















                          New contributor




                          Juan Jesús Millo is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                          Check out our Code of Conduct.









                          answered 5 hours ago









                          Juan Jesús MilloJuan Jesús Millo

                          1516




                          1516




                          New contributor




                          Juan Jesús Millo is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                          Check out our Code of Conduct.





                          New contributor





                          Juan Jesús Millo is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                          Check out our Code of Conduct.






                          Juan Jesús Millo 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%2f124819%2fplacement-of-more-information-help-icon-button-for-radio-buttons%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

                              Oświęcim Innehåll Historia | Källor | Externa länkar | Navigeringsmeny50°2′18″N 19°13′17″Ö / 50.03833°N 19.22139°Ö / 50.03833; 19.2213950°2′18″N 19°13′17″Ö / 50.03833°N 19.22139°Ö / 50.03833; 19.221393089658Nordisk familjebok, AuschwitzInsidan tro och existensJewish Community i OświęcimAuschwitz Jewish Center: MuseumAuschwitz Jewish Center

                              Valle di Casies Indice Geografia fisica | Origini del nome | Storia | Società | Amministrazione | Sport | Note | Bibliografia | Voci correlate | Altri progetti | Collegamenti esterni | Menu di navigazione46°46′N 12°11′E / 46.766667°N 12.183333°E46.766667; 12.183333 (Valle di Casies)46°46′N 12°11′E / 46.766667°N 12.183333°E46.766667; 12.183333 (Valle di Casies)Sito istituzionaleAstat Censimento della popolazione 2011 - Determinazione della consistenza dei tre gruppi linguistici della Provincia Autonoma di Bolzano-Alto Adige - giugno 2012Numeri e fattiValle di CasiesDato IstatTabella dei gradi/giorno dei Comuni italiani raggruppati per Regione e Provincia26 agosto 1993, n. 412Heraldry of the World: GsiesStatistiche I.StatValCasies.comWikimedia CommonsWikimedia CommonsValle di CasiesSito ufficialeValle di CasiesMM14870458910042978-6

                              Typsetting diagram chases (with TikZ?) Announcing the arrival of Valued Associate #679: Cesar Manara Planned maintenance scheduled April 17/18, 2019 at 00:00UTC (8:00pm US/Eastern)How to define the default vertical distance between nodes?Draw edge on arcNumerical conditional within tikz keys?TikZ: Drawing an arc from an intersection to an intersectionDrawing rectilinear curves in Tikz, aka an Etch-a-Sketch drawingLine up nested tikz enviroments or how to get rid of themHow to place nodes in an absolute coordinate system in tikzCommutative diagram with curve connecting between nodesTikz with standalone: pinning tikz coordinates to page cmDrawing a Decision Diagram with Tikz and layout manager