What is UX microcopy?
User experience (UX) microcopy is the short, helpful text that guides people through how to use a product or service, what to expect, and what each part of it is for. It includes labels, helper text, error messages, button text, and other instructions.
Examples of microcopy include:
- Text that explains file size requirements when uploading documents
- Text on a button that helps the user understand what will happen when taking that action, such as "Submit application" or "Download the file"
- An error message that explains what error has occurred, such as "Last name is required" or "File size needs to be less than 1 MB"
- Formatting instructions, such as "Enter the date in month-date-year format"
Mass.gov style guide
State sites and apps should follow the Mass.gov style guide (state login credential is required). Mass.gov uses the Associated Press Stylebook guidelines and Merriam-Webster Collegiate Dictionary. Following are examples for UX microcopy.
Sentence case
Sentence case is when you write a title, label, heading or other brief text with the same capitalization as you would in a regular sentence. Use sentence case for page titles and headings.
Headings
Use sentence case for headings and subheadings. This includes card titles. When using multiple heading levels, be sure to use them in the proper order (H2, H3, H4, etc.) for clarity and accessibility.
Never use bold or italic text in place of a heading. Bolded text will be read in the same way as non-bolded text by a screen reader.
Date & time formatting
If your microcopy includes dates, follow these formatting guidelines:
- When a month is used with a specific date, only abbreviate months with longer names: Jan., Feb., Aug., Sept., Oct., Nov., and Dec.
- Spell out the month when it using alone, or with a year alone
- Do not use -st, -nd, -rd, or -th endings on dates
- Use commas when giving the date, month, and year
Examples:
- Saturday, June 26
- Monday, Dec. 5
- October 1984
- Oct. 4, 2022
When writing the time:
- Don't use :00 if a time is on the hour
- Use a.m. or p.m. (lowercase, with periods)
- If the range of hours are both a.m. or p.m., use them once
- Use an en-dash without spaces on either side for time ranges
Examples:
- 8–10 a.m.
- 9 a.m.–2 p.m.
- 5:30–7:45 p.m.
- 10:15 a.m.–12:30 p.m.
Address formatting
Format street addresses as follows:
- Line 1: Street address (Use numbers and only abbreviate St., Blvd., and Ave.)
- Line 2: Use for floors, suites (Spell out and use capping for floors and suites)
- Line 3: City, State ZIP (2-letter state abbreviation with no punctuation, 5-digit ZIP code)
Example:
1 Ashburton Place
Suite 811
Boston, MA 02108
Buttons, menu items, and calls-to-action
Use sentence case for buttons, menus, and actions. Examples:
- Complete your registration
- Attend an event
- Submit your application
Link text
Links have 2 parts:
- The anchor text, or words to be clicked
- The URL, or web address that the words link to
Someone selecting a link should always know where that link is going to take them. This is why you should use descriptive, specific anchor text instead of pasting a URL in directly. Don’t use "click here," "read more," or other general language for links. This is more accessible and useful for everyone. Use however many words you need to in order to make the link destination clear, whether it's a few words or a full sentence.
Examples:
- SNAP benefits, formerly the food stamps program, are part of a federal program to help people with limited means pay for food. You can find out if you are eligible for SNAP benefits online.
- Read more about digital accessibility policies.
- If you have questions, email the Massachusetts Design System team.