Writing for the User Experience

Editor's Notes

• #2: Section 1, intro 10-10:10
• #3: Some brief background about me…
• #4: I’m passionate about this stuff. I wrote a book about writing effectively that was published earlier this year. Initially, the idea for the book was “Writing for the Web,” but the more I studied and read and researched this topic, the more I realized that most of the concepts are important regardless of format, and the lines between print and digital content are increasingly fuzzy. The book’s focus is on writing with clarity and writing with your readers in mind. As you can imagine, these concepts matter no matter the format of your writing. There is a chapter in this book on writing for the web, but I wanted to be clear that if you’re interested in this topic, you’ll probably find the book in its entirety useful. I also teach a four-week, online class on Writing for the Web through Library Juice Academy.
• #5: As I was writing the book I did a lot of research, and I wanted to recommend some readings on this topic. Many of you might be familiar with Letting Go of the Words, it’s a classic book on web writing by Ginny Redish, first published in 2007. Nicely Said is a more recent book (2014) also on writing for the web specifically. Ann Handley’s Everybody Writes is my favorite.
• #6: Section 2, user goals and behavior 10:10-10:20 So let’s get started. To be clear: writing is all about the reader. You are writing so they can learn something or do something. So it’s important you know how users approach content on your website.
• #7: Users are coming to your website for a reason. They need to get a specific question answered, or they need to complete a specific task. Rarely do users visit your website to explore or discover. On library websites, they might want to search for materials, find your hours, reserve a study room. They might want to learn how to use databases more effectively, see details about a library event, or connect with an expert. They have a goal in mind.
• #8: No matter who your audience is, your website visitors are generally skimming to find what they need. Deep reading is really rare on the web. A quote from Krug: “When we’re creating sites, we act as though people are going to pore over each page, reading all of our carefully crafted text, figuring out how we’ve organized things, and weighing their options before deciding which link to click. What they actually do most of the time (if we’re lucky) is glance at each new page, scan some of the text, and click on the first link that catches their interest or vaguely resembles the thing they’re looking for. There are almost always large parts of the page that they don’t even look at. “ Data confirms this. Here is a real heat map that shows where people go on our “Contact us” page (it tracks where the mouse goes and where people click). You can see that there are some key things they focus on, in particular the staff directory, live chat, and frequently asked questions.
• #9: Your website visitors will be impatient when they are on their site. They want to find the answer to their question and be done with it. Data from a 2014 study showed that 55% of visitors spend less than 15 seconds on your website. So you don’t have a lot of time with them! Here is some data from the University of Arizona Libraries. You can see that the vast majority of visitors spent less than a minute on our website. http://time.com/12933/what-you-think-you-know-about-the-web-is-wrong/
• #10: So with these things in mind… how can you write most effectively, to optimize the user experience?
• #11: A key concept on the web is layering information. Identify what information is needed when, presenting information at the point of need, rather than sharing it all at once. This will help make sure users aren’t overwhelmed with too much information at once. It also puts user in control, allowing different users to get the information that they want on a topic. Put what is most relevant to most users first, and then more detailed information in subsequent layers. It is better to have 5 layers of web pages that are easily navigable, than it is to have one web page that tries to address every users’ need. Although long disproven, I still often here people say: “Don’t make things too many clicks from the homepage.” And this concept of layering can go against that goal. But in user experience design, what’s important to pay attention to is not the number of clicks, but rather the confidence in the user that the click is going to take them where they need to go. Users would much rather take 3 intuitive clicks to get to the information they need, than click just once but have to dig through paragraphs of detailed content – much of it irrelevant - to find what they need. Rather than focusing on the number of clicks, you should think about how seamless and intuitive those clicks are.
• #12: Another key concept is focusing on essential messages. The answers to your users’ most likely questions should be front and center. If you’ve ever studied journalism, you’ve likely heard of the “inverted pyramid.” In this framework, the most important content should be obvious and near the top of the page. Similarly, underneath each section, or each header, content should be organized in this same way – with the most important thing first. So for the entire page, or for each section within the page, decide which question matters the most to most of your users. Put the less important content next – perhaps that content that only some of your users care about. Save the least important content for last.
• #13: The next step(s) – or call to actions – should be crystal clear. As I said earlier, users are probably there to complete a task. Things like: “Reserve a room,” “Renew books,” or “Request materials” – if you are writing a page where the user is looking for such a call to action, make that call to action easy to spot on the page.
• #14: Let’s look at an example. This is the homepage of the Pet Partners of Southern Arizona website. What is this website about? What is the most important thing on this page? What are the things you can do here? There is a lot of competing text, and it makes it difficult for the eye to know where to go. And it’s not clear at all what you can do here. (Sidenote: I went to this website a month or two ago because I was interested in learning about therapy dogs after the Finals Study Break at the library that was sponsored by Pet Partners. Specifically I wanted to know how I could train my own dog to become a therapy dog. I was disappointed, because I couldn’t easily find this out on this website!).
• #15: So as you’re approaching content for your site or for a specific web page, ask yourself who is the primary audience? Don’t say “everybody!” Is is undergraduates, graduates, faculty, instructors, distant students, potential donors, community members? Some of your primary tasks on your website will be applicable to your entire audience, but the majority of your individual web pages do have more specific audiences in mind. Define them up front.
• #16: And then think about what you know about this audience. Their experience with library systems can help you identify what information will be most relevant to them. If they all know what interlibrary loan is, you don’t have to explain it much. If they’re all familiar with ebooks, same thing. Similarly, think about the terminology they use and are familiar with. And consider other websites they use for comparable services, maybe campus service websites if you’re at a college or university (your campus IT, student support services), or popular sites like Amazon and Instagram if you’re at a public library. Their experience with those other sites will set their expectations for your site – you’ll do well to follow similar conventions and content patterns.
• #17: With the audience in mind, now you’ll need to define their goals.
• #18: Structuring content 10:20-10:30 Another key concept: once you know the primary questions of your audience, make it easy as pie for them to skim through your content and find the answers to those questions. There are a number of strategies for doing this.
• #19: Headings are key for breaking apart content. You can use them to prioritize your messages (placing the most important messages first), to organize your page into sections, and to facilitate skimming. Many users are going to get to your web page and skim through the headings to identify where the answer to their question lives. And when I say “headings” it’s important that these are semantic headings (H1, H2, H3). Semantic headings are especially important for people using screen readers, as it allows them to navigate from section to section easily. Because your visitors are going to use headings to navigate through your web page, you should make these headings clear, meaningful, and succinct.
• #20: A great way to write headings is with active verbs. Here is an example from our website where the headings are active and speak directly to the reader: “Check out items, “”Apply for a library card,” and “Renew your materials.” You can see these are based on the goals of our users. They speak directly to the audience. The headings are also are also short enough to allow for easy scanning to find what you’re looking for. Notice that the body content itself is also speaking directly to the reader, as in “Use your CatCard” and “You can renew library materials…”
• #21: Gerunds are verbs ending in “-ing” and also work well as headings. Most of your headings – especially for web pages about services or instructional pages – can use verbs.
• #22: Another way to facilitate skimming is using bulleted lists. Often times when you see a wall of text, the first recommendation is going to be “use bullets!”. But bullets aren’t always used well – just bullets alone won’t make your content useful. But they can be a great tool for your toolbox. Use bullets when you have a list of related items, or a list of options. Here, you can see the list of options for picking up an interlibrary loan – different locations - Main, Health Sciences, as well as a home delivery option.
• #23: Numbered lists are another tool. These are distinct from bulleted lists. Use numbered lists only when there is meaning behind the numbers - most of the time, a list of steps in a process. Instructions on how to do something. Numbers can also be used for things like “Top 10” lists, but that’s probably less likely on your site. Be careful with this one – I often see numbered lists used arbitrarily. If you can’t explain why they are numbered, just use bullets. Otherwise users might mistake them for a set of instructions. Here is an example of instructions listed in a simple, numbered list. Any time you find yourself writing instructions, or writing sentences beginning with “Next,” “And then,” “After you X, then Y” consider using a numbered list to break it up and make the steps clear – easy to skim and easy to go back and find your place. Never write instructional content our in paragraphs – it makes it really easy for readers to lose their place.
• #24: At the same time, we often use way too many instructions on our websites. If you have a good website, intuitive systems, and obvious navigation, you shouldn’t need many instructions. One of my pet peeves is a form that includes a paragraph of instructions above it about how to fill out the form. Web forms have been around for a long time, and well-designed web forms should require absolutely no instruction up front. In the library world, instructions should usually be saved for real information literacy-type content. Critical thinking skills, interactive, problem-based tutorials, etc.
• #25: Tables are a great tool to facilitate skimming. Ginny Redish says that anytime you have an “If X, then Y” statement or anytime you would answer a question with “it depends” – consider using a table to display that content. Here are a couple of examples. If someone asks, how many books can I check out? And how long can I check them out for? Your answer is probably, “it depends on your affiliation.” Similarly, someone might ask you, “when will my interlibrary loan be available?” Since it depends on the type of item, a table works well for displaying this content.
• #26: Give your content room to breathe. Walls of text are intimidating and hard to scan. Empty, negative, “white” space on your pages makes your content more approachable, readable, and accessible to your visitors. Pay attention to white space between your paragraphs, between menus, within lists of items. Not to mention between images and text. If your content ever feels cluttered or tight, you probably need to increase your white space.
• #27: Another thing that will make your content easier to skim and digest is parallelism. This refers to parallel grammatical structure, and it can be used in lists, headings, menus, and even individual sentences. In the examples earlier, you already saw this in action. All imperative verbs like “Check out, apply, renew” or all gerunds like “locating, scanning, printing.” Parallelism is a fundamental concept for good writing in general, and it makes content much more understandable the first time you read it.
• #28: Formatting 10:30-10:40 So we’ve talked a bit about tools to facilitate skimming (lists, tables, headings). Now let’s talk about how to format things in a way that they’ll be easy to read. How to format with eye movement in mind.
• #29: Right justification can be problematic and here is a great example of why. The inconsistent spacing between words is harder to read and can look goofy or unprofessional. This can be especially problematic on smaller screen sizes, so watch out for this.
• #30: Your best bet is left justify, rag right. The eye knows where to go and what to expect. Centered text can be hard to read because your eyes have to zig zag across the page and the eyes don’t know where the next line will begin. Centered text only works well in small doses (a couple of lines). You also want to avoid having line lengths that are really long, where the eye might get lost on its way back to the left as it looks for the next line.
• #31: Here is an example that is hard to read both because it is centered text and because it’s in all caps. You may have heard that all caps are bad because they sound like you’re shouting. This is true (especially true when you see certain words in all caps within a sentence, like “DO NOT have open containers.”). And for that reason along you shouldn’t be using all caps. But they’re also harder to read. Harder on the eyes. There is almost no justifiable reason to use all caps. I never, ever use them for any reason.
• #32: Needless capitalization is another pet peeve of mine. Here is an example from Amazon when I recently was ordering a screen shade for my car. There are some other issues with this content: too many exclamation points, grammatical errors. Lower case text is the easiest to read (notice in this presentation I’m using almost exclusively lower cas. Sentence case is second best – we use this on our site for titles, menus, and headings – where only the first letter of the first word is capitalized. Title Case is ok – but should only be used for actual titles, not arbitratily as it is in this example. Title case is where the first letter of ever word is capitalized.
• #33: Italics are also hard to read and should be avoided unless necessary. You can get away with it for a word or two, but not a whole sentence or paragraph. And if you’re tempted to italicize something for emphasis, I always suggest trying out bold rather than italics, since bold is easier to read (and actually tends to stand out more). In this example you can also see that font choice can help or harm readability, so pick your font choices carefully. You also should pick your font colors carefully, paying attention to color contrast to make sure it’s accessible and easy to read for people with color blindness or other visual impairments.
• #34: Another pet peeve: two spaces after punctuation. This is a remnant from the days of typewriters, but it lives on. I’ll settle the argument: always use one space, not two. It’s not just about being “modern.” Two spaces make it harder to skim and read. (or if you can’t settle this argument at your library, you could always advocate for a line break after every sentence). https://xkcd.com/1285/
• #35: This might be a lot to remember or to train everyone on who writes for your website, so I suggest customizing your wysiwyg editor within your content management system. If you have Drupal or WordPress, you can remove certain features to simply not allow poor formatting on your site.
• #36: Simple and conversational 10:40-10:50 Now let’s talk about keeping your content simple and intuitive. To be clear, this isn’t about “dumbing things down,” it’s about writing with clarity and respecting the time of your readers.
• #37: Plain language is writing designed to ensure the reader understands it as quickly, easily, and completely as possible. It’s simple, relevant, understandable, and useful. When you write in plain language, you’re using familiar words, keeping things succinct, and avoiding or explaining any jargon. This is important to everyone, but especially to ensure that your content is accessible to your users with lower reading levels or with cognitive disabilities. It’s been the law for government agencies for years, and President Obama signed a Plain Writing Act in 2010. The law requires that federal agencies use "clear Government communication that the public can understand and use.” Since libraries are institutions that serve the public, we should all be following this example.
• #38: If you pay attention to web pages and how content is written, you’ll notice that most good web content is written in a conversational style. It’s active voice. It’s talking directly to the web user. It uses “you” to address you as the web user, and “we” or “us” to talk about the organization. Take a look at this example from the US Digital Services “join us” page. (Sidenote: The mission of the U.S. Digital Service is to deliver better government services to the American people through technology and design.) One helpful tip is to read your web copy out loud. Perhaps read it out loud to a colleague and see how it sounds. When you read it out loud, you’ll get a much better sense of how it will sound to your website visitors, and if it sounds like a conversation.
• #39: It’s helpful to read aloud because you should be writing like you talk.
• #40: Active voice is much easier to understand than passive voice. It’s direct. To the point. Here are some examples of passive voice and active voice. Notice the sentence, “Library customers must sign in to renew books.” This is passive voice, where the subject of the sentence isn’t actively doing anything. In fact, in passive sentences, it can be hard to even make out what the subject is. Passive sentences are vague, hard to follow, and boring to read. In this case, you want to talk directly to the user, since they are the library customer. So, “Sign in to renew books” is a much better version. Try to avoid saying “the library” or “the libraries” unless it’s absolutely necessary for clarity. Rather, replace this with “we” or “us.” So instead of saying, “Eligibility will be verified by the library,” you can say, “We’ll verify your eligibility.” One last example demonstrates not only the trouble with passive voice, but the trouble with too many nouns in a row, which is often difficult to read and interpret. You can usually fix the “too-many-nouns-in-a-row” problem by using active voice. For instance, rather than “Library Instruction Consultation Request Form” we can say, “Request and instruction consultation.”
• #41: Paragraphs can be really short on the web, facilitating skimming and reducing the cognitive load of the reader. One sentence in a paragraph? No problem. More than three sentences in a paragraph? Try cutting or splitting up. This is advice by Ann Handley.
• #42: Ann Handley has the guideline of trying to keep sentences under 25 words. Here’s an example of some short sentences to give you a sense. I’m not going to lie – we do have sentences over 25 words all over our website. And I’m not 100% told on the “25 words” thing – it really depends on the words. But it’s a good framework to be thinking about keeping sentences short.
• #43: Fragments are also fine on the web – you’re not writing a journal article so it’s ok to break the rules a little. Notice in this example that each description starts with a fragment, but the context makes it clear so they work just fine. Focus on meaning, not grammar.
• #44: There’s almost always something you can cut from your content. Simplify. Here are some examples of the unnecessary. The list could go on and on, but you get the idea. Shed the obvious. Shed anything that doesn’t add meaning.
• #45: Now let’s talk about labels. The nature of the web and websites is often that of a bunch of information linked together. One page leads you to another page and so forth. It is important to provide clear and concise link labels to lead your users to the next relevant thing. Labels can be used on menus, buttons, navigation elements, or more traditional links within body text. What’s important is that they provide clear connections between content. Users should be able to understand from the words in your label what they will get when they click on it. This is important for all website users, but is crucial for visually impaired users who navigate your website with a screen reader. Effective use of links make your website more accessible. For example, users will ask their screen reader to skip through the text and read the links on a page. So phrases such as “click here,” “more,” “click for details” can be meaningless when read out of context.
• #46: Links are often calls to action, so it makes sense that active verbs often work well as links. Rather than linking a noun, like “form,” link an active phase that reflects the name of the form and its intention: “Apply to be a mentor.” In the second example, the content gets a bit muddled. You don’t need to say things like “Use this link” or “Click this link.” People know how links work. As long as your links are styled as links, it should be clear. Keep it to the point and meaningful, and action oriented: Sign in to register.
• #47: Links aren’t always going to action phrases. But they should be meaningful and unambiguous. They should reflect where they will take the user. One easy way to do this is to match the link with the page title where it takes them. Or at least really close to it. Simple enough, just pay attention to context so that it makes sense. Notice in this first example that the “now available” text is linked, but in the revision it is much clearer where the link will take you: to the November newsletter. I the second example, the word “here” is linked when really it’s “express retrieval” that is the meaningful term. Use link titles that let users know what to expect. There should be no surprises when they end up at the next page. Before even clicking the link, they should have a good idea where they’ll end up.
• #48: Links need to look like links. Here is an example where links are not obvious. What do you think you can click on here? Each title is clickable, and so is “View All Upcoming Webinars,” but you wouldn’t know it by the design, since all the text looks the same. If you hover over the text, you can see that it is a link (because the text gets underlined), but in the touch screen world “hover” doesn’t exist, and you don’t want to make your users wander through your web page hoping that something might be a link. (Example from: https://floridalibrarywebinars.org/) In the “It’s time for a break” example, the only way you can tell what you can click on is because it says “Click here for…” but it’s unclear where “here” even is. Obviously the first statement isn’t clickable, because you can’t click a link to turn off your computer. But the next two are likely clickable. Also watch out for the counter to this: make sure things don’t look like links if they are not links. If something is underlined, users assume it’s a link
• #49: Let’s talk about the personality of writing. You want to be friendly. Especially when it comes to policies, libraries have a history of being not-all-that-friendly. And this lingers on our websites when we have paragraphs of content telling visitors what they can’t do in the library. Let’s work on this. Here’s an example of how we changed our policy-driven content to something more useful and approachable. We’re pretty confident people might actually read this content now, too, and actually follow our policies!
• #50: You also need to know the limits of this. Carefully placed exclamation points are great. 9 on a page? Too much enthusiasm – overuse can become goofy and lose meaning.
• #51: To help with this, I recommend defining your voice. We use “X, but not Y” statements which works well.
• #52: Slack has a consistent voice which leads to a consistent experience. Even error messages can sound human and be useful.
• #53: SpringShare also has a pretty unique, consistent voice. They are silly and perhaps over-the-top – but this is their identity.
• #54: To wrap up I’ll talk briefly about content strategy. Even if you are writing for the user experience, creating elegant, simple, intuitive content, you’re probably not the only person at your organization doing do. To successfully implement quality content across your site, you need content strategy.
• #55: You need someone in charge. Someone to provide oversight. We’re lucky enough to have a full-time content strategist. Do you have a web librarian? Communications director? Think about who makes the most sense in this role.
• #56: This person or team can develop workflows for creating/updating/deleting content, ensuring what’s on your site is relevant and up-to-date. This may include review processes to ensure the writing is easy to understand and accessible.
• #57: Standards are really helpful.
• #58: Lots of training – need lots of coffee.