#466: UX Writing and Content Design

Error messages UX, content design system, voice and tone, experience mapping and placeholders. Issue #466 • July 23, 2024 • [View in the browser]( [Smashing Newsletter]( Sveiki Smashing Friends, Content design is often perceived as embellishment, or a technical role for publishing and archiving, or something that’s distributed across UX designers, UX writers and product designers. But it’s a valuable — and often overlooked — role that can make a huge difference in reaching the audience effectively, across all channels. Content designers shape the message. In the right way, across the right channels. So it arrives when it’s needed — leaving no questions or doubts or worries or concerns. In the end, [in Sarah Winters’ words]( “It’s about serving users well, with the content they need and can easily understand.” When the work is done, we have a complete picture. We know what content our users need at each step of their journey. We know the language they use, how they think and the emotions they go through. It’s all that’s needed to create content that helps create an outstanding UX. In this newsletter, we look at how to design just that content — with content design guidelines and some bits on UX writing. We hope it will be helpful for you to shape and refine the content in your digital product. [A Smashing Hour with… Dave Rupert]( [Mark your calendars!]( Join us for a Smashing Hour with Dave Rupert and Geoff Graham. Bonus: you can ask them anything you like! If you’d like to dive a bit deeper into UX writing, we, of course, have a nice number of [online workshops]( and live on-site conferences coming up soon: - [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. Content Design Below The Surface Content design goes far beyond words and other obvious pieces of content like videos, infographics, or images. And it also goes much deeper than a message in a popup or a set of docs. Linette Voller explores [what’s beyond the surface of content design](. [Content Design Below The Surface]( To help us create user experiences that feel more intuitive and cater better to users’ needs, Linette defines five levels of content design: the surface level, the skeleton level, the structure level, the scope, and the strategy level. Each level impacts the ones above it, so the lower the level, the bigger its return. A wonderful, concise overview of the topic with further reading resources in case you want to, literally, dive deeper. (cm) --------------------------------------------------------------- 2. Stop Using Placeholders We’ve all come across forms where the hint or even the form label is placed directly inside the form field. And while the design decision saves space and has a nice minimal aesthetic, it can hurt usability more than aid it. [The problem with placeholders and what to do instead]( In his post “[Why you should stop using placeholders in text boxes]( Daniel Berryhill explains the problems it can cause and what we can do instead to make crucial or helpful information always visible. Caroline Jarrett also [advocates against the practice](. She argues that hint text in form fields is rarely effective as a way of helping users, but instead becomes a default input. Katie Sherwin from the Nielsen Norman Group argues that placeholder text within a form field makes it difficult for people to remember what information belongs in a field, and to check for and fix errors. She [recommends floating labels]( as a better and more accessible alternative. Adam Silver also summarized [reasons why you shouldn’t rely on placeholders](. His solution to save space without hurting usability and accessibility: Put the text above the input to give users access to the content they need, when they need it. (cm) --------------------------------------------------------------- 3. Better Error Messages No one likes encountering an error when browsing the web or interacting with a product, but while some errors are just a bit annoying, others are downright horrific. So how can we make sure our error messages reflect that? How do we find the right tone to reassure users that we’ve got their back, no matter how bad the situation might be? [When life gives you lemons, write better error messages]( Rhiannon Jones shares the [three-step framework]( that she and her team at Deliveroo used to rewrite every error message in their customer product. It grades errors by impact and defines different approaches for different kinds of errors. An effective technique that not only improves the quality of your content but also makes the writing and review process faster and more reliable. Another fantastic case study on how a team tackles error messages comes from Jenni Nadler. In her blog post “[When life gives you lemons, write better error messages]( Jenni shares insights into how her team at Wix mastered the mammoth task of changing thousands of error messages across the platform in just a month. Practical tips you can incorporate into your work right away. (cm) --------------------------------------------------------------- From our sponsor Stop Coding Forms With Fully-Integrated Drag-and-Drop Form Builder [SurveyJS]( [SurveyJS]( is a product suite of open-source JavaScript client-side components designed to simplify the creation of a full-cycle form management system fully integrated in your IT infrastructure. The libraries utilize JSON objects for form metadata and results, and seamlessly integrate with any backend system. The JSON form builder component offers a user-friendly drag-and-drop interface, GUI for form branching, and an integrated CSS theme editor for customizing form design. Check out its free [full-featured demo]( to explore its capabilities firsthand. --------------------------------------------------------------- 4. Experience Mapping For UX Writers Have you ever considered using experience mapping to plan your written copy? If not, now might be the perfect time to give it a try. Amy Leak wrote a handy guide on [how UX writers can tweak experience mapping]( to take a content-first approach. [Experience mapping for UX Writers]( The process helps you dissect any experience from start to finish to plan a strategy for talking to your users in the right way, in the right place, at the right time. By mapping out the different stages of an experience and what the user is thinking and feeling at each stage, you get a better idea of what copy and tone of voice is needed to answer your user’s needs. A fantastic tool to create a meaningful conversation. (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: - [Behavioral Design Workshop]( UX with Susan and Guthrie Weinschenk. Aug 22 – Sept 5 - [Creating and Maintaining Successful Design Systems]( workflow with Brad Frost. Aug 27 – Sept 10 - [Inclusive Design Patterns For 2025]( FREE with Vitaly Friedman. Sept 24 - [Cascading Style Systems: Resilient & Maintainable CSS]( dev with Miriam Suzanne. Oct 14–18 - [Accessible Typography for Web & UI Design Masterclass]( design with Oliver Schöndorfer. Oct 10–18 - [Smart Interface Design Patterns]( ux with Vitaly Friedman. Video + Live UX Training - [Jump to all workshops →]( --------------------------------------------------------------- 6. Intuit Content Design How do other companies tackle content design? The [Content Design System by the folks at Intuit]( is a wonderful, comprehensive example of what a system for content designers, UX writers, and IA architects can look like. It covers voice and tone, accessibility and inclusion, style, wording, AI, marketing, but also how to talk to customers. Inspiration and lots of valuable takeaways are guaranteed. [Intuit Content Design System]( For more real-world content design insights, also be sure to take a look at Vitaly’s [compilation of design systems]( to check out. He also added some useful resources for embedding content design in your own design system and language guidelines that might be helpful. One for the bookmarks. (cm) --------------------------------------------------------------- 7. Designing Voice And Tone In UX writing, the voice is a brand’s personality, the tone its attitude. So while the voice never changes, the tone adapts to the situation and the user’s emotional state. When they are satisfied, you can sound confident, enthusiastic, or even playful. But when they are confused, be helpful, honest, and direct. [Designing Voice and Tone In UX Writing]( To help you get voice and tone right and communicate effectively — whether your users fail or succeed — Vitaly summarized practical [tips, resources, and examples from real-world design systems](. Today, the conversation with users isn’t limited to written words any longer, though, which brings along quite some new challenges. So, what do you need to keep in mind when designing voice UX for products that support or rely on audio input? Vitaly’s [overview of tips, useful resources, and Figma kits]( helps you master the challenge. (cm) --------------------------------------------------------------- 8. Recently Published 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]( by Addy Osmani - [Understanding Privacy]( by Heather Burns - [Touch Design for Mobile Interfaces]( by Steven Hoober - [Check out all books →]( [Success At Scale]( It’s here, and it’s shipping! [Success At Scale]( a new book by Addy Osmani. [Get the book]( or [browse the complete library](. --------------------------------------------------------------- 9. Recent Smashing Articles - [Getting To The Bottom Of Minimum WCAG-Conformant Interactive Element Size]( - [Build Design Systems With Penpot Components]( - [How To Design Effective Conversational AI Experiences: A Comprehensive Guide]( - [When Friction Is A Good Thing: Designing Sustainable E-Commerce Experiences]( --------------------------------------------------------------- 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](