Stop Writing Web Copy That Over Explains Everything

Posted by in Design, Digital Marketing, UX Design

We’ve been working really hard at Mightybytes lately to marry content strategy and design. For a long time, these two disciplines existed in silos, which meant that when we built a website, a designer would create wireframes using placeholder text, then a content person would add the actual web copy later, once the designs were approved by the client.

Image of landing page wireframe
An example of a wireframe with placeholder copy that a writer will need to fill in. Credit

This put the web copy writer in a bit of a bind. They now had a client-approved design mandate to write text in certain “buckets” on the website, but sometimes, text just didn’t belong there.

Why We Write Such Bad Web Copy

Sometimes, important ideas on a page can be conveyed by design alone. When a writer tries to add copy based on a design mandate, that copy is often redundant. Without a real need to communicate, writers write explainer text to introduce design elements. Rarely is this copy helpful. It’s similar to the mandatory 15-second voicemail instructions on everyone’s voicemail.

Screenshot of homepage for Frank J. Glinsky, PC. Attorneys at Law
The “welcome to our website” issue: one of the most obvious content and design redundancies. The “Follow Us” copy above the social icons is also unnecessary.

You see this copy on the web all the time, but you’ve mostly learned to ignore it. It wasn’t until we made a conscious effort to “show, don’t tell” with our designs that we started to notice how often copy on a website literally welcomes you to the website, as if you’ve been on a long journey through the tangles of the world wide web and finally arrived at your destination. A print ad wouldn’t read, “Welcome to the print ad we purchased in this magazine.” But when it comes to writing for the web, people have a tendency to get literal. It’s not the designer’s fault. In fact, designers often write placeholder copy that’s so good it ends up in the final design. But they’re more focused on the visual elements of the page than the words, so sometimes “welcome to my website” ends up in the final deliverable.

Screenshot of Naples homes showing extraneous web copy
This copy explains how to perform and save searches. In 2015, your website visitors already know how to do this. Design should clarify complex search elements, not copy.

The ‘Click Here’ Issue

Web writers inherited bad habits from the early days of the internet when site visitors may not have known what a hyperlink did. People who have an interest in setting web standards have been on a campaign for years to get people to stop writing “click here.” But it’s harder to curb the unseen ways in which explainer copy creeps over buttons, web forms and other design elements.

If a designer and a content strategist work together to create wireframes, placing copy and design elements on the page simultaneously, it’s easier to avoid writing copy where none should exist. If you don’t inherit placeholder “lorem ipsum” copy, you don’t have to rewrite it.

Writing For the Web is Actually Really Hard

Still, even when designers and writers work in tandem, it’s hard to figure out where design ends and copy begins. Writing for the web is unlike writing for any other medium. On certain page elements, a writer has to combine the skills of a persuasive ad copywriter with the skills of an icon designer, writing copy that not only explains the direction a website visitor should go, but why they should go there. Designers are lucky to have a library of symbols to fall back on when they need to communicate complex ideas. While there are some widely accepted content standards around writing button copy, for instance, those same standards don’t exist for, say, writing headlines for a pricing chart.

I was recently working with one of our designers on an element for a client website. The wireframe looked something like this:

screenshot of wireframe for continue button

When the user clicks “continue,” they land on a much larger web form. So the box needs to not only explain that clicking a button will lead the user to an exciting form-filling-out destination, but it needs to entice the viewer to start the process of filling out that form (leading to a conversion). That’s a tall order. Now combine that with inherited placeholder text and you not only have to explain and entice, but you have to do that with a headline, secondary copy, and two buttons.

screenshot of call to action wireframe

This wireframe looks ridiculous, but it’s not uncommon to see web copy over explaining page elements like this. In fact, almost every website does it somewhere because writers and designers aren’t working together to create elements that make sense for website visitors. Working together, we came up with a different approach — one with simplified copy and only a single button. It’s not perfect, but it’s a running start.

screenshot of dream vacation call to action

Trust That Your Visitors Know What To Do

We need to trust that users know what to do with a button, and that if we design the right interfaces, once they click that button, they’ll continue to move through the funnel. In 2015, your website visitors know how to close out of a window, fill out a form, adjust sliders, and generally interact with web interfaces. So we need to design and write with that trust in mind.

screenshot of inventively homepage call to action
This high-level copy does not acknowledge the buttons beneath it. It assumes the user will understand how to interact with them.

Try It Without Copy

When designers and writers combine efforts, it’s easy to see places where copy doesn’t need to exist. It’s hard to get over our “Welcome to Our Website, Click Here to Learn More,” mentality, but if we design intuitive interfaces that make sense, we won’t need writing to explain them.

screenshot of American Spine showing a conflicting h1 and header image
If a designer and a writer were working together here, this header might have been designed differently.

This might sound terrifying to content strategists who think designers can design them out of a job, but it’s just as important for content strategists to tell us when we don’t need text as much as where we do.

screenshot of a website showing's simple form design to solve a complex idea
Everything you need to know about how Adioso works is explained in the form design, not with text. Because TLDR.

How to Break the Habit

It’s easier to stop writing bad web copy if we’re aware we’re doing it. Here are some things to keep in mind when writing for the web

  1. Don’t write copy that explains how to interact with elements on the page. Good design will take care of that.
  2. Trust your users. Stick to writing copy that satisfies the reason they’re visiting your page by talking about what you’re there to talk about: your product or service.
  3. While a good “thank you” page still has a purpose, a “Welcome” page, or page element, does not. Stop writing them.
  4. Break out of design mandates. If a designer designs you into a corner, work together to recreate an element so you’re not forced into writing too much copy.
  5. If you’re unsure whether your sparse copy is enough, test it. Watch as people interact with your website (get a mix of ages and experience levels) to ensure that visitors know how to move through your virtual space.

Remember that writing better copy is an ongoing practice. Definitely don’t look through the Mightybytes website to make sure we’re adhering to all the standards we’ve set forth in this post. Just work on making them work for you moving forward.

Mightybytes is a Chicago-based digital agency and Certified B Corporation. Connect with us on Twitter or get in touch via our contact form.