Writing for UI elements
Action menus
If the items in an action menu refer to different things, or it’s not obvious what they refer to, include the verb and the noun.
Copy impression URL
Download QR code
Copy
Download
If all the items in an action menu refer to the same thing, and it’s obvious they refer to that thing, just include the verb.
Rename
Duplicate
Delete
Rename report
Duplicate report
Delete report
Breadcrumbs
Write breadcrumbs in sentence case and separate each entry with an angled bracket.
Include the full page title in each breadcrumb. Try to avoid using ellipses.
Buttons
Write button labels in sentence case without periods or articles.
When it's the first step in a process of adding or creating an item, clicking the button at this point doesn’t actually add or create the item, and the button opens a new page or dialog box rather than just revealing an option on the page, use [+ New {item}]. When it’s time to add or create the item, use the verb.
For all other buttons, try to start with a verb.
The standard two-button pattern is [Cancel] and [Do the thing].
When confirming cancellations, use [No] and [Yes].
[No] [Yes]
[Cancel] [Cancel send]
When confirming a potentially dangerous or undesirable action, use the button text to make the user hesitate and think about the consequences.
You won’t be able to record it anymore.
[Cancel] [Delete anyway]
Checkboxes
Write checkbox labels in sentence case.
Only use periods if it’s a complete sentence.
Dialog boxes
Write dialog box titles and buttons in sentence case without a period.
Include articles in the titles.
Don’t include articles in the buttons.
Simple dialog boxes may only require a single line. If this is the case, remove the body to avoid redundancy.
[Cancel] [Remove]
The permission will be removed.
[Cancel] [Remove]
If it’s a confirmation dialog box, place the question in the title and the consequences in the body.
You won’t be able to record it anymore.
[Cancel] [Delete anyway]
Drop-down lists
Write list items in sentence case without a period. Include articles.
Instead of using a prompt, try to preselect a default value. If that's not possible, use Select [option name] with the option name in lower case (e.g. _Select app).
info
If there are multiple drop-downs for selecting the same value, don’t repeat the [option name] in each instance. Instead, use the Atlas default Select…
Use the following logic for the option list:
- For default values, select the safest option. If safety isn't an issue, select the most likely or convenient option.
- Don't include an empty option for a null value. Instead specify the value (e.g. No apps).
- Sort list items in a logical order. For example, group related options together, place common options first, or order the options alphabetically.
- Sort names in alphabetical order, numbers in numeric order and dates in chronological order.
- Lists with 10 or more items should be ordered alphabetically.
- Place the options that represent all or none at the top of the list.
Error and validation messages
Write error messages in sentence case with periods for full sentences. Use discretion when the sentence ends with a number, URL, or email address or where the full stop may cause confusion for the user.
Never use all caps or exclamation points and avoid using negative words like error and failed that might cause anxiety for the user.
Speak to the user politely and in human terms. Use an apologetic tone if it's a serious problem in our products they’re likely to find frustrating.
Don’t apologize for problems outside our products or beyond or control.
If possible, provide a solution rather than describe a problem.
Never blame the user, even if they’ve made a mistake.
Fields
Write field labels in title case without periods or other punctuation. Don't include articles unless they're needed to help with comprehension.
Filters
When a filter accepts multiple inputs, including "All" options, it should be written as a plural. When a filter only accepts a single input, it should be written in the singular.
Links
It should always be clear what will happen when the user clicks a link.
For embedded links, write the sentence as you normally would, and link relevant keywords. Use sentence case and include a period at the end of the sentence.
For standalone links, use sentence case and don't include a period at the end.
Don't say things like Click here.
Placeholders
Use placeholders sparingly and refrain from just repeating the information in the input label.
If you do need to use them, write in sentence case without a period. When using placeholders to give users an example of the expected content, begin your text with “E.g.”
Keep the text short by writing in fragments rather than full sentences. Remember, they’re examples rather than detailed explanations.
Tables
When a table column can display multiple items in a single row, the column header should be written as a plural. When a table column can only display 1 item in a single row, the column header should be written in the singular.
Titles
Write titles in sentence case without periods. Include articles.
Toasts
Write snackbars in sentence case. Include periods (unless it’s 3 words or fewer).
Toggles
Write toggles in sentence case with a verb at the start.
Toggle labels should describe what the control will do when the switch is on. They should not be neutral or ambiguous.
When in doubt, say the label aloud and append "on/off" to the end. If it doesn't make sense, then rewrite the label.
Tooltips
Write tooltips in sentence case. Include periods (unless it’s 3 words or fewer).
Typically definitions and additional information will have a period, but labels won’t.
Ensure they’re concise.