Smashing Newsletter: Issue #377

Editorial

Words matter. They matter when we speak them loudly, and they matter when remain silent. They matter when they are on labels and on buttons, but also when they occasionally appear in error messages and notifications. And the way we use them in tandem with voice and tone defines the perception our products have and the emotional connections they establish.

Copywriting isn’t UX writing. While the former explains the product in articles and marketing newsletters, the latter lives within the product in words we carefully place on each page.

But how exactly would you integrate UX writing into the design process? And what are some of the useful guidelines and best practices to keep in mind when working on UX writing? This is exactly what this newsletter is about — with plenty of tools and resources to get you started.

Smashing Meets Design Systems — Meet Smashing Meets: Design Systems (Tue, Nov 15), our regular online gathering — this time all around design systems.

That’s also what we will be exploring (at least partly) at our upcoming Design Systems Meets (Tue, Nov 15), a free community event that we organize for wonderful people just like yourself. Of course, we also have some friendly online workshops all around front-end & UX.

In the meantime though, off we go into the world of UX writing — happy explorations, everyone!

— Vitaly (@vitalyf)

1. Readability Guidelines

What if there was one place where the community shared knowledge and created a universal content style guide that was accessible, usable, and evidenced? That was the idea Sarah Winters of Content Design London had back in 2018. The result is the Readability Guidelines wiki.

For the Readability Guidelines, content collaborators from multiple sectors worked together to answer readability questions and develop a set of consistent guidelines to improve readability and usability. You can explore the wiki’s more than 100 guidelines or get involved in the project to help it evolve. The topics covered range from clear language and grammar points to content design and images. (cm)

2. Better Error Messages

“Something went wrong.” There’s hardly anything worse than telling a user their input is invalid without giving them hints as to why that is or how they can fix it. But how can we do better? What can we do to improve our error messages to make it easy for the user to recover from form errors?

In his post on the Baymard blog, Jamie Holst explores how the wording of validation error messages determines the user’s error recovery experience and how “Adaptive Error Messages” can significantly reduce the time a user needs to fix an error.

In her blog post “When life gives you lemons, write better error messages,” Jenni Nadler shares valuable insights into how her team at Wix changed thousands of error messages across the platform in just a month. She shares how they defined what counted as a bad error message and what counted as a good error message. Valuable tips that you can incorporate into your work right away.

Vitaly Friedman dives deep into the UX of error messages. In his article “Designing Better Error Messages UX,” he explores when error messages should live above input fields and why toast error messages are usually not a good idea. (cm)

3. Manage Your Copy

In many teams, copy is something you paste from an email or a Slack chat. There’s no single place to iterate on it or to get feedback, the way there is for design. Andrea Drugay shares a simple yet effective way to improve the way you deal with copy: copy docs.

Improve Your Design Process With Copy Docs

A copy doc is the one stop for everything copy-related in a project, one document that holds all your copy — from the landing page to onboarding emails. Your copy doc can be a simple Word document, Dropbox Paper, Google Doc, or whatever else you might prefer. If you want to give it a try, Andrea shares some valuable tips on setting up a copy doc.

Are you looking for a more advanced solution? Ditto is a lovely tool that acts as a single place to manage the copy in all of its stages. It allows you to build a text component library, track all copy changes, and review and discuss edits, too. (cm)

4. Better UI Copy

Helping you with copy that converts, and perhaps even make you smile. That’s the mission of UI Copy. The plugin for Figma and Adobe XD contains pre-built templates for your UI. It’s not generated randomly or with the help of AI but is curated by real humans to give it a personal touch.

To build the repository of words and phrases, the team behind UI Copy analyzed thousands of conversion-oriented websites and used years of experience to think up words and phrases that are engaging to read. Whether your brand’s voice is formal or informal, UI Copy delivers copywriting ideas bound to remove your writer’s block. Available only with a subscription. (cm)

5. The UX Writing Library

Whether you want to stay on top of the game or are taking your first steps into the world of UX writing and content design, the UX Writing Library gathers plenty of useful resources in the field.

Curated by UX writer and microcopy expert Kinneret Yifrah, the library organizes books, blogs, communities, online courses, events, podcasts, newsletters, and everything in between in a way that is easy to navigate and use. If you know of a resource that isn’t featured yet, you are welcome to submit it. A great hub to get a current and focused overview of the field. (cm)

6. Upcoming Design & UX Workshops

That’s right! We run hands-on online workshops, be it accessibility, navigation, 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 an overview of our upcoming workshops:

Pushing CSS to The Limit Dev
with Amit Sheen. Nov 2–10
Deep Dive On Accessibility Testing Dev
with Manuel Matuzović. Nov 14–28
Mastering the Design Process Workflow
with Paul Boag. Nov 15–23
Designing The Perfect Web Forms UX
with Vitaly Friedman. Nov 17–18
Figma Workflow Masterclass UX
with Christine Vallaure. Nov 17 – Dec 1
Creating Successful Design Systems Workflow
with Brad Frost. Jan 10 – 24
Smart Interface Design Patterns (Video Library + Live UX Training) UX
with Vitaly Friedman. Mar 10 – Apr 7
Jump to all Smashing Workshops →

7. When Words And Tech Meet

#writingTech is the place where words and technology meet. The site provides you with information, tools, and resources to leverage the newest tech to take your content and localization workflows to the next level. A special focus lies on AI.

In the reading zone, you’ll explore design, branding, AI copywriting, UX writing, and localization. The section on tools gives you an overview of tools that generate AI copy and help with content management, as well as tools for localization and translation management. (cm)

8. Copywriting Inspiration

Do you need some copywriting inspiration? Copywriting Examples collects copy examples — from vintage ads to marketing copy from modern startups and global tech players — and breaks down why the copy works. You can filter out the examples by type, style, and audience. Interesting insights into how little details shape a message.

Whenever you need copy for a design or if you get stuck in the middle of development, Copy Book has got your back. The site features commonly used texts for anything from features and accounts to upsell and authentication. You can browse the collection by tag, category, and even mood.

Speak Human is also a great little gem. It generates human-centric microcopy for various purposes, from errors to confirmation messages. Not ideal for copy-pasting, of course, but useful to inspire us all to write better copy.

If you need a helping hand with emails, Good Email Copy highlights examples of email copywriting, tagged and grouped, with search. There aren’t that many examples for each topic, but it might be just enough to help out when help is needed. (cm)

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).

November 1, 2022 Smashing Newsletter: Issue #377

Previous Issues