Best Practices
Readability
- Users don’t read, they scan
- Reduce, reduce, reduce! Cut copy so it is short and scannable.
- Avoid paragraphs or multiple sentences of text. Bulleted lists and short phrases are easier to read.
- Organize content into sections so it’s digestible for users, 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 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 the content that follows or content anywhere else on the page
- Be clear; use plain language
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 |
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
- 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
Common Text Elements
Headings
Headings define content sections. Headings should be clear and concise.
H1
- Only one H1 per page
- 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: AI Hub for Business page
- 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)
- Use sparingly since users often skim over 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
Buttons/links
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."
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