Text Content
"The site would have been more useful to me if they'd used more technical terms and meandering sentences within long, long paragraphs."
- said no one, ever.
Resources
The Hemingway App (great tool)
News and Events feed code generator (handy little tool for Michigan Engineering news. Expires at Gutenberg launch)
ARTICLE: 16 Rules of Effective UX Writing
Structure
Subheadings and hierarchy
Use the style dropdown in the text editor to assign heading levels. This helps keep look and feel consistent throughout the site. Use subheadings to create landmarks on your page. Think about what a user would learn if they only read the headings and subheadings.
The Page title will automatically be a Heading1
Assign Heading2, Heading3, paragraph, etc. formats to reflect the hierarchy and relationships of information.
Use headings to reflect structure. Don't skip heading levels, and DO NOT use headings just to affect the design.
Groupings
Look for ways to place related information together
Use the columns in Gutenberg to create 2, 3 and 4 card-wide groupings of related information (provided they are of equal importance). These can provide a visual break from large blocks of text.
Smaller chunks are easier to take in, and grouping them physically together reinforces the idea that they're related.
Home/Landing pages
A home page exists to start a conversation with the site visitor and to direct the visitor to the area of the website that has the answers to the questions they need.
Home and Landing pages should:
Be scannable (avoid wordy welcome messages)
Convey general sense of what the site is about
Act as a hub for the sub-pages in that section
Scannability
Good web content tells users at a glance whether or not they've arrived at the right place, and helps them do what they need to do.
Be concise - If you can say it in fewer words, do so. One idea per paragraph.
Put the most important information first - Users, and search engines, scan to find the information they need and move on.
Avoid acronyms - They’re confusing and/or meaningless to outside users. If you must use an acronym on the page, be sure to use its full name on first reference and include the acronym in parentheses. ie. Climate and Space Sciences and Engineering (CLaSP).
Lists
Where you see commas, ask yourself if it could be a list
Use bulleted lists most of the time
Only use numbered lists if the order of the list items is important (if they're ranked or sequential)
Statistics
When you see a statistic, ask yourself if it could be a graphic or chart
Try a big number and a small amount of text
Focus on the number and impact, provide a link to the data
Voice, Tone and Grammar
Edit mercilessly
Cut out procedural language like "this page explains..." Do this first. It'll give you less copy to have to edit.
Make the language conversational (important even for smart people). SeeHemingway Editor link above. Even though we’re a university, you want content that’s written at about a tenth-grade level.
Rearrange wording to make verbs active and sentence structure simple. Sometimes it helps to find instances of is, are, & were and ask yourself what action is really taking place.
Write meaningful link text
The text your visitor clicks to follow a link should tell them where they're going. ie. Michigan Engineering website, NOT click here or learn more
Central Source of Truth
Avoid posting duplicate information. It quickly becomes difficult to keep up to date. If information already exists on a more central source (ie. the Rackham site for info common to all grad students) link to that page instead of repeating information on your site.
Style
This is Title Case
This is sentence case
DON’T USE ALL CAPS IN BODY TEXT
Limit your use of exclamation points!!!!!!
In the 42 Design system, we typically use use sentence case in the following instances:
Page titles
Subheads/section heads
Anchor links
Titles of promo boxes/widgets
Linked calls to action in promo and body copy
Bullet points in promos
Use sentence case for captions
Ampersands (&) should be used in page titles, headers and promo titles
Calls to Action (CTAs) should not use punctuation
Michigan Engineering style
Writing should follow the Michigan Engineering Style Guide and Associated Press Style
Should always be “Michigan Engineering” and not “CoE”
Should always be “U-M,” not “U of M” or “Umich” or “UMichigan”
All instances of “ENGenius.jobs” should be replaced with “Engineering Careers, by Simplicity”
All instances of rasta@umich.edu should be changed to alec.gallimore@umich.edu
Freshman/Freshmen should always be First Year/First Years
Navigation Menus
Menus should be organized according to what site visitors need, not according to department organization or preferences.
Navigation labels should be brief (1 or 2 words), familiar and different from one another.
Avoid jargon and internal language – Resist the urge to use the names of offices or programs in navigation menus
Stick with commonly understood terms (ie. Home, Contact, About)
Remove repeated words (i.e. Resources, Information, Michigan, Engineering)
Remove excessive identifiers (i.e. Department Contacts rather than Graduate Engineering Department Contact List)
Ask yourself “What will people expect to do/find/learn about if they follow this link?”
Items in the navigation menus should NOT lead to a site with a different navigation.
This disorients users and causes them to distrust your site. This is especially true for main navigation.
Create a landing page related to a topical grouping and link to external pages from there.
Use a Related Links element to link to external sites and indicate to users that they're leaving the site.
Menus should be limited to seven or fewer items.
Using more than seven choices increases the mental load on visitors. Humans can only effectively hold seven(ish) items in short-term memory. Fewer is better.
But what about too many clicks? The old “3-click rule” has been widely debunked. It’s more important to provide users with a clear sense that they’re moving toward their goal than it is to minimize their number of clicks.
Contact
Amy Whitesall amycarss@umich.edu