Microcopy

Overview

Microcopy is the words we use to communicate with a user as they interact with the product. Sometimes, it’s a single word. Other times, it may be a couple of brief paragraphs. It’s a critical but often overlooked part of the design of Hudl. Too often it’s an afterthought or written at the last minute.

Imagine using any of your favorite apps with the words “turned off” or made invisible. The words in our interfaces are just as important as the pixels and content.

Hudlies must distinguish microcopy from user content. If a user writes a message to another user, the words that comprise that message are content. Microcopy is the text label that tells you the adjacent button will Send This Message. The name of a playlist is user content. The label on the tab, “Playlists,” is microcopy.

If we wrote it, it’s microcopy. If they wrote it, it’s content.

While designers are typically responsible for writing microcopy, developers, product managers and quality analysts also contribute with help from brand editors, copywriters, content strategists and information architects. The following guidelines should be considered at every stage.

Always think of microcopy as a conversation with the user.

Common microcopy locations are organized into three categories: UI Labels, Non-Label UI Text and Transactional Content.

The following guidelines apply to UI Labels and Non-Label UI Text.

Microcopy Taxonomy


UI Labels

UI Labels are the short bits of text that adorn most interactive elements in a user interface.

UI Labels must use title case without punctuation unless noted otherwise.

Good

Send This Playlist

Bad

Send this playlist.

  • Use title case.
  • No punctuation

Form Field Label

Good

First Name

Bad

First name
Please Enter Your First Name
What is your name?

  • Use title case.
  • Not a complete sentence—never a question.
  • Stick to the thing they’re entering, 1-3 words.

Page/Modal/Screen Title

Good

Register Your Team with This Organization
Offensive Playbook
Create a New Team

Bad

Want to register your team with this organization?
Offensive playbook
Create a new team

  • Use title case.
  • Front-load keywords (nouns and verbs).

Good

Videos
Your Clips
Report Settings

Bad

videos
YOUR CLIPS
Change report settings.

  • Use title case.
  • No caps lock. (Okay in the case of style override.)
  • Avoid complete sentences in navigation.

Non-Label UI Text

This text is generally longer than label text, but still requires a balance of brevity and clarity.

  • Non-Label UI Text should use sentence case. Sentence fragments are allowed and do not require punctuation.

  • If the text is a complete sentence, use proper punctuation. (The only exception to this rule is Placeholders.)

  • Leverage inline links as a tool to provide outs and next steps, especially after errors.

Non-Essential Form Text

Good

A custom domain will make the links you share more personal.

Bad

Custom Domains Make Links More Personal

  • Use sentence case.

Success/Warning/Error

Good

You added 10 clips to your playlist.

Sorry, we couldn’t find any video to import. Want to search again?

Bad

You Added 10 Clips
Clip added.
Couldn’t find video to import!

  • Use sentence case.
  • No punctuation for fragments.
  • Avoid exclamations.
  • Offer a next step when appropriate.

Empty State

Good

To begin, find existing videos on your device and drag them here.

You don’t have any videos to share … yet. Be the first to upload.

You’ll need stats to create reports. Tag a game to get started.

Bad

Welcome to the Video Upload page, the premier place where videos are uploaded on Hudl.com. Our speeds are second to none. To get started, you will first want to establish the location of your existing videos.

No Video

Reports not available

  • Be clear and direct with a complete sentence, sentence case and proper punctuation.
  • Tell them what should be there—and why.
  • Keep things positive.
  • Provide simple onboarding to help them add the right items.

Tooltip

Good

Fast-forward 5 seconds

Bad

FF 5s

  • Fragments are allowed (no punctuation).
  • Key instance of clarity over cleverness.

Product Tour & Onboarding

Good

Step 1: Add some video.

Bad

STEP 1: ADD VIDEOS

  • Use sentence case.

Good

Would you like to add last season’s video?

Bad

Would You Like to Add Last Season’s Video?

  • Use sentence case.

Placeholder

Good

Search for schools, teams and athletes
Select your state

Bad

Find Your Favorite Athletes…
State

  • Use sentence case, no punctuation (especially not ellipses).
  • Don’t replace or repeat the label.
  • The Placeholder should always be a call-to-action (CTA), unless the field is Search with a Label.

More about Placeholders

Placeholders require extra attention given their relationship to UI Labels and the fact that they’re replaced by User Content as the user types.

With the exception of a Placeholder used to provide example inputs, every Placeholder should be a CTA written as a complete sentence (sentence case).

Remember this is the one time we do not punctuate complete sentences. That includes ellipses.

Text Input Fields

With Text Input Fields like name, address and phone number, no Placeholder is needed. The Label will provide enough direction.

Text Input


Pickers

Pickers provide a set list of available inputs, but the user must type to populate results.

Level 1 Picker

The chosen verb for Level 1 Pickers is select, because we have a set list of options. Include a single object (typically repeating the label).

Level 1 Picker


Level 2 Picker (Lookup/Auto-Fill)

Find should lead this Placeholder. It’s an active verb requesting they begin typing to see available inputs. Include a single object repeating the label.

Level 2 Picker


Level 3 Picker (Multi-Lookup)

Find to encourage the user to begin typing. Subject should be plural—let them know they can select more than one result.

Level 3 Picker


A Search is different from other Form Fields because it searches multiple content types and generates results on a separate page.

