July 23, 2024 Smashing Newsletter: Issue #466
This newsletter issue was sent out to 198,708 subscribers on Tuesday, July 23, 2024.
Editorial
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 of your digital product.
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.
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.
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 is to 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?
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)
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.
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.
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, and marketing, but also how to talk to customers. Inspiration and lots of valuable takeaways are guaranteed.
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 of 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.
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 →
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 Geoff Graham (gg), Cosima Mielke (cm), Vitaly Friedman (vf), and Iris Lješnjanin (il).
Smashing Newsletter
Front-end, design and UX. Sent out 1× a week.You can always unsubscribe with just one click.