Words Form the Building Blocks of User Experience Design

Leave a comment
Case Study / Content Strategy / Uncategorized / UX Design / Writing & Editing

In her talk at Rhode Island School of Design, Nicole Fenton described the concept of interbeing from Thich Nhat Hanh. It looks at the world as everything taking a part in creating everything else: the sun makes it possible to grow a tree, which takes a person to chop it down, which eventually becomes paper. All these activities feed into making paper and allows it to exist.

Similarly, when we think about something as ambiguous as user experience, it helps to be specific about what we’re trying to make, who it is for, how it works, and why it matters. We give words to our intentions before we start a project until we end up with something on the screen.

Word decisions happen on each plane of user experience. From setting the vision in Strategy to seeing the actual copy on the screen, the primary way we define the product experience at each stage is through words. (Image Credit: Jesse James Garrett, from the book, The Element of User Experience)

Word decisions happen on each plane of user experience. From setting the vision in Strategy to seeing the actual copy on the screen, the primary way we define the product experience at each stage is through words. (Image Credit: Jesse James Garrett, from the book, The Element of User Experience)

At each plane of user experience, words fold concepts together, refine ideas, and help us articulate the value of our work. Inevitably when we encounter the murkiness of design, we use words to help everyone stay on the same page and move in the same direction. Although collaboration is often messy and unpredictable, if we clearly define what we are making at each stage, we could come out on top with a “good user experience.”

Good UX Includes Good Copy

At the heart of good user experience is a relentless focus on serving real humans. The thing is, people form perceptions about how the product works and how they feel about using it in their own vocabulary. So when there’s a mismatch between a user’s language and a product’s language, it makes that product less usable and delightful.

In her talk, Talisa Chang shared all the places where words appear in a product:

Places where words appear in product interface

Words appear in all these places within the product interface. (Image Source: Talisa Chang)

If you account for all the places where words appear, it’s easy to overlook those on the interface that are hidden in a dropdown menu or only momentarily appear in a modal box. As a result, we take them for granted and end up writing confusing UI content in our apps and websites. Good user experience includes good copy, and that means taking writing as seriously as design. The last thing a product needs before launch is interface copy that confuses users.

Talisa shares 3 principles for making your words count:

  • Good copy reduces ambiguity: Is it clear and specific and appropriate for the situation? Good copy is restrained in meaning but consistent across multiple contexts. It’s no longer than it needs to be.
  • Good copy puts the audience first: It helps them make the right decisions. It keeps users’ emotions in mind. When something goes wrong, it informs users what is happening and why, and what they can do about it without sounding curt or cutesy.
  • Good copy is well-researched: It’s tested early and receives input from subject matter experts and community members.

And lastly, my own:

  • Good copy makes people care: It’s not just words on a page; it has to support business goals, too. Privacy updates or checkout instructions might be boring, but as people who work on the product, we are responsible for helping users understand the importance of their action.

But somebody has to think about these things. We need a process for deciding which words belong in a product, how they are related, and whether they actually communicate in the way that serves business and user goals. When no one is responsible for the words – from strategy to the UI – they become tangled, unruly mess within a product.

Amy Thibodeau, former content strategist at Facebook, writes that many companies struggle to justify investing in interface language because they don’t recognize the expertise required to craft these tiny strings of content.  According to Amy, at minimum, clear content enables people to:

  • Understand what’s happening enough to trust you
  • Are able to successfully complete the core flows in your UI
  • Can find what they’re looking for
  • Find value in what you’re offering

Clarity requires focus, and more importantly, getting every team member on the same page helps you accomplish that – and result in a more cohesive narrative for your product.

“Even though my titles have changed and my toolkit has varied, in my mind I’m essentially doing the same thing: working with stakeholders across teams to tell a complete, consistent, compelling story to a user.”Talisa Chang

Just as good communication between designers and users makes a product more usable and valuable, communication between team members can make or break a product. Every member is both an expert and a beginner, so it’s important to use the same language to frame our ideas. When we do this, we help each other learn, understand, and eventually make good decisions together.

