Mobile-first means we design content for the smallest screen and then work our way up. With this focus, we’re moving toward crafting content that goes anywhere and adapts to any context.
All writing for digital experiences—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 the main info first and progressively disclosing additional details or steps. Write around interfaces (don’t mention specific devices), and strive for your writing to be void of location and method of interaction.
You’re limited by the amount of real estate available on the device. A tiny screen means fewer words and the possible need for abbreviations. Reveal info as the user needs it.
Mobile customers are often distracted (multitasking and on the go). They’re usually not sitting at a desk.
Some of our mobile apps are standalone, but many more are companion apps to our web or desktop products.
We strive for consistency. Apple and Google devices work differently, so be device-agnostic in your writing.
- Basic guidelines for mobile content
- Formatting mobile UI content
- How mobile content is different
- Mobile content checklist
- The champion on mobile
- Types of mobile content (and how to write them)
- Writing for a small space
Basic guidelines for mobile content
- Follow the QuickBooks voice and tone guidelines
- Write for portrait orientation
- Prioritize consistent language
- Put important info and CTAs above the fold
- Don’t make a user scroll more than once to read the whole screen
- Give info in small chunks with the option to find out more (progressive disclosure)
- Limit platform-specific words like “touch” and “tap” (use “select” instead)
- Design for both Android and iOS, allowing for slightly different experiences as needed
Formatting mobile UI content
Bullets and lists
A way to format subcopy and data
Length: 2-4 items per subcopy list, any number for data
Construction: any so long as it’s parallel (use numbered items only when they’re steps
Containers that include other types of mobile content, used for in-context help, FTU, “extra credit,” search, CUI, etc.Length: 1 question/task/idea per utterance or screen
Attributes: encouraging, experienced, optimistic
Principles: Focus on the payoff; make it personal
Refer to Intuit best practices for conversational user interfaces
How mobile content is different
- There’s less space on the screen
- Text looks longer (and more overwhelming) on mobile
- It wraps more
- It takes up a bigger percentage of the screen
- Users expect mobile apps to be simple
- Mobile users are often multi-tasking (driving, ordering coffee) in distracting environments (in the elevator, on the street)
Mobile content checklist
- Write for portrait orientation.
- Use active voice, present tense, and sentence-style capitalization.
- Prioritize consistent language.
- Don’t make a user scroll more than once to read the whole screen.
- Use secondary screens for secondary info.
- Stay on voice and tone.
- Don’t write less; write more simply. Don’t just shorten web content.
- Skip platform-specific words like “touch,” “tap,” and so on.
- Use accessible language (ex: “go to” instead of “see”).
- Make sure users always have a way forward.
- Remember that Android uses a back button on the device itself.
The champion on mobile
How do we show up as the champion when there’s less space and focus?
We empathetically adapt to meet the user where they are.
On mobile, this means:
- We keep text to a minimum and prioritize the most important info
- We get out of the way so users can get stuff done
- We make their choices quick and easy so they can get on with their day
Simple-seeming interactions can be full of hidden choices:
- “What should I do next?”
- “Will this work for me?”
- “Should I keep trying or give up?”
- “Can I ignore this?”
- “What should I put in this box?”
- “What should I choose from this menu?”
- “What should I do about this error?”
As the champion, our job is to help users:
- Make the right choice
- Make a choice fast
- Feel confident in their choice
Here’s how we do that
Tell them what they need to pay attention to (and why)
- “This could save you over $1000 in taxes.”
- “Update your billing info so you don’t lose service.”
And what they can safely ignore
- “This only matters if you make over $31,500 a year.”
- “Skip this if you work from home less than 25 hours a week.”
Tell them when the stakes are high
- “Ask your accountant before changing this.”
- “You can only send this once, so double-check it first.”
And when they can wing it
- “Not sure? Stick with X for now. You can always change it later.”
- “Don’t worry about getting it perfect—your best guess is fine.”
Tell them what’s common for people like them
- “People who drive for work usually choose X.”
- “The standard amount is $X. Stick with that unless you know yours is different.”
And what’s rare or unlikely
- “This is uncommon, but it could save you money if you qualify.”
- “Got a marriage allowance? (Uncommon)”
And when possible, take tricky decisions away.
- Set a default that works for most people. Give them the option to change it.
- Use what we already know about them (or people like them) to make smart assumptions.
- Do as much work as we can behind the scenes. Let them know only as needed.
Types of mobile content (and how to write them)
A short, prominent message that communicates the most important info on the page, modal, or container.
- The user may not read secondary content, so make sure the headline contains the most important info
- If the user needs to do something, tell them in the headline (otherwise they might miss it)
- When possible, include a benefit
- Try to keep the headline to 1 line
What it is: secondary text that adds more info or guidance
- Use subheads or helper text to:
- Show our personality
- Explain the benefit
- Give expert advice
- Proactively answer questions before the user has to ask
- Don’t repeat the contents of the headline or primary text.
- If the primary text is “Add a home office,” don’t say “Give us info about your home office” in the helper text.
- Try to keep subheads and helper text to 1-2 lines
- Include a link to additional info if helpful
What it is: short text that describes the purpose of the page and grounds the user in where they are
“Add note,” “Select province,” “Edit trip,” “Trip details
- Use verbs when the user is taking action and nouns when they’re viewing info (if the page has different states, use your judgment
- Use consistent top headers across similar pages.
- “Edit trip,” “Edit transaction,” “Edit invoice” (changing something that already exists)
- “Add note,” “Add income,” “Add address” (adding something new)
- “Trip details,” “Transaction details” (viewing details)
- To stay consistent, don’t use articles (“a,” “the,” and so on) or possessives (“your”) because there isn’t always space
Call to action
What it is: text on a link or button
“Add,” “Save,” “Edit”
- Use consistent CTAs for similar actions. For example:
- Use “Save” when the user is saving something they created or edited
- Use “Add” when they’re adding something new
- Use “Apply” when they’re applying a filter or date range
- To avoid repetition, use 1-word CTAs (“Add,” “Save”) when the rest of the page makes it clear what’s happening. Example:
If the top header is “Add note,” the CTA should be “Add”
To stay consistent, don’t use articles (“a,” “the,” and so on) or possessives (“your”) because there isn’t always space.
Field label/ghost text
What it is: text above and inside a field that tells the user what to enter
- Use labels to describe in 1-2 words what info goes in the field
- In labels, don’t use possessives (“my,” “your”) unless it prevents confusion. Example: Say “Your email” if the user might think we mean their customer’s email.
- For optional fields, put “Optional” in the ghost text (not in the label)
- When an example would be helpful, put it in the ghost text (“Ex.: Heidi’s Hardware”)
- Otherwise, make the ghost text a short question (“Who paid you?”) or simple instruction (“Enter your note”)
What it is: a short, contextual message that tells the user about an action they need to take, gives important info, confirms an action, or celebrates a success
- 93 characters max, including the CTA
- In alerts, be clear and informative (which doesn’t mean dry) to make sure the user understands what’s happening and what to do
- Confirmations are a chance to delight (when it’s right) and celebrate the user’s success (not ours)
What it is: a message that appears on the user’s device, outside the app
- 62 characters max
- Use notifications to:
- Inform users of critical issues that affect them or their account
- Give proactive insights and tips
- Let them do tasks (like sorting transactions) without logging in
- Add delight to their day (when it’s right)
- Use emoji to add visual interest and emotion, but don’t use them to replace words
- When possible, let users do actions directly in the notification
- Prioritize messages so users don’t get notifications too often
Writing for a small space
Use active voice and simple tenses
- “We updated the app” instead of “The app has been updated”
- “You’re in a free trial” instead of “You have been placed in a free trial”
- “You’re done!” instead of “You are done!”
- Use pronouns (“we,” “they,” “it,” and so on)
- “Forgot your password? We’ll help you reset it.” instead of “Forgot your password? We’ll help you reset your sign-in credentials.”
- “We’re here for you” instead of “The QuickBooks team is here for you”
Start sentences with verbs
- “Do it all in one place” instead of “You can do it all in one place”
- “See you soon!” instead of “We hope to see you soon.”
Use abbreviated sentences
- “Changes saved” instead of “Your changes have been saved”
- “Save your changes?” instead of “Do you want to save your changes?
- “Got a sec?” instead of “Have you got a second?”
Remove filler words and phrases
- is designed to
is designed to make accounting simple , but really, it’s also extremely useful if you need to and lets you manage your whole business in one place.”
Swap long words and phrases for short ones
- utilize > use
- initialize > start
- initial > first
- finalize > finish
- implement > do
- assistance > help
- remainder > rest
- just a little bit > a bit
- referred to as > called
- due to the fact that > because, since
- at certain times, there are times when > sometimes
- generally speaking, in most cases, it is usually the case that > usually
There are times when Sometimes, things go a just a little bit differently from the way we don’t go as planned. The good new is, our support team is standing by to here to give you assistance help.
Space-saving dos, don’ts, and OKs
Abbreviations and acronyms
Do use instantly-recognizable acronyms:
“IRS,” “CRA,” “HMRC,” “SDK” (for developers only)
OK to use common abbreviations in small spaces:
“Wed,” “mo.,” “sec,” “yr,” “hr”
Don’t use unfamiliar abbreviations and acronyms:
“trx” (say “transactions”), “FI” (as in “financial institution”—say “bank”), QBO, QBSE, TT, accounting abbreviations like “A/R” and “A/P” (except when talking to accountants)
OK to use them in tight spaces (like labels) if the items are commonly paired together: “profit & loss,” “meals & entertainment.”
Don’t use them in full sentences:
“Give us your info & we’ll estimate it for you.”
Don’t use them with items that aren’t commonly paired together:
“reports & mileage,” “shirt & towel.”
Note: Only English has ampersands, so they expand when translated.
OK to use them in tight spaces (like labels):
“Spouse/domestic partner,” “Car/truck,” “Hrs/month”
Don’t use them in full sentences:
“Add your income/expense transactions” (say “Add your income and expenses”).
Do: Change the design to make space
Do: Find a way to say it in fewer characters
Do: Add a link to more info (progressive disclosure)
Don’t leave out crucial info because it doesn’t fit.
Don’t be robotic, terse, or bossy
- Action required: bank connection issue”
- “Server error. Refresh the page.”
- “Action failed.”