Versions Compared

Old Version 5

changes.mady.by.user Erica McConnaughey

Saved on

compared with

New Version 6

changes.mady.by.user Erica McConnaughey

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Best Practices

  • Users don’t read, they scan
    • Keep copy short. Avoid paragraphs or multiple sentences of text. Bulleted lists and short phrases or sentences are easier to read.
    • “Take all the copy on the page. Cut it in half. Then cut it in half again.” -Steve Krug, Don’t Make Me Think: A Common Sense Approach to Web Usability
  • Chunk content into sections so it’s easily digestible for users
  • Keep like copy consistent in length
    • Example: If you have a section with 3 cards, each card should have approximately the same character count
  • Consider cutting or reducing introductory text
    • Users don’t read it (and the longer it is, the less likely they are to read it)
    • If you need it, keep it brief and to the point– introduce the content that follows.
    • Avoid fluff and don’t repeat what is elsewhere on the page
  • Make copy action-oriented. Start with a verb.
  • Incorporate the pages’s Primary Key Word(s) for SEO purposes


General Copy

These guidelines serve as a starting point for developing and communicating project-specific copy/character length recommendations to writers and partners. 

A good time to share relevant copy guidelines is when the wireframe is feeling solid. Be sure to consider the specifics of your project before sharing copy guidelines with the team. 

Examples of project copy guidelines:

For Webpages

...

Headings/Titles

  • 60 characters max

Microtitles

  • 30 characters max

Introductory copy 

Typically right below a heading.

  • Define sections with clear and concise headings
  • Headings go in order (H2, H3, H4) to make content readable and accessible for all users. In other words, new sections start with H2s, a heading underneath an H2 is an H3, and so on.
  • Capitalization:
    • H1s: Title case, 
    • H2s: Title case, unless heading is a full phrase, then sentence-case unless it contains more than 6 words, then use sentence-case for better readability
    • H3s-H5s: sentence-case

Introductory copy 

  • 175 characters max
  • A sentence that appears right below a heading/title
  • 200 characters max
  • Use sparingly since users often skim over it; not every section/heading needs intro copy

Supporting copy

  • Keep the copy short. Web users are often skimming headings and jumping around the page to find content they care about. If a section looks like a lot of text
    • , they
  • (also referred to as a "wall of text"), users may skip it because another section is more visually interesting/
    • approachable
  • easy to digest.


Specific Guidelines

...

For SEO

Meta-title

  • 50-60 characters
  • Should mirror content in the H1/page title. (can match exactly or just contain the most important key words) 
    • The meta title “wins the click,” while the H1 “keeps the reader” by confirming the topic once they land on the page.
  • Meta titles appear in SERPs and should be concise, keyword‑focused, and compelling.
  • These also appear as the browser tab titles for users.
  • Our typical pattern for these is "Page title | Program/Dept. | Wisconsin School of Business",
    • We can break this pattern for a good reason (i.e. to include a keyword or help differentiate the page in browser tabs)

Meta-description

  • 150-160 characters
    • max
  • include
  • Include SEO keywords
    • ; spell out acronyms

Hero

Microtitle

  • early in the description
  • Spell out acronyms, such as WSB - Wisconsin School of Business
  • Use actionable, CTA language
  • "Meta descriptions are like an elevator pitch. They are selling what the page is about to help drive more clicks to your site. ...communicate why your page will be helpful, what benefits it provides, or what makes the page unique. You can even aim to answer a question and provide insight as to how your content can help a user with their question or problem."

Heroes

Microtitle

  • 30 characters max
  • Keep it short
    • Keep it short (~30 characters)
  • since it is in all-caps
  • Only available for
    • pattern hero 
  • background pattern hero (not used with hero photos)
  • Example: "AI Hub for Business" on AI Hub webpage 

Page title/H1 heading

  • 20-60 characters
  • Should be similar to
    • Suggest a page title based on
  • what the page is called in the navigation. (e.g. for the
    • About
  • Faculty page,
    • suggest
  • title could be "
    • About
  • Faculty" or "
    • About the Wisconsin School of Business
  • Faculty & Research")
  • Short and scannable (user might be thinking "Am I on the right page?" when they see this – copy should confirm that quickly)
    • Should
  • Do not
    • be filled
  • fill with marketing copy;
    • if it is,
  • move that copy to a subhead or supporting copy or
    • suggest eliminating
  • eliminate it

Supporting copy

  • 60 characters max

Opening section with 3 chunks (simple card)

  • Subhead
    • -
    • 25 characters max
  • Supporting copy
    • -150 characters max 
    • 150 characters max 

Microtitles

  • 30 characters max
  • Short label that can display a news category, student name and major, or another detail near a heading
  • Typically appear in all caps
  • Examples:

Cards

For a list of programs

  • Something similar to https://business.wisc.edu/undergraduate/certificates/ works well. 
  • Paragraph: varies with length of program name
    • 160-170 characters is ideal for programs with shorter names (MBAs, MSBA, MSRE, MSFE, GREM)
    • 110-125 characters is ideal for programs with longer names (all other programs)
  • Bullets: 2-3 points; must to have the same number of bullets in each card; each bullet should have a max of 65 characters

Accordions

Used for FAQs and other lengthy content that can be collapsed or expanded.

  • Question: 80 characters ideal max; 95 characters absolute max
  • Answer: no specific limit; ensure copy is written in plain language and chunked for scannability (use line breaks and bulleted lists)

For Developers

A good time to share relevant copy guidelines is when the wireframe is feeling solid. Be sure to consider the specifics of your project before sharing copy guidelines with the team. 

Examples of project copy guidelines:


Resources

NNG resources on writing for the web

For Webpages

General guidelines