UX Writing Ebook

UX Writing | eBook Completo
💡 Olá! Bem vindo ao teu guia de aprendizagem. Aqui encontras todos os capítulos
sobre UX Writing, incluindo artigos e videos relevantes, bem como exercícios
práticos.
Sobre este eBook

Este eBook contém toda a informação necessária
para que possas iniciar a tua carreira em UX
Writing. Vamos abordar todos os fundamentos
necessários, e tens acesso a exercícios e projetos
para pôr em prática os teus conhecimentos.
Diverte-te!
Who's a UX writer? | Inside Design Blog

Over the past few years, a fairly new term has started popping up on job
advertisements and descriptions. For those in the UX community, it might
be old news, but for others, it's a completely new term: the UX writer.
https://www.invisionapp.com/inside-design/ux-writer/
UX Writing | eBook Completo 1

Sobre este eBook
Learning Guide
📝 What is it?
💡 Learning material: UX writing 101 (article)
💡 Learning material: UX writing vs copywriting (article)
💡 Learning material: UX copy and business results (article)
📖 UX writing principles
1. Useful
2. Clear
3. Concise
4. Conversational
🕒 Exercise time
❗Your first task
🏆 Bonus exercise (optional)
🗨 What is the tone of voice?
🎤 Voice
🗣 Tone
💡 Learning material: Mailchimp's voice and tone (article)
💡 Learning material: Establishing a tone of voice (video)
📑 Tone of voice dimensions
💡 Learning material: tone of voice dimensions (image)
🕒 Exercise time
Task 1
Task 2
🖱UI elements
Titles
Descriptions
Call-to-action (CTA)
Labels
Empty states
💡 Learning material: Empty state
Messages
💡 Learning material: Modals/dialog boxes
🕒 Exercise time
1) Server error
2) Warning message
3) The rest of the flow

Learning Guide
📝 What is it?
ℹ UX writing is about improving the user experience of digital products, and guiding
users on a journey through clear, concise, and helpful copy (text; words).
UX writing is currently at an all-time high.
Many tech companies are looking for people to deliver quality experiences through writing,
ideation, and design.
Why?
Because digital products are filled with words. You might not be opening your apps just to read
the labels and instructional text, but it's all there.
Since the overall experience is heavily influenced by design and copy, word choice significantly
impacts users. That's why UX writing is part of a larger field concerning user experience (UX).
That is to say, words are inevitably tied to design. One simply cannot exist without the other.
Some people even refer to UX writers as "content designers" or "content strategists".

There's a lot that goes behind UX writing: defining terms and tone of voice, setting expectations
guiding users, and the list goes on. So it's more than just writing.
You can find a quick introduction to UX writing in the article below:
💡 Learning material: UX writing 101 (article)

Content 101: UX Writing - @GatherContent
While the role and discipline of content strategy have been largely defined,
new lanes have emerged. One of the most important and fastest-growing of
those is the role of UX writer. Now an integral part of design teams at
https://gathercontent.com/blog/content-101-ux-writing
Read the article
Take note of any doubts you have
.
But if UX writers write copy, what do copywriters do?
Well, there's a considerable difference between the two. Copywriters are primarily concerned
about sales and meeting marketing and business goals.
On the other hand, UX writers ensure every user can understand and navigate the
product, in a way that proves effortless and enjoyable.
In short, UX writing has everything to do with ensuring users are having an optimal experience,
and not so much to do with attempts at selling that particular product or service.
Take a look at this article that clearly explains the difference between what UX writers and
copywriters do:
💡 Learning material: UX writing vs copywriting (article)

UX Writing vs Copywriting: What's the Difference?
As a writer who studied advertising and then went on to work for marketing
agencies, much of my career has been spent copywriting. It's what I was
taught and had experience in - what I knew. Imagine my surprise when I
https://boldist.co/usability/ux-writing-vs-copywriting/
Read the article
Now that we've covered the basics of UX writing and we know how it differs from other types of
marketing-related content, let's dive a bit deeper into its overall impact.

