Form Field Help - β

Usage guidelines


Attributes

The Form Field Help can be used in different situations to give users the guidance and context they need when inputting information. Below are the core attributes of the Form Field Help that contribute to its effectiveness and usability.

 

 

Form Field Help (Informative Descriptions)

Form Field Help (Informative Descriptions)

The component offers descriptive text to guide users in providing the correct input.

Error Messages

Error Messages

In case of incorrect input, the component displays error messages to provide users with context about the issue and how to resolve it.

 

 

Best Practices

  • Conciseness: Keep the text concise to avoid overwhelming users with unnecessary information.
  • Consistency: Maintain consistency in the tone and style of help text throughout the application for a cohesive user experience.

 

Switch the help text description with an error message

Form Field Help displays either a help text or an error error message. Initially, the space shows a informative description and if an error occurs, the description is replaced by an error message. Once the error is resolved, the original descriptive message reappears.

❌ Don’t!

❌ Don’t!

Don't put informative description with errors at the same time.

✅ Do!

✅ Do!

If an error occurs, the description is replaced by an error message. Once the error is resolved, the original descriptive message reappears.

 

Careful with punctuation

The text in Form Field Help will maintain a professional and consistent tone while providing users with the necessary information and guidance. Use only full stops at the end of the help text and avoid exclamation marks.

 

❌ Don’t!

❌ Don’t!

While exclamation marks can convey enthusiasm or urgency, they may also come across as overly assertive or inappropriate in certain contexts. Instead, focus on clear and concise language to convey information effectively.

✅ Do!

✅ Do!

Help text should end with a full stop (period) to denote the completion of the sentence or statement. Avoid using other forms of punctuation such as exclamation marks, question marks, or ellipses.

 

 

Give a solution in the error messages

Ensure users aren't left uncertain about issue resolution. Clear error messages alleviate frustration and boost user confidence, especially since what's identified as an error by the form might not align with the user's perspective.

 

❌ Don’t!

❌ Don’t!

Don't rely solely on generic or vague error messages that do not provide useful guidance.

✅ Do!

✅ Do!

Do provide clear and specific error messages that guide users on how to resolve issues effectively.

Specs


 

Accessibility


Key

Interaction

Tab

To navigate to the help text

Shift + Tab

Navigate away from the help text