#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. [Future of Design Systems]( 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: - [Free Workshop: Designing Search UX In 2024]( with Vitaly Friedman — Feb 29 - [Smart Interface Design Patterns: Live UX Training]( 🍣 with Vitaly Friedman — Mar 7 – Apr 10 (last tickets!) - [Smashing Hour with Nathan Curtis]( — Mar 14 - [SmashingConf Freiburg 2024]( 🇩🇪 — The Web, Sep 9–11 - [SmashingConf NY 2024]( 🇺🇸 — Front-End & UX, Oct 7–10 - [SmashingConf Antwerp 2024]( 🇧🇪 — Design & UX, Oct 28–31 Happy reading and writing, everyone — and we hope you’ll find these resources helpful for your work! — [Vitaly]( --------------------------------------------------------------- 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 [PostHog]( 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 Workshops]( 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: - [Interface Design Patterns Live UX Training]( UX with Vitaly Friedman. Mar 8 – Apr 5 — [last tickets]( - [Resilient & Maintainable CSS]( Dev with Miriam Suzanne. Feb 26 – Mar 12 - [Scalable CSS Masterclass]( Dev with Andy Bell. May 9–23 - [Jump to all workshops →]( --------------------------------------------------------------- 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? - [Understanding Privacy]( by Heather Burns - [Touch Design for Mobile Interfaces]( by Steven Hoober - [Image Optimization]( by Addy Osmani - [Check out all books →]( [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 - [Mobile Accessibility Barriers For Assistive Technology Users]( - [How Accessibility Standards Can Empower Better Chart Visual Design]( - [A Practical Guide To Designing For Children]( - [How To Draw Radar Charts In Web]( - [Frequently Heard In My Beginning Front-End Web Development Class]( --------------------------------------------------------------- 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 rock. [Follow us on Twitter]( • [Join us on Facebook]( Weekly issues with useful tips for web devs. Email: newsletter@smashingmagazine.com. [unsubscribe]( • [update preferences]( • [view in your browser](