How to align hint icons

Question

Let's say we have a form with a few fields, where each row contains a label, a field and a "hint" icon. Let's say it's about 10 fields.

The problem is that the fields are generated automatically, based on the user's input in previous stages. Some of them may be long and some may be short. They might be of different types - e.g. text fields, date pickers, checkboxes. In any case, each field gets a hint icon.

What would be the best way to align the icons? In a vertical line at some distance from the longest field, or adjacent to each field? Or is there another way? Moving them to the left of the field or the label seems like a worse idea than either of these two options.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 1

I would go for option two since with option one,I have to drag my eyes all the way to the right to see the help icon,compare its alignment with the text field (and if the text field is short,then its a bit of effort) and then come to the conclusion that that the help icon is related to that text field.

However with option 2, its easy for me to make the jump with regards to the help icon relating to a text field since its one continuous flow as I scan from left to right.

Given below is an example of how validation hints which align with the textbox help in greater readability

However if you do go for option 1 for any reason,provide some kind of leading color so that the transition is simpler to establish the connection (see the example below)

However in the above example I dont like the fact that one validation message is given for two name fields

Image sources: Best Practices for Hints and Validation in Web Forms

Answer 2

One other option for you to consider (which is what we use) is to align the hint icons right next to the field label. This has the advantage of more clearly linking the data being requested with additional details about that item.

^{download bmml source – Wireframes created with Balsamiq Mockups}

In any case, each field gets a hint icon.

I would caution you to only use hints where they are absolutely necessary -- otherwise, they can become bad UX. Ask yourself if the hint is truly necessary to help the user complete the form. For example, a bad hint would be "enter your phone number in the form of XXX-XXX-XXXX." because a user shouldn't have to worry about formatting the data; we should do that on the back end. Also, if every user will need to know the information contained in the hint, then it shouldn't be a hint. Instead, this information should just be presented in-line.

Also, in some cases, you may want to be more explicit with your hints instead of just using a standard icon + pop-up. One such case is when you're asking for an unusual piece of data. In this case, you might do better to have a small link such as "Why do you need this?" (e.g. in the case of phone numbers) OR "How do I find this?" (e.g. in the case of activation keys). The resultant answer can still load in a pop-up, but you've given your user a lot more context then you ever could with a generic hint icon.