From a previous article, I introduced how I think about designing the language within teams.

Words Questions Sentences Narratives

Though this is a work in progress, I explored some ways you could put it in practice by drawing on stories and tools from product content strategy. Hopefully, you will find them useful.

How Words Help

Words exist in organizations – in meetings, hallways, and email – and they influence how a product is designed. They render ideas during brainstorming, critiques, and pitches. Within a product, words form labels, navigation menus, and editorial content. But when they don’t come from the same bucket, we lack a shared language for making good decisions.

From Talisa Chang’s talk, we usually get our words from answering the following questions about:

The user:

  • Who’s reading this?
  • What background knowledge do they have?
  • What are their goals?
  • What are their pain points?

The context:

  • Where are they physically?
  • What device are they using?
  • Are they in a rush?
  • Have they been to this page/screen before? How often?

The flow:

  • What did they do before this?
  • What can they do next?

The business goals:

  • Ideally, what would we like them to do?

The brand:

  • How do we want the overall experience to feel?

By proactively asking questions like these, we could start to form boundaries and guidelines for shaping the language of the product.

In the book, Information Architecture: For the Web and Beyond, it explains how words could be used to make sense of a place. In a process called placemaking, we use meaning of words to construct our understanding of a place: where we are, what it means, and what we could expect to do there.

The issue with digital spaces is that information isn’t etched into physical things, which means people could access it at any point as it travels across different contexts, channels, and mediums. Unlike a vinyl record, for example, the amount of information could also change in a digital space (like adding a song to a playlist on Spotify). As a result, we come to rely on language to help us understand where we are and how all the information fits together.

“The experience of using digital products and services is expanding to encompass multiple devices in different places and times. It’s important to recognize that we interact with these products and services through the use of language: labels, menus, descriptions, visual elements, content, and their relationships with one another create an environment that differentiates these experiences and facilitates understanding (or not!).” – From Information Architecture: For the Web and Beyond

The challenge, then, is figuring out how to organize these experiences across multiple contexts in a coherent way. We can define the language within a universe of apps, website, voice interfaces, etc. by thinking about words at various levels:

  • Context: business goals, funding, politics, culture, technology, resources, and constraints
  • Users: audience, task, needs, information-seeking behavior, experience
  • Content: document/data types, content objects, volume, existing structure

But sometimes, even our best efforts fail us. Take Starbuck’s navigation menu. The book’s authors described how a menu label’s meaning could change with the context.

Take a look at the website's main menu labels. Are they confusing? Do they standout? Why?

Take a look at the website’s main menu labels. Are they confusing? Do they standout? Why?

The menu labels on the homepage are:

  • Coffee
  • Menu
  • Coffeehouse
  • Responsibility
  • Card
  • Blog
  • Shop

The authors pointed out how the meaning of “Menu” could confuse users on the mobile site. On the desktop site, “Menu” could be referring to the navigation menu, a list of coffee drinks, or food – as in something you can eat. But in the context of other menu labels laid out around it, you could deduce that “Menu” probably means “food” (i.e. sandwiches, pastries, salads, etc.).

The problem on the mobile site is that “Menu” typically means “navigation menu” since it signals to users that they can access the system’s global navigation from there.

Since users can't see any submenus, they have to guess what "Menu" means. The "Menu" label conventionally means global navigation in mobile sites.

Since users can’t see any submenus, they have to guess what “Menu” means from just the label. “Menu” conventionally means global navigation in mobile sites.

We access information on different devices and in various places and situations. Although we can try to use words that best represent the context, its users, and content available at that time, there’s always a risk that people will still misinterpret our meaning. As you saw in the Starbucks example, “Menu” could be interpreted slightly differently when viewed on a mobile phone.

Clear labels are one of the roles that words play in creating a good user experience. For a business, ambiguous and inconsistent language cost money: Any time a user gives up and goes somewhere else, the company wastes money designing a useful product.

