2

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.

checkboxes layout

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.

2

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.

  • Thanks for your insightful comments. Your point about potentially missing the help text while hovering is a valid one. In the end I did end up removing the help text and I condensed the label for each checkbox (also as you suggested), and I did list the options as suggested by Joao's answer. I'll change this to the accepted as your suggestions are most like what I ended up implementing. – Daniel Holmes Aug 5 at 7:34
  • Glad to help, Daniel! :) – JochenW Aug 5 at 15:40
  • In Windows 10, v1903, the setting for "Notification and Action" have both of toggles and checkboxes. For both, there is no need for step to confirm. I partly disagree the idea that the checkboxes need step to confirm always. – sevenOfNine Aug 19 at 23:44
  • On the other hand, Gmail has checkboxes in the mail list. The checkboxes need step for further action. So, I think that usage of checkboxes depends on what the user would like to do. – sevenOfNine Aug 19 at 23:50
1

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

  • 1
    Thanks! Hovering on the checkbox text works well – Daniel Holmes Jul 26 at 12:33
1

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.

Settings

  • 1
    Thanks, I did opt for this layout in the end. – Daniel Holmes Aug 5 at 7:34

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.