The UX Designer’s Copy Toolkit
How to add the right words to layouts when there’s no writer around
If you’re a UX designer, I’m going to let you in on a copywriter secret: we need your webpage designs for inspiration before we can think of a single word to write. Oh sure, give us a webpage concept, and we can guess at most of the wording needed. After all, we’re trained to compose on-demand copy, with or without a layout sketch. But effective copy almost always starts with a well-structured design. So the copy “fills in” the blanks for webpage designs — with verbal brilliance, of course.
What is webpage “copy” anyway? Suffice to say it’s the “words” that go with the “pictures” for the best user experience. To compose reliable “copy,” you just need to combine the words in the right ways and the right places for your users. And if that sounds a bit like how you build a “design,” then, hey, you’re getting the copywriting idea.
But what is a web designer to do when there’s no copywriter on hand? If you can’t live with “guessing” at placeholder copy (or making annotations) in your wireframes or visual mock-ups, there are copy work-arounds. Don’t panic over prose or punctuation. I’ve got just the copy tools you need in a pinch.
Components
Let’s start with the obvious. Webpage components are the stock and trade of UX designers and copywriters. You create an image, and the writer composes the caption. You draw a diagram, and the writer provides the labels. Whatever design component you dream up, you’re going to need matching copy to give the proper context.
What to do until the copywriter shows up: In my work for GE Digital’s Predix.io website, we’ve devised coordinating copy and design components in a Predix Design System, so we’re set. If you, however, must write copy on the fly for a common design element, I suggest you mimic similar copy found elsewhere on your website. No need to be clever about functional copy for dropdowns, progress bars, radio buttons, etc. Still need to be creative? OK, play with the fonts and colors of already established copy.
Forms
We don’t like to fill them out, and neither do our users. We try as much as possible to make forms a breeze. Your economical designs help, of course. So does copy that’s directional and to the point. Show labels properly aligned with fields. Avoid vague directions and poorly placed copy boxes that derail users. When forms are out of whack, users skip steps, miss entries, and drop off.
What to do until the copywriter shows up: Ask yourself what you’d want in a form. Then add that info. Offer logical explanatory steps, defined labels, “starter” hint text in fields, or confirmation messages beneath text boxes. And don’t forget error messages. Write them with the kind of details and support you’d require.
Help Text
Help text only works if it actually helps someone, right? Clickable copy for each cute little info icon must be purposeful, specific, succinct, and, um, useful. You don’t want the help text to be longer than the page it explains. And you certainly don’t want a “What’s this?” explanation to become a “What do I care?” reaction.
What to do until the copywriter shows up: Jot down what copywriters call “teaser” text, or just enough info to satisfy a basic question. For example, a billing form might ask a user for a credit card code. You could explain the request (and comfort the user) by displaying a help icon with pop-up copy. Once you write suggested copy, ask a product manager or legal rep to look it over.
Lists
We all make to-do lists (and half of the fun is scratching items off a list), though designers and writers create lists for other people, too. Handy bulleted or numbered lists for menus, steps, and polls are everywhere on websites to speed users through their tasks. Ideally, these lists are ultra-manageable for users, so the list items are short, relevant, and actionable.
What to do until the copywriter shows up: Write lists in alpha order. Where needed for phrases, use all nouns or all verbs to keep items in parallel format (that’s copywriter-speak for easy to read). Minimize entries. Many studies have shown that users lose track (get bored) when having to choose from more than 5–8 selections.
Modals
Ubiquitous webpage modal boxes are among the most debated components for designers and writers. If you’re a designer, you’ll use the box to show a user what to do next. If you’re a copywriter, you’ll use the box to tell a user why the action matters. The UX strategy tug-of-war involves how big and busy the modal needs to be.
What to do until the copywriter shows up: Avoid the temptation to load up a box with copy. Simply include a header, blurb, and call-to-action. Done. Copywriters not on their best behavior like to tell the same thing several ways, crowding a design with copy and overwhelming a user’s common sense.
Navigation
Website users care a lot about how they get around your site. And like the able designer/tour guide you are, you want to give them a good look at everything they came to see. Navigation is about orientation. Make the navigation options easy to spot and understand, and you’ll assure the user recognizes getting from Point A to Point B (and back again).
What to do until the copywriter shows up: Navigation copy is pretty easy to represent. Just pop in a few channel titles, and you’re set. Not completely. You can also aim for terms that help with site searches. Skip the copywriter (much as it pains me to suggest this), and simply consult your team’s SEO guru for the latest top-performing keywords to enhance navigation.
Notifications
“Oh-oh. Something is happening. Did I just push a button I wasn’t supposed to?” Don’t leave your website users in dismay. Designers may like to create big, eye-blinding red alert bars to get the most user attention. But not all alerts are necessarily alarms. Notification copy must suit the occasion. So you can share messages like “Everything’s great” in green, “Yikes, you need to know this” in yellow, and “Call the support team right now” in red.
What to do until the copywriter shows up: Just like you’d yell “Go” to start a race, use only the most critical wording to share a notification. In a webpage bar, the point is to communicate the essential message “at a glance” (and not introduce multi-level meaning). If you’re not a wordsmith, you can still write short, direct copy that drives users to a basic understanding and action.
Numbers
For your web sales team peers, a profitable project is often about chasing the numbers. Don’t smirk, you need to watch numbers, too, just not the money kind. UX numbers in your designs include all kinds of difference-makers for website users: prices, time-stamps, measurements, due dates, dimensions, contact phone numbers, and more. Take note how copywriters present these with precision.
What to do until the copywriter shows up: Drop legit numbers into your designs, but avoid jamming one kind of number next to another (e.g., time + date). Also make sure columns of numbers align properly (tables are our friends). Double-check contradicting figures. I like to interview stakeholders early and late in a project to be sure the numbers are good to go. Just so I’m not, you know, giving out the boss’s personal mobile number.
Truncation
Raise your hand if you know what this term means. Great, then you know to manage word/character count limits (unlike some verbose copywriters — present author excepted). There are design rules and regs defined to limit line length and truncate (“chop off”) run-over copy. There is an art to the act of curtailing copy.
What to do until the copywriter shows up: In general, for a list page, you can limit items with descriptive body copy to two or three lines. More than that, and users get lost in the writer’s weeds. (Avoid resorting to accordions, or expandable boxes, just to stuff more copy.) If you have a dynamic copy option, call up the first few sentences from the intro of a blog, article, study, etc. Otherwise, ask for your team’s rules citing where a line must trail off.
Voice
Color has tone. Copy does, too. The website tone of voice conveys an attitude toward users. I like my website “host” to be like a hotel concierge, who is always available at the lobby desk with insider tips on the best local restaurants, site-seeing, and exclusive events. In UX terms, the website personality is also an accessible, knowing, caring, and professional friend in need.
What to do until the copywriter shows up: If you need to compose a headline, blurb, intro, or similar expressive copy, just write like you talk. Sounds easy enough, huh? The trick is to emphasize helpful ideas (given your topic) and minimize chit-chat. Maintain a sincere, to-the-point conversation. Whatever your design goal, remember you’re always sharing shop talk with users.
Hopefully, the above advice helps you compose like a copywriter, or just look like one. And if you’re still not sure what to write or where to write it, you can always give your team copywriter a plea for more help. That and cash tips.
My thanks to Dan Harrelson and Diana Freeman-Baer for their support.
