Everyone loves a great scene. Whether it’s in a video, show, or online learning. How do we choose the best words to fit the action?
Who better than to present the Play button text challenge than Ben Barone-Nugent from Netflix (during Yuval Keshtcher’s 7/9/20 UX Writing Hub presentation)?
Here’s a notable audience submission: Tell me a story. As Ben noted this is compelling, but perhaps not a great fit for documentaries….?
While working on video templates and creation at Pearson, we often discussed the term watch. Play is associated with childhood fun; watch is associated with observing over a period of time. My own bias is for watch. Play is the action that lets me do what I want: watch. Why not be direct?
Tell me what you think: I’ve marked three A | B tests:
In each A | B scenario, which do you choose?
Which is the best experience out of all six options?
Considerations from a UX writing standpoint
Grade level: Keep it at Grade 5 or lower whenever possible
Tone: Strive for fun and upbeat, but realize this might be a documentary or learning experience that is not fun
Personalize: Convey a personalized message, to the extent possible
Brevity: Make the words add dimension to a well-known icon
“…We as a culture are going to take on the need to meet every student’s needs right where he/she is and in that culture we’re going to see disability is simply an inability to access the curriculum and we’re going to work together….”
Bob Broudo at IDA conference 2018
With this goal and a deck in hand, I sat down with Bob Broudo, Headmaster and President of Landmark School in Beverly, MA, with Rob Kahn (Head of Elementary•Middle School), Bill Barrett (Head of High School), and Dan Ahearn (Assistant Head of School and Director of Outreach) on May 6, 2019.
What Help elements require reconsideration?
Do fonts and their styling make a difference?
The so-called “Dyslexic fonts” haven’t worked well at Landmark. Instead, it’s best to help people recognize letters by using fonts that maximize the difference between letter shapes.
Use bold text to call attention to important info and operative words. Avoid using italics and serif fonts, particularly typewriter fonts like Courier.
Does line and paragraph spacing affect reading?
Absolutely! Eye tracking is an issue for folks with dyslexia and it’s much easier to skip a line when text is dense. While our line spacing worked well, they recommended an increase in paragraph spacing (but suggested no exact numbers):
What’s the effect of lists, images, and color?
In general, bulleted and numbered lists break up walls of text. Indenting beyond the first or second level might challenge students struggling to keep their focus on the main idea. One reviewer noted that students aren’t used to reading lots of bulleted text.
Button and UI images are helpful; unrelated/decorative images might be distracting and add a layer of unwarranted concerns for students.
It’d be helpful to add a visited color to our drop-down links so that students know what they’ve already read. In general, color should be saved for focus elements and it’s wise to limit the number of colors. For example, using color as a background in warning text is helpful. Interestingly, they suggested we not call out Tips: Tips and notes are better inserted into paragraphs where they’re less likely to be skipped as “extras.”
How well do our drop-downs work to break up walls of text?
These reviewers liked the text rolled up into drop-down links where all/selected text could be expanded. They didn’t express a preference for either rolling everything up or leaving the About and See also sections unrolled. But they raised the question “What am I required to do here?”
How about motion graphics?
Our animated gifs, supplemented with written steps, were a hit! Although one reviewer noted that the students might not read the steps, they liked the fact that the gifs are embedded inside the related Help topic.
Our video did not fare as well. It ran for approximately 2 minutes, which the reviewers felt was too long. They suggested: 1:10 for time and slowing down the presentation. They also requested less complexity and that we cover a single topic per video. While we typically present videos in a separate page, they prefer embedded videos unless they’re high level. They’re not sure that students would seek out a page of videos because they’d see them as “extra.”
We demo’d a slideshow with animated gifs inside a carousel, which is a new feature for the XL summer release. They liked this as an overview of the required step sequence (reflects their teaching methods). What they didn’t want was any auto-advance feature. They also liked the link to the related topic at the bottom of each slide.
Overall, they suggested a mix of motion graphics.
Benefits accrue to all when we consider the needs of those with language-based learning challenges.
As endless details consume our lives…minimalism offers to restore control: T-shirts become “work uniforms,” we throw out things and buy less, we even eat the same food to simplify grocery shopping…. Fewer things equals less decision-making and more time doing what we value.
But what about reading? How often do we scroll walls of text looking for the golden nugget? How many books do we bypass for lack of time? Instruction manuals??? Who has time?
In a world where writers necessarily add to the overwhelming amount of content created every minute: We owe it to our readers to be kind and use fewer words. Whittle down the words and then color them with your friendly tone. Your readers will be more likely to seek you out next time.
Minimalist writing is an art with guidelines
Use fewer words. The length of our sentence, paragraph, the content itself—makes a difference. When we cut to the point, we reduce cognitive load. This is the effort to process information. Move and store it in working memory and move and retain it in long-term memory. A simple trick to cut length is to reorder:
Students can select the name of a chapter, section, or objective to work on it.
To work on a chapter, section, or objective, students select its name.
Make every word work. Words like “very,” “however,” “really,” “also,” and so on often add little. Our readers do not benefit from our verbosity.
As you reorder, remove any words that lack meaning.
You also have the option of uploading a screenshot or other attachment.
You can upload a screenshot or another attachment.
Find the perfect word. Use a thesaurus and think about context. Find words that express the exact meaning you want to convey.
Select the .csv link and open the downloaded spreadsheet in a program like Excel.
Omit the unnecessary details. Do the details matter? If so, what’s required?
If you do not require very detailed or complex reports, select the Quick tab to generate a quick export based on the latest information in the system.
Unless you need a detailed report, select Quick to generate a quick report with the latest data.
Use contractions, except for negatives. Contractions challenge many readers, particularly those with dyslexia. They’re often skipped. Their biggest benefit is their friendly tone. Taking a middle of the road approach, I use positive contractions. Negative words in warnings are spelled out.
If you’ve replaced the question, this option is not available.
Use the active voice. The active voice uses fewer words and empowers readers.
Watch the video that explains quick exports.
Use the Hemingway app. Check the reading level, voice, adverbs, and for simpler alternatives by pasting your text into this page. As this app says:
Bullets and numbering simplify directions. When you find yourself stringing phrases into paragraphs, think lists. Use bulleted lists when the order does not matter and ordered steps when it does.
But do not skip the About paragraphs. When I first started writing, I’d no sooner round the corner to my best reviewer when I’d hear: “Why do I care?” Unpack value before you ask readers to invest their time.
You can assign a companion Study Plan as a prerequisite for a test or quiz to help your students prepare.
To change the weights for student assignments, use the Change Weights page. Choose which weights to edit. For example, assign higher weights to tests and quizzes than homework. You might assign the heaviest weight to the final exam.
Be nice! Getting to the point doesn’t mean boring, buttoned-up text. Make your lean text engaging.
Along with the online Help (you’re reading it now), you can reach out to Pearson Support.
Use images. The old adage “A picture is worth a thousand words” is still true. Include both. Our user testing shows us that most people want to see pictures. For example, dyslexic readers often use images to help interpret words. Follow the minimalist rule and keep your images and animations simple.
Make an impact with an animated gif
The following example comes from Pearson MyLab Help: I took 282 words and 1 .png image and whittled the topic down by two-thirds. It’s now 99 words and an animated gif. Included in the 99 words is information missing from the original topic. Sometimes less really does more.
How we all benefit
When writers get to the point, everyone benefits: We lower the cognitive load and help users find and retain what we write. This is especially important for folks with low working memories. They find it hard to read and retain extra verbiage.
All examples are from my work in Pearson Education’s MyLab Help.
GenZ, people ranging in age from 14 – 23, is immersed in a world of motion. In fact, GenZ has never known a world where videos weren’t easy to make and readily accessible. An August 2018 Pearson study found that GenZ prefers to learn using videos. In contrast, millennials (ages 24 – 40) prefer to read. But how do these findings apply to our products?
Ying Hu in Pearson UXR studied three proposed concepts: Time manager, Messages and scaffolded help, and Study guide. True to the August 2018 Pearson study, videos came up repeatedly. For example, she noted that students “…particularly like to find video content.” Likewise, in the areas of Messages and Scaffolded Help, she devotes a slide to Video is what they need for help. The key “Takeaway: Keep video content as part of help whenever possible.”
But it’s not only students who prefer videos. Katherine Brousseau, VP of Pearson Customer Success, found that instructors also want videos. “They prefer live trainings and videos to text based step-by-step instructions.” according to her March 1, 2019 NEO blog.
Videos allow professors and students to access closed captioning, voice, and music. Video content at Pearson appears to align well with the earlier GenZ study. It’s slick, inviting, and much more fun than most images. The downside is that they’re expensive! A video takes roughly 10 or more hours to produce. When branding, the UI, or new features require changes, they’re not easy to make.
What we need is another solution that’s faster and cheaper to produce. Not a replacement for all videos, but an alternative.
Designing a solution to a common human problem sounded like fun. So this Fall I signed up for Introduction to Human Centered Design. (Ideo+Acumen offer free courses around social design challenges.) Sarah, Nicole, and Erin also signed up. Together we formed a team and chose How might we provide healthier food options to people in need? from the predefined course challenges. We brainstormed, created prototypes, and tested our solutions.
But, as we learned, creating a prototype is much easier than testing it.
Hunger isn’t a hidden issue, but it does result in shame:
Only those who have run out of options obtain food from emergency sources, as a last resort. This forced giver-receiver relationship alienates the hungry from the rest of society,and makes them feel shame and distress about their food insecurity.1
This shame made it difficult for us to locate people willing to test our prototypes.
What are the real limitations? Time, money, distance, energy levels, accessibility? How can people with limited resources enjoy balanced meals that include fresh produce? (Later we explored what choice and enjoyable meals might mean. How would these factors help people eat healthier?)
We wanted to talk with people affected by the issue. Sarah contacted The Women’s Lunch Place near Pearson. This food pantry serves women with a traumatic past; they didn’t want us to talk to their clients. I reached out to my sister who runs Toni’s Kitchen: Anne recommended vegetable gardens and we discovered that several local food pantries also have supplemental gardens. But, we’d made little progress, and time was running out.
Fortunately, my inner city religious education class was a captive audience. I moved my end-of-year growing project to the Fall. Together my class and I tested my gardening prototype. We easily grew microgreens in recycled egg cartons. (Microgreens have a high nutritive value, are inexpensive and portable.) We hit a few snags along the way, but most students excitedly engaged in the three week growth process. What the students didn’t do was eat the greens! (In my role as religious ed teacher, my focus isn’t on nutrition or hunger. I also didn’t engage their parents.)
Meanwhile, Erin volunteered at a local food pantry. She taught us about some of the challenges of cooking donated food. Some of the donations were fresh and some came from cans or jars, but the variety didn’t always add up to recipes. Sarah explored Erin’s findings and set up a Healthy Eating for Cheap Pinterest board. As we studied the options, our conversation moved to the pros and cons of beans, frozen food, and tofu.
As we neared the end of the course, I took another look at food pantries. What a maze of requirements: IDs, gender, times and locations…. Finding meals and food pantries was a patchwork, difficult effort! In other words—people can’t show up at any food location and get food. To help people navigate the maze, I created a FoodPantry chatbot. This bot uses identified gender and day of the week to help people locate a nearby food pantry. People can also search for volunteer opportunities using this bot:
Nicole prototyped a solution to match contributors with people in need: Tendril by freshdirect offers donors a convenient way to buy a meal for a family in their neighborhood. Families choose their own healthy and enjoyable meals. Contributors get the pleasure of direct giving. Both sides remain anonymous—no shame involved! We think Nicole’s prototype serves our goals and hungry people best. The only caveat is that we ran out of time to test it, which we hope to do in the next course.
Working together as a team and balancing work and learning wasn’t always easy: While Sarah and I work together on the same writing team, we didn’t know Erin. Even though Erin is a UX designer who works only a few desks away. None of us knew Nicole, a project manager in the NY metropolitan area. It was our different areas of expertise, skill sets and thinking that helped us to bond. They also pulled us through some challenging weeks when nothing we did seemed to work.
Together, we learned a great deal about hunger—Nicole and Sarah’s prototypes show us that giving food can preserve human dignity! On a personal level, I’m rethinking the communication around my microgreens prototype. I’ve also started carrying granola bars for those in need… This has led to what I hope is a mutually beneficial dialogue between me and Gwen who spends her nights in a doorway a few blocks from Pearson.
Recent research points to a newer solution that’s cheaper to produce and faster to market, but it comes without all the video bells and whistles. It also lacks similar Pearson user research to ensure market success. But what if existing users span wider age and socioeconomic ranges?
“Animated gifs are more engaging than videos.” This statement is found on p. 575 of the 2016 Fast, Cheap, and Good: Why Animated GIFs Engage Us study. This work was done by Yahoo researchers after Yahoo bought Tumblr. They studied 3.9 million Tumblr posts, user interviews, and more than 50 research papers.
Animated GIFs are on a continuum between images and videos. All of which fall into “a picture is worth a thousand words” category. We’ve previously relied on images and videos. Animated GIFs now expand our communication space. They’re also cheap and fast to market.
Not surprisingly, animated gifs are widely used and incredibly popular today. To quote Modicum, “Giphy… serves more than 1 billion GIFs per day to more than 100 million Daily Active Users.” Usage surged since 1987 when CompuServe invented them. CompuServe needed a color image format for the file downloads. Their wild success might be due to the fact that the patent(s) expired in 2004 and few violators were prosecuted. With these changes animated gifs could be more quickly and widely produced. But ease of production and speed to market doesn’t account for widespread acceptance.
To understand the features that popularized them, the Yahoo researchers “… found that the
lack of sound
immediacy of consumption
minimal time demands…
were signiﬁcant factors in making GIFs the most engaging content on Tumblr.” ([bullets added] p. 575)
Statements made in user interviews flesh out the bulleted list above. Users cited motion without sound and the lack of a play button as key. They also saw an element of mystery that compels the user to slow down and pay attention. According to the study, earlier work in cognitive psychology found that we’re drawn to motion.
According to The Huffington Post, a House Judiciary aide said the committee is always exploring new ways of communicating. “GIF op-eds are being used more and more, including here in the halls of Congress….” A popular eLearning site has a list of reasons to use animated gifs in eLearning courses including:
Easy to consume: “According to Twitter, in 2015 over 100 million GIFs were shared between people.”
They enhance content.
These findings show the appeal of animated GIFs to audiences other than GenZ.
It’s interesting that endless looping motion compels users to slow down. Stopping long enough in a busy world to pay attention is something worth pursuing! How to get videos and animated gifs to market while maximizing ROI is challenging. Next week, I’ll share the collaborative effort that’s made these solutions available.
To place multiple pieces of information, motion graphics, or images into a single block of web space, carousels–otherwise known as slideshows–do the trick. Organizations benefit and users can choose where to spend their time. Often the slides, which are teasers, contain links to detailed content.
Here’s an example from Atlassian Help/documentation.
Slideshows are everywhere. You can find them on news sites, corporate About and sales pages as well as in Help documentation. (Since I live in the world of Help, this is where my interest and the context for this post lies.)
Here’s a slideshow that shows only the mandatory steps the complex assignment creation wizard in MyLab. As you can see, after the first image, each slide contains an animated gif with a link to the page where instructors can get all the details. The first slide contains a static image so that users scrolling down the page won’t be distracted.
Use 5, or fewer, frames: Users don’t like to click too frequently.
Make sure that the user controls are located within and not outside of, or below the fold.
Give users total control instead of automatically rotating through the slides: While Nielson Norman offers tips for auto forwarding, our user testing found that users prefer to control slideshows. For example, at Landmark (a school renowned for its work with students who have language-based learning disabilities such as Dyslexia and related learning challenges) we learned that non-stop motion negatively affects folks with ADHD.
Medium writer Maria Diodati advises creators to put your most important content on your first slide.
Users must be able to pause carousel movement because it can be too fast or distracting, making text hard to read.
All functionality, including navigating between carousel items, must be operable by keyboard.
Changes to carousel items must be communicated to all users, including screen reader users.
What we found in our accessibility testing
A slide with no action should be placed first and carousels should not automatically move. Many users are distracted by constant motion (including those with ADHD. Users prefer to have full control.
Users who rely on keyboard navigation jump from link to link on a page as they tab. For this reason, the only navigable slides in a carousel are those containing links. In my thumbnail example above, the first two slides aren’t discoverable for users that tab through a page. The second two slides with links work well.
We haven’t implemented focus, but there are options with Chrome and adding code.
How I borrowed analytics to increase click-throughs
Daniel Fitek’s Boston, Spring 2019 UXPA presentation Beyond Google Analytics—Using Event-Based Tracking for UX and Product Decisions turned out to be fascinating! Who’d have thought about creating, much less tracking, click-through analytics? And for 4 different types of slideshows? (The following image from Mr. Fitek’s presentation is used with permission.)
While slideshow dots might be the most common user controls for carousels, thumbnail images more than double the rate of carousel click-throughs. (I immediately changed my dots to thumbnails.)
The Nielsen Norman Group weighs into this discussion by noting that thumbnail images need to represent the content of the frame and look different from each other. Dots, they add, don’t work well on mobile devices: They’re small and rarely noticed.
While you can use slideshows everywhere and anywhere: Do not!
Sure, they look flashy and fun, but if the information they contain isn’t important and useful, users will skip right past. Put your most important information on the first slide and include a link on every slide so that keyboard users can access each slide.