In the act of placemaking, we use language to help people understand where they are, what they can do, and what they could expect once they do something. More importantly, language helps people solve problems. We are better equipped to do this when we have a process for designing the words in our products and teams.

Examples from Avvo and Facebook

How might we create this “place” semantically? I took to Avvo and Facebook, and explored how they think about the role of language in user experience.

  • Avvo helps people get legal advice by helping them connect to the right lawyer.
  • Facebook is an online social networking platform that lets people connect and share with anyone.

Each company serves an audience of different size and purpose, and so requires a different strategy for designing language.

Avvo

In a conversation with Cristin Carey, Director of Content Strategy & SEO at Avvo, she described how her team used competitive teardowns, SEO/search words, and gut check from user-generated content on their site to come up a list of words. Then her team runs usability tests to see how real people respond to their word choices.

But word choice is not necessarily data-driven. Beyond data, how would you decide between similar words with slightly different meaning? It starts with understanding nuance. In one scenario, Cristin shared how her team was reorganizing a legal topic, but they also had to decide what to name this group of user-generated Q&A content on the website.

“One of our choices was ‘advice,’ but since it was placed next to ‘services,’ it didn’t make sense. Isn’t ‘advice’ the same as ‘services’?” She explained. “Since lawyers provide answers to users’ questions on the site, our users might get confused because it’s basically a service.” She cautioned against using marketing copy for interface copy because what’s good for generating awareness might confuse users who need help with navigating the website.

It’s not always the nuances we should be worried about. Sometimes, it’s using the right jargon. For filing a divorce, there is a specific form for splitting up retirement savings. But Cristin and her team decided not to use plain language because people at that stage of the divorce process will probably know and understand that form by its acronym name. “You have to write at the appropriate place in the user journey,” she said.

Facebook

Many of my favorite UX copywriting examples come from Facebook. For the company, words play several roles in its product content strategy, such as:

  • Naming (i.e. navigation labels)
  • Feature positioning
  • Notifications
  • Product education and tour

“To most people, Facebook isn’t a collection of individual features—it’s just Facebook. So we give things simple, descriptive, non-branded names that emphasize their usability. Photos are photos, messages are messages, events are events.” Melody Quintana, speaking about naming philosophy at Facebook.

For example, when she was tasked with helping the Photos team name their new standalone photography app, she created a few criteria to narrow down their list of ideas. “The name needed to sound conversational, help define the app’s core functionality, fit comfortably on a mobile screen, translate effectively to multiple other languages and have zero existing trademarks,” she explained. “After lots of deliberation, we eventually landed on ‘Camera,’ a natural fit next to ‘Messenger’ and ‘Pages Manager,’ Facebook’s other plainly-named apps.”

For Alicia Dougherty-Wold, Facebook’s Content Strategy Director, considering the nuance of words is something she takes seriously. Luckily, we get a peek into her thought process that goes into copy decisions.

“We might test something as subtle as the punctuation at end of that line to see which one helps people understand what they can do there. “Write a comment.” might make people more inclined to be terse. “Write a comment!” might sound too demanding. That’s a place where you could ask a question – “Do you have a comment to share?” – but we have to carefully weigh the load that puts on people to digest that sentence.”

Besides external-facing content, words make up content standards as well, guiding the voice, tone, and editorial style throughout the Facebook interface. For example, how would you describe the differences between these words below, and when a writer should use each one?

  • View (i.e. view image)
  • See (i.e. see more)
  • Show (i.e. show results)

These words are semantically similar, but each imply slightly different intent in a particular context. If copy decisions were left up to the whims of an individual writer or designer, the resulting inconsistency might confuse users.

These are the kinds of decisions UX writers and content strategists wrestle with, but with good reason. You don’t get to decide the state someone ought to be in when they use your service, or the feelings they ought to have along the way. Word decisions touch on brand, interaction design, and information architecture – along with editorial content on user interfaces. And all of these parts influence the user experience.

Perhaps Melody’s artful take gets at the core of why we need to pay more attention on the role of words:

