Smashing Magazine - #444: UX Writing

Voice and tone, content design process, plain language guidelines and UX writing in design systems. Issue #444 Feb 20, 2024 View in the browser

Smashing Newsletter

Howdy Smashing Friends,

Words matter. The way they are spoken matters, too. The voice and tone. The rhythm and pace. The words not said. And in a digital product, there is rarely anything that guides people in the right direction better than a well-crafted message.

Designing an interface also means choosing the right words, finding the right voice and adapting the tone to the situation in which a user finds themselves.

In this newsletter, we look at words and how they are spoken — through the lens of UX writing. With plenty of useful guidelines, resources and examples from design systems for everything that shapes it.

SmashingConf Antwerp 2024
What’s the future like for design systems? Let’s find out! On Tuesday, February 27: The Future of Design Systems.

If you’d like to dive a bit deeper into UX writing, we of course have a few community events, workshops and conferences in 2024 — with early birds and friendly bundles for teams:

Happy reading and writing, everyone — and we hope you’ll find these resources helpful for your work!


1. Voice And Tone In Design Systems

Playful, worldly, thoughtful, concise. The voice of a product is as unique as the product itself. If you are about to develop a voice and tone for your brand, how about some inspiration from how other brands do it?

Zen Garden Design System

In their Garden design system, the Zendesk team not only highlights how to sound like Zendesk, but they also introduce the framework they use to determine which brand tone to use when.

The Girlguiding tone of voice guidelines captures the brand’s idea of welcoming all: simple language and clear structure make communication accessible, including for people who use assistive technologies or have cognitive or reading problems. The stylistic choices are based on readability research, and evidence for the decisions is sprinkled throughout the guidelines.

The A Progressive’s Style Guide (PDF) by SumOfUs invites drivers of progressive change to combat discriminatory language and reflect a broad range of identities and perspectives. It raises awareness for issue areas such as age, disability, economy, gender, health, immigration, ethnicity, and violence. (cm)

2. Guidelines For Clear And Thoughtful Writing

Words are powerful. But how to choose the right ones to get your message across clearly and effectively? The Plain Language guidelines are a great place to start. They walk you through the complete process of setting up a clear writing strategy — from discussing your audience and developing a good organization to enhancing your writing with writing principles.

The Micropedia Of Microaggressions

Another fantastic resource to take your writing to the next level are the Readability Guidelines by Content Design London. To develop a set of universal guidelines for improving readability and usability, content collaborators from multiple sectors worked together and distilled their expertise into an evidence-based content style guide.

With great power also comes great responsibility. Language, Please offers useful style guide to help you thoughtfully approach evolving social, cultural, and identity-related topics, be it class and social standing, gender, ethnicity, religion, or mental health.

That’s also the aim of the Micropedia of Microaggressions. It raises awareness for everyday snubs and insults that marginalized groups face and offers practical advice for choosing words more carefully to avoid harmful and offending wording. (cm)

3. Guide To UX Copywriting

Language plays a crucial role in shaping the personality of your product and creating an on-brand experience. Quinn Keast wrote a comprehensive guide to UX copywriting, with style guidelines and examples you can reference while building products and interfaces.

UX Language

Quinn’s UX Language guide helps you create consistency in your writing with tone and voice, empower your team to write clear and effective content, and drive positive change in language standards by creating inclusive and respectful products. To provide realistic and useful examples, the guidelines are built to support a fictional product.

You can reuse them as a framework and adapt them to your own copywriting and style guidelines. The starter kit for doing so is available under an MIT license. (cm)

From our sponsor

A Newsletter Helping Engineers Flex Their Product Muscle

Product for Engineers is a newsletter from PostHog dedicated to helping engineers improve their product skills. Subscribe for free to get curated advice on building great products, lessons (and mistakes) from PostHog, and deep dives into the strategies of top startups.

4. Voice Principles And Tone Map

A lot of things impact how your writing comes across: word choice, word length, phrase length, grammar, syntax. Voice principles and a tone map are a great way to strategically approach UX writing — to keep things consistent and find the right tone for different kinds of situations. If you plan to set up voice principles and a tone map for your brand, be sure to check out Paavan’s useful guide.

UX writing: Using voice principles and a tone map to write consistently

While voice is part of your brand’s personality and influences how users perceive the brand, tone is contextual. An error message may call for a more serious and concise tone, for example, while onboarding may be more fun and detailed. Paavan shows you how to set up a tone map and plot each stage of the user journey on it. A great way to become more conscious of your UX writing decisions. (cm)

5. Upcoming Workshops and Conferences

That’s right! We run online workshops on frontend and design, be it accessibility, performance, or design patterns. In fact, we have a couple of workshops coming up soon, and we thought that, you know, you might want to join in as well.

Smashing Online Events
With online workshops, we aim to give you the same experience and access to experts as in an in-person workshop from wherever you are.

As always, here’s a quick overview:

6. Content In The Product Design Process

How and when should content designers be involved in the product design process? Rachel McConnell has a clear answer: at every stage. She argues that content design and the design process need to work hand in hand. Content can’t be created effectively without involving content designers already at the context and discovery stage. And without involving them during testing, content designers don’t know if they’ve achieved success.

Content in the product design process

