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.
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:
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: 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)
From our sponsor
Stop Coding Forms With Fully-Integrated Drag-and-Drop Form Builder
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.
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.
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. 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.
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.
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?
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
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