By making things clearer, we're also helping users engage more with our product. In many
cases, that translates into even more sales ($$$).
A lot of times, small changes in wording can impact business metrics. Maybe we're able to talk
the same way our users do, using more familiar language. Or maybe we preemptively removed
any doubts and fears they might've had before performing an action.
It's because UX writing streamlines the overall experience that users are more prone to taking
actions, which in turn benefits product sales and profit margins.
Take a look at these examples of how UX writing helps businesses grow:
💡 Learning material: UX copy and business results (article)

How UX Copy Drives Better Business Results
We at Frontitude think that crafting great UX copy is one of the best
investments a product/UX team can make. We noticed that there are not so
many up-to-date examples out there, that show how UX copy affects
https://www.frontitude.com/blog/how-ux-copy-drives-better-business-res
ults
Read the article
As you can see, there's a lot that goes into our practice. It's more than just filling an empty
design with words. But one thing's certain: our goal is to improve the experience users have
with our products. And to achieve that goal, we'll keep researching, ideating, testing, and
iterating.
But when it comes down to the nitty-gritty, how do we start the writing process?
There are a couple of UX writing principles that help you ensure your copy improves the user
experience.
📖 UX writing principles
ℹ These are merely guidelines, not rules set in stone.
UX writers are still encouraged to follow each principle in some way or another.
Below are the UX writing principles you should follow.

Make sure all your copy is, in some sense:
1. Useful
Your text should have a sense of purpose and, if possible, provide a solution, a suggestion, or
actionable feedback.
It's perfectly okay to only inform users about something that's happened, but often we're left
wondering "okay and?". So make sure you preemptively answer any possible questions that
might arise in the future.
So ask yourself: "am I providing enough help?".
❌ Don't: "We couldn't find an account with that username."

✔ Do: "We couldn't find an account with that email. Need help recovering your username?"
2. Clear
Make sure you write in a way that's as easy to understand as possible. Avoid technical terms
and verbose language. The key thing here is: don't write to impress, write to be understood.
We tend to overcomplicate things when we're overly concerned with formality and following the
status quo. But more often than not, we forget that not everyone is up to par with the same
terms, words, and jargon. They might not know what a "server" is. They might have no clue
about technology in general.
Because we're writing for a wide audience, we need to aim for the lowest common denominator
and make sure the least knowledgeable person gets it. That way, we know everyone else will.
Ask yourself: 'how would I explain this to my grandparents?'
❌ Don't: "Login error: Server timeout"

✔ Do: "Sorry, something happened on our side. Please try again."
3. Concise
Sentences should be short and to the point. Start with the most important piece of information
and avoid using the passive voice.
We're often trained in school to write as much as possible, with the hope to impress our
teachers. Sometimes they even set a minimum requirement of words.
But it's much better to say a lot using fewer words. Not only is it more efficient, but it also
streamlines communication — users will understand you much better. Just make sure you don't
leave important details out in hopes of shortening your text.
Ask yourself: 'what words are unnecessary here?'
❌ Don't: "If you decide to return to the homepage no progress will be saved."
✔ Do: "Go back? All your progress will be lost."
4. Conversational
Your messages should sound as natural as possible. Establish an empathetic tone by giving it
a human touch.
Writing is different than talking. When we speak, it comes out in a much more natural way.
Writing is a premeditated process: we think, we edit, and then we publish. Not only is it
structurally different, but it also sounds different when you read it out loud.

This makes our writing often sound distant, robotic, and unemotional. Which in turn, doesn't
connect to users. Our goal is to improve the experience, not make it dull.
So ask yourself: 'Does this sound like I would say it in real life?'
❌ Don't: "An authentication error has occurred: incorrect password details."

