8

Throughout our system we are going to standardize 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

For a radio-buttons controller, where should the info/help icon be placed?

P.S. The info/help icon will be referencing the radio buttons set as a whole.

Here are the potential options. What would be the best design following best practices for designing a radio-buttons controller with info/help icon?

enter image description here

  • How about below main label? – Yong Quan Apr 3 at 2:30
  • What we decided on was to just use a combo box if it is an enum. Since it is our practice to only use the more information when it is absolutely needed. Therefore it should be pretty rare for them to show up, but IF it is needed and it is an enum just use the combo box control to avoid all confusion. – L. Lemmer Apr 4 at 17:56
16

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

12

Think of a logical order and good placement

enter image description here


Instead you may use this:

enter image description here



UPDATE

Based on the comments from the OP (Original Poster):

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

Two Scenarios:

1- You are NOT limited on horizontal space:

enter image description here

2- You are limited on horizontal space:

enter image description here

*Last option maybe to underline the Label itself, and when it is hovered, you display the Tooltip. The underline would be your visual clue here (it is not as clear as the info icon, and some might confuse it as a clickable text)

END OF UPDATE


  • 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 Apr 2 at 20:24
  • I updated the answer accordingly. – Mo'ath Apr 5 at 16:00
2

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.

0

After radio options on the top.

Given your additional context that you can't stack label and options, I think this would be ideal in context of other inputs. Users would be used to seeing it there.

It would be more consistent than vertical centering.

  • Can you please provide a little screenshot of where you think it works better? – Mo'ath Apr 4 at 14:46
  • @Mo'ath See the original screenshot. The third element in the screenshot. "After radio options on the top." which you'll see is visually similar to the existing options. – Dustin Graham Apr 5 at 15:41
0

What we decided on was to just use a combo box if it is an enum. Since it is our practice to only use the more information when it is absolutely needed. Therefore it should be pretty rare for them to show up, but IF it is needed and it is an enum just use the combo box control to avoid all confusion.

enter image description here

  • Hmm, this does not answer a question reads: "Placement of More Information/Help Icon button for Radio Buttons". You are changing the controller completely although you mentioned that you cannot make the change on the Radio Buttons structure and you are limited... – Mo'ath Jul 3 at 16:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.