We design search boxes a number of different ways. Each type has different Placeholder guidelines.

Search with Label

This is our one exception to the CTA rule, because we don’t want to repeat the label. Instead, provide an example of what they should type.

Search with Label


Search without Label

This sometimes occurs with space constraints. When it does, use search as the CTA, followed by what they’re browsing.

Search without Label


Search with Heading

Start your CTA with search—the longer heading saves us from sounding too repetitive.

Search with Heading


Additional Guidelines

Common microcopy like determiners, dates and lists can pop up anywhere. Use the following guidelines across UI Labels, Non-Label UI Text and Transactional Content.

Microcopy Title Casing

Skip the steps: Use titlecapitalization.com with Chicago settings.

  • Capitalize the first and last word no matter what.

  • Capitalize all “major” words (nouns, verbs, adjectives, adverbs and pronouns) including the second part of hyphenated major words (e.g., Self-Report not Self-report).

  • Capitalize prepositions when they are part of a verb phrase (e.g., Start Up Sideline, not Start up Sideline).


Neutral vs. “Your” vs. “My”

Read John Saito’s excellent post for a summary of the issue.

Hudl’s stance on how to orient a UI toward users’ content, features, etc., goes like this:

  • By default, remain neutral (i.e., don’t say “your” or “my” or use any possessive pronoun) if possible. This should work at least 80% of the time.

  • If some form of pronoun is required based on evidence (e.g., convincing qual/quant data), use “Your” (e.g., Your Playbook). This should cover you another 19% of the time.

  • If the previous options fail to provide adequate clarity, you may consider using “My” but should consult the Semantic Wizards and our head of Design before moving forward.


“This” vs. “That” and “These” vs. “Those”

These/those are the plural forms of this/that and behave in the same way. This is used to identify a specific person or thing close at hand or being experienced. That refers to the more distant of two things near the speaker, or to a specific thing previously mentioned.

If you need to refer to an element on the same screen, use “this” and “these” (e.g., “No results found for these filters.”).


Keep in Mind

  • All-caps styles - Some parts of Hudl may be transformed to all uppercase through CSS or platform conventions. One example is a variant of the Item Title style in Uniform Typography. Writers should still author their strings and content using the correct casing guidelines, even if the end result is capitalized. What if the style were to change and you had to rewrite all of those old strings?

  • Writing display text - Some of our guidelines for display text, especially marketing copy, are at odds with guidelines for microcopy. If you are using our display typeface (rare within product), special rules apply.

  • “My (insert UI Label here) needs to be fairly long and looks weird in title case?” - Try to rewrite it. Consider making the longer piece a subhead or small paragraph, or prefixing the rest of the content. If it still feels off, reach out to Kyle Murphy or Alli Pane.

  • When User Content becomes a UI Label (e.g., “Kyle’s new playlist” becomes a piece of Navigation)? - Never change the case of User Content.


Title-to-CTA Congruence

A common pattern on screens includes a title/headline, a few interactive elements or pieces of content, and a button CTA. The microcopy for the title and button should be congruent.

So, if the title asks a question, the button answers as if it were a conversation in itself.

Key verbs and nouns should appear in both the title and CTA.

Want to Clean Your Library?

Yes, Start the Cleaning Process

Register with Your Team

Register Now

Remove Members Who Have Left the Team

Remove 40 Selected Members


Date & Time

Dates and times should be formatted based on the user’s locale and language settings.

Full Dates

Good

Saturday, April 29, 2017 - U.S.
Saturday, 29 April 2017 - International

Bad

April the 29th, 2017
Sat., 29 April 2017

  • Don’t abbreviate days of the week.
  • Avoid “the” between the month and day.
  • Always use Arabic figures, never ordinal. (No 1st, 2nd, etc.)

Abbreviating Months

Good

Tuesday, Feb. 14, 2017 - U.S.
Tuesday, 14 Feb. 2017 - International

Bad

Tuesday, February 14, 2017

  • Abbreviate months more than five letters long.
  • Except for Sept., all abbreviations should be the first three letters.

Month and Year

Good

September 2017

Bad

Sept. of 2017

  • With no specific date, spell out the month.
  • Don’t put “of” between the month and year.

Including Time

Good

Wednesday, Oct. 25 at 3:30 p.m. - U.S.
Wednesday, 25 Oct. at 8:30 a.m. - International

Bad

Wednesday, Oct. 25 at 3:30PM
Wednesday, 25 Oct. at 8:30a.m.

  • a.m. and p.m. are always lowercase with periods.
  • A space should precede a.m. and p.m.

Top of the Hour

Good

Friday, May 12 at 7 p.m.
Friday, 12 May at midnight

Bad

Friday, May 12 at 7:00 p.m.
Friday, 12 May at 12 a.m.

  • With times at the top of the hour, no :00 is needed.
  • For 12 a.m. and p.m., write only “midnight” and “noon”.

Headings & Lists

Use them. Breaking a set of fragmented ideas into a clear headline or subhead with short bullets is a great way to clean up a messy bit of Non-Label UI Text or Transactional Content.

  • In a perfect world, every list will have at least three bullets.

  • Be sure to style all three bullets the same (e.g., either all or none are complete sentences).

  • Parallel structure is required.

  • If the list is a set of steps, use numbers instead of bullets.


Influential Sources