I've got a loan applicant form. All the fields are required and most of them got a describing tooltip. I struggle when it comes to the point how to show the tooltips. Hide them until a user clicks a "i" icon behind the field or show the tooltip on focus?
We've done a testing but the result was indecisive 10:10 so there is no clear result.
p.s. excuse my bad pronunciation- and grammar-skills ;)
When you tested this, how was the question phrased?
Was it:
"Can you complete this form? Which one did you like better?"
Or was it:
"Which method of invoking tool tip do you like better?"
If it is the latter, then you may have inadvertently influenced the outcome in favor of clicking the "i", because the question itself explains to the user what clicking "i" does, whereas in real life, not all users would know what it is.
I think A/B testing would be beneficial, so you can go by more objective metrics (i.e. time-to-complete, accuracy, abandonment), rather than verbal user feedback.
After all, user's action speaks louder than words :)
While (as @inkmarble mentioned) clicking may be more effort compared to a mouse-over we now also have to keep in mind the growing amount of users on touch-only devices. With the current state of the art, there simply is no way to mouse-over an icon on a touch device, thus making this help information inaccessible to this user group.
Example: I recently got really frustrated with Facebook because I couldn't find that edit option that I knew existed because I had used it before. Only after a while I wondered if it had been one of these grey little icons that only show up when you hover over the text-entry - and it was. My device is a convertible, so I could switch modes. Otherwise I could not have edited my text at all.
Another webpage solved this differently: They simply did both. The help-text showed up when hovering over it, but also onclick. This accomodated for touch devices as well as mouse-users who would want the text to stay visible even when moving away. At the same time it did not harm the "normal" mouse-over users. So overall: if technically feasible I'd give the hybrid approach a go, too.
A tooltip is usually a short descriptive phrase - I've seen suggestions that they should be "5 or 6 words" or "1-2 short lines". They were originally intended as a helpful reminder for a button or field, targeted at a user who knew the details but needed the reminder.
The help information you're displaying seems to be quite a lot more substantial, perhaps aimed at the ocassional or first time user.
I'd suggest using a hybrid approach:
I believe loan applicants who come to fill, will either have knowledge or may be novice. In either case the "i" icon is beneficial, so on mouse hover the description box can pop-over on the page. Clicking is an effort that is more than a mouse-hover.
Other way is that, all the Information can be aligned to the RHS of the form - with numbers assigned to the location - such as users need not even mouse hover the information "i" icon, but can be readily sitting there. If the information is too lengthier - then the "i" icon can remain, and the information can pop inside the RHS column without disrupting the form.
@inkmarble is correct. label should be right aligned.
"EUR" code position can be changed. It looks left right align within the single element.
Be default first field should be focused. So we can show help text nearby textfield when we focus that field. It should make sense, user can read while entering that field.
Please revisit the width of text fields. (Max digits for amount)
NOTE: If we give mouse hover for "i", user needs to find the help text when entering the data.
