I have a page for configuring access rights in a website. There are a number of checkboxes in the form. Each of these checkbox have a help text hover tooltip that provides a more detailed explanation the option. However, the layout does not look great, especially with all the tool tips.
How can I improve the layout of this form? I thought of displaying the help text right next to the checkbox, but that too doesn't look appealing either. I'm currently using Bootstrap columns for the layout.
Daniel,
I agree with Joao's layout suggestion, because it places related options closer together (think "Gestalt Law of Proximity"), so the perception of grouping is stronger. The vertical layout also make it easier to scan the options' labels, particularly if the lengths of the labels differs quite a bit.
As for the tooltips, I ran into a similar issue in a UX Debt item at work. Turns out, that most of the tooltip texts merely repeated the checkbox label text, so they didn't add much information at all.
Hence, make sure that, whatever you put into the tooltips, is actually needed and that it is accurate. Also, keep the text terse and avoid lengthy prose. To use the example in your wireframe, instead of "Administrator will be able to view", I'd prefer "Let administrator view", just so it's that little bit easier to take in.
Sorry to be blunt here, but regarding the two other suggestions made here, I'd like to point out the following:
Toggle switches typically indicate that any changes you make to their respective settings are applied immediately and without having to click a submit button. Checkboxes, in contrast, require an additional step to confirm the change. In other words, if you provide those options in a dialog box, that the user has to dismiss with a Cancel/Save button pair, using a toggle switch is confusing, and the checkbox is the proper widget to use.
Also, please don't ever make "me" (i.e., your users) hover over items on screen just to let me find out if you provide contextual help, or not. If there is a tooltip, show the tooltip icon next to the option, so I can instantly see that it's available. Otherwise, "I" might never even discover it and, thus, miss useful information.
Note, BTW, that there is a slightly different variant of Help icon that's the inverse of the one you're using. I.e., it's a circle with a question mark inside, instead of the solid disk your wireframe shows. I find that circle one a bit less visually prominent.
Finally, if you only show a tooltip for some of the options, consider showing it right underneath the option, as you already mentioned. And if every single one requires the tooltip, you might consider A/B testing layouts with all extra info showing vs. doing all tooltips, just to see which your users find more useful.
The question mark with the black balloon icon is suitable for isolated situations, but when a full text has a tooltip icon for each option it's something totally unnecessary besides being a redundant visual noise.
The help info can appear simply when hovering the text without any extra icon. See this example
Here is my suggestion:
Instead of checkboxes, use toggles since the user is "activating/deactivating" a functionality and for the help icon, show it when the user is hovering an option.
The fact that all options are vertically aligned it helps the toggles to be aligned to the left and the text readable from top to bottom.
