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
  • 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.
• Keep like copy consistent in length
  • Example: If you have a section with 3 cards, each card should have approximately the same character count
• Cut or reduce 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
  • Column I in the information architecture spreadsheet

Standards

On the web, copywriting should follow the regular Wisconsin School of Business copy standards. However there are some exceptions and special cases:

Ampersands (&)

Use of ampersands in headings, navigation, and CTAs is acceptable. Cutting characters has UX benefits: it keeps the element (heading, nav item, CTA) short and scannable and the element can stay longer on one line as screen sizes get smaller. Do not use ampersands in paragraphs or other sentence or longer phrase copy.

Diversity, Equity, & Inclusion

The term Diversity, Equity, and Inclusion will be used on the website instead of Diversity and Inclusion. 

Capitalization

Headings

• 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

CTAs: sentence-case

Misc. 

• Prepositions of four letters or more are capitalized. This includes “with,” which is a rule change from what we were all taught!
• The word “to” is lowercase in a headline when it is a preposition, but when it is part of an infinitive verb, it is capitalized, e.g., Curriculum To Drive Results
• Precollege vs Pre-College Per AP, the correct spelling is precollege
• Nonbusiness is one word.
• UW–Madison has an en dash (not a hyphen)
• Underrepresented is one word

Copy Purpose and Length

Headings/Titles

• 60 characters max
• Define sections with clear and concise headings

Introductory copy 

• 175 characters max
• A sentence that appears right below a heading/title
• 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 (also referred to as a "wall of text"), users may skip it because another section is more visually interesting/easy to digest.

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
• Include SEO keywords 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 since it is in all-caps
• Only available for 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 what the page is called in the navigation. (e.g. for the Faculty page, title could be "Faculty" or "Faculty & Research")
• Short and scannable (user might be thinking "Am I on the right page?" when they see this – copy should confirm that quickly)
• Do not fill with marketing copy; move that copy to a subhead or supporting copy or eliminate it

Supporting copy

• 60 characters max

Opening section with 3 chunks (simple card)

• Subhead
  • 25 characters max
• Supporting copy
  • 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:
  • Student names in story cards on BBA Careers page 
  • "For... " copy at top of Student Support cards on PMBA Culture & Community page

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/subhead: 80 characters ideal max; 95 characters absolute max
• Answer/details: 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 for a project 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:

• Degree comparison project (very granular since copy choices affected the complexity of the code)
• About page 

Resources

• NNG resources on writing for the web 
• Writing Web Copy Google doc