Smashing Magazine - #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 Events
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:


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

Work at the Intersection of Data, Design and Technology. Earn your master’s degree online at Northwestern 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


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

unsubscribe update preferences view in your browser

Key phrases

Older messages

#318: Front-End Cheatsheets

Tuesday, September 14, 2021

For looking up JavaScript and CSS, nesting HTML tags and discovering hidden gems in Git. Issue #318 • September 14, 2021 • View in the browser 💨 Smashing Newsletter Sveiki Smashing Friends, What's

#317: JavaScript and Front-End Tools

Tuesday, September 7, 2021

On diving deeper into JavaScript and Jamstack, optimizing for all popular frameworks, and boosting your existing Next.js setup. Issue #317 • September 7, 2021 • View in the browser 💨 Smashing

#316: Front-End Accessibility

Tuesday, August 31, 2021

With tips for automating accessibility testing, assessing third-party components accessibility, as well as useful accessibility extensions for Figma and VSCode. Issue #316 • August 31, 2021 • View in

#315: CSS Refactoring and JavaScript Migration

Tuesday, August 24, 2021

On refactoring CSS, migrating from JavaScript to TypeScript, optimizing for Next.js, and front-end case studies.Issue #315 • August 24, 2021 • View in the browser 💨 Smashing Newsletter Howdy Smashing

#314: Front-End Games on CSS and JavaScript

Tuesday, August 17, 2021

With front-end games and challenges in CSS and JavaScript to take your coding skills to the next level. Issue #314 • August 17, 2021 • View in the browser 💨 Smashing Newsletter Dobry dzień Smashing

You Might Also Like

Cascade, HTMX, Sponge Furniture, Meaning of Color, Flipbook

Friday, April 26, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar April 26 2024 A primer on the cascade and specificity piccalil.

9 Trends From Milan We Can’t Stop Thinking About

Thursday, April 25, 2024

View in your browser | Update your preferences ADPro Even More From Milan Design Week Each year, the design world convenes in Milan—and that applies to us at AD, too. For the third year running, our

Subframe, Attributes vs Properties, Front End Handbook, aspect-ratio, GenAI

Thursday, April 25, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar April 25 2024 Subframe subframe.com Subframe is a design-to-

Ritmo, Climate Change, Icons & Typefaces, Click Wheel JS, CarPlay

Wednesday, April 24, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar April 24 2024 Meet Ritmo, Musixmatch's cross-platform

Why Jake Arnold Doesn’t Text Clients

Tuesday, April 23, 2024

View in your browser | Update your preferences We've had a remodel! From now on, you'll be hearing from AD PRO in your inbox twice a week—once with a deep dive into trends to watch and subjects

The secret ingredient to media success

Tuesday, April 23, 2024

PR tips from our founder Nora Wolf In this month's edition is all about *the most important* element of successful media outreach—photography. You may have some photos, but if the backgrounds are

#453: Design Systems

Tuesday, April 23, 2024

Design system generator, types of design systems and how to consolidate design systems. Issue #453 • Apr 23, 2024 • View in the browser Smashing Newsletter Buổi tối vui vẻ Smashing Friends, Ah, design

👨‍🏫 Striking Educational Website Designs + 🏆 Challenge Updates

Tuesday, April 23, 2024

Your UpLabs Design Updates Await! Let's Get Going! 🎨 Firstly, let's congratulate Mariana Gameiro, the winner of our latest 👩‍💻 SheCodes Website Redesign Challenge! Congratulations!! Secondly,

Code Connect, JS Naked Day, Shape of AI, Product Design, CSS Grid Level 3

Tuesday, April 23, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar April 23 2024 The Right Code for Your Design System figma.com

Accessibility Weekly #393: When Security and Accessibility Clash

Monday, April 22, 2024

April 22, 2024 • Issue #393 View this issue online or browse the full issue archive. Featured: When security and accessibility clash: Why are banking applications so inaccessible? "While using