✔ Do: "It looks like you entered the wrong password."
There are many other principles, such as Accessibility, Inclusivity, and Consistency, but they’ve
been left out for the sake of this exercise. Feel free to research a little more about them on the
side, and save any questions for later!
🕒 Exercise time
Now's the time to get started on your path to becoming a full-fledged UX writer.
Throughout this challenge, you'll be given exercises to complete, along with bonus exercises
for additional practice.
This is a design flow.

It represents the different paths the user can take from screen to screen when using an app.
We use this to map out the entire journey, including errors and less desirable situations.
❗Your first task

Throughout this challenge, you'll be tasked with completing several tasks to complete the copy
for this flow. The result will be a nice-looking app flow with quality UX writing!
This is your Figma file: https://www.figma.com/file/MjAoeCNHvGmoafd9cxblZ9/Hotel-App-

[eBook]-⚠-DUPLICAR-⚠
Open Figma and log in. Once you're in, click the dropdown by the file name and select
Duplicate to your drafts. Now you can freely change the text! Alternatively, you can just write
it down somewhere else.
Let's imagine that we're building a hotel booking app. (you know, like Airbnb or Booking).
You tried to log in, but apparently, you got your email wrong.
An error message in red popped up, but something seems off...
💡 Rewrite ONLY the error message in red. Take all 4 UX writing principles into
account

These are optional exercises I will be leaving you, in case you want to keep practicing.
They are completely unrelated to our hotel app journey.
Rewrite the error message in red. Take all 4 UX writing principles into account

Now that we've covered the basics of UX writing, let's understand how it can vary in different
situations.
🗨 What is the tone of voice?

The tone of voice is the style of communication UX writers use to convey a brand's personality
across the product. It's fundamentally about the way you say things.
In today's world, it's what sets companies apart from each other. It's about uniqueness and
consistency, just like the tone of voice of a real person.
As the name implies, a tone of voice is made up of the tone and the voice. Let's see how they
differ from each other.
🎤 Voice
Voice is the representation of what the brand is and what it stands for. It represents its
immutable side; its core values.
As with people, you can recognize the most familiar voices and know who's talking to you.
You're likely to tell which of your friends is talking because their voices are different, even with
your eyes closed.
Likewise, businesses usually define a vision or a set of values to abide by. Voice helps us
convey that through writing.
🗣 Tone
Tone is how we adapt voice to different situations accordingly. Unlike voice, tone isn't
immutable —changes. Just like you moderate your tone in different situations, such as
addressing the elderly with respect, instead of talking to them like you do with your friends.
Even if you're considered a funny person, you wouldn't show your humorous side at a funeral,
would you? (Well, I hope not).
It's important to consider how the user might be feeling in different situations, especially in
difficult ones where they encounter an error or have a hard time figuring something out.

UX Writing: How Voice and Tone Can Transform the User Experience
I'm not clever like you. I can't make fancy rissoles of each word. Blue
kingfishers won't suddenly fly out of my mouth. If you want my story, you'll
have to put up with how I tell it. Such is the explanation given by a destitute,
https://blog.prototypr.io/ux-writing-how-voice-and-tone-can-transform-the-u
ser-experience-30095a6ebf4e
Read this example
But how do brands define this? Let's take a look at an example.
Mailchimp, a digital marketing platform, has a clearly defined their tone of voice. They even
discuss their voice and tone separately, which is really helpful.

Voice and Tone | Mailchimp Content Style Guide
One way we write empowering content is by being aware of our voice and
our tone. This section explains the difference between voice and tone, and
lays out the elements of each as they apply to Mailchimp. What's the
https://styleguide.mailchimp.com/voice-and-tone/
Read this example
You can easily know more about the tone of voice of a company by checking its official Style
Guide, which is an assortment of guidelines for terminology, punctuation, and all things related
to writing.

