Web Interface  |  Forms


This section is about how to create and display hints for form fields.

01The hint makes the input clear

Hints at the input fields make the form more human. They help tell people how to fill out the data and why to fill it out.

It's a weird input field.
More reasonable.

02Position of hints

It's a good idea to place hints below the label of the input field, below the field itself, or to the right of the input field, if space allows it. It's a bad decision to make the hint in the form of the label itself, it reduces the readability of the form.

It's not good to make a hint inside the label.
A hint below the label makes the form readable.
The hint below the input field is also good.

03Hidden hints

You often see a solution where the hint is hidden behind a question mark. When you click it, it opens a popover and you can read the hint in it. There are two problems here. First, if something is hidden, it is not there, which means the user is likely to miss or not notice. Secondly, it's always an inconvenient solution, the small icon is hard to get to, the popover is always off-screen and disappears when accidentally tapped on the page or inside the popover.

Hint is hidden.
Hint is shown.

Do not be afraid of hints with a long text. They can be shown at once and it won't complicate the form in any way and won't scare the user. On the contrary, it will help to understand faster and easier what data are required and how to fill them out.