“Giving something a name feels like crafting a tiny, packed-with-meaning poem. As a matter of fact, the word poetry has its root in the ancient Greek word poiesis, to create. As you put words to an experience, you help create meaning.”

Key Takeaways

Below are some lessons we can learn from Avvo and Facebook:

  • Word choices can come from the content people search for
  • Look at your competitors and see how they label their content and navigation structures so you can retain some predictability
  • Define your naming philosophy and requirements upfront
  • Consider the tone of word choice in several situations and see if it encourages the right behaviors

Tools to Craft Words for Your Interface

The good thing is, there are smart people who have created tools to help you wrangle information and language on your digital interfaces. I’ll detail a few below.

1) Define your vocabulary

The easiest way to choose words to use is to create a use/do not use list for them. Abby Covert, in her wonderful book, How to Make Sense of Any Mess, shares a worksheet you could use to:

  • Define what words mean in a specific context when you use them (your ontology)
  • Document the words you will use and words you won’t use (controlled vocabularies)
  • Document how you will combine nouns with appropriate verbs (your requirements)

If you aren’t sure what all the words are – or where they are, you might conduct a nomenclature audit. Nomenclature audit helps you identify words that already exist in your system and see how are related. In her book, Nicely Said, Nicole Fenton recommends editing interface copy like below:

Example I made commenting on the now defunct Oyster mobile app.

Example I made commenting on the now defunct Oyster mobile app.

or…

Part of a case study I did to improve the copy for Facebook's Payments feature in the Messenger app.

Part of a case study I did to improve the copy for Facebook’s Payments feature in the Messenger app.

If you’re starting from scratch, you might do user research and take findings from it to form your product’s vocabulary. Otherwise, take a look at how Intercom classifies its product terminology. Hopefully by doing this, you’ll be able to avoid any inconsistencies in usage across your product.

Intercom produced a taxonomy to organize terms it uses within its product and to clarify the relationships between each of the parts.

Intercom produced a taxonomy to organize terms it uses within its product and to clarify the relationships between each of the parts.

Then you might document your word decisions in a nomenclature chart like below.

Image credit: Marli Mesibov

Image credit: Marli Mesibov

Or create a glossary to describe the context under which someone should use a word. From here you can develop copy patterns, which help keep a word’s meaning intact across different contexts.

Image credit: Melody Quintana

Image credit: Melody Quintana

There’s no right way to do it. Try one and see if it works for you. You’ll know an activity is working if your team members start using the same words to describe how a feature works, the interface copy starts sounding like someone in the company actually said it, or your users start using a feature as intended.

2) Develop copy patterns

Like design patterns, copy patterns ensure that your interface language is consistent throughout your product.  Save your team time by creating a repository for copy patterns that anyone working on the product can reuse.

Mailchimp is well-known for its voice and tone guide, but it maintains a beautiful style guide that includes copy patterns for navigation, buttons, drop-down menus, checkboxes, radio buttons, form titles and fields, and call to actions.

Mailchimp's style guide lists copy patterns that designers, developers, and writers can reuse.

Mailchimp’s style guide lists copy patterns that designers, developers, and writers can reuse.

According to Natalie Shaw, a former content designer for Government Digital Service on GOV.UK, copy patterns help users complete their tasks if you want to:

  • refer to the same things using the same words
  • use the same type of patterns with language
  • write and design naturally and consistently

These copy patterns (or content patterns as she call it) act as sign posts that help people navigate through the product. Because they are agreed upon beforehand, you can use them to solve similarly thorny problems that users repeated encounter. (See the actual content pattern repository she created when she worked on GOV.UK.)

If you’re working across multiple locations, products, subject areas, and media, you want to make sure the narrative remains coherent throughout (and across) your product. Save yourself time by creating copy patterns other designers, developers and product managers can use to better support users in a particular context.

3) Create a message architecture

I’m a big fan of Margot Bloomstein’s framework for communicating clearly inside and outside the product. Not only will it help you achieve the brand nuances you’re looking for, it will also speed up decision-making around content and design.

