Basic guidelines for mobile content

  • Follow the QuickBooks style and 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

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)

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.

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”

Use contractions.

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

  • very
  • actually
  • really
  • just
  • even
  • totally
  • extremely
  • is designed to

Example:
“QuickBooks 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

Example:
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)
  • 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 common abbreviations in small spaces
    “Wed,” “mo.,” “sec,” “yr,” “hr”

Ampersands (&)

  • 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.”
  • OK to use them in tight spaces (like labels) if the items are commonly paired together:
    “profit & loss,” “meals & entertainment.”

Note: Only English has ampersands, so they expand when translated.

Slashes (/)

  • Don’t use them in full sentences:
    “Add your income/expense transactions” (say “Add your income and expenses”).
  • OK to use them in tight spaces (like labels):
    “Spouse/domestic partner,” “Car/truck,” “Hrs/month”

Don’t leave out crucial info because it doesn’t fit.

  • 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 be robotic, terse, or bossy

  • Action required: bank connection issue”
  • “Server error. Refresh the page.”
  • “Action failed.”

Types of mobile content
(and how to write them)

Headline

What it is: a short, prominent message that communicates the most important info on the page, modal, or container

Guidelines

  • 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

Subhead/helper text

What it is: secondary text that adds more info or guidance

Guidelines

  • 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

Top header

What it is: short text that describes the purpose of the page and grounds the user in where they are

Examples:
“Add note,” “Select province,” “Edit trip,” “Trip details”

Guidelines

  • 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. For example:
    • “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

Examples: “Add,” “Save,” “Edit”

Guidelines

    • 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

Guidelines

  • 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”)

Alert/confirmation

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

Guidelines

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

Notification

What it is: a message that appears on the user’s device, outside the app

Guidelines

  • 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

Ways of 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)

 

  • Assistant layer
    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

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.