3

I am trying to create a form for my web app, which requires information elements to be added. In general I would refer to the documentation of the framework that I would be using (which in my case would be Bootstrap if this would be any helpful information).

Whenever reading through the documentation, I cannot seem to find any information regarding my need for given element. (The only thing that might be useful is that I could be using an icon from the Bootstrap framework called: glyphicon-info-sign).

I could be using something similar the answer given on this question I found on SE.

Option 1:

Option 1 form

Option 2:

Option 2 form

Option 3:

Option 3 form

What is considered best practice or what might be the best solution concerning the placement location of an information icon? Should I place the icon directly after the label, should I make sure there is enough space between the label and the icon? Should the icon be after an input field?

Improve this question
2
  • Generally you want to place things that belong together, close together. I usually always use option 1 for my forms as it's easier to see the label and information icon in one glance, and it's easier to see they are associated.
    – Wendy Wojenka
    Jul 16, 2019 at 8:24
  • I think the placement of the icon can also be impacted by the type of information you are trying to provide. Depending on if it is relevant to the meaning of the label, to assist with the input or to provide additional contextual information, there can be some justifications for where the icon is placed. You also need to look at the general design patterns and conventions used elsewhere in the application you are designing as well.
    – Michael Lai ♦
    Jul 17, 2019 at 3:59

3 Answers 3

Reset to default
1

I'd like to suggest Option 1.and also you can show information without clicking the icon. Also, each and every field do not need information icon in my opinion. such as Genter, Birthday. Try to put an information icon where the user will get confused.

And these are my suggestionsenter image description here

Improve this answer
1

I would go with option 1, as it's located close to the item (label) for which it gives informations about

Improve this answer
1
  • Hi @Guy Hack, thanks for your contribution to UXSE. To help improve the quality of the answers, it is suggested that you try and explain as much of the rationale for your answer as possible and to provide examples that help illustrate the answer (which you can see from the other answers provided).
    – Michael Lai ♦
    Jul 17, 2019 at 3:57
0

First of all, if possible provide labels clear enough that additional info is not necessary. In some cases this is not possible, an in this cases such a info icon (i suppose they will open a tool tip) can be helpful.

The overall layout will have an impact where to place the icon. Having the info icon close to the label gives the user context. Option 2 looks at a first glance visually more appealing but at a second glance you will see that the icon is some times out of context e.g. at the gender. Option 3 might have the same problem and you will loos space for the input fields which might be a problem on mobile screens.

So i would suggest to go with option 1.

Another thought: I am wondering what the information in your tool tips would be since the labels in your example are very clear. If you think about using the tool tips to give instructions how to fill the field like (minimum amount of letters, password rules etc.) the tool tip is the wrong pattern. In this case you should provide the information below the field.

Improve this answer
2
  • The labels were just example text. For the goal of my app I will be using more custom labels which might require some text to help, inform or instruct the user how to fill in certain information. I could not agree less on your argument concerning inputs with a lot of space, low amount of options or whatnot (such as given gender input found in my example above). Would using these information icons not be useful for letting a user know about certain fields and their validation?
    – Barrosy
    Jul 16, 2019 at 8:48
  • 1
    Validation informations should always be visible. Otherwise you make the user guess how to use the field. After having found the info you make them remember what was written in the tool tip. This could be very annoying it it's a complex rule. Therefore validation and input instructions should not be hidden in an info icon. The info icon should be used to explain maybe where to find the information (e.g. where to find a serial number on a product or the like) or what exactly a label does mean.
    – BrunoH
    Jul 16, 2019 at 9:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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