From Hilary Marsh's presentation, Managing the Politics of Content, Slides 37 and 38. (Source: Content Marketing Institute)

From Hilary Marsh’s presentation, Managing the Politics of Content, Slides 37 and 38. (Source: Content Marketing Institute)

Message architecture is a hierarchy of communication goals that reflects a common vocabulary. An effective one is based on concrete, shared terminology that is grounded on conversation, so you shouldn’t work on it alone. Similar to making features across Facebook feel like “Facebook,” message architecture acts as a filter for your content and ensures your content is on-brand and uses appropriate tone. It focuses on the qualities that should be conveyed rather than the exact words that should be used.

Message Architecture for a Company Like Apple

From Margot Bloomstein’s presentation Be a Greedy Bastard: Use Content Strategy to Get What You Want, Slide 26. (Source: Content Marketing Institute)

The power of message architecture lies in starting conversations around the nuances of words. While the word “simple” may mean one thing to you, it could mean something completely different to another person. So even though a message architecture is made up of words, everyone should agree on the meaning of each one. Margot Bloomstein shares a card-sorting exercise you can use to create a message architecture with your team in a free chapter of her book.

When your team comes to a consensus around which qualities are most important to communicate through every piece of content (and their order of importance), it makes all your content seem like they come from the same place. So invite everyone whose input is critical in making content decisions. Include people whose support you need to maintain it as a North Star.

4) Create a language board

I first heard about language boards from Steph Hay, Director of Content Strategy at Capital One. A language board documents your users’ language so you can write copy that is more conversational (and less jargon-y). Especially for microcopy, such as help/instructional texts and error messages, every word counts. Having a language board will help you choose customer-focused words to address people’s anxieties, answer questions before they come up, and cover knowledge gaps.

Scott Sullivan from Adaptive Path shares a language board he created while designing the Capital One Home Loans website. It lets him easily access the exact language that their users used to describe concepts within home loans.

Language Board from Adaptive Path

Another way to think about your words is to envision four forces acting on a user at any given time. The four forces model comes from the Jobs To Be Done framework which describes two forces that propel people to take action and two forces that hold them back.

Four Forces from Jobs To Be Done

From “Designing Products Against Customer Jobs,” Hannes Jentsch & Martin Jordan, ProductTank Berlin #7: Lean UX (slide 18)

The two forward forces are:

  • Push: Dissatisfaction with present situation
  • Pull: Magnetic pull of new solution

The two friction forces are:

  • Habit: Allegiance to existing behaviors
  • Anxiety: Uncertainty around the new solution

In the context of interface copy, the words users see either helps them complete a task or hinders them. Amy Thibodeau writes, “Even when we’re being careless, when we think it doesn’t matter, our language holds meaning that can make someone feel encouraged or alienated, or help or hinder them in what they’re trying to do.”

For example, if a user reads about a great financing option for a home loan but the website doesn’t ease concerns about whether he would qualify for it, he might stop in the middle of the loan application process. When the friction forces are greater than the forward forces, users will be less likely to take the necessary actions to achieve their goal. (More on influencing each of the four forces here.)

Language boards will play a more substantial role when we think about how to create a coherent product narrative. In the meantime, use it to write like a human.

Conclusion

We wrestle with language because it’s the building block for how we understand an experience and take action on an idea. Without it, we can’t name what we want to create – and why it matters.

As we see in Jesse James Garrett’s planes of user experience, words fold into each other as they build up from strategy to information architecture to the user interface. As UX designers, researchers, and content strategists, we get to decide how words will support people as they live their lives as best they can. How cool is that?

“I learned that language can be a design tool. When you design content for products, you’re building an experience with words. It’s the intersection of language, empathy, architecture, interaction design, and code all within the context of a product: an experience that helps people solve problems.”Jonathon Colman

More Examples

Advertisements

The Author

I'm a content strategist and UX designer. I design with words and write to design.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s