35 tips for writing for online and mobile UIs

Writing for web- and app-based UIs often means breaking traditional grammatical “rules,” which were derived from different user contexts (slower publishing/delivery cycles and longer attention spans).

Here are some rules for better interface writing, courtesy of Jakob Nielsen and my own interactive product design experience.

Nielsen’s reader research demonstrates that people scan UIs and apps instead of reading them word by word.

Create scannable text by:

  1. organizing content in an “inverted pyramid,” starting with the conclusion, then supporting information, then background / framework.
  2. cutting the word count at least in half. Users read only 20% of the words (28% at most). This percentage drops as a UI’s total word count increases.
  3. highlighting keywords (links and bold).
  4. using meaningful (not “clever”) sub-headings as organizational demarcations and summary statements.
  5. organizing content into bulleted lists.
  6. focusing on 1 idea per paragraph, in the first few words.

Here are some more “writing for the web” tips from Jakob:

  1. Users scan instead of reading (though users consume long-form content, e.g. ebooks, differently).
  2. The best online content is linear, reader-driven, actionable content composed of specific, comprehensive data. Fragments trump sentences.
  3. Write numbers as integers (1) instead of text (one) to address readers’ desire for “facts.”
  4. Your headline text gets 40-60 characters of attention. It must stand on its own and make sense when the rest of the content is not available.

More rules for writing for the web

These are my own basic style rules, based on ad hoc experience.

Ask “What would the NY Post do?” Think tabloids, not novels.

  1. 1 action per page/screen. My usability tests consistently indicate that users quickly fixate on a single idea “satisfice” within a UI and ignore alternatives.
  2. 1 idea per paragraph. This typically means 1 sentence per paragraph, sometimes 2. A 4-sentence paragraph is almost always too long.
  3. Numbers, not words.
  4. Lists, whether numbered or bulleted, are your friend.
  5. People look at photos first, especially photos of people.
  6. It’s better to display nothing than default images or filler text.
  7. Semicolons are almost never okay.
  8. Short lines of text are easier to read. Lines of text generally shouldn’t be longer than 34 ems long. (An “em” is generally equal to the height of the typeface – it’s a measurement based on the width of the letter M at the text’s current size.)

You’re always better minimizing visual emphasis. Focus on using fewer words, so they aren’t all competing for the reader’s attention.

  1. You can center 1 piece of information per page. Centering breaks a design grid and thereby becomes the most important thing on the page.
  2. Stick with bold for emphasis.
  3. Don’t present text in all caps unless you know the reader will stop – it destroys the letterforms. Sentence case is best. Possible exception – small words in buttons.
  4. Italics are almost never a good idea. Italic sans-serif is a typographic foul and italics generally distort letterforms too much for pixelated screens. Stick with bold. If you need a backup, try changing your emphasis style to display a highlight color on the text rather than italicizing it.
  5. Use bold sparingly. Words, not sentences.
  6. Don’t use bold, italics, and/or caps together on the same word.

Links are often the victim of “form before function” design thinking. Keep links visible!

  1. Use a very different color from the text.
  2. Include verbs in links.
  3. Include the destination page title in the link.
  4. If you hide everything else on the page, the reader should still know what the link will point to by reading the link text.

Grammar for teh internets:

  1. Log in is a verb. Login is a noun. Same with sign in, back up, etc. You almost always use the verb form.
  2. A lot is always 2 words except when it’s a verb, which is probably not what you mean. Remember it this way: “a pound, a bunch, a lot.”
  3. “It’s” is the contraction, “its” is the possessive pronoun. Possessive pronouns never have apostrophes: his, hers, its.
  4. When creating possessive nouns, use “‘s” for singular nouns, even if they end with s, e.g. “my dog’s collar is silver” or “Chris’s tutorial is helpful.” The latter is optional in some books, but if you always do it this way (“‘s”) you’ll avoid some crazy coding whenever you have to build an interface that creates a possessive noun from dynamic values like usernames.
    Put an apostrophe after the s if the noun is plural and ends in s, e.g. “the 7 dogs’ collars were all silver” or “The Judds’ interview was full of shocking revelations.”
  5. 1 space after periods, not 2. Too much spacing creates visual “rivers” of whitespace within large blocks of text.
  6. “Everyday” means common, mundane, or pedestrian. “Every day” describes the frequency of an occurrence. I wish I could write an epic blog post every day, but I can barely squeak out an everyday post on a quarterly basis.
  7. “Anytime” means “at any time” but I don’t think it’s ever okay to write “at anytime.”