4

What is the best position of a help icon in a textarea? here is my idea

enter image description here

but this position could have a chance that the user will already be done typing in their text before seeing this icon.

Where is the best position I could place this help icon, without altering the character count? It is a good idea that I will position the help icon inside(upper-right-corner) the textarea?

Any ideas would be greatly appreciated.

Improve this question

3 Answers 3

Reset to default
19

Have you considered placing it immediately after the textarea title? That way, it's immediately visible to the user if they are confused. ("Description? What exactly does that entail?")

enter image description here

Improve this answer
12

Adding just an icon may fail to serve the purpose. You can easily find through the stats from the server logs on how many user actually clicked on "Help" for the purpose of it's existence. It is always recommended to let the user know what he is going to do in short rather hiding it totally. You may use the pattern as stated by Arkuen after a threshold when user starts understanding the context; say from 5th time the user does the same activity of entering description you may no longer need to show the mini help text as represented in the sample image I have shown. If the help is too long you may then trigger a modal or expand it further based on the business need by clicking "See more"

See sample image on how this can be

Improve this answer
1
  • 9
    During my bachelor thesis, I ran a usability test and hid the solution to a task within an (i) icon. You only had to read the (i) to complete the task successfully. Findings: 1: Half of the poeple ignored the (i) even if they had no idea what to do (they tried to work with the select box by best guess instead of reading the (i)). 2: Even when they mouse hovered the (i) they still DIDN'T READ it (eye tracking study). Learing: (i)s are useless.
    – Alexej Froehlich
    Commented Jul 25, 2014 at 9:07
6

Placeholder

If it's feasible to have your help text only show when the field is empty, you can use placeholder text. enter image description here

Top-right corner (or left, as already suggested)

Seeing as your textarea takes up the entire width of the column, the top-right corner is also an appropriate choice. If applicable and if space permits, you can add supplementary help text on the side or contextually, perhaps with a link to more comprehensive help documentation.

enter image description here

Both options

You can combine both options by showing some the primary help text as placeholder and supplementary help text upon clicking on the help icon (or contextually, if applicable). If necessary, provide a link to more comprehensive help documentation in the supplementary text.

enter image description here

Improve this answer
1
  • The problem with placeholder text is that people will try to erase it using the normal methods (like highlighting and hitting "delete"), and may get frustrated if they can't.
    – Mark
    Commented Jul 25, 2014 at 21:12

Your Answer

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

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