loading

v33.3.0

select option

Form UX Writing

Forms are text interfaces. Writing good questions, help text, and actionable error messages is the single most important thing you can do to create great forms.

  • Eliminate everything that does not have a clear purpose
  • Prefer using plain language over jargon
  • Use vocabulary familiar to your users
  • Make all information necessary for filling out the form visible and accessible
  • Prefer clear over short, and accurate over easy
  • Reduce ambiguity, with precise terms
  • Explore only one concept per question
  • Always validate on submit

Terminology

  • Workflows are one or more set of tasks, usually as forms, that have to be completed to create an intended result or effect
  • A form is any interface that collects information from users, so that a product or service can be provided
  • Form sections are groupings of related questions, and may or may not have a title and subtitle
  • Modals are layout structures that focuses users on an immediate task, and can hold form fields and provide calls to actions like submit and cancel
  • Multi-step forms are long forms divided into different steps that are displayed one at a time (different than sections, which are displayed at once)
  • A field is a question in a form. See field structure for more information.

Avoid Input Placeholders

Carta does not use placeholder text inside fields as a general rule. Although common, placeholders are not helpful and actually worsen the user experience.

A few reasons to avoid placeholder text:

  • Empty inputs communicate that an answer is missing, and naturally pulls users’ attention
  • Placeholder text often repeats the label or help text
  • It tricks users into perceiving that the question is already answered
  • It disappears when input is focused, preventing users from reading the text. This is especially true if users watch the keyboard when typing.
  • It is forcibly short

In short, use help text instead of placeholder text. The only thing that should go inside form inputs are the user answers.

Participants are eligible to sell securities as of the last order date. However, a different vested date may be set to calculate ownership.

For example: +1 123-456-7890

Do

Add help instead of placeholder text. It is always visible and allows for longer and more helpful messages.

Participants are eligible to sell securities as of the last order date. However, a different vested date may be set to calculate ownership.

For example: +1 123-456-7890

Do

Add help instead of placeholder text. It is always visible and allows for longer and more helpful messages.

Don't

Placeholders inside inputs make them look filled, and the text disappears when users type. It is also impossible to provide longer texts.

Don't

Placeholders inside inputs make them look filled, and the text disappears when users type. It is also impossible to provide longer texts.

Note: The only accepted exception are placeholders inside table cells, as there is no available space for properly displaying helper text around the cell.

Error Message Templates

The following error messages should be used in most cases. If case-specific error messages may be written, those should be used instead of these.

Free text input

CaseError message
Input contains invalid characters, is too long or too short, etc.“Enter a valid {field label}. {field label} {criteria}”

Example:
  • Enter a valid name. Name must be between 1 and 10 characters, must use only upper or lower case letters and numbers, and must start with a letter.

Date picker

CaseError message
No value, or value is in wrong format“Enter a date in the form {format}”

Example:
  • Enter a date in the form MM/DD/YYYY
Value outside of valid range relative to today“Enter a date [on or][after/before] today ({formatted date})”

Include the actual date in the format required by the input

Examples:
  • Enter a date before today (09/14/2023)
  • Enter a date on or before today (09/14/2023)
  • Enter a date after today (09/14/2023)
  • Enter a date on or after today (09/14/2023)
Value outside of valid range relative to another editable field in the same form or workflow“Enter a date [on or][after/before] {other field name}”

Examples:
  • Enter a date after start date
  • Enter a date on or after start date
  • Enter a date before end date
  • Enter a date on or before end date
Value outside of valid range relative to another value not editable in the same form or workflow, or value outside of range of two specific dates, or some more complex criteria“Enter a date [after/before] {formatted date 1} [and before {formatted date 2}]

To keep the message short, specify the range using dates which are the day before/after the inclusive ends of the range

Examples:
  • Enter a date after 09/14/2022 and before 09/14/2024
  • Enter a date before 09/14/2022
  • Enter a date after 09/14/2022

Pairs of date pickers used to enter a date range

CaseError message
The value in either field results in a period which is outside of the required range“Enter dates which are {on or} [after/before] today”

To avoid confusion, do not include today’s actual date in parenthesis in this case.

Examples:
  • Enter dates which are before today
  • Enter dates which are on or after today
The dates are out of order“Enter a {start label} which is before the {end label}”

Replace {start label} and {end label} with the field labels shown on the form

Example:
  • Enter a start date which is before the end date

Number input

CaseError message
Value outside of valid range“Enter a {field name} [greater than/less than][or equal to] [{other field name} / {formatted value}]

Examples:
  • Enter a transfer quantity less than 1,000,000
  • Enter a transfer quantity greater than or equal to 1,000,000.07
  • Enter an issue quantity less than or equal to the transfer quantity
Value must be an integer“Enter a {field name} which is an integer”

Example:
  • Enter a transfer quantity which is an integer

Free text input, date picker, or number input

CaseError message
Input is valid, but is already in use“Enter a unique {field label}. “{existing value}” is already in use.”

Example:
  • Enter a unique report name. “My report” is already in use.

File picker

CaseError message
No file uploaded“Upload a file to proceed”
File type: only allow files of specified type (i.e. xlsx, pdf, docx)“File type is not supported. Upload a [accepted type] file.”
File size (ex. too big)“File size exceeds the [max size] limit. Upload a smaller file.”
Upload failed“Something went wrong. Try uploading again.”
File empty“Unable to extract information from your file. Try uploading again.”

Editable table

CaseError message
Multiple cells with invalid or no values in the editable tableBanner title (universal copy)

“Fix the highlighted errors in the table below”

Individual error messages should follow the UX writing guideline for each field type.

Examples:
  • Enter payout % in the designated range
  • Enter a date in the form MM/DD/YYYY
When multiple cells in a row disagree with each other, but it is impossible for the software to tell which one is “wrong.”

Example:

A row which has city, state and postal code columns. Each cell can be individually valid, but they might not agree with each other.
“The combination of {field name #1} and {field name #2} is invalid. Enter a different {field name #1} or {field name #2}.

Example:
  • The combination of location and rate is invalid. Enter a different location or rate.

Address Forms

How to utilize the AddressAutocomplete component from the @carta/identity team

View pattern

Form Flow

Form validation, done right, can improve the form filling experience, and user satisfaction

View pattern

Form Layout

Layout, type hierarchy, and color, impact legibility, usability, and completion metrics

View pattern

Is this page helpful?