Error Bubble

Usage

When to Use

Use an error bubble to show users that some value is missing or some input is erroneous. Since error bubbles disappear as soon as the user clicks somewhere on the screen, only use them if exactly one entry within a form is missing.

When Not to Use

If it is possible that multiple values are missing within a form, use error messages attached to the missing entries instead. Usually this is done by putting the respective component into an error state.

Content

Make sure to write help text that actually helps the user. Explain what users have done wrong or what they have to do to continue their process.

Layout

By default, error bubbles are positioned to the right of the erroneous component.

Error bubbles can also be positioned to the left, top, or bottom. This is usually done if there is not enough space on the right-hand side or if some important information would be overlaid by the error bubble.