Best practices
Button microcopy is important to get right. It must be clear and concise. Well-considered button labels contribute to the overall accessibility of the product.
Here are a best practice points to keep in mind when designing buttons.
- Be specific. The name of a button should be simple but descriptive. You have at most two words to describe the button's purpose, what it does, and/or where it will take a user. Consider the context and make your button text relevant.
- Use correct casing. Use Title Case for all buttons. In title case, the first letter of each word should be capitalised except for joining words such as a, and, the, or and of. e.g. Add New or Configure Settings .
- Use plain language and avoid jargon. Avoid internal language, uncommon acronyms and jargon. Technical terms are different than jargon and are fine to include if they are relevant and appropriate for our audience.
- Avoid unnecessary or article words. Do not use use of article words such as a, an and the. Also, avoid using unnecessary words that complicate the message of a button, such as Create Release Now, where now is unnecessary. e.g. use Create Release not → Create a Release for article words.
A general summary of best practice do’s and don’ts to help you on your way:
- Keep it short: Ideally no more than 2 words
- Be transparent: what the button says is what the button does
- Context matters: consider what the context of the button is
- Use capitalization at the start and capitalization for subsequent words (excluding joiners
- Consistently apply labels from our below list of Prefix labels
- Do not use use of article words such as a, an and the.
- Avoid using unnecessary words that complicate the message of a button.
- Context matters: consider what the context of the button is
- Use vague words or passive words such as Ok
Prefix labels
|
Label |
Description |
Example |
|---|---|---|
|
Create or New |
When the user will is required to fill out some information before it can be added to the system and such the element doesn't exist in the system yet until they subsequently click add or create. |
e.g. New Space |
|
Add |
When something is literally being added to the system. A user could be adding a table row. |
e.g. Add Row |
|
Configure [function] |
Context is important! For example, if you are within a function and there is embedded functionality, you can use this pattern. |
e.g. Configure Settings |
|
Download or Export |
Downloading transfers a resource from a remote system to a local system without changing its format. When exporting something, you have the ability to change the format of the resource you are exporting out, external to the system. |
|
Prefix labels are not always required for every action. For example, changing the UI's light/dark theme in the menu does not require the word Change to be in the title. E.g. Use 'Theme' instead of 'Change Theme'.