Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I have a label as a heading. Underneath that I have a list of radio buttons. Each radio button needs to have a help bubble. When you click on it, it will explain what the product is about.

LOREM IPSUM:
1) Radio - Help bubble
2) Radio lorem - Help bubble
3) Radio loremmm - Help bubble
4) Radio - Help bubble
5) Radio loremmmmmm - Help bubble

As you can see the alignment of those bubbles is weird. Any other better ways for this?

share|improve this question
    
Could you please upload actual screen shot? I don't get what bubble actually is ? - If you are talking about the text misalignment then I would suggest to give left column a max width equals longest string. - Get rid of duplicate words –  Hem Apr 4 at 6:33
1  
Why do you need help bubbles? I would argue that your interface is lacking in a different location if you feel that you need help bubbles. The user should not have to get help on what they are selecting - it should be clear to them. –  Evil Closet Monkey Apr 4 at 17:05
    
@EvilClosetMonkey is asking the right question here. If every item needs help text, how useful is the list to begin with? If the help text is really important, I'd suggest that you put the text on the screen next to the label itself. If it's not really important, than I wouldn't sweat where the help button is (or if you even really need it) –  DA01 Apr 4 at 21:17

3 Answers 3

Here are a few ways, including the one you've already got (which I don't see an issue with):


mockup

download bmml source – Wireframes created with Balsamiq Mockups



The other thing you could do is remove the help bubble altogether and use tooltips for when you hover over any part of the list item.


mockup

download bmml source


Now, @DA01 noted in the comments regarding this option that it:

... won't work on a touch device and it also offers no context to the user that there is help to be found.

He is right with respect to a mobile implementation, as hovering doesn't translate. So, if you are targeting mobile, that's definitely worth taking into account.

share|improve this answer
1  
Voting for option 2 (assuming there are not radical differences in string length). –  Evil Closet Monkey Apr 4 at 17:04
1  
The last option is the best approach, when the user mouse hovers the option the pop-hover is shown, this action of tooltip is also useful when click on the option as well. –  DarkLord Apr 4 at 17:54
    
Option one is the only viable one, IMHO. Proximity is correct, and you're not interfering with the label/input relationship. @darklord Note that the last option won't work on a touch device and it also offers no context to the user that there is help to be found. –  DA01 Apr 4 at 20:43
    
I actually like option 3, but only if you'd move the help buttons into the margin (such that the radios and header are aligned) –  Albert Xing Apr 4 at 20:47
1  
@Vennsoh - So far you have 4 comments with 4 different favorites. If the comments are any indicator, the "best option" seems to be pretty subjective. I'd go with what you think looks best for your implementation. That said, DA01 is right with respect to a mobile implementation. Hovering doesn't translate, so if that's something you are targeting, it's worth taking into account. –  Code Maverick Apr 4 at 20:49

Can't you just have your help bubbles as a block level element to the left of the radio buttons?

Either that, or just have them vertically aligned on the right at a distance that allows you to comfortably fit the longest radio button label.

share|improve this answer

Thanks for the responses. In fact I have considered all the above arrangements. I am designing a form for a bank. The new design pattern has to fit within the current existing form flow.

The bank has multiple products and we need a way in the form to explain each product to the user. So far we have 2 options. They are as below:

enter image description here

I am not sure about putting the help bubbles in front of the label next to the radio buttons. Visually it is weird, it is not the standard convention of using a help bubble. Having 2 clickable circles side by side might get into usability issues eg: misclicking help bubble when you are going for radio.

I am not sure about appending the help bubble directly after the label. Some labels are long and. The longest 13 chars and the shortest 2 chars. The weird jagged alignment is throwing me off.

I am also not sure about my own option 1. If you align the help bubble to the longest label. For the shortest label, I am wondering if the disconnection will be too great.


So I have a more radical approach, having a button instead as sketched in option 2. Those buttons will behave like radio buttons. If you select one, the other will be greyed out or the selected button will get a visual treatment to indicate it is selected.

Feel free to suggest any other options other than just placing radio buttons around.

Thanks. You guys are great!

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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