But how do we establish a tone of voice?
Most of the time, you'll be working for companies with an already structured brand personality.
But if you do end up having a say in it, it's good to know where to start. Especially if you need
to review the existing tone of voice and improve it.
Let's take a look at how you build a tone of voice from the ground up:
💡 Learning material: Establishing a tone of voice (video)

https://www.youtube.com/watch?v=HSpms43ycKg
Play the video
📑 Tone of voice dimensions

Though the concept of tone of voice can get really abstract, there are ways to approach it in a
way that doesn't feel vague.
The folks at Nielsen Norman Group defined 4 main dimensions that make up the tone of voice:
formality, humor, respectfulness, and enthusiasm.
Each dimension represents a two-way spectrum. For instance, in terms of formality, you can go
from very formal to extremely casual, and so on.
Let's take a look at each dimension:
Formality (formal vs. casual): formal writing conveys professionalism, while a more

informal tone can add personality.
Humour (funny vs. serious): a humorous tone of voice can help lighten the mood, but there
are times when seriousness is called for.
Respectfulness (respectful vs. irreverent): whether we approach things respectfully or in a

way that's confident and out-of-the-box.
Enthusiasm (enthusiastic vs. matter-of-fact): we can sound passionate when delivering a

message, or stick to the facts and sound a little drier.
Take a look at the flyer below explaining the difference between all tone of voice dimensions:
💡 Learning material: tone of voice dimensions (image)

After you've defined your brand's tone of voice, you will end up with a combination of all 4
dimensions.
Maybe your brand is casual, funny, irreverent, and enthusiastic.
Or maybe it's formal, serious, respectful, and matter-of-fact.
The combinations are up to you!
🕒 Exercise time
Task 1
✋ Wait, before we get started, I've been talking to the owner of the hotel app. They need your
help building the brand!
Can you please pick 4 tones of voice dimensions? Thank you!
Task 2
Back to our hotel booking app. Our homepage screen is looking nice, but we still need a
welcoming message for users.
📢 Something that gets them to use the search function and book a hotel.
Maybe an instruction, maybe a welcome message. It's up to you.
Can you help us out?

This is how our competitor does it:

💡 1. Remember the tone of voice you picked!
2. Write only the Title + Description

These are optional exercises I will be leaving you, in case you want to keep practicing.
They are completely unrelated to our hotel app journey.
Identify the 4 dimensions of this tone of voice, used by Slack.

Now that we've covered the basics of UX writing principles and tone of voice, let's take a look at
how we can start writing copy for the UI (user interface).
Naturally, a digital product (be it a mobile app, web app, or other software) is made up of
screens, each with its own interactable interface. Every little part that makes up a screen is
what we call a UI element.
Since each UI element serves a unique purpose, our writing should vary accordingly. Here are
some of the most common ones to look out for:
🖱UI elements
Titles
Titles (or headlines) are usually present in larger font sizes, on top of the screen, or above
sections. Their purpose is to provide context on where the user is, or what they should do.
Most people ignore descriptions and just read titles, so despite being shorter in length, you're
encouraged to take some time coming up with decent copy for titles.

On mobile apps, go for short titles (1-4 words)
When providing context, make sure the title encompasses everything on the screen.
e.g: If the title of the screen is "Photos" but there are images and videos, maybe
change it to "Gallery" so it encompasses everything.
If the user has to perform an action, start with the main action as a command, followed by
the object or thing.
e.g: On a payment confirmation screen, a simple title with "Confirm Payment" is fine.
Descriptions
Also known as body text, descriptions are usually followed by titles, descriptions provide
additional information that guides or informs the user throughout their journey.
Because they're usually longer blocks of text, most people either skim read them or skip them
altogether. But that doesn't make them any less important.
Descriptions should be 40 to 50 characters long.
Avoid repeating words or redundancies.
Use links to cover other important topics.

