Statewide IT 2024 Workshop
Chris Basham
Notes: Welcome everyone to this workshop, Writing for Product Teams.
UX designer in Enterprise Systems
Notes: I'm Chris Basham. I've worked as a user experience designer and front-end developer in the Enterprise Systems division of UITS since 2012. I've been on many development teams, building many custom web apps.
Words are means of solving problems
Notes: Product teams solve problems. This workshop is about being intentional with the words we use in our products so that they solve problems instead of create them.
The practice of using words to solve problems
Notes: UX writing is the practice of using words to solve problems in digital products. You don't have to be a "designer" or a "writer" to get value from this workshop. This workshop is for any team member who has influence over the words that are used or how they are used.
Notes: Last spring, I mentored an intern whose focus was UX writing. We studied three books and practiced what we learned. The books in order of value to us were: Writing Is Designing from 2020, Strategic Writing for UX from 2019, and Conversational Design from 2018. Many ideas for this workshop are borrowed from these sources.
Web Content Accessibility Guidelines
Notes: The Web Content Accessibility Guidelines (or WCAG) manages a robust set of guidelines pertaining to writing, among many other things. The "Understanding Docs" provides an approachable overview of the guidelines. This will be another primary source for content in this workshop.
Notes: All resources for this workshop, including slides, slide notes, and links, are located on GitHub. I'll show this link at the end of the workshop again.
…is not the problem that we solve as UX writers. We communicate. We invite action. We inspire loyalty. Our teams need to know that UX writing can be used to solve problems.
— Strategic Writing for UX
Notes: "We need words is not the problem that we solve as UX writers," according to the book "Strategic Writing for UX." "We communicate. We invite action. We inspire loyalty. Our teams need to know that UX writing can be used to solve problems."
Writing UX text is iterative, starting with less-than-perfect words, then replacing those words with slightly better words, and repeating until you find the best words.
— Strategic Writing for UX
Notes: The process for writing can be summarized like this: "Writing UX text is iterative, starting with less-than-perfect words, then replacing those words with slightly better words, and repeating until you find the best words."
Notes: In this workshop, we will learn through examples and activities how to make the writing we use in digital products to be useful, usable, and kind.
- Purposeful
Notes: We will learn how useful writing is purposeful.
- Accessible
- Navigable
- Clear
- Concise
Notes: We will learn how usable writing is accessible, navigable, clear, and concise.
- Helpful
- Inclusive
- Conversational
Notes: We will learn how kind writing is helpful, inclusive, and conversational.
Part 1 of 8
Notes: Part 1. Writing should be purposeful.
- Prospective or enrolled students, alumni
- Parents, supporters, caregivers
- Faculty, staff
Notes: Writing will be most effective when you identify the audience that will be reading it. Try to be more specific than "general audience." It's not just students, but it is prospective students or enrolled students or alumni. There are parents, supporters, and caregivers to those students. There are faculty and staff. Each of these categories can get more specific.
- Knowledge, expertise
- Interests, concerns
- Needs, tasks, goals
Notes: Once you've identified the audience, you can research your audience. How you go about that is out of scope for this workshop. But ultimately, research is about asking questions to learn. You should learn about your audience's knowledge, expertise, interests, concerns, needs, tasks, and goals.
- Find content
- Understand content
- Use content
Notes: Identifying, researching, and learning about your audience allows you to write for your audience. Write in a way to help your audience find the content they need, understand that content, and then use that content to meet their goals.
Meaningful exchange of information or resources to meet individual or shared goals
Notes: Many goals can't be solved alone. Cooperation requires a meaningful exchange of information or resources, so all parties can meet their individual or shared goals.
Person ⇄ (Interface) ⇄ System
Notes: Exchange happens between a person and a system through a user interface.
Person ⇄ (Conversation) ⇄ Person
Notes: A more common form of this meaningful exchange happens when two people engage in a conversation. We can use our experience talking with other people as a guide for the writing we use in our digital systems.
Reduce required effort and upfront knowledge
Notes: Because you've already identified and researched your audience, you can make a conversation with your audience easy for them. You can now reduce the required effort or upfront knowledge they need to engage in the exchange.
Waiter: Would you like wheat bread or gluten-free bread?
Customer: Wheat, please.
Waiter: Great.
Notes: This happens when people in a conversation are cooperative. In this example, the waiter says, "Would you like wheat bread or gluten-free bread?" The customer responds, "Wheat, please." The waiter confirms, "Great." In this case, the waiter states upfront the options available to the customer. The customer can provide a simple response by selecting one of those options.
Customer: Can you call me when this table is back in stock?
Furniture rep: No.
Customer: Then what should I do?
Furniture rep: Check back later.
Notes: In contrast, a conversation can be difficult when there isn't cooperation. In this example, a customer asks, "Can you call me when this table is back in stock?" The representative of the furniture company replies bluntly, "No." The rep does not offer any further options. This requires the customer to follow up with, "Then what should I do?" The rep coldly replies, "Check back later." This unhelpful exchange was frustrating for the customer, and it will demand even more of their time and effort, if they really want that table.
- Person reads The Home Depot's
How to Hang Drywall guide. - Person purchases related products.
Notes: Now for an example with a system. A home owner wants to hang drywall for the first time. This requires knowledge, materials, and tools. They discover Home Depot has an online guide to walk through this project with videos and written instructions. They've gained knowledge, but the page also lists the materials and tools that they may need. These product pages then display where to find the product in the customer's local store. In summary, the store aims to gain a loyal customer (and their money) by making it easy for the customer to learn about and complete their projects. Both the customer and the store benefit by this exchange.
- Who: Person and person/system
- What: Working together
- Why: Achieve goals
Notes: Now, I'd like to hear from you. Think about an experience you've had or know about, that involves a person and another person or a person and a system. How are they trying to work together to achieve their respective goals? Did that work out?
Useful writing is purposeful
- Write a meaningful conversation
- Make a user journey
Part 2 of 8
Notes: In Part 1, we learned that writing is purposeful when it helps to achieve goals. In Part 2, we will learn how to make writing accessible.
- Text alternatives
- Color
- Resize
- Layout
Notes: Writing is accessible if readers have the ability to distinguish the content in a text and perceive it as words and concepts.
We can use text alternatives, color, text resize, and layout to help users read the text.
- SC 1.1.1 (Level A)
- Images/graphs: Alt text
- Audio/video: Captions, descriptions, transcripts
<img
src="tomato.jpg"
alt="A cluster of ripe
cherry tomatoes growing
in a community garden">Notes: First, the WCAG success criteria 1.1.1 is about text alternatives. Images that convey information should have a text description. Audio and video should have captions, descriptions, and transcripts. This provides alternative content for assistive technology like a screen reader or braille display. More information is available to users who may not be able to understand the content. Those who are not hard of hearing can still benefit from captions when in a noisy room or in a situation in which they're trying to be quiet.
- SC 1.4.1 (Level A)
- Complement color with visual alternative
Required fields are displayed in red and marked with an asterisks (*)
Notes: Don't just use color as the only way to distinguish content. In this example, this says: "Required fields are displayed in red and marked with an asterisks (*)." If it was just in red, that's not enough information for all users, so provide some visual redundancy, like a symbol.
Notes: There is a minimum text contrast requirement between the text color and its background color. The AAA text contrast requirements are more strict than the AA requirements.
- SC 1.4.4 (Level AA)
- Resize text up to 200% without loss
of content or functionality
Notes: You should be able to resize text upwards of 200%, but it should be done in a way that no information is lost. This can happen when images overlap text or text is clipped.
- SC 1.4.10 (Level AA)
- Don't require horizontal scrolling
when viewport is 320px.
Notes: Scrolling primarily happens vertically. When the viewport of the device is smaller, try to make the content adaptable enough to avert horizontal scrolling. Scrolling in two directions is tricky, so try to avoid it. This gets challenging with content like tables, but there are techniques than can be explored which help.
- SC 1.4.8 (Level AAA)
- Line length: 80 characters or less
- Line spacing: 150% or more
- Paragraph spacing: 250% or more
- Text alignment: Not justified
Notes: To improve layout, aim for line length that is about 80 characters or less. Be generous with line spacing, setting it to about 150%. Set paragraph spacing greater than line spacing, about 250%. In general, default to left-aligned text for English content and don't use justified text on the web.
- SC 1.4.12 (Level AA)
- Adapt content to user-defined layout settings
Notes: Don't cut off or overlap text. Again this can also happen when you are zooming and pinching in. It can also happen when some users have different defaults for their styles in the browser.
- Color
- Spacing
- Typography
- Visibility
Notes: The Rivet Design System is used for both applications and websites. There's a number of things that it provides that can address some of these accessibility issues mentioned, such as color, spacing, topography, and content visibility.
- Color documentation
- Text:
.rvt-color-green - Background:
.rvt-bg-green-100 - Contrast checker (Levels AA/AAA)
Notes: In terms of Rivet color, you can use rvt-color-[the particular color] to put in the the text color. You can also use a background utility class for doing background colors. The documentation includes a contrast checker which you can set to check any two Rivet colors against each other. It will say if the chosen colors pass AAA requirements, AA requirements, or neither of these requirements.
Notes: Rivet also has some spacing utilities, to change margin, padding, or the new gap property for CSS grid and flexbox.
- Typography documentation
- Font size:
.rvt-ts-md(26px) - Line height:
1.5by default - Content:
.rvt-prose
Notes: Concerning typography, there are provided font sizes. For example, for .rvt-ts-md, "ts" stands for "type scale" and "md" stands for "medium" or 26-point font. The body is by default 1.5 line length, which matches the 150% line spacing requirement. The .rvt-prose will automatically style a chunk of content, without needing to explicitly style individual parts.
- Visibility documentation
- Screen readers only:
.rvt-sr-only - Hide for all:
.rvt-display-none
Notes: The Rivet visibility utilities allows you to control the visibility of content. Some content may be hidden to sighted users but announced by screen readers. Some content may be hidden to all users.
Usable writing is accessible
Part 3 of 8
Notes: Now that the writing has a purpose and it is accessible, now let's examine how we can make it navigable.
- Title
- Headings
- Landmarks
- Links
Notes: When landing on a webpage, you need to get oriented, move around, and navigate to other pages. This can be done with titles, headings, landmarks, and links.
- SC 2.4.2 (Level A)
- More specific to less specific parts
- First part should match page heading
- Use delimiter between parts (
-,|,·)
Employee Center | All IU Campuses | One.IU
Notes: The page title is the first piece of content presented to a user. This is what is displayed on a browser tab. Page titles typically consistent of multiple parts, in which it starts with a description of the page, gets more broad, and eventually labels the brand name of the site. That first part usually should match the primary heading of the page (h1). The parts should be separated with some character, such as a dash, pipe, or bullet.
For example, the Employee Center task page on One.IU starts with "Employee Center", uses a pipe character to separate parts, and finishes with the brand name "One.IU". https://one.iu.edu/task/iu/employee-center
<h1>Garden plants</h1>
<h2>Pepper</h2>
<h2>Squash</h2>Notes:
Headings should be used, starting with the h1 element, which stands for "heading level 1". The heading levels should stay consistent, in the right order and not skipped. They should proceed the content it describes. Its description should be relevant for its content. It should be succinct.
SC 2.4.1 (Level A)
| Element | Implicit role |
|---|---|
<header> |
banner |
<nav> |
navigation |
<main> |
main |
<aside> |
complementary |
<footer> |
contentinfo |
Notes: Many HTML elements have an implicit meaning. They are "landmark" elements which means they help users of assistive technology to navigate a page. It helps them to skip to major sections of content, like the header/banner at the start of the page, the main content area, or the footer at the end of the page.
<nav aria-label="Primary">…</nav>
<main>
<h1>…</h1>
<nav aria-labelledby="nav1">
<h2 id="nav1">On this page</h2>
…
</nav>
…
</main>Notes:
It is especially helpful to label landmarks when there are multiple landmarks of the same kind. In this example, there are two areas of navigation. The primary navigation doesn't have a visible label, so the attribute aria-label is used to just explicitly label it as "primary" for assistive technology users. The second navigation has the visible label "On this page" as a heading level 2. In this case, the nav's label is determined by using the aria-labelledby attribute, referencing the heading. The main element doesn't need a label, because there should ever only be one of those.
- SC 2.4.1 (Level A)
- Rivet header:
.rvt-header-wrapper__skip-link
<a
href="#main">
Skip to main content
</a>Notes: The links in the "On this page" navigation (which weren't shown) are examples of skip links. They just jump the page to another section of content. Skip links are also used at the start of a page, so that a keyboard user has the option to, for example, skip to the main content. This is useful for when someone is already familiar with the header/banner at the start of all the pages on a site. The Rivet Header component has a skip link built in.
| In context | Link only |
|---|---|
| Learn more about grow bag gardening | Grow bag gardening |
| Tap the Search icon in the upper nav | Use Search to find gardening tutorials |
Notes: One should understand the purpose of a link by its surrounding context. However, links can be better if written such that the surrounding context is not needed.
For example, the link "learn more" requires the nearby text "about grow bag gardening" to understand what it is about. It is better to simple have the link text "grow bag gardening."
For the second example, the text says "Tap the Search icon in the upper nav". There is no link. You have to guess what it means, and hopefully you've already noticed the search icon. It is better to write "Use Search to find gardening tutorials". "Search" is a link to start a new search. "Gardening tutorials" is a link to the search results for gardening tutorials. That text is also an example of what to search for.
Usable writing is navigable
Part 4 of 8
Notes: Now that you can read and use the text, let's learn how to make the writing clear and understandable.
It's not dumbing down. It's opening up.
— Sarah Richards, Content Design (2019)
Notes: As we go through this part, keep in mind: Improving clarity and using plain language is not dumbing down the content. It is opening it up to wider audience.
- Language
- Unusual words
- Pronunciation
- Reading level
Notes: We can make our writing more clear by paying attention to the use of language, unusual words, pronunciation, and reading level.
SC 3.1.1 (Level A)
<html lang="en">Notes:
All pages should define the primary language of its text by using the lang attribute on the html element. In the case of English language content, use the en value. This helps text-to-speech software more accurately pronounce content.
SC 3.1.2 (Level AA)
<ul>
<li lang="de">Deutsch</li>
<li lang="it">Italiano</li>
<li lang="fr">Français</li>
</ul>Notes:
Where subsets of text differ from the page's primary language, use a different lang value on the containing element. de is German. it is Italian. fr is French.
- Multiple definitions ("gig")
- Jargon ("code blue")
- Slang ("shiner")
- Idioms ("hot potato")
- Acronyms ("ROI")
- Abbreviations ("lb.")
Notes: There are many categories of words that we use which may be challenging for someone to understand. For example, "gig" may have multiple definitions depending on the context. "Code blue" is jargon, because it is meaningful primarily to medical professionals. "Shiner" is British slang for a black eye. "Hot potato" is an idiom meaning a controversial issue. "ROI" is an acronym meaning return on investment. "lb." means "pounds."
These words should be defined so users know what they mean in the given context. Or even better, the content could be written so these words are never needed.
https://en.wikipedia.org/wiki/English-language_idioms https://en.wikipedia.org/wiki/Jargon
- Technique H54
- Use the
<dfn>element
<p>A <dfn>basil plant</dfn>
is an aromatic annual herb
of the mint family.</p>Notes:
Where a word is defined inline on a page, wrap the word in a dfn or "definition" element. In this example, the text is "A basil plant is an aromatic annual herb of the mint family" and "basil plant" is wrapped in the dfn element.
- Technique G55
- Link to
<dt>element
<p>…<a href="#def-basil">basil</a>…</p>
<h2>Glossary</h2>
<dl>
<dt id="def-basil">Basil</dt>
<dd>…</dd>
</dl>Notes:
Definitions can also be curated in a glossary. Words can be linked to the terms on the same page or another page. In this example, the word "basil" links to its definition in a glossary section near the end of the page. The dl or description list is the appropriate container to use for a set of key-value pairs. The link references the dt or "description term" element.
First-year applicants of Indiana University (IU) must have a minimum GPA (grade point average) of 2.5.
Notes: Abbreviations can be defined or expanded inline. For example, "First-year applicants of Indiana University (IU) must have a minimum GPA (grade point average) of 2.5." Now, the rest of the page can freely use the abbreviations IU and GPA because it has been declared.
- Technique H28
- Use the
<abbr>element
<abbr title="Indiana University">
IU
</abbr>
<abbr title="verses">v.</abbr>
<abbr title="Ohio State University">
OSU
</abbr>Notes:
If the expanded form is not desired, it should at least be declared. This can be done with the abbr element. In this example, "IU v. OSU" contains three abbreviations which can be individually expanded to mean "Indiana University verses Ohio State University."
- SC 3.1.6 (Level AAA)
- Link to or declare pronunciation after word
- IU students record their name with NameCoach
Notes: Some words can be troublesome to pronounce. Like unusual words, their pronunciation can be expanded inline or linked to. For example, the NameCoach tool allows students to record themselves speaking their name. This can be listened to in Canvas, so the instructor or classmates can know how to properly speak their name.
- SC 3.1.5 (Level AAA)
- General audiences: Middle school reading level (grades 7, 8, 9)
- Use short, common words (ignore names, titles)
- Short sentences
- Helps readers with cognitive or language barriers
- Readability tests are predictions of clarity
- Know your target audience
Notes: If writing for general audiences, then writing should be at a middle school reading level. This is achieved by using short words that are common. If it is a name or title, then that doesn't need to be altered. Short sentences also help.
Reducing the reading level is a way to help readers with cognitive impairments or those in which English is not their primary language.
There are readability tests that can be used to help reduce the reading level. They are predictions not guarantees of how understandable any given text is.
However, if you know your audience, as we've already discussed, then you should know how to write for them, using the language they know. If your audience is alumni, you know they have a college reading level, and they will have the experience of going through an academic institution.
- 3.2.4: Consistent identification
- Use the same text for the same function
- Choose only one for the same search field: Search, Find, Go
- Prioritize clarity over consistency
Notes: Use words consistently. For example, if the search field in the website's header does the same thing on every page, the submit button should be labeled the same way on all those pages. Don't label it "Search" on one page, "Find" on another page, and "Go" on a third page. Text should be predictable.
However, if making the text consistent reduces clarity, then it is better to be inconsistent.
Usable writing is clear
Part 5 of 8
- Shorten content
- Break up content
- Disclose content
Notes: We will cover three ways to be concise: by shortening content, by breaking up content, and by disclosing content.
- Context
- Facts
- Requirements
Notes: First of all, look for useless information. Limit the purpose of a page, to limit the information needed. This will clarify the particular context, facts, and requirements that should be displayed on any given page. If it doesn't help the user accomplish their purpose for visiting a page, it is a distraction that should be removed.
Such as: "of", "to", "on"
| Don't say | Say |
|---|---|
| a number of | several, a few, many |
| is able to | can |
| in order to | to |
| on a yearly basis | yearly |
Notes: Many prepositional phrases can be shortened with fewer words. For example, instead of saying "a number of", say "several" or "a few" or "many." Instead of "is able to" say "can." Instead of "in order to" say "to". Instead of "on a yearly basis" say "yearly".
- definitely
- extremely
- really
- truly
- very
Notes: Some adverbs don't add value and can generally be eliminated, such as: definitely, extremely, really, truly, and very.
https://prowritingaid.com/Adverbs
Clarify responsibilities
| Passive voice | Active voice |
|---|---|
| It was done. | We did it. |
| It was done by them. | They did it. |
| It must be done. | You must do it. |
Notes: Use active voice instead of passive voice. This will clarify the responsibilities of the subject in the sentence with pronouns and sometimes shorten the sentence length. For example, instead of "It was done" say "We did it". Instead of "It was done by them" say "They did it". Instead of "It must be done" say "You must do it".
- Headings
- Lists
- Paragraphs
- Tables
Notes: Break up long blocks of content to make it easier to skim and understand. Break sentences containing lists into into bulleted lists. Break up similar data points into tables. Break up long paragraphs into multiple paragraphs. Break up related content into sections with headings.
- Accordions
- Disclosures
- Links
Notes: Some content may be helpful to some users but an annoyance to other users. Allow users to opt in to seeing additional content with accordions, disclosures, or links.
| Speaker | Words per minute |
|---|---|
| Person | 120–150 |
| Screen reader | 450 (3 times faster) |
Notes: A person averages to say aloud 120 to 150 words per minute. In contrast, screen reader users commonly configure its reading speed to be several times faster than that.
https://boingboing.net/2017/08/28/this-blind-software-developer.html
"The average syllable length is 3 letters and 0.6 words." https://strainindex.wordpress.com/2010/03/13/syllable-word-and-sentence-length/
Don't be afraid to sacrifice brevity for clarity, especially when extra context is needed or useful.
— Writing is Designing (2020)
Notes: Given this: "Don't be afraid to sacrifice brevity for clarity, especially when extra context is needed or useful."
Usable writing is concise
- Read aloud
- Paraphrase testing
- Content testing
- Readability testing
Notes: Now let's explore some ways you can try to make your writing more usable.
- Participants: You
- Listen for odd or unnatural phrasing
- Tweak content and repeat
Notes: Read aloud content to see how natural the writing sounds. If it sounds odd or unnatural, then change the wording and try again.
- Participants: 5–9
- Read content, then paraphrase it
- Look for misunderstandings
Notes: Conduct paraphrase testing with 5 to 9 participants to understand how they interpret the content. Ask them to read a section of content and then paraphrase it in their own words. After conducting the tests, analyze the responses and look for misunderstandings. Adjust the content as needed and test again as necessary.
https://www.plainlanguage.gov/guidelines/test/paraphrase-testing/
- Participants: 5–9
- Circle content that is helpful
- Underline content that is not helpful
Notes: Conduct content testing with 5 to 9 participants to evaluate the helpfulness of content. Ask participants to circle content that is helpful, and also underline content that is confusing or not helpful.
- Hemingway Editor (free or paid)
- Calculates reading level
- Highlights adverbs, passive voice, long sentences
Notes: The Hemingway Editor is one tool that suggests how to simplify the reading level of a text sample. As you type, it will highlight adverbs, use of passive voice, and long sentences. The paid version helps you make corrections with artificial intelligence.
Part 6 of 8
- "Edge case" dismisses users
- Don't blame the user
Notes: We should stop using the term "edge case." This is a way to dismiss a group of users. Similarly, do not blame users, even if it is their fault. Blaming doesn't help them meet their goals.
Consider the user's:
- emotional state and journey
- life outside of the digital product
Notes: Instead of using the term "edge cases" use "stress cases." This emphasizes emotion. Consider the user's emotional state and their emotional journey while using the digital product. Also consider how the words they encounter in your digital product impact their life outside of that experience.
Try to not increase stress
Notes: We should help users get things done despite the stress they already have in their lives. Hopefully the interaction they have in our digital products won't increase that stress.
- Avoid
- Explain
- Resolve
Notes: Errors will happen. Anticipate them. Then you can try to handle them gracefully by: Avoiding them, explaining them, and resolving them.
- Provide instructions
- List (or constrain) available options
- Place requirements before input field
New password: abc123
Password must include a symbol
Notes: Here are three ways to avoid errors from happening:
First, provide instructions explaining what to expect or how to operate something.
Second, list the available options, so it is not open-ended. Or even constrain the options, such as using check boxes or radio buttons.
Third, place any requirements of an input field before the input field. Don't place it after it or wait until the form is submitted.
For example, if the instructions "password must include a symbol" is placed after the password field, then the user may not see the requirement until after they tried to enter a password. If it is placed before it, the user has a greater chance of success on the first try.
- Display a clear and concise message
- Reassure users
- Link to more details
Notes: Some errors can't be avoided. When this happens, display a clear and concise message. Reassure them concerning loss of time or data if possible. Link to pages that contain more information which may help users understand what's happening.
- Provide options
- Help users progress toward goal
Notes: After explaining an error, then if possible list the options they have to move forward. Help them make progress toward reaching their goal.
We couldn't find the article you're looking for.
Try to search for the article or explore articles by category.
Notes: The "page not found" error is common. Don't display only "404". Don't blame the user for landing on a page that doesn't exist. Instead, be personal and direct. Say something like "We couldn't find the article you're looking for." Then use the features of the site to help them to find the article or explore other areas that could help them make progress. It could say "Try to search for the article or explore articles by category."
Kind writing is helpful
Part 7 of 8
If the language you use tells a potential user that you didn't think about their experience when building this thing, they're not going to use it.
— Writing is Designing
Notes: The words we use should make people feel included and welcome. But as the book Writing is Designing states: "If the language you use tells a potential user that you didn't think about their experience when building this thing, they're not going to use it."
- Technology
- Identity
Notes: This is a huge topic. But we will focus on just two aspects: How we can be considerate of the choices people make regarding their technology and identity.
| Spatial | Chronological |
|---|---|
| Top | Beginning |
| Bottom | End |
| Left | Before |
| Right | After |
Notes: Spatial words like top, bottom, left, and right are not appropriate for describing content that can be experienced in linear ways. For example, when a website is on a mobile device, all the content stacks vertically. And when a website is being announced by a screen reader, it reads the content linearly. Words like beginning, end, before, and after should be preferred, because they scale in more contexts.
- Device dependent:
Click, Tap, Press, See - Device independent:
Choose, Select, Use, View
Notes: In general, do not use words that describe what the user should do with their device, such as click a mouse, tap the screen, press a button, or see the printout. Instead, use words that describe the action the user wants to do with the interface, such as choose an option, select text, use search, or view more details.
| Don't say | Say |
|---|---|
| Saws are for carpenters. | Saws help you to shape wood. |
Notes: Don't tie a tool or product to a role. Instead, describe how a tool or product can benefit the user when trying to accomplish a task. For example, don't say "Saws are for carpenters" but say "Saws help you to shape wood". This wording change invites everyone to work on wood crafts, regardless of their experience.
| Don't say | Say |
|---|---|
| (S)He will be in touch. | They will be in touch. |
Notes: The word "they" is a neutral way to talk about a person because it doesn't imply a gender. So, rather than writing something clunky like "she/he" or "(s)he", just say "they". "They will be in touch."
| Don't say | Say |
|---|---|
| wheelchair-bound | wheelchair user |
| suffers from autism | has autism |
Notes: Don't assign value (especially negative value) to things that describe a person. For example, instead of "wheelchair-bound" say "wheelchair user". Instead of "suffers from autism" say "has autism". Just state the facts in a neutral way.
I hope that I'm inspiring because I worked really hard to be a good [basketball] player. Not because I use a wheelchair.
— Nina Welfle, Writing is Designing
Notes: We should respect how people identity themselves. For example, the book Writing is Designing talked about an accomplished national athlete named Nina. She said: "I hope that I'm inspiring because I worked really hard to be a good [basketball] player. Not because I use a wheelchair."
- Ability, disability
- Age
- Appearance
- Ethnicity, race, nationality
- Gender, sex, sexuality
- Health
- Socioeconomic status
- Spirituality, religion, atheism
Notes: There are many more topics that could be explored than just technology and identity. They include ability, disability, age, appearance, ethnicity, race, nationality, gender, sex, sexuality, health, socioeconomic status, spirituality, religion, and atheism.
https://consciousstyleguide.com
- Articles and resources
- Book to be published May 28
Notes: Articles and resources on these topics can be explored more on the Conscious Style Guide website. There will be a book released on May 28 as well.
Kind writing is inclusive
Part 8 of 8
- Context-aware
- Polite
- Personal
Notes: In this final part, we'll explore how writing can be context-aware, be polite, and have personality.
Sensitive to time, place, preferences
Phone notification: Would you like to automatically turn on Silent Mode when you arrive at the movie theater?
Notes: Writing that is context-aware is sensitive to circumstances, such as time of day, location of the user, and any preferences the user has set. For example, a person's phone may be aware that they are going to a movie theater this evening, according to their calendar. Before leaving, the phone asks if silent mode should be turned on once they arrive, in order to avoid disturbing others during the movie.
Generic, insensitive, assumptions
Email: Exciting news! You have been invited to "Celebrating the life of Jack." RSVP now!
Notes: In contrast, a system can cause emotional distress if it does not tailor messaging for the situation. For example, an event platform that assumes that all events are a joyous occasion is insensitive to situations like a memorial arranged for friends and family of someone who recently died.
https://cloudfour.com/thinks/handling-death-gracefully-in-digital-experiences/
Respects time, anticipates needs
Utility service: Would you like to set up auto-payment? We will email you a week before the monthly bill is due, so you have time to contact us about it before you are charged.
Notes: Writing that is polite respects the user's time and anticipates needs. For example, a prompt from a utility service could encourage the user to set up auto bill payment. It could say: "Would you like to set up auto-payment? We will email you a week before the monthly bill is due, so you have time to contact us about it before you are charged."
Wastes time, imposes, rude
Popup: Spin this wheel to win!
Person: I'm just trying to read this article! I can't find the close button!
Notes: Writing that is not polite wastes time, imposes, or is rude. For example, a person is reading an article and a popup automatically appears, saying "Spin this wheel to win!" Then to make it worse, the close button is tiny and hard to see.
- Voice: What is said (information)
- Tone: How it is said (emotion)
Notes: Writing can also have personality. This is often spoken of in the terms "voice and tone." Voice is simply the information behind what is said. Tone is the emotional way that information is conveyed.
Choose based on audience, context, values:
- Encouraging
- Friendly
- Informational
- Reassuring
- Supportive
- Sympathetic
- Trustworthy
Notes: The particular style of tone depends on the audience, the context, and the values the organization is conveying. Some tones will be used more than others. Not all tones will be used. Here are some example styles: [list styles]
Writing Is Designing (chapter 7)
- Word choice
- Sentence structure
Notes: Different tone styles will direct the word and phrase choices we make and the structure of the sentences we write. Ultimately, a little goes a long way, so don't overdo it. Keep it simple.
| Tone style | Sample |
|---|---|
| Informational | Item deleted |
| Reassuring | You can restore deleted items from the trash bin for the next 30 days. |
| Trustworthy | We keep your data encrypted and secure. We can't see it. We won't sell it. It is yours forever. |
Notes: Here are three samples of how tone is reflected in a message. [Read samples.]
Kind writing is conversational
- Make the conversation messy
- Contemplate the emotional journey
Workshop slides:
https://go.iu.edu/7TRp
Notes: As you leave, think about how you can make your writing more useful, usable, and kind. Thank you for your time and attention.