Analyzing the Ampersand
When to use “and” versus “&” in UX writing.
Perched atop the number 7 beneath your fingertips sits a curly character: the ampersand. A ligature of the letters “e” and “t” that combine to form the Latin word for “and,” the ampersand is as much a design darling as it is a dutiful space-saver for titles and text fields.
It’s tempting to reach for the ampersand often, especially when writing for user interfaces where space is prime real estate. Why use three characters when one will do? But with its bold dips and curves that draw the eye, maybe it should be used sparingly.
Our content strategy team at Black Pixel did some digging only to find that there are no firm guidelines for the ampersand in UX writing. Some apps even use the character and conjunction interchangeably with no apparent reason.
To create clear and consistent copy in our own projects, we set out to determine when it’s appropriate to use “&” versus “and.” Let’s take a look at a few reasons to use an ampersand and then a few reasons why not, specifically in the case of UX writing.
A Case for the Ampersand
Ampersands abound in UX writing. From Google Maps to Spotify, the ampersand is often used in menus and view titles.
It Saves Space
When space is limited, which is often the case in a UI, an ampersand takes up less room than “and.” Using a single character in place of a word can also help get to the point faster, creating a message that’s more direct. A message that’s direct is arguably clearer. If clear communication is our goal, then it seems logical to use an ampersand.
It Links Nouns
The ampersand is often used where a bond is implied between two proper nouns or between two things that are considered a unit. This comes in handy when creating a navigation menu. By combining similar items into one group, like “Display & Brightness” or “Photos & Camera,” more items can be added without overwhelming the overall menu structure.
It’s Sometimes Necessary
The ampersand should always be used when it’s part of a company name, logo, proper noun, or title. This is one of the few cases where ampersand use isn’t up for debate. For example, “M&M’s” would never be written “M and M’s.”
A Case Against the Ampersand
For all of the reasons to use an ampersand, there are a few factors for avoiding it.
It Stands Out
Eye-catching and efficient are two of the ampersand’s biggest strengths, but they can be at odds with each other. As users scan the text, their eyes are likely to be drawn to the character instead of the most important words. Comparing two Amazon menu items, “Login & security” and “Content and devices,” the ampersand does stand out in the former. Shopify’s Polaris content guide agrees, “[Ampersands] attract attention to the least important part of the sentence. Spell out the word ‘and.’” We could take this a step further and use title casing for menu items to draw even more attention to those important words.
It Gets Lost in Translation
While you can localize “and” to anything you want, including a symbol, you can’t always localize the ampersand. According to OpenOffice’s UI style guide, “Due to its exclusive nature, the ampersand also causes uncertainty in localization concerning whether or not it signifies that the text is a proper name and therefore not to be translated.” A business that uses the ampersand in its name would not want that translated in another language. M&M’s are M&M’s in every language.
It’s Exclusionary
Accessibility is also a worthy reason to avoid the ampersand. One of the goals of writing helpful UI copy is making sure it’s easy to read. Not only is copy devoid of characters easier to skim, but it’s also easier to understand for those who with lower literacy levels.
There’s no denying the ampersand’s utility. Its ubiquity in apps from Amazon to Airbnb only prove its prowess. However, when deciding whether or not to use the ampersand, there’s no right or wrong answer. With each scenario, ask yourself if the ampersand will make your writing clearer and help the user accomplish their goal quickly and easily. And whichever direction you choose, always be consistent.
Black Pixel is a creative and digital products agency. We offer design and development services to the world’s biggest brands. Subscribe to BPXL Craft and follow us on Twitter.