Call-to-action (CTA)
As the name implies, CTAs are a call for the user to take action. It could be in form of pressing
a button or just clicking a link, depending on what precedes them.
Buttons are unique UI elements because they're one of the only ways users can express their
will. By observing where users click, we can figure out what they want to achieve or where they
want to go. This is why buttons should be easy to understand and extremely clear about what
will happen. The same goes for links, which are usually in the form of text (included in the
description).
Buttons should:
Always be 1 to 3 words long.
Include the same verb/words used in the title or description.
Links should:
Make sense out of context: avoid the famous "Read more" and "Learn more".
Describe what will happen or what the linked page is about.
Labels
Labels help us understand the UI without too much text. They're usually short strings of copy (1
to 4 words) that let us know what type of information we're looking at: dates, time, numbers,
etc.
They can be present in or outside other elements and each one has its own goal. It could be to
help the user navigate through a menu, help them use filters, convey the status of an action, or
the quantity of something.

For menus, go with nouns instead of verbs.
Labels for text input fields should all go above or left to each field.
Instructional texts inside fields are okay, but those disappear once the user starts
typing, so bear that in mind. If it's a really important instruction, make sure it's outside
the field.
Write numbers numerically (10) instead of "ten".
Separate larger numbers into groups of 3 digits to make them easier to read.
Be mindful of singular and plural variations, address them with the team you're working
with (1 member, 2 members).
Make sure filter labels are consistent with each other (most relevant; least relevant)
Empty states
Sometimes users will land on an empty screen because they've never used a feature, and
there's no data to show. Empty states provide context on why a particular screen is blank.
These are the most common types of empty states:
First use: when users are landing on that screen for the first time and may need to perform
an action.

Failed state: for when something unexpected happens or other issues are going on.
No data to show: when there’s no information available in that context.
Not every empty state needs to be actionable. Many First use scenarios should be informative,
especially if the action is secondary or less important to the user journey. If the scenario is
critical to the user journey, the empty state message should be actionable and focus on the
next steps.
Ask yourself what is the purpose of the empty state. What should the user know or do?
Decide whether the empty state is actionable or informative (no CTA).
When there’s no way to avoid negativity (‘No results’), make sure the description is
instructional enough.
Keep the description short yet instructional.
💡 Learning material: Empty state

Writing empty states
A lot of you think of empty states as secondary screens that don't require
design attention. Well, think again! Empty states are actually a great way to
engage, keep and delight users at critical moments. For example, running
https://uxdesign.cc/writing-empty-states-3e0279f39066
Read this example
Messages
Sometimes we want to let users know what's happening in real-time. For that, we use
messages, which can be divided into several categories. They can be:
⚠ Warning messages: when you want to let the user know about something that is
important and will impact them, either now or eventually. Start by explaining what's
happening and what they can do (if applicable).
❓Confirmation messages: for situations where the user is about to proceed with a
potentially destructive action that may result in loss of information or other consequences.
Both warning and confirmation messages should be led with a question (usually in the title)
and CTAs.
❌ Error messages: when something didn't go right. Depending on the severity, these can
be shown on-screen (if the user can easily fix the issue), or inside a modal* if they're more
serious. You should strive to be clear about what's happening and avoid blaming the user
at all costs.
✅ Success messages: Although less common, they are useful to indicate that an action
was successful, especially if it took a while or the user needs reassurance because it was
an important action.
*For these types of messages, modals (also known as dialog boxes) are used. They can be
useful to catch the user's attention, but they add a lot of friction to the experience by blocking all
actions until the user confirms or cancels the message.
They shouldn't be used for success messages and errors that can be easily fixed (such as
correcting a typo). In these cases, in-line messages should be used instead.

Find out more about modals in the article below:
💡 Learning material: Modals/dialog boxes

