Mobile

keyboard_arrow_right

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.

Tips for writing small

First, decide what to say. Then find the shortest way to say it.

Is it worth the space?

Worth it

Explaining the payoff

  • 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%.

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)

Reducing work and worry

  • 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.

Preventing mistakes

  • 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.

Usually not worth it

Detailed info about the future

  • 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.

Educational content they didn't ask for

  • 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.

Exhaustive lists

  • 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.

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

Examples

very, actually, really, basically, just, simply, even, is designed to, sort of, kind of, a little, that, only, slightly

Skip unneeded prepositions

Examples

  • 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

Examples

  • 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

Dos and Don'ts

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 you.
  • Here’s why you should do it.
  • Need help? Reach out to us.
  • See how much money you spent.
  • Taxes are due April 15. Let’s get ready to file.
  • Forgot your password? Let’s reset your sign-in info it.
  • How did you pay for it?
  • Snap a photo of your 1099-INT form.
  • [Name], unlock savings on credit cards, loans, investments, and more ➞ [Name], unlock more savings
  • 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

Context matters

  • 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.


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.

Delight when it's right

Make them smile when you can, but don’t use up extra space. Quick and easy is always delightful.