#319: Microcopy and UX Writing

Better microcopy for inclusive, accessible products, tooling to write and maintain and microcopy, and a bit of copy inspiration. Issue #319 • September 21, 2021 • [View in the browser]( 💨 [Smashing Newsletter]( Cześć Smashing Friends, Great writing is at the heart of every great interface. With a good choice of words, we can do more than just communicate our thoroughly crafted messages. By choosing the right voice and tone, we can express our attitude and our gratitude. By being concise and precise, we can help resolve issues. By being welcome and warm-hearted, we can build loyalty, trust and relationships. In this newsletter, we look into good copywriting. We explore how to write inclusive, accessible products, how to optimize microcopy, the tooling to assist and maintain copywriting as well as a bit of friendly microcopy and email copy inspiration. [Frustrating Design Patterns in 2021]( Free 2.5h-long online workshop on [Frustrating Design Patterns in 2021]( with Vitaly Friedman. We'll also look at microcopy in our upcoming free workshop on [Frustrating Design Patterns in 2021]( with yours truly, a free 2.5h-long online session in which we'll explore common frustrations that we experience on the web daily, and some smart design patterns to fix them for good. [Register for free]( add the event to your calendar, and don't be late! And if you are interested in web performance, we have [our free web performance meet-up]( coming on Thursday, September 30, 9:00 AM PDT. With sessions on HTTP/3, image optimization and the performance culture by Tammy Everts, Addy Osmani and Robin Marx. — Vitaly ([@smashingmag]( --------------------------------------------------------------- 1. Writing Inclusive, Accessible Products Read your writing out loud. That’s the [number one advice that Nick DiLallo gives]( to anyone who writes digital products. It not only helps you detach from your work to catch things you might have missed, but it’s also an approximation for how a screen reader works, and, thus, the first step to making sure your interface doesn’t leave anyone out. [How to write inclusive, accessible digital products]( However, even if you do read your writing out loud, there are still some writing pitfalls you might not be aware of that could make users feel unincluded. Nick [summarized valuable tips]( to help you change that and ensure your copy is inclusive and accessible. They are easy to put into practice and make a real difference. (cm) --------------------------------------------------------------- 2. Optimizing Button Microcopy Button microcopy needs to be clear and concise, it motivates the user to take action, and it anticipates user issues. Maria Panagiotidi shares [seven useful tips to help you write button microcopy]( that achieves just that. [How to optimize button microcopy]( Using action verbs and task-specific language to prevent misunderstandings even when users only scan the text and employing microcopy to build transparency and trust are just two of the aspects that Maria covers in her post. A great overview of how powerful a small piece of text can be — and how much more you can get out of it with just some little tweaks. (cm) --------------------------------------------------------------- From our friends Join 20,000 Developers And Web Teams At Jamstack Conf on Oct 6–7 [Join 20,000 Developers And Web Teams At Jamstack Conf on Oct 6-7]( With a stellar line-up of community creators and ecosystem partners, this is the web development event you won’t want to miss! Register for free today on [www.jamstackconf.com](. --------------------------------------------------------------- 3. A Single Source Of Truth For Your Product Copy How do you and your team handle and maintain product copy? Do you have a strategy to keep everything in one place so that everyone involved always has the newest copy at hand? Or is your product copy scattered across documents, mockups, and tickets? In this case, [Ditto]( could be worth taking a closer look at. [Ditto]( Ditto provides a single place to manage product copy in all of its stages. You can create a reusable text component library, manage text in mockups, track all copy changes, and review and discuss edits. Two-way Figma sync makes sure that the right copy is always in your mockups, while Ditto’s API, CLI, and SDKs allow developers to fetch up-to-date copy and integrate it into their build processes. No more back-and-forth, no more copy-and-paste. (cm) --------------------------------------------------------------- 4. Upcoming Front-End & UX Workshops You might have heard it: we run [online workshops around front-end and design]( be it accessibility, performance, navigation, or landing pages. 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]( Front-end and design can sometimes feel like you’re riding some pretty wild waves! We’ve got your back with [personal and inclusive events](. As always, here’s an overview of our [upcoming workshops]( - [FREE: Frustrating Design Patterns in 2021]( UX with Vitaly Friedman. September 27. - [Accessible Front-End Patterns Masterclass]( Dev with Carie Fisher. September 30 – October 14. - [Designing Landing Pages That Sell]( Design with Rob Hope. October 5–19. - [Level-Up With Modern CSS]( Dev with Stephanie Eckles. October 5–20. - [Jump to all online workshops →]( --------------------------------------------------------------- 5. A Generator For Friendly Microcopy Sometimes, all you need is a little inspiration boost. [Speak Human]( might be the perfect place to find it for your copywriting needs. For example, for confirmation messages, respectful interruptions and gentle reminders. [Speak Human]( To get inspired, just select a purpose from a dropdown, and the generator presents you with a piece of clever, human-centric microcopy — a friendly way to ask users for their email, for example, or a small piece of e-commerce copy that stands out from the crowd. Quick and easy. (cm) --------------------------------------------------------------- 6. A Plugin To Assist You With Copywriting We all know those situations when the blank fields in a beautifully polished layout design make us sweat. How to fill them with meaningful content? With words that engage your users and, in the best case, put a smile to their faces? Alex Tasevski and Zlatko Najdenovski built a little plugin for Adobe XD that helps you master the challenge: [UI Copy](. [UI Copy]( The plugin proposes content for your design — tailored to your product’s tone and voice. So no matter if you need to keep things corporately serious or are aiming for something more casual and witty, UI Copy has got you covered. Of course, it would be foolish to say that a plugin could replace a professional copywriter, but for those occasions when you want to avoid showing lorem ipsum to your clients and stakeholders, it’s a fantastic little helper. And who knows, maybe the suggested content will spark your imagination and you’ll come up with just the right words to make your product uniquely yours? (cm) --------------------------------------------------------------- From our sponsor Build In-Demand Skills In Northwestern’s Online MS In Information Design And Strategy [Northwestern: Online Master’s in Information Design and Strategy]( Earn your master’s degree [online](. --------------------------------------------------------------- 7. Email Copy Inspiration Do you need some email copy inspiration? Then [Good Email Copy]( is for you. Whether it’s welcoming your users on board, confirming their order, or asking them to provide feedback on your product, the site features email copy for all kinds of purposes. [Good Email Copy]( The featured examples all come from real emails that companies like Slack, Pinterest, Zendesk, or Etsy sent out. You can browse them by tag or search for inspiration by entering a keyword. New ideas guaranteed. By the way, if you have an email in your inbox that you think might be worth sharing, you can contribute it to the collection. (cm) --------------------------------------------------------------- 8. Handy UX Writing Resources The field of UX writing might not be that often talked about as other aspects in the UX field, but that doesn’t mean that there’s a lack of quality material to improve your skills. To help you stay on top of the game, the [UX Writing Library]( collects handy UX writing resources. [The UX Writing Library]( Curated by UX writer and microcopy expert Kinneret Yifrah, the library features everything from books, blogs, podcasts, and inspiration to communities and events all about UX writing. All of the resources were tried firsthand or have received great reviews from the community. One for the bookmarks. (cm) --------------------------------------------------------------- #8. New On Smashing Job Board - [Senior Front End Engineer]( at RECUR (United States) - [Senior Software Engineer]( at eMDs Inc. (Richardson, Austin) - [Senior UX Designer]( at GoodHabitz (Eindhoven) --------------------------------------------------------------- #9. Recent Smashing Articles - [How Web Development Tools Are Helping Users Keep Pace With Rapid Change]( - [Reducing The Need For Pseudo-Elements]( - [Are Imposter Domains Re-Publishing Your Website?]( - [Reasons To Build A CRM-Powered Website For Your Business]( - [Monetize Open-Source Software With Gatsby Functions And Stripe]( - [Web Quality Assurance: From User Requirements To Web Risk Management]( --------------------------------------------------------------- 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](