Mobile-first means we design content for the smallest screen and work our way up.
All our writing—no matter the screen size—should be simple, concise, and focused. Small screens force us to write this way, so a mobile-first approach can help us create better experiences for all devices.
As you move from smaller to bigger screens, resist the urge to add more content just because you can. Embrace the white space. Customers appreciate simplicity, no matter what device they’re using.
How mobile is different
- On a smaller screen, text looks longer and more overwhelming.
- Mobile users are likely to be multitasking (driving, ordering coffee) or in distracting places (elevators, sidewalks).
- Small touchscreens are error-prone. Each additional tap increases the chance of making a mistake.
- Typing on a touchscreen takes longer and feels harder.
- In portrait mode, there’s very little horizontal space. Elements will usually need to stack vertically instead of showing side by side.
- You can see less content at once. Scrolling to find what you need can feel like work.
- There’s no hover. You have to tap to see more info.
Mobile content checklist
- Follow the QuickBooks style and voice and tone guidelines.
- Keep it short. Be brutal!
- Prioritize info customers need to move forward.
- Give info in bite-sized chunks.
- Use progressive disclosure (ex.: links to more info).
- No word walls. Use bullets or other visual breaks.
- Pair words with icons for scannability.
- Put important info and CTAs above the fold.
- In native apps, say tap. On responsive web, say select.
- Make CTAs easy to tap: big and not too close together.
- Design for both Android and iOS. Slight differences are OK.
- Make sure your text is readable on all screen sizes.
- Leave room for translation. Expect your text to grow by 40%.
Native vs. responsive web
Native apps are custom-built for a particular platform (like Android or iOS). Users download them from the Play Store or App Store and access them through icons on their device home screens.
Responsive websites automatically change based on device size. Text and images can scale up and down and elements can move to fit the size and layout of the screen. Users can access responsive web experiences on any device, as long as it has a web browser.
Native and responsive web have a lot in common (see How mobile is different), but they have some differences too.
Unique to native
- Device capabilities: push notifications, location and motion tracking, camera, biometric authorization (ex.: Face ID)
- We can create different experiences for Android and iOS with no extra effort because the codebases are different.
- There’s no need to be platform agnostic because we know what device they’re using.
- Subscriptions and billing are through Apple and Google, so we have to follow their rules.
- We need to write release notes for each release.
- Writing app store copy? Check out our guidelines.
Unique to responsive
- Content is the same across desktop and mobile, iOS and Android, unless we intentionally fork the experience. It needs to be platform and device agnostic.
Voice and tone on mobile
We’re the proactive champion, no matter how small the screen.
Keep it simple
Above all, be brief, clear, and readable. Help customers move forward quickly and confidently.
Focus on the payoff
If there’s work to do, tell them the goal and how to get there. No need to be fancy or clever. Short, energetic headlines work best.
It's about them, not us
We don’t waste time talking ourselves up. Feel free to say what we do behind the scenes, but keep it short and helpful.
Speak their language
Talking face to face, you can explain things several ways or use long metaphors. On mobile, you get a few short words. Test with customers until you nail it. Learn more about content testing
Delight when it's right
Make them smile when you can, but don’t use up extra space. Quick and easy is always delightful.
Tips for writing small
First, decide what to say. Then find the shortest way to say it.
Worth the space
Not worth the space
Explaining the payoff
Detailed info about the future
- Track your mileage automatically and get 57.5¢ a mile.
- At tax time, you’ll be ready.
- Update your billing info so you don’t lose access.
- Subscribe and save 50%.
- Next January, tap Taxes, then Annual taxes to see your 2020 tax checklist. When we’re done with this step, we’ll move on to the final phase, which is adding the products and services you sold. When it’s time to add a customer, we’ll ask for their name, address, phone number, and any other info you want to keep track of.
Reducing work and worry
Educational content they didn't ask for
- No employees? You can skip this part.
- Tip: Link your accounts to add expenses faster.
- Not sure? Stick with X for now. You can change it anytime.
- It’s OK to estimate.
- Your best guess is fine.
- Select all that apply.
- Select all that applied in 2020.
- Ready to see your chart of accounts? Before you continue, you should know a bit about how the chart of accounts works. It’s an index of all the financial accounts in the general ledger of a company. In short, it's an organizational tool that provides a digestible breakdown of all the financial transactions that a company conducted during a specific accounting period, broken down into subcategories.
Guiding them to the right answer
- Construction businesses usually pick X.
- The usual amount is $X.
- These settings work for most people.
- Based on your info, X is right for you.
- Got a marriage allowance? (Uncommon)
- QuickBooks Simple Start (Most popular)
- What kind of work do you do? (Ex.: construction)
- With QuickBooks invoicing, you can customize invoices to showcase your brand, add your logo, preview what the invoice looks like, accept online payments, get notified when customers view and pay, convert estimates to invoices, and save invoices as a draft.
- Ask your accountant before making changes.
- After you send this, you won’t be able to change it.
- If you edit X, it will change Y.
Tips to cut characters
Follow our style guide
- Use active voice and simple tenses.
- Use common contractions.
- Use common abbreviations and acronyms.
- Use ampersands in menus and labels to join related items. Avoid them in headlines and body content.
Design on mobile screens first
- Ask for mobile mocks or make your own.
- Design for common devices (ex.: iPhone 11) but make a plan for all devices and languages. For example, you can leave space for the text to wrap or have it dynamically change to a smaller font size. As a last resort, you can truncate the text with ellipses.
Ditch filler words
- is designed to
- sort of
- kind of
- a little
Skip unneeded prepositions
- Where did it go to? ➞ Where did it go?
- Inventory you sold off ➞ Inventory you sold
- Meet up with a client ➞ Meet a client
Use short words and phrases
- a little bit, a small amount of ➞ a bit, some
- quite a while ➞ a while
- a small number of ➞ a few
- often times ➞ often
- in some cases, there are times when ➞ sometimes
- generally speaking, in most cases, for a lot of people ➞ usually
- when the time comes ➞ later
- which means ➞ so
- in addition ➞ plus, also
- overly ➞ too
Start with a verb
- You can do it all in one place ➞ Do it all in one place
- This is where you can find X ➞ Find X
Use hard-working verbs
- Record that the invoice got paid ➞ Mark the invoice paid
- how much debt you have ➞ what you owe
- use your camera to capture ➞ snap a photo
- you’ll receive a charge for ➞ you pay
- Enter your details to schedule an appointment with a TurboTax expert in under 5 minutes ➞ Connect with an expert in under 5 minutes
Make it a question
- Enter your payment method ➞ How did you pay?
- Enter the due date ➞ When is it due?
- Let’s find out where your refund is → Where’s that refund?
Start your question another way
- What region are you in? ➞ Where are you?
- Which customer paid you? ➞ Who paid you?
Try removing the who or what
- We can help
- Here’s why
you should do it.
- Need help? Reach out
- See how much
- Taxes are due April 15. Let’s get ready
- Forgot your password? Let’s reset
your sign-in infoit.
- How did you pay
- Snap a photo
of your 1099-INT form.
- [Name], unlock more savings
on credit cards, loans, investments, and more
- Scan the barcode on the back
of your driver's license
Use sentence fragments
- Your changes have been saved ➞ Changes saved
- Do you want to save your changes? ➞ Save your changes
- Have you got a second? ➞ Got a sec?
- We hope to see you soon ➞ See you soon!
- Here’s how it works ➞ How it works
- Are you done editing? ➞ Done editing?
- Why do you need to know my marital status? ➞ Why we’re asking
Don't be robotic
- Location settings incorrect. Fix now. ➞ Mileage tracking is blocked. Let’s fix it.
- Action failed ➞ That didn’t work
Don't leave out crucial info
- Enter total ➞ Enter total before tax
- Add your loan info ➞ Add your loan info (not student loans)
- Refresh ➞ Pull down to refresh
In headlines, subheaders, and body text, use possessives (your, their) and articles (a, the).
In buttons, labels, menus, and confirmations, leave out possessives and articles. There isn’t always space, and we want to be consistent.
Exception: In onboarding, feel free to use possessives in buttons (ex.: “Get my discount”) and more conversational labels and confirmations.