Page History

Best Practices

Readability

• Users don’t read, they scan
Keep copy short.
• Reduce, reduce, reduce! Cut copy so it is short and scannable.
• 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
• Organize 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.
• , search engines, and AI
• 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
• remove 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
• the content that follows or content anywhere else 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

...

Web 2.0 is an evolution of the WSB website into a more dynamic, modern, and engaging digital experience.

Principles:

• Be clear; use plain language

Impact

...

• Copy should be bold and short for bigger impact.
• Make copy action-oriented. Start with a verb.
• Utilize teaser content (progressive disclosure) to give users a small taste of the content, then let them choose to view more
• Example: student stories onBBA Careers page (card modal block)

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 

• Know your audience– prospective students have different needs than peer faculty (program pages vs faculty department pages)
• Incorporate the pages’s Primary Key Word(s) for SEO purposes
• Column I in theinformation architecture spreadsheet

Common Text Elements

Headings

Headings define content sections. Headings should be clear and concise.

H1

• Only one H1 per page, it is also known as the page title
• As few words as possible, 1 or 2 words ideally. (Can be more if there’s a long name, such as “Finance, Investment, and Banking Department”.)
• Should make it clear what the page is about (user might be thinking "Am I on the right page?"– H1 should confirm that immediately)
• H1 should match the browser title and navigation link (there may be exceptions, but this is a great default).
• H1s are consistent across sections of the website, so the H1 is usually pre-decided.
• For example: Each program has an Admissions page, a Careers page, and a Curriculum page. And the H1s are all Admissions, Careers, and Curriculum.

H2

• 1-6 words (can go over if needed, but 60 characters max)

• If more than 6 words, use sentence case for readability

H3, H4, H5, H6

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

Microtitle

Used to provide context or clarity, or to provide a category name or other detail

• 30 characters max
• Keep it short since it is often in all-caps
• Often used right above another heading. Example: small text above page title in the AI Hub for Business hero
• Not available on all components

Introductory copy 

• 160 characters max (two lines)
• A sentence or phrase that appears right below a heading (usually an H2)
• 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
• it. An H2 is usually sufficient without it.

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.
• Use short, action-oriented (start with a verb) phrases instead of sentences.
• If your sentence has lots of commas and connecting phrases, it probably needs to be re-written. Break out the phrases.
• Consider using a bulleted list.
• Special cases:
• Storytelling often involves more text and text in several forms (headings, paragraphs, quotes, etc). Use a component like the card modal: a short heading is used to grab attention, and the user can choose to engage more by opening up the modal with the lengthier copy.
• Like-content / multiple related sections: Consider a show/hide component like an accordion, dropdown, or tabbed content so the user only sees one section at a time.

Buttons/links

• Use short, action-oriented phrases
• Link text should be specific and make sense to the user out of context
  • Bad: "Click here", "View more", "Register here"
  • Good: "Register for the webinar", "Read more about our dean", "View more about the curriculum"

Capitalization

Headings

• H1s: Title case
• H2s: Title case for 1-6 words; use sentence case with headings longer than 6 words for better readability
• H3s-H5s: Sentence case

CTAs

• Sentence case

Buttons/links

• Sentence case

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:

...

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.

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

...

Resources

• NNG resources onwriting for the web 
• Writing Web Copy Google doc