Ustwo Copy Guide Pre Release
Ustwo Copy Guide Pre Release
Ustwo Copy Guide Pre Release
Pre-release version 1
Produced by
INTRO
PROCESS
WORDS
PUNCTUATION
INTERACTION
Good, clear and considered language makes a product better for people
with good comprehension, but also for non-native speakers or those who
have learning difficulties. Just like with interaction and visual design, the
copy you use is a way to express brand values and what you and your
product stand for.
At ustwo, we’ve spent years mastering the art of pixels and products, but
we’ve not said much about the world of words. This guide covers some of
what we’ve learned so far.
Subheading
Subheading
Welcome to the ustwo Copy
Welcome to the ustwo Copy
guide. This is just some random
guide. This is just some random
text to fill in the space. We’d
text to fill in the space. We’d
normally use Lorem Ipsum, but
normally use Lorem Ipsum, but
that doesn’t give a very good
that doesn’t give a very good
impression of what realistic text
impression of what realistic text
will look like, so where possible
will look like, so where possible
fill it with something resembling
fill it with something resembling
the final copy.
the final copy.
A link to something
A link to something
COPY FIRST Before you start design work on your interface, and the clarity of the information you want to
think about the text that will appear on it. This present. If the text is to appear in multiple
will give you a deeper understanding of the languages, consider how those will fit into the
brief, and help you map out how much text will design, along with any regional preferences
appear in the UI. You’ll be able to shape the for the formats of dates, times, currencies,
design accordingly, checking tone of voice addresses etc.
Copy | Pre-release 2
MAKE TIME FOR Don’t work on copy as an afterthought – put
time aside within your project to work on it.
WRITING Make sure you select specific points within the
project to work on it (see Iterate).
Copy | Pre-release 3
Write
Learn Test
ITERATE Copy should be treated as part of the overall cycles of improvement during the course of
design of a product – just like the visual style the project, just as you would with the rest of
and interactions – and iterated on in the same the product.
way. Listen to what users say when testing,
then improve and refine where necessary.
Start with low-fidelity text, then run through
Copy | Pre-release 4
If you were trying to
do x, how would you
do it?
TESTING As with design, you should also test your copy. revisiting what you’ve written and rephrasing it
Do users understand what’s being asked? Are in their language.
they able to follow instructions easily? Listen
to how they refer to things that are relevant to
your product, do you use the same words and
phrases or are they different? If not, it’s worth
Copy | Pre-release 5
We use… Not…
STYLE GUIDES At the start of the project, set up a simple across your product. Check out Mailchimp’s
style guide, which notes commonly used style guide or The Guardian’s for good
words, phrases, grammar rules etc. That way examples of what these can look like.
every designer on the project will know the
correct terms to use on buttons, keep to tone
of voice guidelines and maintain consistency
Copy | Pre-release 6
Screen ID Name Text
COPY DECK It’s also useful to have a tool that can keep easily search for precedents and avoid
track of all the copy which appears in an app. reinventing the wheel. It's also a great
Having a central spreadsheet not only gives handover tool, and allows third parties and
developers a central “single source of truth” product owners to get a good understanding
but also ensures that, at a glance, you can see of how the app is communicating with users.
if the tone of voice is consistent. With it, you to
Copy | Pre-release 7
Settings
Einstellungen
German
This app costs an arm Cette appli coûte les
and a leg.
yeux de la tête.
French – “This app
costs the eyes in your
head.”
Can you change the Can you change the
colour by 28/12/15?
color by 12/28/15?
American English
TRANSLATION AND Design, code and copy all require localisation. Formatting of dates, times and currency can
Different languages have varying word lengths also vary between regions, even those using
TRANSCREATION and alphabets, and therefore require flexibility the same language. Localisation is more than
in layout and assets, as well as a careful just translation, it’s transcreation – moving the
balance between using iconography or text to sentiment and intentions across languages.
describe functionality and guide the user.
Copy | Pre-release 8
WORDS
Tone, accuracy and consistency of language are foundational to both the
function of the product and the experience of the user. Choose your
words wisely.
You are using Hi, welcome to
friendly.app friendly.app
Would you like to Do you want to
proceed? keep going?
NAUGHTY NICE
TONE OF VOICE Reflect the personality of your brand in the uses an authoritative but conversational tone.
language you use. If you want to come across We vary things, as appropriate, for delivering
as friendly, then try to avoid language that is CBT-based suggestions or a simple, friendly
too formal. Similarly, if you want to come reminder.
across as professional, steer clear of a jokey,
conversational tone. Moodnotes, for example,
Copy | Pre-release 10
Disrupting the
Changing the way
paradigm of our
we work
daily endeavours
NAUGHTY NICE
Copy | Pre-release 11
Screen in Title Case Screen in Title Case
A button A Button
NAUGHTY NICE
CONSISTENCY Take care to keep all the details consistent, as but when they aren't, it may be up to you to
it will help people navigate through the app if set a rule and implement throughout.
they know what to expect. What these are will
depend on what you’re creating, but make
sure you’re considering capitalisation, terms
and dates. Often these are set up by a client,
Copy | Pre-release 12
If you would like
to proceed, then Continue by
tap the button at tapping the
the bottom of the button below.
screen.
NAUGHTY NICE
Copy | Pre-release 13
Try to make sure Try to make sure
you spel words you spell words
correcly, it’s correctly, it’s
annoying when annoying when
there wrong. they’re wrong.
NUAGHTY NICE
SPELLING Pay special attention to spelling. Mistakes look also different formats for times and dates.
amateurish. Look out for any red underlining if Double-check your documents for common
your software supports spell-checking. misspellings that spell-checkers might not
Remember to consider any national pick up, such as its/it’s and there/their/they’re
conventions and formatting too – US English – run a quick search for these.
and UK English have different spellings, and
Copy | Pre-release 14
There car was Their car was
really fast, I’d like really fast, I’d like
won two. one too.
NAUGHTY NICE
Copy | Pre-release 15
My documents Your documents
My music Your music
NAUGHTY NICE
Copy | Pre-release 16
CD’s CDs
DVD’s DVDs
OS’s OSs
How-tos How-to’s
NAUGHTY NICE
Copy | Pre-release 17
Hids Hideous
We’ve added a new AI- New feature: find your
based search, leading content more quickly.
to a 10× speed
increase in locating
your content.
NAUGHTY NICE
Copy | Pre-release 18
I like Pixel Perfect
I like PPP.
Precision (PPP).
Interfaces look
Interfaces look
better when
better when
they’ve followed
they’ve followed
PPP.
PPP.
NAUGHTY NICE
Copy | Pre-release 19
What this text is all about
Sed ut perspiciatis unde omnis iste natus error
sit voluptatem accusantium doloremque Section 1
laudantium, totam rem aperiam, eaque ipsa Sed ut perspiciatis unde omnis iste natus error
quae ab illo inventore veritatis et quasi sit voluptatem accusantium doloremque
architecto beatae vitae dicta sunt explicabo. laudantium, totam rem aperiam, eaque ipsa
Neque porro quisquam est, qui dolorem ipsum quae ab illo inventore veritatis et quasi
quia dolor sit amet, consectetur, adipisci velit, architecto beatae vitae dicta sunt explicabo.
sed quia non numquam eius modi tempora
incidunt ut labore et dolore magnam aliquam Section 2
quaerat voluptatem. Ut enim ad minima Neque porro quisquam est, qui dolorem ipsum
veniam, quis nostrum exercitationem ullam quia dolor sit amet, consectetur, adipisci velit,
corporis suscipit laboriosam, nisi ut aliquid ex sed quia non numquam eius modi tempora
ea commodi consequatur? incidunt ut labore et dolore magnam aliquam
quaerat voluptatem.
NAUGHTY NICE
WHITESPACE Use whitespace to make text easier to scan. for their heavy use of whitespace in articles –
Avoid large blocks of unbroken text. Use they tend to use only 1–2 sentences before
plenty of titles and subtitles to split and order introducing a break to make it easy to read on
the text. Remove unnecessary sentences or screen.
words to reduce the amount of content there
is to display. Take a look at the BBC website
Copy | Pre-release 20
1. Do this
First you need to do
this, then you need to 2. Then do this
do this, afterwards do 3. Afterwards do this
this, next do this, and 4. Next do this
finally do this.
5. Finally do this
NAUGHTY NICE
WHITESPACE One way to increase the amount of whitespace to use a full stop at the end of an item if the
in a block of text is to use lists rather than long text is a complete sentence.
LISTS sentences. Use bullets for unordered lists,
numbered lists for steps that need to be
carried out in a particular order. You only need
Copy | Pre-release 21
Their product Our product
Our product is bigger
than their one. It’s also Small Bigger
much faster, and the
Slow Faster
build quality is a lot
better too. Rubbish Better
NAUGHTY NICE
Copy | Pre-release 22
Four hundred and £429,683
twenty nine thousand,
six hundred and eighty
three pounds.
I can think of 1,000 I can think of a
ways to make this text thousand ways to
better. make this text better.
NAUGHTY NICE
Copy | Pre-release 23
Pastrami beef ribs alcatra filet mignon
Pastrami beef ribs alcatra filet mignon
tongue, prosciutto turkey shoulder venison
tongue, prosciutto turkey shoulder venison
ham hock rump short ribs. Cow shankle short
ham hock rump short ribs. Cow shankle short
ribs, sausage bacon t-bonekevin
ribs, sausage bacon t-bone kevin biltong
biltong boudin cupim frankfurter balltip.
boudin cupim frankfurter ball tip. Chicken tail
Chicken tail strip steak kielbasa, ribs boudin
strip steak kielbasa, ribs boudin beef doner
beef doner meatloaf spare ribs flank tongue
meatloaf spare ribs flank tongue pork chop.
pork chop.
NAUGHTY NICE
RAGS, WIDOWS, ‘Rags’ are the uneven vertical margin that they can sometimes form large white spaces,
appears on blocks of text. This is commonly on which are distracting. You may need to edit
AND ORPHANS the right, as most text is aligned to the left the copy, or add in manual line breaks, to give
RAGS edge, but can also appear on the left if the the text a better rag.
text is flush right. Keep an eye on them – with
automatic line breaks that software puts in
Copy | Pre-release 24
Pastrami beef ribs alcatra filet mignon
Pastrami beef ribs alcatra filet mignon
tongue, prosciutto turkey shoulder venison
tongue, prosciutto turkey shoulder venison
ham hock rump short ribs. Cow shankle short
ham hock rump short ribs. Cow shankle short
ribs, sausage bacon t-bone kevin biltong
ribs, sausage bacon t-bone kevin biltong
boudin cupim frankfurter ball tip. Chicken tail
boudin cupim frankfurter ball tip. Chicken tail
strip steak kielbasa, ribs boudin beef doner
strip steak kielbasa, ribs boudin beef doner
meatloaf spare ribs flank tongue pork chop
meatloaf spare ribs flank tongue pork chop.
pastrami.
NAUGHTY NICE
RAGS, WIDOWS, Widows are single words, or sometimes very and decreases readability. As with rags, make
short lines, left at the bottom of paragraphs. some edits to get rid of them.
AND ORPHANS They’re considered bad form as they leave
WIDOWS large blocks of white space between
paragraphs, which interrupts the reader’s eyes
Copy | Pre-release 25
Pastrami beef ribs beef. Pastrami beef ribs Ribeye shank turkey
alcatra filet mignon alcatra filet mignon andouille. Pork belly
tongue, prosciutto Ribeye shank turkey tongue, prosciutto leberkas meatloaf pig
turkey shoulder andouille. Pork belly turkey shoulder cupim ball tip. Short
venison ham hock leberkas meatloaf pig venison ham hock loin tri-tip hamburger
rump short ribs. Cow cupim ball tip. Short rump short ribs. Cow turkey filet mignon
shankle short ribs, loin tri-tip hamburger shankle short ribs, shankle, pastrami
sausage bacon t- turkey filet mignon sausage bacon t- strip steak brisket
bone kevin biltong shankle, pastrami bone kevin biltong alcatra prosciutto
boudin cupim strip steak brisket boudin cupim capicola shank
frankfurter ball tip. alcatra prosciutto frankfurter ball tip. chuck. Pancetta
Chicken tail strip capicola shank Chicken tail strip doner ham hock.
steak kielbasa, ribs chuck. Pancetta steak kielbasa, ribs
boudin beef doner
doner ham hock. boudin doner beef.
NAUGHTY NICE
RAGS, WIDOWS, Like widows, orphans are single words or small before, play around with the text a bit to get a
lines, but this time they appear at the start of a better distribution of the words.
AND ORPHANS column or page. Again, this creates large
ORPHANS areas of white space and messes with the
alignment at the top of the columns. As
Copy | Pre-release 26
PUNCTUATION
Although grammar mistakes can be the cause of much hilarity, they don’t
help the user’s navigation and undermine the authority of your product.
And remember: house rules are OK, but consistency is king.
"'
"So I said to him 'start
“‘
“So I said to him ‘start
using the correct using the correct
punctuation, bro' while punctuation, bro’ while
proofreading his proofreading his
work." work.”
I want Tony's cake. I want Tony’s cake.
NAUGHTY NICE
QUOTES AND A lot of software automatically includes the their mechanical and space constraints, where
correct curvy or sloped smart quotes (also the use of a symmetrical character freed up a
APOSTROPHES known as curly) rather than the default couple of keys to use for other marks. Curly
SINGLE QUOTES AND straight dumb ones. Single quotes should be quotes should always be used as they match
APOSTROPHES used for quotations within quotations. Straight the other characters in a font better, and
quotes are from the days of typewriters, with they’re more legible.
Copy | Pre-release 28
″So I said to him ′start “So I said to him ‘start
using the correct using the correct
punctuation, bro′ punctuation, bro’
while proofreading his while proofreading his
work.″ work.”
I’m 6’2” tall. I’m 6′2″ tall.
NAUGHTY NICE
Copy | Pre-release 29
Here’s the first part of
a sentence - and I’m such a part-timer
here’s the second at this copy thing.
part.
NAUGHTY NICE
DASHES This is the default character when you press of type break within a word) or to join separate
the dash key on your keyboard. It’s often words into single words.
HYPHEN incorrectly used, being confused with an em or
en dash (see following pages). They’re used to
break single words into parts (like when lines
Copy | Pre-release 30
I’ve worked at ustwo
from 2004–2015
I have an on–off
relationship with cake.
Here’s the first part of
a sentence – and
here’s the second
part.
DASHES Used in dates to replace ‘to’ or ‘and’. It can to using the em dash (see next page). ‘En’
also be used to illustrate the relationship refers to the width of the character being the
EN DASH between two different words or can be used same as a capital N.
as a break in sentences, but remember to
include a space either side of it. This is the Press Alt + - (Mac) or Alt + 0 1 5 0 (Windows)
preferred method here at ustwo, as opposed to get this character.
Copy | Pre-release 31
Here’s the first part of
a sentence—and
here’s the second
part.
DASHES An alternative method for breaking up a Press Alt + Shift + - (Mac) or Alt + 0 1 5 1
sentence is the em dash. Many word (Windows) to get this character.
EM DASH processing platforms, such as Medium, will
produce an em dash when you type two
hyphens. ‘Em’ refers to the width of the
character being the same as a capital M.
Copy | Pre-release 32
4-2=2 4−2=2
NAUGHTY NICE
Copy | Pre-release 33
2×
x2=4 2×2=4
NAUGHTY NICE
Copy | Pre-release 34
Choose left / right. Choose left/right.
We could do it this We could do it this
way/or we could do it way / or we could do it
this way. this way.
NAUGHTY NICE
Copy | Pre-release 35
I can’t think of I can’t think of
anything to write...I anything to write… I
really can’t. really can’t.
NAUGHTY NICE
ELLIPSES Ellipses consist of three evenly spaced dots meaning. You can also use it to show a trailing
(full stops or periods) with spaces between the off of a thought, or – like in the example – a
ellipsis and surrounding letters or other marks. meaningful pause in someone’s speech. Note:
When quoting something, it shows the reader there is a specific character for this, not just
that you’ve left out a word, sentence, or whole three full stops typed after each other. Press
section from a text without altering its original Option + ; (Mac).
Copy | Pre-release 36
I need to write better I need to write better
sentences & words and
paragraphs. paragraphs.
Ben and Jerry’s Ben & Jerry’s
NAUGHTY NICE
Copy | Pre-release 37
INTERACTION
When a user interacts with a digital product, in almost every case, copy is
involved. In this section we set out how text can improve the fluidity of
their engagement.
Find interesting
content by using our To search for content,
new AI-based search click the button.
feature.
NAUGHTY NICE
Copy | Pre-release 39
Here’s an introductory paragraph
that doesn’t contain any real
If you press the button all your data
information about what you’re
will be deleted.
about to do.
We can then put all the other
It’s followed by another paragraph
information underneath, as the
with more information. The
most important point has been
important thing to realise is that
placed at the top.
pressing the button will delete all
your data.
NAUGHTY NICE
Copy | Pre-release 40
Tap Schedule to set To set times for
times for automatic automatic backups,
backups. tap Schedule.
NAUGHTY NICE
Copy | Pre-release 41
We’d like to use your
This app requires your current location, so we
current location. can provide you with
better suggestions.
NAUGHTY NICE
Copy | Pre-release 42
Wi-fi Toggle Switch your wi-fi on
NAUGHTY NICE
Copy | Pre-release 43
User ID and Create your user
password setup ID and password
NAUGHTY NICE
OPEN WITH A VERB Readers respond well to verb phrases that product developers because they are useful
describe their tasks. This is especially useful in shorthand for features. It’s probably not how
TO IMMEDIATELY lists of options or when describing features or customers think of things, though.
PROMPT USER functionality. Verb phrases naturally put the
ACTION most important words first. You probably use
noun phrases in conversations with other
Copy | Pre-release 44
I am a hyperlink. I am a hyperlink.
I am not a hyperlink. I am not a hyperlink.
How can you tell the Now you can tell the
difference? difference.
NAUGHTY NICE
Copy | Pre-release 45
Information View information
NAUGHTY NICE
BUTTON LABELS Use verbs on buttons as they are there to Also, does it pass the WYSIWYG test? The
perform actions. Make it clear what the button button text should make sense in both these
does – users shouldn’t need to read any other contexts, “Would you like to [button text]?”
text to understand what they do. Negative and “I would like to [button text]”?
actions can be shorter, as the positive action
makes their context clear.
Copy | Pre-release 46
Switch off wi-fi Terms and conditions
Would you like to turn off your Lots of boring legal stuff that
wi-fi? goes on and on…
NAUGHTY NICE
Copy | Pre-release 47
No wi-fi signal No wi-fi signal
OK OK
OK Close
NAUGHTY NICE
Copy | Pre-release 48
Hey you, let’s begin
Get started
shall we?
NAUGHTY NICE
BE DIRECT WITH There’s a time and place for injecting language you choose, it should reflect the
personality into a UI, but try and avoid it in tone of voice and personality of your brand.
ACTIONS situations where users just want to get
something done. This doesn’t however mean
you can’t have a friendly tone, rather than just
Yes and No statements on buttons. Whatever
Copy | Pre-release 49
Menu Help
Contacts
Here’s some help content that
Favourites will tell the user how to do
something.
Settings
Help
About
Log out
Copy | Pre-release 50
Password incorrect
Authentication failed
Please try again, or press “I’ve
Server validation could not be forgotten my password” to reset
completed. your password.
NAUGHTY NICE
ERRORS Make it clear that an error has occurred, and solve it. Buttons should provide the user with a
that the user needs to do something. If way to solve the problem.
MAKE THEM CLEAR something happens, make it clear what has
happened (in language the user can
understand), and what they need to do to
Copy | Pre-release 51
Password not secure enough
Password error! The password you entered didn’t
Password entered was in an follow our rules. Please make
incorrect format. sure it includes at least one
number as well as letters.
Cancel Re-enter
Cancel Try again
NAUGHTY NICE
Copy | Pre-release 52