To illustrate the role of content designers and explain to product designers how to get the best valueback can be help from them, Rachel created a diagram. It shows what content designers do at each stage of a user-centered design process and explores methodology, techniques, or tools that may be used. (cm)

7. How To Avoid Content By Committee

For a UX writer there’s probably nothing more frustrating than people leaving all kinds of copy suggestions and requests in their Figma files. Feedback can be helpful, of course, but not if it is based on opinions rather than real UX needs. So, how can you avoid “copy by committee”? Ben Davies-Romano shares an interesting approach: acceptance criteria.

How to avoid UX content by committee with acceptance criteria

Whenever Ben is working on interface copy that he assumes will get a lot of feedback, he defines acceptance criteria before he drafts anything. Acceptance criteria is simply a list with everything the user must know and should know. Once he has defined the criteria, he reviews it with stakeholders.

They can still give feedback and share ideas, but the acceptance criteria ensures that the discussion focuses on the UX behind the content instead of opinion. (cm)

8. Smashing Books 📚

Promoting best practices and providing you with practical tips to master your daily coding and design challenges has always been at the core of everything we do at Smashing.

In the past few years, we were very lucky to have worked together with some talented, caring people from the web community to publish their wealth of experience as printed books. Have you checked them out already?

Success At Scale
Also meet our newest Smashing Book: Success At Scale. Print shipping in early March, eBook now available. Pre-order your copy or browse the complete library.

9. Recent Smashing Articles

That’s All, Folks!

Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next time!

This newsletter issue was written and edited by Cosima Mielke (cm), Vitaly Friedman (vf) and Iris Lješnjanin (il).

Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You

Follow us on Twitter Join us on Facebook

unsubscribe update preferences view in your browser

Older messages

#443: UX Research

Tuesday, February 13, 2024

A complete guide to user interviews, UX research launch pad and how to build up UX research from scratch. Issue #443 • Feb 13, 2024 • View in the browser 💨 Smashing Newsletter Tere õhtust Smashing

#442: Sustainable Front-End and UX

Tuesday, February 6, 2024

Product design guidelines for sustainable UX, podcasts, books, newsletter, checklists, UX patterns and front-end optimizations. Issue #442 • Feb 6, 2024 • View in the browser Smashing Newsletter

#441: Legacy Systems and UX Migration

Tuesday, January 30, 2024

How to manage legacy code base, UX migration, redesign and how to design with legacy systems. Issue #441 • Jan 30, 2024 • View in the browser Smashing Newsletter Labą dieną Smashing Friends, Legacy isn

#440: Interface Design

Tuesday, January 23, 2024

Design better animations, typography, icons and use Gestalt principles in product design. Issue #440 • Jan 23, 2024 • View in the browser Smashing Newsletter Konbanwa Smashing Friends, Interface design

#439: Accessibility and Inclusive Design

Tuesday, January 16, 2024

Playbook for universal design, accessible target sizes and tools for accessible design, annotations and brand colors. Issue #439 • Jan 16, 2024 • View in the browser Smashing Newsletter Latha math

You Might Also Like

The Color Secrets Pros Swear By

Thursday, July 11, 2024

View in your browser | Update your preferences ADPro Keeping Up With Color It seems there's a new hot topic in color every week. This year alone, we've seen the “unexpected red” theory take

What’s Behind a Microtrend?

Tuesday, July 9, 2024

View in your browser | Update your preferences ADPro If you've ever wondered about the next big decor moment or debated dipping a toe into TikTok, AD's Senior Digital Design Editor Sydney Gore

#464: Friendly Little Helpers

Tuesday, July 9, 2024

Radio time machine, reverse dictionary, micropedia and templates on how to say No and Goodbye with grace. Issue #464 • July 9, 2024 • View in the browser Smashing Newsletter Gamarjoba Smashing Friends,

Accessibility Weekly #404: Overlays Misunderstand Accessibility

Monday, July 8, 2024

July 8, 2024 • Issue #404 View this issue online or browse the full issue archive. Featured: Overlays misunderstand accessibility "Accessibility overlays are a peculiar approach to accessibility

Reflections from Config

Sunday, July 7, 2024

Issue 202: Thoughts from the annual Figma conference ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Athena Calderone and Young Huh’s Savviest Social Media Advice

Tuesday, July 2, 2024

View in your browser | Update your preferences ADPro As we head into the July 4th holiday, we're revisiting some of our most popular business tips. Among our faves: This conversation on social

#463: Data Visualization

Tuesday, July 2, 2024

Data visualization in design systems, visual data visualization vocabulary, decision trees, color scales and accessible charts. Issue #463 • July 2, 2024 • View in the browser Smashing Newsletter Hello

Accessibility Weekly #403: In Detail - 1.4.11 Non-Text Contrast

Monday, July 1, 2024

June 24, 2024 • Issue #403 View this issue online or browse the full issue archive. Featured: In detail: 1.4.11 Non-Text Contrast (User Interface Components) "The Web Content Accessibility

Spotlight: Kate Syuma

Sunday, June 30, 2024

Issue 201: A conversation on scaling at Miro, Growthmates, and advising ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Inside Balsamiq: our new approach to internal product training

Thursday, June 27, 2024

Streamlining our team's product knowledge ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