Formatting is a great way to help people get the information they need and get on with their day.
It’s also a simple way to maintain consistency in our brand, so people know what to expect every time they interact with us. No surprises, just a consistent end-to-end user experience.
Questions? Other examples? Post them in the #sbg-xd-voice-and-tone Slack channel.
Addresses
It’s OK to use abbreviations in address details. Use initial caps and a period.
| Do |
| Apartment: Apt. Building: Bldg. Suite: Ste. Unit: Unit |
Badges
Badges are a brand element, written from the perspective of successful small business owners who love what they do.
Badges should be encouraging and clever. The text should be an idiomatic, conversational phrase, with one word standing out in bold and all caps. That word should be powerful and make sense on its own.
Limit to 4-6 words and 6-8 syllables total. Stick to short, monosyllabic words to give the badge some punch.
|
|
Bold
Use bold to highlight UI elements in instructional text. Don’t use it just for emphasis. You can bold subheadings if your content creation tool doesn’t support heading tags like <H2> and <H3>. But only use one treatment at a time (color, bold, italics, indentation). For example, if the ghost text in a form field is already italicized or a distinct color, don’t make it bold too.
|
|
Capitalization
In most cases, use sentence case, even in headings and titles.
Sentence case is casual and friendly. It helps support our conversational style and brand personality. Sentence case also makes translation a bit easier.
Examples:
Capitalize proper names: QuickBooks Online Self-Employed
If a title or heading includes proper names, use title case for those names.
Example:
How you succeed with QuickBooks Online Self-Employed
|
|
Arrows: Previous/Next
Use sentence case.
Examples:
Although the arrows are no longer labeled, continue to refer to them in copy as the Previous and Next arrows. For added clarification, you can add “back” and “forward” as shown in the example. These arrows are used primarily in QuickBooks for Windows and Mac.
Button names
Use sentence case.
Examples:
In copy, to make sure you’re guiding users clearly, you can add the word button after the button name. But you don’t need to do that for these standard buttons.
Checkbox label
Use sentence case.
Example:
Use clear instead of deselect. The term deselect causes a problem for localization.
Drop-down list names and items
Use sentence case.
Examples:
User-generated names such as vendors and customers will appear the way users entered them.
In copy, to make sure you’re writing clearly you can add the word list after the drop-down list name. Example: Select Mountain View from the Location list.
If the drop-down list doesn’t have a label, or uses ghost text to describe itself, use the main word in the ghost text and tell the customer what to select. For example, if the drop-down list is “Choose a customer” you might say, “Select the customer you want to refund.” Or, “In the Customer field, select the customer you want to refund.”
Make sure the items in the list are in logical order (alphabetical, order of importance, and so on).
If no item is preselected, use text like “Select a vendor” in ghost or hint text format. If you can’t gray out the text, you can use some kind of indicator, like parentheses. For example: “(Select one).”
You might want to show None as one of the options. It should have the same text formatting as the other options in the list.
Ghost text
Use sentence case.
Use ghost or hint text to take the place of field labels or to give more information about filling out a field, such as required formatting and restrictions.
Usually, you just need a noun or noun phrase that describes what to enter in the text box. Avoid obvious verbs like enter, unless needed for clarity or to be conversational, like in first-time use.
Examples:
Headings and titles
Includes:
Use sentence case.
Don’t use punctuation, unless you’re asking a question or need it for emphasis.
Examples:
Menu names and menu items
Use sentence case.
Example:
Navigation elements
Use sentence case.
Examples:
Radio buttons/option labels
Use sentence case.
Examples:
If needed for clarity in copy, you can add the word option after the option name.
Report titles
Use sentence case. (Depending on the interface, these titles may appear in all capital letters.)
Examples:
Tooltips
Use sentence case.
Example:
Use tooltips to give more info about filling out a field, such as a description, required formatting, and restrictions.
Use a period at the end of a tooltip only if it’s a complete sentence.
Currency
Don’t add a space between the currency symbol and the amount ($10.00, not $ 10.00). For negative amounts, place the minus symbol in front of the currency symbol. And don’t forget that other languages use commas instead of periods. Work with the local team for accurate symbols and placement for specific locales. You can specify which country by adding the currency code after the amount if needed.
| Do |
| $10.00
$85 AUD ($70 USD) €35,00 |
Dates
For the US, use: MM/DD/YYYY (without a leading zero) or Month DD, YYYY. Don’t use ordinal numbers (1st, 2nd, 3rd…) in dates. For month and year only, use Month YYYY.
Spell out days of the week when you’re referencing specific dates. Only abbreviate months in 3 letters (like Mar, Aug, Oct) for UI elements like tables, links, footers.
In extreme space-constrained cases, 1-letter abbreviations are OK. Mobile uses 3-letter month abbreviations (for example, Mar 9).
Work with localization experts to accommodate different formats for different locales.
Capitalize AM and PM with no periods.
| Do |
| 11/11/2016
November 11, 2016 November 2016 Saturday, December 8 Set aside next Tuesday for a special event. Mar 15 M-F, 7 AM to 9:00 PM, PT The site will be down for maintenance on Sunday, August 18 at 9:00 PM PT. |
Decimals
Carry decimals to the hundredth place (33.76). Use decimals (0.75) instead of fractions.
| Do |
| 33.76 |
Emoji
Emojis are a big part of how people interact now. We’re trying to be casual and familiar, but be mindful that we’re dealing with people’s finances. Reserve emoji for mobile cases, and Use approved emojis sparingly.
|
|
Identification numbers and sensitive data
To protect our users’ privacy, we mask some of their personal information.
|
|
Italics
Don’t use italics or quotes to distinguish UI elements—use bold instead. Only use one treatment (color, bold, italics, indentation) to emphasize text. If the ghost text in a form field is a distinct color, italics are unnecessary.
| Do |
| In the navigation bar, click Transactions > Banking. |
Links
Using a link in web writing—especially in a headline—disrupts visual hierarchy and competes with the other goals of the page. Unless your main objective is to persuade the reader to click the link, don’t use it.
Use descriptive text for the link, not specific actions (Click here) or location (here). And try to set contextual expectations about what’s behind the link.
Fight the pile-on. Don’t add links to every possible resource, and don’t have multiple links to the same place on the same page. For “Learn more” links in mobile and for Help topics, use sentence case, limit word count, and don’t underline.
If you need to provide legalese around a claim, link to it in the footer with language like “Check out Terms of Use for full details.”
|
|
Lists
Use numbers instead of bullets if the list items indicate the order in which actions should occur, the sequence in which events will or should take place, or order of importance. Otherwise, use bullets.
Initial cap each line (unless you’re using the list items to complete the sentence) and keep your punctuation, sentence structure, and general line length consistent (visual designers will thank you). Introduce the list with a lead-in sentence, fragment, heading, or question (use a question mark if it’s a question). Don’t use a period at the end of the list item unless it’s a complete sentence. If one item is a complete sentence and the rest aren’t, try rewriting the sentence for consistency. Don’t use commas or semicolons at the end of the list items. Don’t use “and”, “or”, or “and/or” at the beginning of any list item.
When you can, use parallel construction for your list items. That means if one item starts with a verb, every item should start with a verb. It also means they all need to be written in the same voice (active) and in the same tense (present, most likely). Fragments are fine, but if one item is a complete sentence, try to write them all that way.
|
|
Mobile
Mobile-first is exactly as it sounds: writing for the smallest screen and working your way up.
Writing for mobile has a unique set of challenges. However, all writing—not just mobile—should be simple and concise, focus on the task at hand, progressively disclose steps, be contextual, and hold your attention. Prioritize by surfacing main info, progressively disclosing, and offering access to details. Write around interfaces, and strive for your writing to be void of location and method of interaction.
Content that goes anywhere and adapts to any context.
Keep in mind:
Names and titles
There are many ways to abbreviate names and titles. When writing in our voice, follow the spirit of the examples below.
| Do |
Sr. VP Jr. Designer BA in English MBA CPA |
Numbers
Use numerals for all numbers up to a billion when representing specific statistics or examples, even if it’s at the beginning of the line or sentence. Spell out casual expressions. Spell out ordinal numbers up to and including “ninth” when indicating sequence or location (except in geographic, military, or political naming conventions).
| Do |
| We gathered insights from 6,058 individuals in 20 mid-market cities in the U.S.
That one photo generated thousands of comments. First, enter your email address. 9th U.S. Circuit Court of Appeals $500M $20B $25K |
Use commas in numbers with four or more digits but don’t use commas in error numbers, page numbers, or addresses. Note that different languages format numbers differently. Work with global writers to make sure your numbers are appropriately formatted.
| Do |
| 1,234.56 in English = 1 234,56 in French |
Phone numbers
Use dashes in phone numbers. Don’t bold anything. Leave out the 1 before the area code and use “ext.” for extension if needed.
| Do |
| Call 888.777.1234 and give the agent your case number.
Contact us at 800-558-9558 ext. 1234. Contact us at 800-558-9558. For QuickBooks Payment support, select option 3. For QuickBooks Software support, select option 5. |
Quotations
When writing a quotation, indent and use quotes around the verbatim quote. Use an em dash without a space to attribute it to the speaker. In the US, terminal punctuation goes inside the quote (“number.”). The exception is with semicolons and colons, but we shouldn’t be using those much anyway.
Salutations
Don’t write a dash or hyphen after the person’s name.
Sentence case
Sentence case is easygoing, casual, and comfortable. Use it everywhere except official names and proper nouns.
|
|
Signing off
The proper way to sign off in an email is “The QuickBooks Team.” Don’t specify a team—it detracts from the overall brand. For example, don’t write: The QuickBooks Online Account Team.
Assess whether we need to sign off at all—many emails go out without any kind of signoff, and instead there is a CTA. Ending with a simple “Thanks” is just fine.
|
|
Symbols (%, &, #, @)
Use “%” with a number, but not when there isn’t a specific number to reference.
| Do |
| 85% of attendees agreed to be interviewed.We’re pretty impressed with the high percentage of responses. |
Use “&” sparingly in place of the word “and” to reference two related subjects. Keep ampersands in company names, titles, and other proper nouns. Ampersands are OK for content with space restrictions, like tweets.
| Do |
| @BradSmith & @johndoerr to honor Bill Campbell at Fortune #BrainstormTechQuickBooks Learn & Support Home
Voice & Tone PG&E |
Everyone uses hash marks for hashtags in tweets—hashtag away. Where we don’t use a hashtag is in place of the word “number.” Go with “No.” instead.
|
|
Spell out the word “at” unless it’s part of an email address or a mention on social media.
| Do |
| accountant_support@intuit.comNever give up. 3 tips from @anutewary on being a successful #entrepreneur. |
Time
Express time as H:MM AM/PM timezone. Include a space before AM or PM, but no periods. Include minutes, even if it’s on the hour (for example, available from 3:00 PM to 4:00 PM). Noon and midnight can be referred to as just that, or as 12 AM and 12 PM.
| Do |
| 8 AM PT11 PM ET
3:00 PM to 4:30 PM PT 7:00-9:00 PM midnight |
Outside of North America, use the 24-hour clock and UTC offsets.
| Do |
| Singapore: UTC+6New York: UTC-5 |
Underline
Underlined URLs are a thing of the past. Make them blue so they stand out. The underline should appear when the user hovers on them.
| Do |
| Featured QuickBooks app Bill.com offers recurring invoices and electronic payments.Track billable time, import contacts, and create invoices from calendar events with Google Calendar for QuickBooks (Beta) |
Units of measure
Leave a space between the number and the unit of measure and use open punctuation (no periods). Use a hyphen if you’re using the number with the unit of measure as an adjective. Provide metric equivalents in parentheses after the English measurement where it’s appropriate.
| Do |
| 35 mph8 fl oz
25 lbs 128 MB of RAM on hold for 3 minutes 3.4-GHz processor 2-day workshop one inch (2.54 cm) |
URLs
Within apps and on web pages, use descriptive links to send users to websites. To spell out a URL, use lowercase, even if it refers to a product name.
Don’t specify the scheme/protocol (http, https), and don’t include the usual www part of the domain.
|
|
