Best Practices

Properties

Write the name that best describes the value that must be filled. For example, use Publishing time when the value should be the time when a promotion should be published.
Visually hide the label only when this definition is already present somewhere else, such as a column label that already describes the fields in the column.
Use sentence case, but capitalize proper nouns.
Don’t include redundant words. For example, write Publish time as the label instead of Promotion publish time on a page that includes Promotion in its title.
Don’t use verbs, personal pronouns, or interrogations.

When to include: Include it when additional information is necessary besides the label, such as to explain the label and/or how the field value will be used.
How to write: Write a single sentence that is short and direct. Use sentence case, but capitalize proper nouns. Don’t use periods, commas, or include redundant words.
- Explaining the label: Write as if completing the sentence “This is the…”. For example, write for a Publish time input the text “Time when the promotion will be published to the store”.
- Explaining how the value will be used: Write as if completing the sentence “When you fill a value in this field, it…” and start with a verb in the simple present tense. For example, write for a Publish time input the text “Considers the time zone where the store is located”.
- Explaining the label and how the value will be used: Combine the two sentences described in the previous topics and adapt them if necessary. For example, “Time when the promotion will be published to the store considering the time zone where the store is located”.

Width and height: The width of the field should comfortably fit the values, considering localization as well. Don’t customize the height of the field.
Position in a form: Group and sort fields in a way that is logical to the merchant, according to user research. Don’t position two fields that are not complementary on the same line and don’t include more than three fields on the same line.

Disable a field only if it becomes enabled in some condition. For example, a field that becomes unavailable when a specific option is chosen in the form.
When the reason why the field is disabled might be unclear, include a ContextualHelp next to the label to explain.

Prevent errors whenever possible. For example, implement restrictions in the field itself whenever possible, such as not allowing letters and limiting the number of characters.
Show the error in a specific field when the user leaves the field or in any field when they attempt to submit the form. For example, when the user removes the focus of an empty mandatory field. Remove the error state of the field as soon as the user modifies its value.
When the field is in an error state, always include an error text. Start with an imperative verb (e.g. Fill this information instead of This field is required), don’t use incomplete or imprecise sentences (e.g. Fill only numbers instead of Fill only valid characters), and don’t use periods or commas.