Are you sure you want to do this? Microcopy for confirmation dialogues
Confirmation dialogue boxes usually pop up after users take some kind of
significant action. The messages are there to verify that users truly intended to
perform that action, and are (fully) aware of its consequences. A confirmation
https://uxdesign.cc/are-you-sure-you-want-to-do-this-microcopy-for-confirma
tion-dialogues-1d94a0f73ac6
Read this example
And one more thing:
🎉 Congratulations, you've got all the basics covered!
You're now ready to start UX writing like a pro. Now it's only a matter of practicing
and improving!
🕒 Exercise time
Are you ready to get the journey fixed?
Here's what's missing:
An error screen for when the server connection fails

A warning message: we need to inform users they will lose their previous search
The login page needs the title, CTA, and labels fixed.
1) Server error
We need a screen previewing the possibility of the connection failing. Let's imagine our servers
are down, or something unexpected happens.
Let's inform users that something happened and they need to try again later.
This is how our competitor does it. Do you think we can do better?

Please pick a tone of voice, apply the UX writing principles and write a similar message for our
app.

2) Warning message
We also need a modal for when the user tries to leave the app before completing their search.
This means that their search will not be saved. Or, in other terms, their search progress will be
lost.
The warning message should inform that. Can you help us out?
Something similar to this structure:
We can still do better than that.
Let's ask the user if they really want to leave, explain what happens, and then write 2
different CTAs.

3) The rest of the flow
Go through the rest of the Figma file and fix everything else you spot: labels, descriptions,
buttons.

UX Writing Ebook

Uploaded by

Copyright:

Available Formats

You might also like

UX Writing Ebook

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

UX Writing Ebook

Uploaded by

Copyright:

Available Formats

UX Writing | eBook Completo

Sobre este eBook

Who's a UX writer? | Inside Design Blog

UX Writing | eBook Completo 1

3) The rest of the flow

UX Writing | eBook Completo 2

UX writing is currently at an all-time high.

UX Writing | eBook Completo 3

💡 Learning material: UX writing 101 (article)

Read the article

Take note of any doubts you have

💡 Learning material: UX writing vs copywriting (article)

Read the article

Take note of any doubts you have

UX Writing | eBook Completo 4

💡 Learning material: UX copy and business results (article)

UX Writing | eBook Completo 5

Read the article

Take note of any doubts you have

Below are the UX writing principles you should follow.

So ask yourself: "am I providing enough help?".

❌ Don't: "We couldn't find an account with that username."

Ask yourself: 'how would I explain this to my grandparents?'

❌ Don't: "Login error: Server timeout"

Ask yourself: 'what words are unnecessary here?'

UX Writing | eBook Completo 7

❌ Don't: "An authentication error has occurred: incorrect password details."

This is a design flow.

UX Writing | eBook Completo 8

❗Your first task

This is your Figma file: https://www.figma.com/file/MjAoeCNHvGmoafd9cxblZ9/Hotel-App-

An error message in red popped up, but something seems off...

UX Writing | eBook Completo 9

UX Writing | eBook Completo 10

🗨 What is the tone of voice?

💡 Learning material: Mailchimp's voice and tone (article)

UX Writing | eBook Completo 11

Read this example

Take note of any doubts you have

But how do brands define this? Let's take a look at an example.

💡 Learning material: Mailchimp's voice and tone (article)

Read this example

Take note of any doubts you have

UX Writing | eBook Completo 12

💡 Learning material: Establishing a tone of voice (video)

Play the video

Take note of any doubts you have

📑 Tone of voice dimensions

Formality (formal vs. casual): formal writing conveys professionalism, while a more

Respectfulness (respectful vs. irreverent): whether we approach things respectfully or in a

Enthusiasm (enthusiastic vs. matter-of-fact): we can sound passionate when delivering a

💡 Learning material: tone of voice dimensions (image)

UX Writing | eBook Completo 13

Maybe your brand is casual, funny, irreverent, and enthusiastic.

Or maybe it's formal, serious, respectful, and matter-of-fact.

The combinations are up to you!

Can you please pick 4 tones of voice dimensions? Thank you!