Microcopy The Complete Guide 2nd-Ed Ebook
Microcopy The Complete Guide 2nd-Ed Ebook
Microcopy The Complete Guide 2nd-Ed Ebook
EXTENDED
AND
UPDATED
Karma is Priceless
This book is available for purchase in eBook and paperback on a
dedicated website.
If you've just downloaded the book from said website, then you are
the rightful owner of this copy. It is your responsibility to make
sure it stays on your private reading devices.
If this copy found its way to you by any other mean, here's your
chance to be kind and fix it: www.microcopybook.com
Kinneret Yifrah
ISBN 978-965-572-795-1
What’s inside
Introduction: What is microcopy and what’s in this guide 8
2 Conversational writing 52
6 Contact us 96
10 Placeholders 138
11 Buttons 154
WHAT IS MICROCOPY
AND WHAT’S IN
THIS GUIDE
How microcopy was born
In 2009, Joshua Porter wrote a blog post with the title “Writing
Microcopy” (Bokardo blog). In the post he described a checkout form
he created for an e-commerce project, where 5%-10% of the online
transactions were failing because of billing address errors, hence
causing financial damage. What did Porter do? He added one sentence
next to the billing address field: “Be sure to enter the billing address
associated with your credit card”.
“And just like that, the errors went away", he wrote. "It was clear the right
copy meant I didn’t have to worry about that problem anymore, thus saving
support time and increasing revenue on the improved conversion.”
Porter shared with his readers an idea that he had been mulling over for
a while - just adding a few words in the right place at the right time
could completely change the user experience. Not only that, he created
the name for this type of copy: microcopy.
Porter’s post was the first step in defining a new area of knowledge,
microcopy (also known as UX writing and UX copy). This was a central
element of the user experience that hadn’t received enough attention or
benefitted from having a methodology to implement it. Since then, the
definition of microcopy has been developed and refined, setting it off
from content and copy. Following is the definition that I like best, and
that was used to write this guide:
Introduction | 9
The role of microcopy in the user experience
For many years, the trend was to make the interface “clean”, with as
few words as possible. Many people claimed that words overload the
interface and are perceived as threatening by users. Others minimized
the importance of words and asserted that no-one read them anyway.
But the simple truth is that communication is based on words, and anyone
who gives up on using them is removing a very basic component of the
relationship between people. In other words, if you want to create a
digital product that sounds human and relates to the people using it, you
need words. At the end of the day, people are going to use your product,
and there are some things that you can only convey to them by using words.
This book contains a lot of them.
Good microcopy changes the connection between the product and its
users into a mutual relationship, a conversation, that can be rich
and even moving. Microcopy will create a dialog with your users that
is full of character, such that it makes them want to work together
with your product, and return another day. Microcopy can make your
users fall in love.
10 | Introduction
2. Increase usability
The aim of this book is to give you the knowledge and tools to write
microcopy; and no, you don’t need to be a copywriter. All you need appears
in this guide.
Introduction | 11
Who should read this book?
• Microcopy (UX) writers and copywriters
• UX designers
• Visual/web/UI designers
• Product managers
• Website and app owners
• Digital marketing professionals
• Optimization experts
• Small business owners
• Bloggers
• Advertisers
• Sales personnel
• And anyone who is interested in great interfaces
The first part of the book covers discovering the voice and tone of the
brand, and what you need to decide before you actually go ahead and write
the microcopy.
The second part covers the power of microcopy to create engagement with
your users and to provide a positive and rich experience.
12 | Introduction
The 19 chapters of this book are written as practical guides with a
method that you can immediately implement on your digital product. Each
chapter starts with an understanding of the basic ideas and provides
the steps required to implement them on all the elements of a UI. All
the guidelines and tools are presented with the logic behind them, and
the goal they are trying to achieve; and of course there are dozens of
examples to learn from.
Kinneret
Introduction | 13
PART 1
PART 1:
THE VOICE AND TONE
Things you need to know before
writing your first word
Writers for digital products know well those first few moments before
writing a title, call to action, or any other sentence that demands we
step into the shoes of our users and speculate: What will drive them?
What exactly describes the value we are providing? And how can we prove
to them that the best solution is our product or service? Then come
the next set of questions: How do we phrase it? Should we use humor?
What about slang or maybe wit? Do we need to write formally? Do we
stir someone’s emotions or rather try to calm them? Are we nostalgic
or tech-y? Urban-cool or addressing the wide public?
After reading the first three chapters of this book, and if, as a result,
you make important decisions and follow them, you won’t need to
speculate what will influence your users and the best way to phrase it.
The answers will be clear and available whenever you need them.
Chapters in part 1:
1. Voice and tone design
2. Conversational writing
VOICE AND
TONE DESIGN
They turned to me because they realized that their voice and tone, the
words that appear on the various digital products, hadn’t been updated
for the last 15 years. It had been left behind and they didn’t know how to
update it so that it fitted their innovative approach.
To get an idea of their current voice and tone and the microcopy used, I
browsed the site and used some of the apps. As I do with all my customers
in order to reveal their microcopy secrets, I registered on the site,
completed self-service processes, recovered my password, made contact
using their form, found their 404 page, and deliberately filled in each
form with errors.
What’s happening here? Before the digital age, the only entities that used
language to communicate were humans. Thus, when someone addresses us using
language, our brain immediately responds to the other party as a human.
On the other hand, when the verbal and non-verbal elements were
consistent and supported each other, the users felt that the personality
was intelligent, fun and persuasive. They also understood the messages
better, had an emotional reaction to them and were influenced by them.
The more the users trusted the personality communicating with them,
and believed that it was authentic, the more they were persuaded by its
messages and agreed to act accordingly.
Nass explained that the reason we react in this way is because we try
to create a coherent picture of the personality communicating with
us. If we cannot create such a picture, we become suspicious and feel
a sense of rejection.
Voice and tone design defines the language in two main ways:
1. Personality
2. Messaging
What are the main messages? What will you highlight to get them to act?
What should you say so that they feel good about themselves and your
brand? And finally, what can you say to create a desired relationship
that benefits you both?
After you have defined your brand’s voice and tone, and you actually use
it in your written materials:
For example: two different American e-commerce sites ask their users
to provide their date of birth when signing up, and each provides the
reason they need this information - because it’s required by law.
www.nike.com
Whereas J. Peterman, that sells unique vintage products from all over the
world (and Elaine's boss on Seinfeld), puts it this way:
www.jpeterman.com
Exactly the same message (we are required by law) is written by two
different brands, each with its own unique character, thus the voice
and tone used differs. If J. Peterman had used Nike’s voice and tone,
they would have spoilt the warm and intimate atmosphere that they
have created with every word and in every nook and cranny of their
delightful site. Whereas if Nike used J. Peterman’s voice and tone,
they would harm the image they try to create as a company that takes
itself very seriously.
• Creating a new brand - together with the visual branding, before the first
word is even written. If you design the voice and tone right up front,
you will benefit from a brand that communicates in a uniform way, and is
persuasive from the word go. You’ll also get used to communicating in the
brand’s voice and tone, and won’t need to overcome bad habits.
• Releasing of a new or upgraded product.
• Sharpening your brand’s differentiation.
• Setting up a new digital campaign.
• Creating or upgrading the organization’s written communication
infrastructure (email, chat, and social media).
• Before entering a new market with a new target audience.
• If you understand that the words you currently use simply don’t work.
The end product of this process is a written voice and tone design that
enables you to write microcopy (you can also use it when writing copy,
content, status updates in the social media, and anything else written
on behalf of your brand).
For medium and large companies and for freelancers that write microcopy
for these companies, the full process includes 4 stages, and at every
stage you’ll discover important insights. If you lack the time or budget,
or if you own a small business or a blog, stages 2 and 3 are the ones you
should definitely do. In the following pages you’ll discover exactly how
to accomplish each stage and where you get the required information.
Read the existing design and branding documents, and extract essential
information. Some documents you can read at this stage:
1. Company vision, mission and values
2. Brand book (and any other branding documentation you can lay your hand on)
3. Briefs that were made for designers or for advertising purposes
4. Presentations made for introducing the business
5. UX concept and personas made for it
6. Research on brand perception and customer satisfaction
Stage 2 - Listen to what your users say
In this session, ask a series of questions about the brand and its
target audience. All the questions are provided further along in this
chapter (see page 50).
Stage 4 - Put all the pieces together and produce the document
Defining the vision might sound like a simple task (it seems obvious
why the brand was created, doesn’t it?), but in my experience it is often
complicated and confusing. Invest as much time as required to define
this and don’t cut corners. The effort will be worth it.
See page 50 for the list of questions used to identify the vision and
mission.
TripAdvisor
Vision: To help people around the world plan and have the perfect trip.
Mission: To offer advice from millions of travelers and a wide variety
of travel choices and planning features with seamless links to booking
tools that check hundreds of websites to find the best hotel prices.
Samsung
& keep This list will give you food for thought when defining
your brand’s values. Select those that are most
important to you to uphold and promote. Don't hesitate
to add your own values if they're not mentioned here.
Note that the brand's personality is not your user's personality, and
indeed might be very different, depending on the relationship you wish
to conduct with your users (see also page 46).
With young people you can use contemporary language and slang, whereas
seniors might not follow you. Youngsters also usually need fewer
explanations on how to use the interface, whereas with older people you
need to provide more instructions, but this too is changing fast and has
to be reexamined for each case.
If your audience is of a specific age and style of living, you can spice
up your microcopy with quotes from popular television shows, while
other groups might not understand where you’re coming from. There are
audiences that will enjoy and be flattered when you address them in a
sophisticated and witty way, yet other audiences will be offended, feel
left out, or lose patience altogether.
• Age
• Gender
• Where they live
• Level of education
• Marital status
• Other areas of interest
• Technological inclination
Of course, any other information you gather about your target audience
will also help in designing the voice and tone.
The more defined the target audience, the more the voice and tone can
and must take on a specific style that suits it. On the other hand, if
your target audience is wide-ranging, the voice and tone will be more
conservative and less sophisticated so as to meet everyone’s needs.
That doesn’t necessarily mean the voice and tone has to be boring or
lack a distinctive personality. It still needs to be well defined,
rich, welcoming, and fit the general persona you have defined.
In the next few pages we’ll ask questions about the target audience, like:
what are their needs, hopes, and objections, and what is the nature of the
relationship we would like to have with them. It’s obvious that for each of
these distinct target audiences - buyers and sellers, youths and families
- you will come up with completely different answers to these questions.
What should you do then? Find the distinct answers given by each
group, and come up with a separate messaging array for each. If you
are preparing a voice and tone design for a large organization, you
might need to confer with different sales and service teams that work
with the different groups.
At the end of the day, the brand characteristics from the first part of
the voice and tone design will remain the same for all target audiences,
with minor fine-tuning at most, but the messaging will be completely
different according to what you’ll find out in the second stage.
Let me emphasize that this is not manipulation: Your product or service will
not succeed if it doesn’t provide real value to your users and solve their
problems. The real challenge is to accurately pinpoint these problems, and
describe them with your users’ words to motivate them to choose your solution.
05 use their words. They will always be more precise and use
the most authentic phrases. Take the words of your users,
and use them to describe the benefits of your brand and to
get users to act.
Where can you hear what your users say?
1. Online chat transcripts
2. Answers to open questions in surveys you conducted
3. Online communities (e.g., Facebook groups) about relevant
matters
4. Feedback/comments made about your brand or your
competitors on social media
5. Usability tests recordings
6. Listening to call centers' incoming and outgoing calls
7. Transcripts from focus groups
8. Any other platform your target audience uses to discuss
relevant issues
As part of the voice and tone design for this new tool, we learned about
the hopes and dreams of the bank’s customers concerning their budget.
We discovered three key groups of aspirations: 1. Peace of mind and long
term financial security, realized by putting money aside; 2. Control,
by tracking and understanding the big picture; 3. Quality of life and
Now we just had to show the users how this budget management tool would
move them closer to achieving these aspirations:
• When we wanted to motivate customers to check out and use the tool, we
spoke about peace of mind, security, and realizing dreams: “So that you
can realize a new or old dream and be prepared for anything life puts
in your path”.
• The need for control and being informed was also used as a motivator
to get users to correctly categorize each expense: “A good budget is
an accurate budget - expenses that you don't categorize stop you from
seeing the big picture”.
• So that they would use the follow up and comparison tools, we spoke
about achieving goals: “To plan forward and achieve goals, you need to
also look back. Here you can see your budget over the whole year”.
As you can see, you don’t need to rack your brains to find the phrases or
messages that will motivate your users to act. They visited your website
or app to achieve something that would improve their lives. You just need
to find out what that is and remind them of it.
A man selecting a ring and diamond - usually for the first time in his
life - has many concerns, but only one dream: a fairy tale marriage
proposal and one happy and very satisfied woman. True, the sky won’t
fall if his fiancée wants to change the ring or alter its size, but that
Any one of these concerns is enough to cause the user to abandon the
online process and look at another site, or go to a brick-and-mortar
shop. But this company really studied its target audience, and in its
online selecting and purchasing processes it provides clear reference
to each one of these concerns. Before selecting a ring, the site offers
links to short articles that suggest to the user that he take a look
at his girlfriend’s jewelry box, see what other rings she has bought
herself, and measure the diameter of her favorite ring. Later on there is
a promise by the company to change the size if necessary, with no extra
charge. Every technical term, such as color or clarity, is accompanied by
an explanation and illustration. There are references to the certificate
of authenticity and assurance that comes with the ring; and towards the
end of the process the security of the site is emphasized, and a full
refund is promised if the ring is returned within 30 days.
During the voice and tone design, the college admissions advisor described
to me the mood of candidates when they access the site: On the one hand
they are flooded with information from all the academic institutions
plus other sources, and on the other hand they feel as if they don’t have
enough information to make a decision. They are subject to uncertainty,
are confused and afraid to make the wrong choice about something that
will determine the course the rest of their lives will take. Based on
what they will read on the website, they want to make a decision. They
are searching for a clear answer to the question: why this institution?
Why should I choose to study specifically here? It is our job to provide
a simple answer to this question and lay out, in a clear and transparent
manner, the competitive advantages that our institution has over others,
advantages that give real value and are important to future students.
On completing the voice and tone design, we had a list of the main
competitive advantages that this academic institution has over the
others in Israel: exceptional opportunities; social and professional
networking; an international experience; personal attention, always,
for everyone; a clear connection between theory and practice and their
future careers; leading professors; a well groomed and intimate campus;
values of social responsibility and giving to others; great people come
and study here, and there are numerous extracurricular activities.
As we saw in the section on target audience hopes and dreams, you need to
explicitly highlight the competitive advantages if you want to motivate
and arouse curiosity in your target audience, and get them to feel that
you have something unique that your competitors lack. For example, to
motivate candidates to read more on the site, you can lay out for them the
competitive advantages from the list we prepared, thus:
We recommend you read about the international experience (why not start
right away networking globally?), the top-notch students who will attend
classes with you (and will become your friends for life), the practical
curriculum (a career is waiting for you at the end of this road) and
everything else we offer, apart from academia (endless experiences).”
After you have prepared your list of competitive advantages, you will no
longer need to think time and again about how to persuade your users to
stay on your site or select your product or service. Simply ask yourself
what you are better at than your competition - and say it.
The relationship we wanted to create between B4Upay and its users was
very well-defined: the users and the site are a team, fighting on the same
side against the high cost of living, and act together to get the lowest
price. To create such a relationship, we emphasized at every opportunity
this cooperation and the fact that the site is working with them, and for
them: “Tell us the lowest price you found, and we’ll get it for you at an
even lower price”; “Now you can sit back and relax while we contact the
best suppliers”; “Your item doesn’t appear on the list? Give us a moment
to find it for you”; “Thank you for ordering with B4Upay! We were happy to
help you save money at the click of a button”.
But for a large corporation that prepares a voice and tone design as
part of its branding effort, or that wishes to instill a new voice and
tone to many writers on various media (site content, microcopy, social
media, newsletter, contact with users via chat or email, and so on), it
is worthwhile to produce a formal guide, branded, well designed and
with many examples.
The format is also flexible: Word doc, Google doc, well designed
presentation, a website - whatever best suits your needs.
On the Internet you can find many examples of voice and tone designs.
Three of my favorites, and that differ considerably from each other,
are the guide of the University of Leeds (https://goo.gl/JvvbZw),
Mailchimp’s guide (www.voiceandtone.com), and Salesforce's guide (read
more about this one in Chapter 19). Read these three documents and learn
a lot about written communication in general and voice and tone design
in particular. Discover and enjoy.
The beacon: When answering the question in what style to write, the voice
and tone design sets the course, provides the character, and maintains
The anchor: When dealing with messaging, the voice and tone design
provides all the direction needed. Whenever you ask yourself how to
motivate to action, what are the barriers and how to remove them, or what
messages will do the best job, simply open and browse the voice and tone
design - the answers will always be found there.
Why does this happen? Writing is a habit that is hard to break. It is much
easier to run with the usual words in familiar sentences, with our set
thought processes. These threaten to return again and again.
The voice and tone design requires us to shake off old habits and start
thinking afresh every time so that we write texts that fit our values,
emphasize what’s important to our users, and achieve the goals we have set.
The voice and tone design is only the beginning, and once we have completed
it we should write accordingly - to get out of ourselves and write as if
we are the brand.
CONVERSATIONAL
WRITING
What type of customer service rep do you like to find in front of you? What
type of customer service rep will get you to trust that the brand really is
good for you and that they see you? Personally, I much prefer reps with a
sincere, natural smile and a genuine willingness to help; who are service-
oriented, talk pleasantly in a manner that respects themselves, their
brand and me; and who make little jokes that break the ice (and who react
to nonsense on my part); in short, skilled representatives that provide me
with such personal service that I totally forget that I’m one customer out
of thousands.
Conversational writing | 53
Are you ready to shatter a myth?
As we saw with the Clifford Nass experiments in the previous chapter, the
more human the interface, and the more it abides by our social norms, the more
users connect and respond to it, and are persuaded by what it offers them.
Therefore, it is important that the voice and tone of the digital product is
as close as possible to a human conversation.
In practice, most digital products are far from sounding human. The writing
is often robotic, formalistic and meager, and creates no sense of personal
attention. It offers a formal voice and tone that is rigid and aloof, where
you can hardly find a smile, invitation, warmth or sincerity.
Examples
• Error. Please try again
• Log in to perform this action
• Enter a valid e-mail address
• If you do not have an account, you must create one and verify your identity
on this page in order to continue and complete your transaction.
Why does it happen? Because from a young age we are taught to write and
speak in two different styles. The written style is usually formal, more
complicated, and considered respectable; whereas the spoken style is
lighter, flowing, more commonplace, understood and accessible to all. In the
past, written style was used in delayed communication, when the recipient
read the content after receiving a real piece of paper (such as a letter),
which often arrived many days after it was written. However, spoken style
was only used in face-to-face communication or on the phone. In other words,
it was used in personal communication where the message was heard at that
moment and got an immediate response.
Then the internet came along and messed things up. Emails reduced the
gap between delayed and immediate communication; the advent of instant
messaging closed it almost entirely. When we communicate via Facebook or
WhatsApp, are we writing or talking? And accordingly, what style do we use
for a chat app: written or spoken?
Carmel Wiseman and Ilan Gonen presented a lovely answer in their book
54 | Conversational writing
Internet Hebrew (published in Hebrew by Keter, 2005). They expressed it as
follows (page 21):
The Internet breaks down the age old boundary between the written and
spoken language, and gives rise to a third option: conversational writing.
So we are not looking at a written or spoken language, but rather a new one
that combines elements of both.
In other words, interfaces can and should be both: both representative and
pleasant; both professional and smiling; both respectful and relating as
equals. Look around you, humans are like that too.
Yes, I know, in reality it’s not that simple. Many of those who write for
digital products have a hard time giving up these distinctions between the
two language styles, and the concept that one is respectful and the other
isn’t. Thus they stick to the formal written style, even when the character
and style of the actual product requires a different voice and tone entirely.
Sometimes, it is only a matter of not having the right tools for using
conversational writing. In the following pages I provide tools that will
help you with that.
Conversational writing | 55
Don’t write something you wouldn’t say out loud
Even if your brand is really serious, such as a big bank, insurance
company or government office, you still don’t need to make users feel
that you have sent your lawyers to talk to them. It is better to send the
customer service rep. You don’t want to make your users feel alienated
or threatened, rather give them the feeling that the product is a worthy
substitute for a human attentive customer service rep.
Written style includes words or phrases you simply wouldn’t say out loud,
even in a formal situation. To create the experience of a service-oriented
authentic conversation, you need to refrain from using formal stiff
phrases. The rule is: don’t write what you wouldn’t say out loud. In the
following examples I have underlined words that I recommend you remove
from your digital dictionary. In their place I offer an alternative in
suitable conversational writing.
• Enter the phone number you would like to dial >> What number do you
want to call?
• If you have previously registered for this site, please provide your
email address and password >> Already signed up? enter your email and
password
• It is also possible to make a purchase by phone >> You can also call in
your billing info
• Your sign in information is detailed below >> Your email and password
are:
• In the event that you forgot your password >> If you forgot your
password
56 | Conversational writing
A sentence isn’t constructed that way
Two other things we do when writing, that we tend not to do when speaking,
are related to sentence structure.
But “preferred” is the passive form and we wouldn’t put it this way when
talking out loud (the preferred method instead of someone preferring it).
We’d simply ask the person standing in front of us in the active form:
Or request:
Examples
• Order details >> Your order details
• Close map >> Close the map
• Number of items in basket >> Number of items in your basket
• Save settings >> Save these settings
• Select item >> Select an item
Sentences written using passive voice and without connecting words sound
forced or awkward, and hinder understanding. So write in active voice and
make sure to properly connect all the parts of your sentence.
Conversational writing | 57
Tricks for excellent conversational writing
1. Just say it
Are you undecided about how to phrase something? Imagine the user is
standing right in front of you, how would you tell them that? Try to be
as natural and spontaneous as you can, without processing or structuring
beforehand. It helps when two people do this - one asks and the other
replies with the first answer that comes to mind.
4. Ask questions
Questions create a feeling that the conversation flows, as if someone
asks and the other responds. So instead of “Type the email address you
want us to send the password to”, you could say “Where should we send
the link?” This form of sentence also propels the user to act because
humans find it difficult to leave a question unanswered when they can
answer it. But you need to be careful not to ask too many questions,
because then it sounds like an exhausting interview.
58 | Conversational writing
6 attributes of conversational writing
✓ Addressing the user directly
✓ Natural
✓ Short and to the point
✓ Using everyday common words
✓ Using active voice
✓ Flowing
Conversational writing | 59
CHAPTER 3
MICROCOPY THAT
MOTIVATES ACTION
How do you do that? Change the focus of your texts to what users will gain
rather than what they need to do to benefit.
Examples
Instead of the heading: A variety of tools to properly manage your finances
Ask yourself: What will change for the people who have used your product
or service? What can they do that they couldn’t before? What problems have
you solved for them?
And instead of writing: The gift card will let you buy things in 25
selected stores
Write: With this gift card you can shop in 25 selected stores
Excited users are also easy to motivate: they are more focused on the half
full glass, willing to take more risks, and are ready for action. Actually,
Nass found that they want to do something so much that they prefer to
make any decision rather than no decision at all. So if you succeeded in
exciting your users, the conversion is just around the corner.
Aggressive service or selling techniques work in the short term, but don’t
serve the relationship that we want to create on websites or apps. Our
objective is usually to establish a relationship of trust, continuity,
and an emotional connection to the brand; provide pleasant memories and
create a long-term relationship, not just for this encounter, but for
continuous use, forever. Think about the well-known brands you love most
- their appeal, elegance, and the sense of mutual respect.
How do you do that? Explain to your users how they benefit from performing the
desired action, then invite them to do it. Write in an active and attractive
but not aggressive voice, and leave out the dirty tricks (see tip 08).
Ask yourself if the invitation provides your users with something that
is important to them, if it respects them, and if it fits the type of
relationship you want to create with them in the long term.
The fact that others were at this same crossroad, and decided to act in a
certain way, reduces the level of uncertainty in the situation, creates
confidence, and makes us feel that we belong to an imaginary community of
those who’ve already taken this action.
• Concrete facts - The name of the last person who used the service; in
which state the product was bought most. In general, the more concrete
the social proof (name, photos, quotes), the more reliable it is.
• Ratings, for example using stars or quotes from rating sites such as
TripAdvisor.
• Social media - buttons to share or like, with the number of users that
have clicked them so far.
Examples
PART 2:
EXPERIENCE AND
ENGAGEMENT
Every word is an opportunity
In the first part of the book, which dealt with voice and tone design,
we saw how to define the main messages that we need to share with our
users so that they are motivated to action. What advantages are worth
stressing, which concerns we should address, how we want them to feel
when in our company, and so on. In part 2, you’ll see how to actually do
this on your digital product.
In each chapter I’ll cover one popular element that we find in sites and
apps, and how we can turn a regular page to one full of character, a page
that is distinctive to your brand, one that communicates directly to your
users’ hearts and motivates them to act willingly.
In the following chapters, you’ll see that every word, every page and
every form on your site is an opportunity to prove to your users that they
are wanted and loved, to increase their activity and to establish your
brand’s differentiation. Every heading, every field and every button, even
the most annoying errors, are an opportunity to surprise your users, to
excite them, and to show that you thought about them and that you have
something really, really good to offer them. Within each chapter you’ll
find clear principles that are easy to understand, that you can use when
writing, and that you can implement immediately.
Chapters in part 2:
4. Sign up, login and password recovery 9. Empty states
How much do users hate to register? A lot! They’ll even pass on the
items they put in a shopping cart, and then look for that exact same
item elsewhere, if they are forced to register before checkout. After a
large company removed the requirement to register before purchasing
anything, their profits rose by $300,000,000 a year (read the article
“The $300 Million Button” by Jared M. Spool). That’s how much people hate
to register.
Sign up forms | 69
The following form, similar to dozens of others on the Internet, does not
help users. There is nothing to support a decision by a user to sign up or
not, and it doesn’t say anything that will stop them from giving up and
leaving. The site simply displays a form, which they hate, and doesn’t say
a word. So why should they sign up?
It’s not enough to design and display a sign up form, you need to also
motivate users to register. And to achieve that, follow these three steps:
70 | Sign up forms
• Good to see you :)
• Join now and start to… (edit photos, find friends, make an album, or
whatever it is users do with your product)
• New here?
• Let me in!
• Not a member? Let’s fix that!
On the other hand, don’t take the creativity too far. You want users looking
to register to know that they have arrived at the right place.
Note that I only encourage you to spice up the title of your sign up form.
Don’t alter the sign up / log in links that appear in the navigation bar.
Users are looking for exactly those words, and every change will make
them harder to find. Be creative only on the actual sign up page.
Examples
• Fast checkout
• Create a wish list
• Only enter your details once
• Track orders, delivery, and purchase history
• Track the progress of a process
• Access to a restricted area of the site, or to special features
• Monetary perk available only to registered users
Sign up forms | 71
3. Remove the obstacles
Why don’t you register on every site you visit? Let me guess:
1. Because of the time and effort involved in filling out the form.
2. Because you don’t want to give them your email and be swamped by spam.
3. And sometimes because you are worried they’ll request payment at some
later stage.
All users fear this, so talk to them and ease their fears. Clearly promise
them that the sign up process is short and simple, that you won’t pass
their email address on to anyone else, and that you won't send them too
many emails yourself.
Finally, don't forget the button, the success message and the
error messages
Signing up for a digital product is one of your most important processes.
Don't forget to add a call to action on the button (see tip 19 in Chapter
11), and an excellent success message that makes users feel that signing
up was the right thing to do (see Chapter 8). Naturally, you also need to
provide clear and pleasant error messages (see Chapter 7).
Examples
Nike offers a lot of sporting and personal value, conveyed in a dynamic
and convincing way that sport lovers understand.
www.nike.com
72 | Sign up forms
Life is Good, the T-shirt site, provides three classic reasons to register
in a bulleted list, and points out that the process is easy. However, they
could spice up the title a bit and make it more fun to sign up.
www.lifeisgood.com
TED. The title and first sentence work well together and give users the
feeling that they are really welcome. Then come the benefits (carefully
selected), presented in a simple and clear style. For those signing up
with their Facebook account, there is also a promise not to post anything
without their permission (see more about signing up using social media
accounts later in this chapter).
www.ted.com
Sign up forms | 73
Thieve curates special items from AliExpress. Their sign up call to
action is super straightforward and to the point. I love it. But note
that because of the design (black button for Facebook connection, no
form), the unusual flow (signing in is actually signing up), and the
laconic phrasing, users might not fully understand that by clicking,
they connect their social media account with this website they just
encountered. I think it’s worth mentioning it more clearly.
www.thieve.co
Society6 also deals with designed items. The benefits they offer users
to encourage them to sign up are part of their model that supports
artists. In this call to action they trust users to have the same love
for art and for the ones making it.
www.society6.com
74 | Sign up forms
food.com. You don’t need a title, you can get straight down to business. In
this way, instead of alarming users by declaring that this is where they
register, the users read benefits that are important to them, and thus
keep on reading. If you're into food on social media - this is an offer you
can't turn down.
www.food.com
Sign up forms | 75
PayPal tells their users what they can do after they have created an
account, things that they couldn’t do beforehand. They clearly explain
what will change and how their users’ lives will improve after signing
up, and that’s an excellent way to present the main value. The title
also assures the user that signing up is free, thus removing the
payment barrier.
www.paypal.com
www.medium.com
76 | Sign up forms
TIP Register vs. Sign up vs. Join
Sign up indicates to the user that this is a simple and quick
Sign up forms | 77
Signing up using a social media account
Signing up via social media lets users register without filling out a
form, and enables us to get much more information about them - a win-win
situation. Today, this is considered the standard, and in many digital
products this is the main sign up method.
Because the concern over privacy is a real problem, and because we ask the
users to provide much more information than just their email, it is wise
to add at least one of the following:
2. The benefits of signing up via the social media: It’s the fastest,
simplest, and most up-to-date way.
Today, in most cases, there isn’t enough (or even any) mention of these
issues. In the near future maybe we can give it up, because this way of
registering will be so commonplace, but as for now it is still important
and necessary. I saw with my own eyes users give up on registering using
their social media accounts only because the site didn’t promise to guard
their privacy.
78 | Sign up forms
Examples
Stating the benefits of signing up with social media and alleviating
concerns. Uniqlo does it right:
www.uniqlo.com
www.asos.com
OkCupid is short and direct. The promise never to post anything in the
name of a user is extremely important to sensitive products such as
dating, diet, pregnancy and birth, medical, and financial products.
www.okcupid.com
Sign up forms | 79
Login for registered users
Returning registered users can be seen as regular customers of the
website or app; and just as in brick-and-mortar shops regular customers
are welcomed with warmth, so they should be treated online. Instead of
writing only Log in or Registered users, you can say something that will
raise a smile and show your users that you are happy they chose to return,
that they are welcome and loved here.
Examples
envato are glad you returned.
www.envato.com
Typeform makes users feel like they just knocked on a friend’s door.
www.typeform.com
80 | Login forms
PicMonkey writes something funny on top of the login form, and changes it
each time the user comes back. LOL
www.picmonkey.com
But there's no need to go this far. It may even become annoying after a few
times. So just be nice, not too clever.
www.emojicom.io
Login forms | 81
Password recovery
Users who want to log in but have forgotten their password are not
interested in anything else except getting a new password. This is not
the place to be clever, and there’s no need to elaborate. Keep it short,
simple and effective.
Examples
Tumblr proves that extra words are superfluous when most of your users
already know their way around.
www.tumblr.com
Upserve. If you are concerned that your users don’t fully understand how
it works, you can add a short explanation.
www.upserve.com
82 | Password recovery
You can still soften the process just a tiny, tiny bit without
burdening the user.
www.okcupid.com
TeuxDeux, the to-do app, shows empathy and gives a helping hand.
Success:
www.teuxdeux.com
Password recovery | 83
CHAPTER 5
SIGN UP FOR
A NEWSLETTER
The problem is that however much we want our users to sign up, they
likewise don’t want to. They see it as an invitation to spam them and
receive piles of unwanted information. They need a really, really good
reason to risk signing up.
1. The boring
A drab one sentence invitation using a well-worn template that can appear
on any website, and doesn’t arouse any interest.
Examples
• To sign up for our newsletter, please provide the following details:
• Sign up for our newsletter!
• Sign up here and get our newsletter delivered directly to your inbox
• Join the X mailing list
Even if you put such a sentence in a beautiful well-designed pop-up,
you need to remember that your users see a dozen similar pop-ups each
day, and they need to decide which one they should sign up for. Why
would such a sentence cause the user to give you their email address,
something they guard zealously? When have you recently signed up for
such a newsletter?
Examples
• Don't miss a post! Enter your email address to receive notifications of
new posts by email.
• Sign up for our newsletter and be the first to know about coupons and
special offers.
On the one hand, if the users are already on your site, they know what
it has to offer, right? And if you offer to keep them up-to-date via
the newsletter, they’ll know what will be updated, right? And they’ll
definitely want to never miss a thing, yes? Well actually no. That is
to say, they basically know what the site deals with, they generally
want to stay updated, and they more or less know about what they will
be updated, but that isn’t enough.
Users see these update invitations, like the first boring category,
all the time. The invitation could appear on practically any site, and
it leaves the users guessing how they’ll benefit from signing up for
that specific newsletter.
But our users don’t have the spare time, patience, or overview of your
business to understand by themselves what you offer in the newsletter
and how they benefit from it. You need to explicitly tell them.
If you have created a voice and tone design, you already know what the
users want to happen to them as a result of using your product or service.
Use this knowledge to phrase your invitation.
Invite users to sign up for the newsletter only after they more
or less understand what you have to offer them. For example,
after spending a minute browsing the site, after they have
read about half a post, perhaps only after they access another
post, or scrolled all the way down to the footer. The point is
that you should have some sort of an indication that the users
understand what the site is all about.
Yes, that’s something I really want to know. I’d be happy to receive this
in my inbox.
a. Promise them that the frequency of your newsletter is low, and you can
even mention how often.
b. Promise that the email addresses are well guarded and that their privacy
is important to you.
Finally, don’t forget the button, the success message and the
error messages
Signing up for a newsletter is like any other digital process. You need
to provide text for the button so that it motivates the user to click
it (see Chapter 11), and an excellent success message that will leave
your users curious and expectant to receive their first newsletter (see
Chapter 8). It is also worthwhile to invest a bit in writing a gracious
error message, in case the user made a mistake when entering the email
address (see Chapter 7).
www.walmart.com
www.goodui.org
www.bakadesuyo.com
www.yfsmagazine.com
The North Face uses much less words, and speaks the language of extreme
sports lovers.
www.thenorthface.com
1. The title, which offers a precise, super attractive value - we’ll help
you create the life and business you’ll love.
2. The value is shown, not the act of signing up -The invitation uses words
and values that the users are looking for. Forleo doesn’t hide behind
long explanations on how you’ll get there, but rather focuses on the
ultimate goals, to fulfil your dreams, increase your profits, become
happier and wiser, and to love yourself more. Note that the invitation
hardly mentions Forleo and her business, but instead focuses entirely
on the users.
www.marieforleo.com
By the way, have you noticed that 5 out of 6 examples shown here don't mention
the word newsletter, but it’s still perfectly clear that’s what it’s all about?
This is because users might be intimidated by this word, and you can just
leave it out - as long as you make it clear in other ways.
Example
This is how Sugru, the magic glue
shop, puts it in their footer (and
adds some design awesomeness).
www.sugru.com
CONTACT US
That’s why it always surprises me when I see the contact form presented as
if someone was forced to put it up. They can be well designed, but there is
nothing that even hints that whoever provided the page actually wants you
to contact them, that they really want to help, or that there is actually
someone who reads what was written. For example:
Mute forms like these are like the customer service rep who instead of
brightly welcoming you with “How may I help you?” stands in front of you
with a vacant expression and simply waits. A bit strange, don’t you think?
By the way, sentences like “We’d be happy to hear from you and answer any
question you might have”, “Your input is important to us!” “Our company
Contact us | 97
invests heavily in the satisfaction of its customers”, or “Dear customer,
please fill in your details and we’ll get back to you during the next
working day”, are so banal and lack credibility, that it is as if you didn’t
write anything. Also, avoid one of the many versions of “In the continuing
effort to improve our service, we’d love to hear any question you might
have”. Improving your service is not what I’m here for, I need you to
solve my very specific problem now, and if possible, receive personal
attention, that will help me a lot.
Now is not the time to take your foot off the gas, on the contrary, you
need to strengthen the user’s feeling that contacting you is an excellent
choice, and exactly the right thing to do.
98 | Contact us
Examples
Netcraft, a UX agency, considers its Contact page exactly as if it were a
sales page, and gives users, potential customers, five good reasons to make
contact. Reasons 1+2 create trust, reason 3 promises value, and reasons
4+5 are to inject some fun, an inseparable part of their brand. Wonderful!
www.netcraft.co.il
Epipheo, a company that produces videos for their clients, used to have on
their Contact page a superb invitation that explains exactly what I mean
when I say that you should continue selling right to the end. It creates
trust, is authentic and full of character, and most important, it reminds
users that Epipheo can help them achieve their business goals. The excellent
wording summarizes for the users, just before they make contact, why in
fact they should be contacting Epipheo. And still, I think that such a long
paragraph might scare users away, and it's better to keep it 2-3 lines short.
Contact us | 99
2. A Contact page designed for support
If your service or product does not entail the need to contact you, then
the Contact page is usually used for support, inquiries, and questions.
And if good service is one of your values, you surely understand that the
moment a customer needs support or an answer is exactly the time to be at
your most service-oriented, and show them that you are there for them, that
you’ll be happy to help them, and that the faith they have placed in you is
justified. That’s what your Contact page should do. How can you achieve this?
3. This might sound strange, but even the contact form includes obstacles
that need to be removed. Users fear that their request is one out of
a million, that you won’t read it, or by the time they do receive an
answer they’ll have forgotten why they contacted you. Promise them
that you read all the support inquiries and mention how long it takes
you to reply.
100 | Contact us
Examples
Ikea provides a range of possible reasons to contact them. They emphasize
that they’ll solve the problem quickly and easily, and enable you to get back
to relaxing on your new sofa, the reason you came to Ikea in the first place.
www.ikea.com
Marie Forleo, the successful life coach, warmly invites you to contact
her, whether with questions or compliments, and she writes in the voice
and tone that fits her personality and brand. Even more importantly, she
understands that users are not sure where their inquiries are sent when
talking about a virtual company, who reads them, and how long it takes
to receive a reply, if at all. Forleo addresses all these concerns and
promises that all inquiries are read and that they endeavor to answer
them within 48 business hours.
www.marieforleo.com
Contact us | 101
Oh Happy Day is a cool party shop that does include a small smile on its
Contact page (but you need to be careful about this, see tip 13). They also
promise to reply within two business days max.
www.shop.ohhappyday.com
But it is better to be more specific than “If you have any questions” or
“Need to return something?” Connect the sentence to the subject matter of
the site. For example:
• Do you have any questions about our colored confetti?
• Does the color of the balloons not match the napkins and you need to
return them?
• Do you want to share with us other cool accessories that we haven’t
thought about?
If you have several different groups of customers, and want to say something
slightly different to each group, you can provide a separate link for each
one that leads them to the relevant form, like they do in JetBlue.
www.jetblue.com
102 | Contact us
NPR, the US public multimedia news organization and radio program
producer, also uses this system, and clicking a button displays a form
relevant to that subject.
www.npr.org
FAQs or online help is a service that many users will be happy to get
instead of waiting for an answer from you. Having said that, users might
feel that you’re trying to shake them off and stop them from contacting you.
To avoid that, when referring users to online help, stress that you’d love
to hear from them, and that FAQs are really the fastest way to help them.
InVision provides tools to design, review and test products. First they
promise they will always be there for you, and only then suggest you try
the help center for technical issues. In any case, the contact form is
available right below this message and you can choose it easily.
www.invisionapp.com
Contact us | 103
Typeform uses a typeform on their Contact page :) When users state
they need help with a form, they are first referred to the help center,
but Typform makes sure you know their support team are also always
available.
www.typeform.com
104 | Contact us
TIP Categorizing inquiries by topic
or urgency
For example:
• Ordered products > My orders
• Billing issue > Question about payment
• System error > Problem with the site
• General > Something else
www.menwithpens.ca
www.buffer.com
Contact us | 105
CHAPTER 7
ERROR MESSAGES
An error message temporarily stops the process the users are trying
to complete. As far as they are concerned, the message delays them and
requires them to understand what went wrong and how they should continue.
Since their motivation is already fragile, error messages could be the
last straw, leading them to abandon the process, especially if messages
are unclear, intimidating or make them feel bad.
1. Explain simply and clearly that there is a problem and what that
problem is.
2. Provide a solution so that users can return and complete the process
immediately.
Except when: In the standard error messages associated with the sign up
form or login (such as an incorrect password or an existing username), you
can sometimes leave out one of these two (description of the problem or
its solution), because the situation is so well known to users that both
the problem and the solution are obvious.
One great way to do that is to say what’s possible instead of what’s not.
OurHome app
The first takes the negative path (what is not possible), while the second
(by Hipmunk) takes the positive path (what is the maximum) and adds a
wink. The difference in the experience is enormous.
By the way, the wink is great when it fits the brand’s voice, but it isn’t
necessary. If your voice is more conservative, it can still deliver a less
negative experience by saying what is possible, instead of what’s not:
Reservations can be maximum 30 nights long.
Look how many nice and helpful ways there are to say: Your username or
password are incorrect
Pinterest says:
www.pinterest.com
Mailchimp says:
www.mailchimp.com
Tesco says:
www.tesco.com
www.vimeo.com
www.bbc.com
Even for this very specific error, Google has a special and humorous
message.
www.google.com
Facebook. If you open two accounts on the same browser, you receive a very
human error message, followed by two solutions to the problem.
www.facebook.com
www.asos.com
Fitbit. Even if the user can’t do anything to fix the problem, for example
a communication failure, it’s important to tell them it’s out of their
hands, so they don't try and fix it, resulting in even greater frustration.
Fitbit describes the situation well, both in words and with a lovely
graphic. After apologizing and explaining what the problem is, they
suggest a few ideas on how to pass the time, and lighten the mood after an
annoying experience. This is a good example of a graphic and microcopy
that support each other well and fit the message.
www.fitbit.com
www.picmonkey.com
SUCCESS
MESSAGES
Success messages that users see after they have performed an action are
one of the most important responses that they expect to receive.
Following are some examples of actions that conclude with a success message:
1. Provide certainty. The message confirms to the user that the action
completed successfully and that everything is okay.
2. Instruct. The message tells the user about the next optional or
mandatory step.
3. Connect. The message is the final piece of the process, and it can be
moving, funny or even exhilarating. It can add extra meaning to the
action and leave users with a good positive feeling about your brand and
the pleasant experience they had with it.
1. Talk about or to the user, not about the action they just completed.
Refer to the person who completed the process, and not the process
itself. For example, when uploading photos to your profile on the
dating site OkCupid, you don’t see Photo uploaded successfully, but a
different message for each photo you upload, and all of them are fun
and make you feel good.
www.okcupid.com
Following is the tiny success message you get from The Outline,
the kicking publication, after signing up for their newsletter.
This acronym (that stands for talk to you soon) serves two purposes:
confirming the subscription, and building expectation as to what
exactly you’re going to talk about. By the way, if you're going for a
global audience, try to avoid acronyms - they're guaranteed to send
some confused users to Google in search of clarification.
www.theoutline.com
How? Briefly remind users of the value they received from taking the
action, how it effects them and is important to them.
If they bought a leisure product, be excited with them and make them
feel good about it.
If they contacted you via the contact page, make them feel that their
faith in you is justified and that you’re on the case.
And so on.
www.wordpress.com
The message is funny, but also says that they kept their promise for
a simple, intuitive platform, and that getting their product was an
excellent choice that made your life much easier.
4. Present and promote the next step for you and your users. For example:
• What’s going to happen now (how long will it take to answer their mail,
when you expect to send the purchase, when will the subscription start,
if the registration process needs activation, and so on).
• Refer them to their inbox if you are going to send them an email (to
verify the address or to see an order summary).
• Further actions that you want users to perform (a link to the page
where users start using the product, invitation to download your app,
invitation to share or follow you on social media).
• If you don’t have another step, send them back to the site to
something that really interests and is important to you, such as
promotions or blog.
I recommend reading Talia Wolf's post "Use these 7 hacks on your thank
you pages to boost retention".
1. Talks to the users about themselves and her relationship with them,
not about the action.
2. Gives certainty that the sign up was successful, but without using
this technical term.
4. Refers users to their inbox to read the first email, using a great call
to action that sounds very honest.
www.marieforleo.com
www.epipheo.com
www.wix.com
Rounds app
www.envato.com
EMPTY STATES
But first, let’s go back to the definition. Empty states are those states
where there is nothing to show users. They can appear when the user first
encounters a digital product or a feature in it, and they can also appear
as a result of use, such as running a search that returns no results.
When you leave the empty state empty, you are basically telling your users
what there isn’t. You are missing out on the opportunity to tell them what
there is. For example, what could have been here, what they could gain from
it, and what they can do to get things moving. A feature that hasn’t yet been
used is an opportunity to present its benefits and encourage them to use
it. An empty cart is an opportunity to encourage a sale. A search that ended
without results provides the opportunity to show you care, by offering
other options and preventing the users from leaving empty handed. This
isn’t only a chance to offer good service, but also to direct the users
towards the next step and get them back in business.
Imagine users browsing through your site after registering (or app after
downloading), and all they see is:
• There are no items in your basket (or cart, or even bag)
• Your wish list is empty
• No previous actions were found
• You haven’t saved any favorites
• No messages
• You don’t have any friends in your network, and so on.
Often these empty state messages appear on a totally blank page - inches
and inches of emptiness.
What a waste! After a short tour of such a static and ineffective product,
users will feel that you don’t have much to offer and that this site won’t
exactly change their lives.
When users open a page or feature that they haven’t used before, you have
an opportunity to show them the feature’s potential and motivate them to
start using it.
If relevant, add instructions. Tell users exactly how to start using the
feature (if possible, its best to add a visual), or provide a link.
www.facebook.com
OkCupid’s inbox is one of the dating site’s most important pages. If it’s
still empty, they encourage users to go ahead and explore the site. Cute
illustrations that reflect the specific situation are a great way to improve
the experience, and I would add a shortcut button to browse matches.
www.okcupid.com
www.tumblr.com
On Amazon photos, if you haven’t created any albums yet, they don’t just say
No Albums, but rather tell you how albums can help you (organize and share
your photos) and provide a shortcut button with a call to action, so you can
go ahead and create your first one.
www.amazon.com
www.todoist.com
www.monday.com
www.canva.com
An empty cart is a terrible waste of real estate. I’ve seen quite a few like
this one:
So how can you use this empty area? To motivate users to shop of course:
1. Make it clear that the cart is empty, that it doesn’t have any items
in it.
For example, on the site of a very famous chocolate shop, they write “Your
shopping bag is empty”, and the rest of the page remains blank. Instead of
this vacant lot, they could have started a sales pitch, and from there direct
the curious users to the shop, while they have the urge to buy. For example:
Or:
In another online shop, selling health and beauty products, they didn’t
even write that the bag was empty. The only thing users saw when they
opened the bag for the first time was a space so empty that its cleanliness
dazzled them. What could they have written? For example:
And under each title add photos of the products and a link to buy them.
Many sites have a Previous Orders page, where you can browse the list
of your past purchases, and sometimes even reorder one of them. Before
purchasing the first item, users will of course see an empty state, but
if you only write “There are no previous orders” you miss out on a sales
opportunity, just as with the empty cart. Both the users' experience and
their willingness to buy something will be dramatically enhanced if you
write something substantial like:
Busted Tees makes it clear that the shopping cart is empty, and refers
users to the three most interesting pages in the shop.
www.bustedtees.com
American Eagle believes the new collections will peak users’ curiosity.
www.ae.com
www.bookdepository.com
Society6, the art shop, has a different phrase for each empty state.
This is the tooltip shown when the user hovers over the empty cart icon:
www.society6.com
1. Explain the situation. Tell your users clearly that you didn’t find
what they were looking for. You might want to use empathy or even humor
in the message.
a. Other ways to search for the same thing. Select the method that is most
relevant to your type of content:
• Search by category
• Search for a more general term
• Search for a more specific term
• Check your spelling
• Try to use synonyms
b. Things that are similar to what they searched for. Suggest items or
links that are as close as possible:
www.zappos.com
www.gmail.com
www.kickstarter.com
When Ebay doesn’t find something, they offer users to save the search so
they can get alerts about it in the future. What a great idea.
www.ebay.com
PLACEHOLDERS
Since smartphones took over our lives and introduced the need to use space
sparingly, the practice of writing the field labels inside the fields as
placeholders became popular. For example:
This practice made its way to the desktop, even when there is no real space
restriction. In fact, it has become so pervasive that sometimes designers
are incapable of leaving the fields empty, and feel the need to fill them,
even if it creates a weird redundancy:
Placeholders | 139
And even if it means overcoming the redundancy in creative ways…
The label is the title or question that tells the users what information
they are supposed to enter in the field. That is its only function,
nothing else.
If you put the label inside the field, you present users with a challenge
to their short term memory. The label disappears when users start typing,
and there is no way for them to go back and remember what they were
supposed to provide here. The most important piece of information just
isn’t there anymore. Granted that when talking about email and password
fields the problem is less severe, because users know what is expected of
them, but it hasn’t completely disappeared. For example, two fields were
displayed in a login form. Force of habit made me type my email address
in the first box, but then…
Wait a minute, what was I supposed to provide in the first field? I had no
idea and needed to delete the email address so that I could find out.
One way of solving this problem is that as soon as the user places the
cursor in the field, the placeholder doesn’t disappear but moves above or
outside the field.
140 | Placeholders
Look what happens at eBay before placing the cursor in the field:
And after:
www.ebay.com
Another option, which is always best (unless you have an extreme shortage
of space), is to leave the labels as labels, outside the field, permanently
displayed and in a contrasting color (also good for accessibility! See
Chapter 18). The rule is simple: making it obvious, eye catching, easy to
understand and unchallenging will make it easier for all users. And if
you have a problem of space, you can always place the labels above the
fields not next to them.
Please go ahead and read the article "Placeholders in form fields are
harmful" by Katie Sherwin (Nielsen Norman Group).
Placeholders | 141
When you add both labels and placeholders to every field, you are actually
doubling the amount of text on the form, and it looks busy, crowded and
difficult to fill. For example, the following form is simple enough,
but the placeholders make it look crowded, especially as they don’t add
anything to what the labels provide, and thus don’t serve any purpose.
Note that the empty fields really catch the eye and make you want to type
something in them. If you want users to express themselves, give them the
space to do it.
142 | Placeholders
In the article by Katie Sherwin I mentioned earlier, she writes:
"Eyetracking studies show that users’ eyes are drawn to empty fields.
At the minimum, users will spend more time locating a non-empty field.
At the worst, they will overlook the field completely - a potential
business-killing disaster".
In conclusion, don’t add placeholders just to fill up the space. Only add
them when there is a good reason and they help you accomplish a specific
goal. When you know what that goal is, you will be able to choose the
placeholder that best suites it. In the following pages, I provide
examples of the various types of placeholders and how to use them.
Placeholders | 143
When you should use placeholders
If you shouldn’t put labels as placeholders, and you shouldn’t use
placeholders as guidelines that the users need to remember, when should
you use placeholders?
1. Fields that you especially want your users to complete. For example,
if you have a search box on your homepage that encourages users to
explore the site. You usually find this at the top of the homepage,
in its place of honor, with motivational text next to it, and a search
button after it (you’ll see examples soon). Another very important
field is the one that serves the main goal of the product. For example,
the status field in Facebook or the profile fields on a dating site
(without statuses or full profiles there isn’t anything users can
do on these sites). In these important fields, putting a placeholder
motivates users to action and moves things along.
2. Fields that users might not understand, avoid or shy away from. For
example, questions that can be answered in a number of ways, open
questions that require consideration and time, questions where it
is difficult to pin down the answer, questions requiring sensitive
information, or questions where users might have other aversions
to answering them (examples coming right up). In such fields it pays
off to use placeholders that help users overcome the obstacles, and
pave the way to filling in the fields with peace of mind.
144 | Placeholders
Six types of placeholders and how to
use them
Type #1: Questions
An interesting personal question in an especially important field, will
awaken in your users the need to answer, drive up the traffic and increase
user actions on your product. Ask a direct question (preferably in the
second-person: you) that interests them, that they want to answer, and
that has a simple and short answer.
Examples
Airbnb used to ask where you want to travel to. Show me the person who
doesn’t have the answer to this question… Moreover, the question makes
me want to take a quick peek and check what is available at my dream
destination. I expect that this is exactly what Airbnb wanted to happen.
www.booking.com
Placeholders | 145
Fiverr asks in the field “What service are you looking for?” The text
that precedes the field, together with the placeholder, make for a very
practical call to action, a kind of a promise that everything can be done
right here, just say what you need. The question also informs users what
type of search terms will get the best results on this platform - services.
By the way, they could also achieve that by using examples (I’ll discuss
that later in the chapter).
www.fiverr.com
www.udemy.com
146 | Placeholders
WeTransfer does the same thing with a question as a placeholder in its
support area.
www.wetransfer.com
Twitter asks “What’s happening?”. The question that you decide to put as a
placeholder on your site, dictates the style of the answer you’ll receive.
So it’s no wonder that Twitter became the preferred social media users
check to get up-to-date reports from the field.
www.twitter.com
Facebook asks me what I’m thinking about. They don’t steer my thoughts
towards something that’s happening outside, but towards something that
is happening in my own head. And endless passing thoughts are exactly
what you’ll find there.
www.facebook.com
Placeholders | 147
Type #2: Categories
Defining categories helps reduce the choice range, enabling users to
focus on the possibilities, and guiding them on the best way to use the
field. As with question placeholders, categories also encourage users to
enter something that personally interests them.
Examples
SoundCloud, the audio platform, details what you can find here in four
categories.
www.soundcloud.com
Hipmunk, the vacation planner, explains what you can search for in order
to find a hotel.
www.hipmunk.com
SimplyHired, the job board, offers three categories for finding a job, and
three for choosing its location.
www.simplyhired.com
Pixabay is a platform for sharing free stock photos. The placeholder suggests
the best search categories, and below the field there are a few examples to
make things even clearer. We’ll talk about using examples on the next page.
www.pixabay.com
148 | Placeholders
Type #3: Examples
Sometimes an example (or even two or three, but no more) will show your
users the best way of using the field.
Examples
Tailor Brands is a logo generator. The users are invited to describe their
business, and the example, given as a placeholder, provides the type of
required information: size, industry, location and target audience.
www.tailorbrands.com
On the payment request form, PayPal’s example reminds you that a business
note can also be personal.
www.paypal.com
www.udemy.com
Placeholders | 149
Canva, the design platform, gives examples of design templates, which
change every time you enter the site:
www.canva.com
150 | Placeholders
Type #4: Guiding sentence
Open questions require users to think. But if there is something users
don’t like doing, it is needing to think in the middle of a task. All they
want to do is fill out the form and carry on.
So, when you use open questions, the purpose of the placeholder is to give
the users a lead and focus them on what’s important, thus making it easier
for them and encouraging them to answer.
Examples
On the RealMatch job boards, applicants can attach a cover letter to
the resume. Writing a cover letter demands a lot of thought, and many
candidates decide to skip this step, even though it can significantly
increase their chance of receiving an answer from prospective employers.
To help them start, the placeholder makes clear the purpose of the cover
letter and provides the main topics the users can write about.
www.airbnb.com
Placeholders | 151
Type #5: Remove obstacles
If you know that users have an issue that prevents them from answering
your question, the placeholder can appeal directly to this obstacle and
try to remove it.
Example
When filling out the profile on the OkCupid dating site, there are a number
of open questions that are challenging to answer. Each question appears
above the field, one of which asks:
www.okcupid.com
Users need to enter here an area of interest that they think about a
lot. But they might worry that most things they think about are not very
interesting to potential partners (too trivial, too heavy, a bit strange,
not important enough or too important…). This apprehension might cause
them not to answer honestly, or even not to answer at all.
The placeholder removes the obstacle by combining examples that are very
important (global warming), not important (lunch) or very common (next
vacation). And at the end they also add a calming phrase - exactly what
the users need to hear so that they can let go and give an honest answer.
152 | Placeholders
Type #6: It’s also possible just to have some fun
Sometimes placeholders are simply designed to amuse users. That’s
excellent, but remember that with forms the purpose is to let users
complete them as fast as possible. So usually, that won’t be the place to
joke with them, unless it’s an integral part of your voice and tone, and
fits the atmosphere of the product. Or it might just be a fun form where
no one is in a hurry.
Examples
On the Trello sign up form the placeholders are meant to make users smile.
Each time, a different fictional character from a TV series, film, book or
video game, appears in the field.
www.trello.com
www.typeform.com
Placeholders | 153
CHAPTER 11
BUTTONS
Another problem with these generic words is that they usually emphasize
what users have to do, the hard work.
So what do you write instead? Michael Aagaard tested buttons for four
years and came up with the following formula:
Buttons | 155
In the article “How to Write a Call-to-Action that Converts”, Aagaard writes
that instead of writing on the button what the user does (the action), we
need to explicitly write what the user gets (the value). For example, when
he changed the copy on a button from Order information to Get information,
conversions went up by nearly 40%!
The reason for this is that the "order" button emphasizes what users have
to do, not what they’re going to get. It doesn’t give them enough value to
want to click the button.
When the button focuses on the action and not the value, we are leaving it
up to the users to draw conclusions, and there’s no way of knowing where
their train of thought might take them. However, if you write the value
on the button, you are offering the exact bottom line they’re looking for,
and that’s a much bigger motivator.
Heads up: not every button on your product needs to provide significant value.
When I talk about value I mean only those buttons that generate conversions
or an action that’s important for you, such as signing up, generating leads
or downloading. And if the most important action on your product is, for
example, search, comment, or watching a sales video - then those are the
buttons you should invest in.
156 | Buttons
Example
Three different digital invoicing systems offer a 30-day free trial.
Their buttons are slightly different from one another:
In the first system (row 1), both buttons refer to the action that users need
to take, and neither of them provides the value that makes it worthwhile
to click the button (unless one of your hobbies is creating accounts all
over the Internet). There’s also no relevancy, both buttons are completely
generic, and you could put them exactly as they appear here on any other
digital product - and they’ll fit in just fine.
In systems 2 and 3 (rows 2 and 3), the buttons on the homepage (left column)
do indeed talk about the action users need to take, but immediately remind
them of the value: a 30-day free trial. However, as these buttons appear on
the homepage, maybe it would have been better to write only the value: Get
a 30-day free trial, and not even mention the sign up process, which might
sound complicated and deter users from clicking the button.
If we wrote on the homepage button the benefit of a 30-day free trial, what
should the button at the end of the form say (right column)? The final value,
creating invoices. In system 3 (row 3, right column), they indeed provided
a similar value, Start using the system, but the relevancy is only partial
here, as this button could actually fit into any system, and it still hints
at the hard work users have to do and not what they get as a result of that
work. A more relevant phrasing is: Start creating digital invoices.
Buttons | 157
More examples
unbounce specializes in building landing pages optimized for
conversion.They have buttons with loads of values. They seem long and
as a writer you might feel that you want to get rid of quite a lot of
words, but to the users they deliver important information, and no one
said that buttons need to be short.
www.unbounce.com
The checkout button should also be clear (at most it can be Secured
checkout or Checkout securely, as we'll see on Chapter 16), so that
only users who really want to proceed to payment will click on it.
This is also true for that final button: Confirm payment, Place order,
or Submit purchase.
158 | Buttons
And a few more in conclusion
Sign up
www.carbonmade.com
Sign up
www.goodui.com
Sign up
www.themiddlefingerproject.com
Search
www.indeed.com
Search
Loco app
Start
www.myperfectresume.com
Start
www.ziprecruiter.com
Register
www.leadpages.net
Register
www.themiddlefingerproject.com
Buttons | 159
TIP Remind me why I wanted to sign up
The Sign up button at the end of the sign up form can be much
Cancel Undo
www.eventbrite.com
160 | Buttons
Click Triggers - the last minute message that
tips the scale
Joanna Wiebe shows in Buttons and Click-Boosting Calls to Action how
short messages written next to the button can significantly increase
conversions just like the main microcopy on the button. She calls these
short sentences click triggers.
The goal of click triggers is to tell users exactly those words required
to tip the scale at the split second it takes for the decision to be
taken. They are supposed to get users to respond immediately and turn
intention into action.
Next to (or beneath or above) every button important for you, it’s
worthwhile writing at least one click trigger, whether it’s signing up
for a newsletter, signing up for the product, watching a demo video or
purchasing something.
Just like the microcopy on the button, click triggers can also remind
users about the value they’ll get if they click. But they can also work in
another very interesting way: remove concerns that accompany clicking
and pave the way to make it happen.
You should carefully choose the click trigger based on the objectives
of your users on the product and according to the things that deter
them most. Even if you have already addressed these issues in other
places on the product, a short reminder next to the button can create
the desired response (learn more about alleviating concerns on
Chapter 16).
If necessary you can even write 2-3 click triggers, but don’t overdo it:
carefully select those that are the most influential, and as usual, run
A/B testing.
Buttons | 161
Examples
Intercom’s click triggers are great. The three of them together form an
image of an easy to use product that you can only benefit from trying.
Didn’t like it? You can cancel without losing time or money.
www.intercom.com
www.booking.com
Similarly, when pondering whether to book a home on Airbnb, there are two
click triggers beneath the button: the first alleviates a concern, and the
second does the opposite.
www.airbnb.com
162 | Buttons
Showpo does the same with fashion items - you snooze, you lose:
www.showpo.com
www.society6.com
High ratings are a common social proof, and you can use them as click
triggers too. This is how it’s done on Download.
www.download.com
www.invisionapp.com
Buttons | 163
CHAPTER 12
404 ERROR:
PAGE NOT FOUND
Users encounter a 404 page when searching for one that no longer exists
on your site (or that was never there in the first place). This might happen
if you leave a link somewhere on your site or the Internet to a page that
no longer exists, or its address has changed; and it can also occur because
users typed a wrong URL.
Ideally, your users are not supposed to see 404s, or at least only see
them rarely. However, it is still an important page. If the users got here
from the Google search results page or from another site that referred to
you, and found only this:
they will immediately hit “back”, and you lost them. The chances they’ll
explore other pages on your site are zero. They have no idea how to continue
from here, and they have no good reason to try. Moreover, as Gleeson said,
the 404 page tells users a lot about your brand. For example, how you deal
with your own mistakes, how you deal with user errors, and how you treat
users when they encounter a problem or are disappointed.
The standard message as above shows that the writers of the page did not
understand either the users or the problem (if someone even gave it some
attention). Technically, such a message does not help users understand
what went wrong, nor help them get to where they want to go. It’s a dead
end. Even emotionally, it doesn’t show any empathy for the disappointment
felt by users because they couldn’t find what they were looking for.
2. Show empathy.
Because users are disappointed that they didn’t find what they were
looking for, and sometimes it’s our fault, it’s worthwhile to show empathy,
that is add a word or sentence that demonstrates to the users that you
can relate to the way they are feeling right now. You can apologize and
you can reflect their feelings (many examples coming up soon).
3. Point to the way out. It’s worthwhile to put one or more of the following:
• Links to central areas of the site, to categories that lots of people
search for, or pages that you want to direct users to.
• A search field
• A link to the homepage
• If the main menu appears on the 404 page, turn the users’ attention to
it either with words or a visual sign, and don’t count on them seeing
and understanding that it’s their way out.
4. A 404 page can, but doesn’t have to, include one of the following:
• A great design
• Humor that will turn the negative experience into a positive one
(but be careful not to laugh at users when they are confused).
• Provide a way they can report the broken link, something along the
lines of: “If you got here from another site, we’d appreciate it if
you told us from where so that we can fix it and save others from
ending up here". Then add a link to the Contact page or a special
support form dedicated to this purpose.
• List the contact details of customer service and support.
But let’s be honest, we are the people who enjoy it most, our users only
rarely get to see the page, and then they don’t stay around but move forward
towards whatever they were looking for in the first place.
It’s important that the page creates engagement and a desire to continue
from there to the rest of the site. But it’s even more important that the
page provides full details and the required service. There's no need to
go overborad: a simple design or funny picture, clear text with a touch of
humor, and three links to central areas on the site, will do a great job.
Mind you - Successful 404 pages have provided their owners with a great
marketing service, because users shared them. Romain Brasier is one
example, as is the Nosh video that went viral (look for "Nosh 404" on
YouTube). So if the purpose of your 404 is sales, go for it and invest!
www.android.com
On this simple but beautiful 404 page by Spotify, they name a record
(that’s actually spinning on the right) with a title that reflects
disappointment. They also explain what happened in everyday words, and
offer links to FAQ, community and back. The link GO BACK takes users to
the homepage, so it would have been better to say exactly that, since they
might have arrived here from somewhere else.
www.spotify.com
www.rspca.org.uk
Examples
Every time we see a 404 on the IMDB database of cinema and television, it
provides a different movie “quote” - there are about 15 of these.
www.imdb.com
TripAdvisor tells us that the page we are looking for has gone on vacation,
and so should we.
www.tripadvisor.com
I find that creative and efficient, and it shows users that these are pros
they're dealing with, and how this service can benefit them too. Below,
Leadpages present links to three main areas on their website.
www.leadpages.net
NASA thinks astrophysics and sends users beyond the event horizon.
www.nasa.gov
www.ft.com
NPR, the news and radio network that stands for brave and responsible
journalism, presents on its 404 page news stories about people and items
that were lost and never found, exactly like the page you were looking
for. Go visit the site and look at the gripping list.
www.npr.org
WAITING TIME
Another reason is that you have a few moments where the user is simply
staring at the screen and waiting. Why not use this time to impart
something wise, heartwarming or branded? With minimum investment you
can prepare another surprise for your users that shows you thought about
them and that they are important to you. These small things make all the
difference!
It’s important to make clear that you can use only graphics, without
a single word, during this waiting time. So if you are able to invest
in a fun animation - that’s great. But words need much less design and
development, thus providing a quicker and cheaper solution that works
just as well.
So what text can you display during waiting times to make it appear to go
a bit faster, and change it from a waste of time into time to engage with
your users? Choose one or more of the following.
www.invisionapp.com
WIX, the websites building platform, wants its users to be in a good mood
while they work.
www.wix.com
8tracks app
www.shopify.com
Tailor Brands give their users a real sense that a lot of thought was
invested in their logo and products design. I assume they want to
emphasize that even though the process is automatic, it is well thought,
so that the result looks like it was designed by a real designer.
www.tailorbrands.com
www.okcupid.com
Videostream app
www.ads.google.com
www.twittercounter.com
On the app HouseParty, waiting for your friends to join the video chat is
a part of the experience and may take a while. In the meantime, the app
provides you with dozens of remarks, things to think about and fun facts.
When your friends join you, you're sure to have something to talk about.
HouseParty app
PART 3:
USABILITY
How to prevent and smooth out frictions
Our users need very little reason to abandon the process. It’s enough that
they hit a single field that is not entirely clear on how to fill it, a task
that looks too much like hard work, the smallest concern regarding their
privacy, or a question for which they found no answer. There are users
that give up at the first bump in the road or the first sign of any friction.
In the previous part of the book, we spoke mainly about the microcopy that
is shown before or after a user's action. In part 3 we’ll talk about the
microcopy that accompanies their actions so as to guide them and make the
task simpler and quicker. The goal is to enable users to successfully and
quickly complete the task - both for them and for us.
Chapters in Part 3:
14. Microcopy and usability: basic principles
MICROCOPY AND
USABILITY:
BASIC PRINCIPLES
IN THIS Be succinct
Therefore, the focus moves from the emotional experience you created for
your users, to enhancing clarity and practicality. Here good service is
not measured by how pleasant it is (and it must, of course, stay pleasant),
but by how much you helped your users complete the task with minimum
effort (or thinking, as Steve Krug put it) on their part.
It doesn’t mean that you go back to writing like a lawyer in an aloof and
condescending manner, most certainly not. It does mean that you write
microcopy only when it’s needed and in as few words as possible. It also
means that as long as your users are trying to complete the task, and as
long as you want them to progress from control to control until they hit
the Submit button, don’t be too clever or complicate things.
Most of the explanations are totally unnecessary, and those that are
required should be much shorter. It’s true that you need to write in a
personable way, but in such practical forms, it’s important to provide
the information in the most intelligible and clear way, avoiding long
sentences.
In a great talk by Sara Walsh she shows how they doubled the number of
words in a form on Capital One's website, giving up white spaces and
adding assistive copy around the fields, which resulted in tripling the
form completion rate from 26% to 92% (watch “Don’t forget your online
forms” on YouTube).
If you identify a place on your form where users might go astray, make a
mistake or feel unsecure - don’t hesitate to write down the answer to the
question nagging them, or the reassuring words they need at this point.
Never skip on giving important explanations, in order not to overburden
the users. On the contrary, they’ll be happy to get your support at those
friction points and be able to easily find what they are looking for,
without contacting support or giving up on doing what they came for.
1. Static
The assistive microcopy is permanently shown on screen, without
appearing, moving or vanishing. It’s just always present, accessible and
out there all along, in front or beside the control.
Best for: When the instruction is critical for the users to understand
how to take action, and you would like to make sure they don’t miss it.
www.munchery.com
2. Shows up on demand
Microcopy that appears (usually as a tooltip) when the user clicks an icon
(?,!,i) or hover on top of it or click a link.
Best for:
a. When there’s a lot of information or instructions to present that
might create a visual overload.
b. Giving the user background information about the action that might
direct them or show the value of taking the action.
This tooltip appears when hovering over the ‘?’ icon in Booking.com,
a website that is very rich with information and instructions. The
tooltip’s aim is to explain why they ask for such private information
(see also Chapter 16).
www.booking.com
www.facebook.com
3. Appears automatically
The microcopy automatically appears exactly when the users need it (i.e.
when the cursor is in the field, and the field is in focus), and stays visible
as long as they need it. Once users move on in the form - it disappears,
and a new guidance will replace it according to where the focus is.
Best for:
a. When there is a lot of information or instructions that might create a
visual overload and thus should better be hidden.
c. When you want to give users the feeling they are closely accompanied
throughout the process, for instance when making financial actions,
enrolling in an academic institution or making an expensive purchase.
www.wizzair.com
www.wix.com
www.zeplin.io
Best for:
a. Short instructions.
b. When there’s no risk the users might want to see the information again
once the placeholder disappears.
d. Giving the users a short example on how to correctly fill in the field.
See many examples and more ways to use placeholders on Chapter 10.
Of course, don’t use all 4 ways in one form; consistency is, as you know, a
virtue. Use each method appropriately to meet your users’ needs, to make
simple relaxing forms that are easy to use.
21 icon? Maybe it’s better to create a short link? It’s not clear
cut, but the answer lies within the minds of your users.
You can put the exclamation mark or i icon when you want to
provide information that doesn't necessarily answer a user’s
question, but rather adds background or other important
details.
But, as I said, it’s not clear cut. If you are debating which
is more appropriate, it’s probably borderline and whichever
you choose won’t affect things much. Most important is that
the microcopy is efficient, simple and really smooths out
friction.
In the book Web Form Design by Luke Wroblewski (Rosenfeld Media, 2008),
he provides a variety of ways to find weak spots in forms. Following are
the three most relevant to microcopy.
Usability tests
Watch the recordings (paying attention to the words users use) and write
down where users were delayed, hesitated or became stuck, and what was
it that they didn’t understand in each place. Sometimes, all it takes to
solve a delay is a few words of explanation.
For example, if you have a control that offers auto-complete and the user
has to select one of the values from the list, but you see in the tests that
users prefer to finish typing the full name and not to select from the
list, it’s a good idea to add a short instruction under the field and make
it clearer.
Of course it’s preferable to allow users to type in the full name if that’s
what they want, but when there’s no other choice, microcopy can help.
For example, if a lot of users turn to support during the payment process,
and request to complete the purchase on the phone, it might be that they are
afraid that the online payment is not secured enough. In such cases, it’s
worthwhile emphasizing in a variety of places and ways that the payment
is secured, and maybe even point out what kind of payment security you
offer and how good it really is (see examples in Chapter 16).
For example, if you discover that users skip the date of birth field,
or get errors because they didn’t fill it, it’s probable that they don’t
understand why you want this private information. It’s recommended that
you mark that field as mandatory and add a short explanation offering a
convincing reason (i.e. required by law, see examples in Chapter 16).
In the next few chapters I will list a few weak points you can find
in almost any form. For each item I’ll write about microcopy that can
fortify this weak point, enhance usability and increase completion
and conversion rates.
QUESTIONS ANSWERED
AND KNOWLEDGE
GAPS BRIDGED
CHAPTER
Remove the curse of knowledge
Practically all digital processes arouse some sense of uncertainty
within users. Someone else designed this process for them, and they are
completing it in the belief that it will benefit them, or at least won’t
cause any trouble. We, who designed the process, see the full picture, but
users only see a few steps ahead. So when they don’t understand a term and
can’t find an explanation for it, or they don’t understand how to use the
interface, this fundamental uncertainty increases, and they lose their
confidence in the process, and in us.
The difficulty for microcopy writers stems from what is known as the
Curse of Knowledge. This is the inability of a person who already has
some knowledge to see things from the point of view of someone who lacks
that knowledge. When you write microcopy you know everything about
the digital product that you are writing for, the subject matter, the
specific task, and also about interfaces in general. Things that seem to
you well known and obvious, might be new and incomprehensible to your
users. To identify those places where users might ask What’s that? or
What does that do? or How do I use that? you need to take a fresh look at
the process, and it is also well advised to use the resources discussed
in the previous chapter (usability tests, customer support reps and
analytical tools).
This chapter shows some common questions that users might ask. Even
before the usability tests, try to look at the process through the eyes of
completely new users, identify those places where questions may arise,
and write microcopy that answers them.
b. For every such term, check if you can replace it with simpler words.
Examples
Commonwealth Bank’s customers are not used to being asked to provide
their credit card pin code. This might lead to them not understanding the
banking term “Card PIN”. For that reason, a clear explanation is provided
right by the field. It would have been better to put a question mark icon,
because the explanation answers the question What’s that? (see tip 21).
www.commbank.com.au
When you name different features in your product, you actually create a
new in-product convention that users might not understand. They might
also fail to see what value it can give them. If you want users to use it -
explain what it means, and what is it good for. Monday, the team-project
management tool, does it with colorful tooltips.
www.monday.com
www.golantelecom.co.il
www.typeform.com
www.airbnb.com
www.airbnb.com
www.ebay.com
www.thenounproject.com
Anyway, the question mark icon doesn’t imply that there’s useful
information inside, and instead I would write a permanent link such as
What’s the difference, or How do I choose, or What are PNG and SVG. I also
think that the first two lines in the tooltip are redundant, since the UI
is self-explanatory.
Also, if you have a special interest in making users use the feature,
phrase your explanation as a call to action in an attractive, interesting
way rather than using a neutral-technical tone.
Examples
When YouTube launched the Autoplay feature, they used to have an i icon
right next to the switch, that when hovered over answered the question
What does that do? Because YouTube has a clear interest in us using this
feature to increase the number of views, it would have been better if
they worded the explanation more actively. For example, Turn this on to
automatically play the next suggested video.
What will happen if you click Save this seller? How will that help you?
eBay presents the answers in a tooltip. But will users know they can
hover to find more info, or would it be better to add a tiny help icon?
www.ebay.com
Toshle app
Notica, an app that processes and stores photos as visual notes, explains
to the user all the consequences of turning on or off the high resolution
feature. The explanation is a bit long, but the information is important
for users that invest time and effort in organizing their photos, and
enables them to make a decision most suitable to their individual needs.
Notica app
In WhatsApp, even though the feature has a simple and clear label, it
still needs the sentence underneath. This explains precisely what is
included in “incoming media” and where and when is it saved.
WhatsApp app
Example
When registering an HP laptop, you need to provide the product name or
number. The form provides a link saying: “How do I find my product name/
number?” It opens in a new window, there they have a video and many other
ways the user can find the number.
Note that they could use fewer words: the instruction "Enter the..." isn't
necessary because the field label and the placeholder are doing a great
job, and the link could be shorter too: "Where do I find it?"
register.hp.com
www.monday.com
And what is right for all other aspects of UX is absolutely correct here:
the best way to find out if you need or don’t need written help is by
performing usability tests.
Examples
OkCupid provides drop-downs,
without telling the user what to do,
simply because the drop-down is so
well known, and thus the interface
remains free of words and very
simple.
www.okcupid.com
(Though, as I said earlier, it's best to make the title more welcoming on
a site’s gateway).
Examples
A good example of a precise instruction, appearing exactly when it is
needed, is from Instagram:
Tapping the video to start or stop the sound is (still) not an intuitive
action, though it will be soon because Instagram has adopted it. But at
the time of writing these lines, it is actually the opposite of what our
intuition tells us, because we are used to YouTube, where clicking the
video stops it.
When they first introduced the feature, Instagram wrote the instruction
at the bottom of a video when it played:
www.typeform.com
www.wetransfer.com
ALLEVIATING
CONCERNS AND
SUSPICIONS
There is no reason why users, not yet acquainted with your company,
should place their trust in you. This trust needs to be earned. First and
foremost, you need to earn it by genuinely and practically and really
being on the side of the users in all your service interfaces. But you also
need to show them that you are worthy of their trust. Instead of ignoring
their legitimate concerns and suspicions, you need to explicitly tell
your users that you are aware of their concerns and respect them, and that
they are in good hands.
In this chapter I’ll demonstrate a few weak points that could arouse the
concern or suspicion of users, and how to overcome them.
a. That you’ll drown them in emails. That’s why you need to reassure them
about the low frequency of the newsletter. It's also worthwhile to remind
them they can unsubscribe with a single click any time they want to.
b. That you’ll pass their email address to others who’ll drown them in
spam. That’s why you need to promise them that their email address stays
with you and that the privacy of users is important to you.
Examples
See also the short and simple phrases on the sign up forms in chapter 5.
www.metromsp.com
www.sugru.com
Rounds app
a. If it’s a required field, explain why you need these details and
guarantee their privacy.
Examples
During payment, when the cursor is placed in the telephone number field,
Tesco displays a tooltip explaining why they ask for the number. They
also calm users and promise that it is the only use they will make of this
information. Simple and perfect.
www.tesco.com
Monday specifies that giving the phone number is optional, but tells
users how it’ll help them in the future (immediate support when needed),
and reassures them that it will never be used for spamming.
www.monday.com
When asking for a phone number they answer the common question - Why is
this required? They could have phrased it in a much shorter, nicer way
though, such as: Only for necessary delivery purposes, nothing else.
When asking for date of birth, Claire’s uses both tactics: they explain
why they must ask for this information, and tell users how they’ll benefit
from giving it.
www.claires.com
American Eagle explains what they need the phone number for, and promises
not to share it. They also prevent possible error by stating up front that
the number should match the one affiliated with the credit card.
www.ae.com
www.europcar.com
www.pinterest.com
Vimeo doesn’t ask for users’ gender but rather pronouns, and immediately
explain why they’re asking.
www.vimeo.com
These are from the fashion shop boohoo. Both fields are optional, so they
tell users what’s in it for them.
www.boohoo.com
Examples
See a few more examples in chapter 4. Note that in most cases there
is only a reference to the first concern, and that might prove to be a
mistake, because the second is also very important.
www.munchery.com
www.eharmony.com
Switch is a job seeking app using LinkedIn accounts for uploading resumes.
Switch app
Examples
Airbnb places the reassuring tooltip about security exactly where it’s
needed: right in the credit card number field.
www.airbnb.com
Europcar assumes that customers may prefer to pay when picking up the car
for security reasons, so they explicitly say:
www.europcar.com
www.macys.com
www.hm.com
This is Marks and Spencer's button in the cart. Exactly at the point when
users are debating whether to proceed and purchase the item, and if they
should click the button or not, they receive a response to their main
concern: Yes, the checkout is secured!
www.marksandspencer.com
And this is the fashion shop Roxy’s button in the shopping cart:
www.roxy.com
25 shipment. Who pays for it? How much does it cost? If the
product doesn’t meet expectations, how is it returned
and who pays for the return shipment? Answer all these
questions clearly right at the beginning of the process,
and save your users doubts and hesitations.
If you do need credit card details, promise that on no account will you
charge it without the explicit permission of the user.
Examples
Poptin is a platform for creating popups. Spotify is... well, you know
Spotify.
www.poptin.com
www.spotify.com
Google Cloud Platform does ask for credit card details but promises:
cloud.google.com
Examples
When creating a new online course, the dilemma about which title to use
can continue until the last minute, and Udemy are aware of that. But they
don’t want users to delay the process, so they let them enter a temporary
title, and clearly state it to concerned users.
www.udemy.com
tumblr really doesn’t want users to delay sign up just because it’s hard
for them to select a username. Their solution is to offer loads of funny
names, and promise that they can easily change it whenever they want.
www.tumblr.com
www.typeform.com
So, write them a few words about why it’s good for them to do it,
and how they’ll benefit. Remind them why they came to your site in
the first place, and how this will get them closer to their goal.
www.facebook.com
Examples
This is how they say it on Download.com:
www.download.com
www.rounds.com
PREVENTING ERRORS
AND OTHER SETBACKS
All you have to do is go over your forms and processes, identify the weak
points (that we’ll look at right now), and add a few words next to the
suspect places.
You can achieve this by using asterisks. Yes, even if all the fields are
required, as seen in the screenshot below.
If you find out that your users are put off by asterisks, as some studies show,
you can clearly state at the top of the form that all the fields are required,
and note “optional” only next to those which are not (and then ask yourself
if you really need all those you left as optional. The less information you
request, the greater the chance that users will complete the form).
Whatever you do, make sure to remove all ambiguities, and save users the
need to draw conclusions for themselves about your rules. Just be very
clear about it.
Examples
Look how simple and clear it is on
the sign up form for the Musketeer
app, that enables citizens to help
each other in case of an emergency.
You don’t even need a sentence
explaining that the asterisk
indicates a mandatory field, it’s
perfectly obvious.
Musketeer app
www.walmart.com
This is from Marks and Spencer. It shows another way to deal with
required fields: when hovering over the button (even before clicking),
the instruction appears in a tooltip and says what required details are
missing, thus preventing the error message.
www.marksandspencer.com
The ideal should be that the system is indifferent to formats and can
accept whatever the users type. If you succeeded in creating such a system,
you don’t need to write anything.
But if the system only accepts a value written in a certain specific way,
you must point that out to the users before they start typing, to avoid
the error.
Examples
The next example uses an interface solution to make life easier for the
user.
The Idle Man broke down the date into its component fields, so the user
doesn’t need to think about a period or slash. Then they wrote the exact
format under each field: day and month in two digits, year in four.
www.theidleman.com
www.paypal.com
And this is the field after the user clicks inside it:
And this is the field after the user clicks inside it:
www.paypal.com
Examples
OkCupid provides the minimum size of a file, and some other important
instructions…
www.okcupid.com
Foodgawker, a photographed
recipe site, did put the
limitations as placeholders,
but outside each field
there’s also a countdown
number indicating how many
characters users have left,
helping them to always know
where they stand.
www.foodgawker.com
• The type of characters the password must include (such as at least one
capital letter)
• Case sensitivity
www.ae.com
Uniqlo also writes their limitations clearly under the field (it would be
easier to scan if it appeared as a bullet list, wouldn’t it?).
www.uniqlo.com
The Israeli TV provider Yes shows the rules as a tooltip when the
user places the cursor in the password field, which is kept on display
throughout. As soon as one of the rules has been met, a tick appears.
Excellent!
Examples
The deliveries of Belle and Sue fashion store only go out during regular
working hours. But there’s no going around the fact that during working
hours most of their customers are at work... Belle and Sue took that into
account and propose a creative solution that is offered as soon as the
customer starts making the order.
MICROCOPY AND
ACCESSIBILITY
*This chapter was written with Rotem Binheim, UX designer and AUX expert.
CHAPTER
INCLUDES
Microcopy for all
There’s a fine line between providing a good, effective experience and
causing frustration - and the difference can be just one word, or a
quick hint, exactly where it’s needed. This is doubly true in the case of
accessible microcopy and people who have difficulty or are unable to see
the screen.
How can we make our microcopy compatible with screen readers? Let’s
dive in.
For example, on the form below, people will hear the field label
(“Password”), and on the next Tab they’ll enter their password. But when
they create a password, they have no idea that there’s a guideline written
below the field (Must be 6 or more characters and contain at least 1
number) because the screen reader has not yet reached it. So users will
choose a password and then find out there were further instructions, and
then have to go back and choose a password that meets the requirements.
The solution here is to place the instruction right after the label, ahead
of the input fields. The accessible order of elements is therefore:
www.facebook.com
www.walmart.com
Note for developers: The elements can appear on screen in any order,
as long as you set the keyboard focus shift in the correct accessible
order. However, for seeing keyboard-only users, or people with cognitive
impairments, having the focus indicator jump around the screen in an
unexpected way could be a jarring experience. Ideally, content items will
be aligned visually to match the document order, and vice versa (thanks
to Scott Vinkle for the important note).
For the same reason, it’s important not to place any microcopy under
a confirmation button. A colleague with a vision impairment told us
about her failure to complete an online purchase as she clicked the
confirmation button (5 times) and nothing happened. She then found out
that there was an “accept conditions” check box under the confirmation
button, along with an error message pointing to the fact it was a required
field. Of course, she couldn’t see those, nor did the focus shift to them
automatically, so after all the time and effort invested in placing the
order, she wound up having to go to a brick-and-mortar store.
To sum things up
All of the information needed to complete an action should be present
ahead of it—above or just to the right of the control label. In cases that
may result in errors, make sure during the development stage that the
focus shifts correctly, so no one misses the piece of copy that can help
them stay on the right track.
It includes some clever microcopy (Diving in soon), but for users who will
only hear the words and not see the entire screen, it’s not at all clear
that they need to wait for the site to load.
A simple correction can solve this. Explicitly say something like: The
site is loading; we’ll be diving in soon
When users reach an empty state or 404 page, refrain from using just an
image or clever words to explain where they are. And try not to use a
combination of image and text that will be misunderstood if someone
hears one but not the other.
What will users who can’t see the screen understand from only hearing
“Notifications, it’s oh so quiet”?
When screen-reader users arrive at the email field, they still don’t know
there’s a password field and registration button below it, so they have no
idea why their email is required. Maybe the next level is signing up for
a newsletter? Granted, they’ll discover the password field on their next
click as the keyboard navigation proceeds, but you can save them from the
hassle of wondering “What do I do here and why do they need my email?”
Oh, and it’s best to mention that this is a sign-up page for seeing
users as well, and add a few good reasons they should register. Two birds,
one stone.
www.amazon.com
The icon for more information, indicated by an image of an ‘i’, ‘!’ or ‘?’,
should also have an Alt describing what lies ahead. For example: How
to choose a password or More info. If we fail to give these tiny-but-
important icons an Alt, users who can’t see them won’t be aware of this
crucial information.
Emojis have preset Alts. Want to know what users hear when you use
emojis in your microcopy? Watch “What do Emojis look like?!” by Molly
Burke on YouTube.
People who aren’t able to see the screen in its entirety can thus quickly
grasp what the important elements on the page are, then choose to navigate
directly to what most interests them. So what does someone hear when
jumping between buttons in the following screen?
When links or buttons give a little bit more information about the page
they lead to, everybody wins: people with screen readers can decide if
it’s relevant, and everyone gets a good specific prompt to keep on reading.
In order for an icon set like this one (by Spotify) to be accessible, the
microcopy should appear as live text, or be paired with an appropriate
Alt text.
Spotify app
Placeholders that disappear as soon as the field comes into focus are
inaccessible, even to seeing users. Therefore, this form isn’t accessible:
www.wix.com
This is the sign up form for the Tesco website. The labels are permanent
and out of the field, and there is high contrast in the field. Way to go.
www.tesco.com
This login form is very cool, but it’s inaccessible. Even if everyone
understands that “magic word” refers to password, will they all
understand that “I don’t have a magic word yet” means “I don’t have an
account”? This is cleverness upon cleverness that doesn’t serve any of
the users. Also note the low contrast in the light-blue fields and how
difficult it is to read them.
Clarity
4. Conversational writing
Make sure you address the users directly, in everyday words and in a
short, straightforward language.
5. Control labels
Check each label individually and make sure they can be easily
understood by all users.
7. Placeholders
• They shouldn’t contain any information the user might need while
typing.
• Make sure they add relevant information and don’t just repeat the
label.
• They should be in high contrast, to best serve accessibility
guidelines.
8. Tooltips
• Make sure they don’t contain critical information better left
permanently visible.
• If this is a one-time or seldom filled form, consider using tooltips
that automatically appear when the field comes into focus.
For those that will return errors, give the users an advanced warning
around the field.
17. Security
• With online payment - clearly indicate it’s secured.
• If your business requires a higher level of discretion - clearly note
that the information given will be secured and kept confidential.
MICROCOPY FOR
COMPLEX SYSTEMS
*This chapter was written thanks to the generous sharing of knowledge by professional UX and
content women and men, who shared with me their insights, experience and screenshots: Jasmin
Galker Vaisburd of UniqUI; Shani Polanski, Leah Kraus, and Naama Shapira of PTC; Elinor
Mishan Salomon and Idit Peled of the Ministry of Justice; Galia Engelmayer of NICE;
and Assaf Trafikant of QuickWin
Screenshot of the program Creo Parametric from PTC, an expert system that is super
professional and that engineers use to draw three-dimensional models
a. Usability - so that the users will find easily whatever they are looking
for using the terms they are used to in their work environment.
BUT professional does not mean high and pompous, but rather simple and
precise.
The second reason you should write as simple as you can is to adapt the
system to the varying levels of professional understanding: beginners
and experts, bright and average. Therefore a simple professional language
is always preferable to a complex professional language.
Examples
Alert from a NICE call center management system: Shorter, more active,
more direct, and the buttons say exactly what they do.
Thus you could say that “our users are intelligent, they’ll understand”,
“we’ll solve it with training”, “let them call the support desk”, “they
should look at the user guide”. But it is possible to tackle it in another
way, probably more effectively, using microcopy to help your users.
1. Titles
Pay special attention to the menus, field labels, feature names, graph
titles, categories, options in drop-downs, and column headings in tables,
and make sure that they are clear and simple, that they explain exactly
what appears or needs to be typed, are easy to understand quickly and
unequivocal.
3. Tooltips
If you want to explain something complicated about the field or about
another element in the interface, put a small i icon next to the label,
that when hovered over displays a tooltip with the explanation (as short
and simple as possible, but still including all the required information
that will save a call to the help desk or a search in the user guide).
Complex systems have many more tooltips, and they are longer, compared
to simple systems aimed at the general public, and that’s just fine.
See Chapter 14 for more about how and when to help users.
Tooltips can also convey the value of the feature, thus helping the users
to get the most out of it.
Example
5. Error messages
Error messages are annoying, and if users are in the middle of a complex
process and running out of time, then errors are also seen as frustrating
and demoralizing. Needless to say, all error messages must be simple and
effective (see Chapter 7), but in complex systems even more so. So explain
the problem concisely, and guide the users on how to solve it so that they
can continue. Use understandable words that are not threatening, express
the problem calmly so that you don’t scare the users, and add instructions
that can be implemented easily.
Very important: Present the problem from the point of view of the users,
not of the system and not of the developers. For that you should understand
exactly what the user was trying to do, what went wrong, and how to fix it
- not only technically, but also professionally.
This error message appears when the group tries to close a sprint when
there are still open stories assigned to it. The earlier version of the
message provided a technical explanation to the users about how the system
works, what it allows and doesn’t allow. The new version was written from
the point of view of the users and with the professional understanding
that what they want to do in an agile environment is to go back or to move
the stories to the next sprint. Even the wording is more fluent, active,
and practical, and suitable for the dynamism of agile processes.
Examples
Instead of a frustrating “Data is unavailable” (or in other words “There’s
nothing to see here”), the RealMatch system tells the users what will be
here, when, and what they should do now. In this example that is simply
to wait.
Note that despite the humane and friendly voice and tone of these messages,
the professionalism of the brand is not harmed. On the contrary, the new
sentence is much more professional, complete and precise.
The problem with veteran expert systems is that it’s really hard to
change the voice and tone legacy, and if you DO decide to change it -
there’s no way all the features can be dealt with in one go, not visually
and not the microcopy. On the other hand, if we change the microcopy only
for the new features, it’ll create inconsistency within the system.
So what can be done? If you want the system to advance at some point,
you have to start somewhere: write contemporary microcopy for every
new feature, and update the microcopy for any old feature that is being
updated to a new version. Naturally, you need to make sure that users are
easily able to link between similar elements written for a new feature
compared to the old, despite the voice and tone differences. Luckily, a
change in a complex system can’t be so overwhelming anyway, because the
professional terminology stays, even if the surroundings become more
contemporary.
And if your users are happy, they use your system more, purchase
add-ons, spread the word, and renew the contract. Here's your ROI.
MailChimp’s users are very reliant on the system: we are talking about
millions of businesses that use the system to manage their mailing lists
How come that MailChimp allows itself to be frivolous? And how come that
their users are crazy about them? And how did their voice and tone design
become the shining example for content writers?
A highly recommended B2B voice and tone design, that is super professional
and contemporary, is the one for Salesforce. Just google “Salesforce
voice and tone” and enjoy. Here are two appetizers:
That doesn’t mean you must be liberated and light in every system,
definitely not. However, there is no such thing as a single voice and tone
that fits all professional or complex systems. The brand and its goals,
the target audience, the relationship between them, and work environment
alter it a lot. Whether you’re writing microcopy for consumers or experts,
you always need to first specify the voice and tone. Yes, always.
Luckily, there’s a full step-by-step guide to design your own voice and
tone in Chapter 1 of this book you have just finished reading. It’s time
to get to work.
Microcopy: The Complete Guide (2nd edition) gives you the knowledge and
tools needed to write smart, effective and helpful microcopy for your
digital product. It includes principles, practical tips, and hundreds of
screenshots from actual products by corporations, start-ups and SMBs.
And no, you don’t have to be a copywriter. Anyone with an aptitude for words
and technology can write microcopy. Everything you need is right here in
this book.
Who will find this book useful? Microcopy (UX) writers and copywriters;
UX designers; UI designers; product managers; website and app owners;
digital marketing professionals; small business owners; bloggers;
advertisers; sales personnel, and more.
Kinneret Yifrah
Runs Nemala, the leading microcopy studio in Israel.
She has been writing content and microcopy for digital
products for over 10 years, and designed the voice and
tone for businesses of all kinds and sizes. Kinneret
manages the Israeli microcopy community and gives
talks and workshops.
ISBN 978-965-572-795-1
9 789655 727951