{"id":4445,"date":"2020-11-11T18:08:32","date_gmt":"2020-11-11T23:08:32","guid":{"rendered":"https:\/\/blog.mozilla.org\/ux\/?p=4445"},"modified":"2020-11-11T18:11:19","modified_gmt":"2020-11-11T23:11:19","slug":"how-to-write-microcopy-that-improves-the-user-experience","status":"publish","type":"post","link":"https:\/\/blog.mozilla.org\/ux\/2020\/11\/how-to-write-microcopy-that-improves-the-user-experience\/","title":{"rendered":"How to Write Microcopy That Improves the User Experience"},"content":{"rendered":"<div style=\"width: 3882px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/miro.medium.com\/max\/3872\/1*U0hBA8NnTD6l7L8Z2j-eiQ.jpeg\" alt=\"Photo of typesetting letters of various shapes and sizes.\" width=\"3872\" height=\"2592\" \/><p class=\"wp-caption-text\">Photo by Amador Loureiro on Unsplash.<\/p><\/div>\n<p>The small bits of copy you see sprinkled throughout apps and websites are called microcopy. As content designers, we think deeply about what each word communicates.<\/p>\n<p>Microcopy is the tidiest of UI copy types. But do not let its crisp, contained presentation fool you: the process to get to those final, perfect words can be messy. Very messy. Multiple drafts messy, mired with business and technical constraints.<\/p>\n<p>Here\u2019s a secret about good writing that no one ever tells you: When you encounter clear UX content, it\u2019s a result of editing and revision. The person who wrote those words likely had a dozen or more versions you\u2019ll never see. They also probably had some business or technical constraints to consider, too.<\/p>\n<p>If you\u2019ve ever wondered what all goes into writing microcopy, pour yourself a micro-cup of espresso or a micro-brew and read on!<\/p>\n<div style=\"width: 1016px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/miro.medium.com\/max\/1006\/1*jpgu_tfA3EBI0tcKo12SMw.jpeg\" alt=\"Quotation attributed to Blaise Pascale that reads: I would have written a shorter letter, but I did not have the time.\" width=\"1006\" height=\"412\" \/><p class=\"wp-caption-text\">Blaise Pascal, translated from Lettres Provinciales<\/p><\/div>\n<h2>1. Understand the component and how it behaves.<\/h2>\n<p>As a content designer, you should try to consider as many cases as possible up front. Work with Design and Engineering to test the limits of the container you\u2019re writing for. What will copy look like when it\u2019s really short? What will it look like when it\u2019s really long? You might be surprised what you discover.<\/p>\n<div style=\"width: 1739px\" class=\"wp-caption alignnone\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/miro.medium.com\/max\/1729\/1*O_0OYwL42tAAftK8PJtSeQ.jpeg\" alt=\"Images of two Firefox iOS widgets: Quick Actions and Top Sites.\" width=\"1729\" height=\"1792\" \/><p class=\"wp-caption-text\">Before writing the microcopy for iOS widgets, I needed first to understand the component and how it worked.<\/p><\/div>\n<p>Apple recently introduced a new component to the iOS ecosystem. You can now add <a href=\"https:\/\/support.apple.com\/en-us\/HT207122\">widgets<\/a> the Home Screen on your iPhone, iPad, or iPod touch. The Firefox widgets allow you to start a search, close your tabs, or open one of your top sites.<\/p>\n<p>Before I sat down to write a single word of microcopy, I would need to know the following:<\/p>\n<ul>\n<li>Is there a character limit for the widget descriptions?<\/li>\n<li>What happens if the copy expands beyond that character limit? Does it truncate?<\/li>\n<li>We had three widget sizes. Would this impact the available space for microcopy?<\/li>\n<\/ul>\n<p>Because these widgets didn\u2019t yet exist in the wild for me to interact with, I asked Engineering to help answer my questions. Engineering played with variations of character length in a testing environment to see how the UI might change.<\/p>\n<div style=\"width: 2329px\" class=\"wp-caption alignnone\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/miro.medium.com\/max\/2319\/1*tuy4C7WaS7XyPsxVMHsHkw.png\" alt=\"Image of two iOS testing widgets side-by-side, one with a long description and one with a short description.\" width=\"2319\" height=\"2436\" \/><p class=\"wp-caption-text\">Engineering tried variations of copy length in a testing environment. This helped us understand surprising behavior in the template itself.<\/p><\/div>\n<p>We learned the template behaved in a peculiar way. The widget would shrink to accommodate a longer description. Then, the template would essentially lock to that size. Even if other widgets had shorter descriptions, the widgets themselves would appear teeny. You had to strain your eyes to read any text on the widget itself. Long story short, the descriptions needed to be as concise as possible. This would accommodate for localization and keep the widgets from shrinking.<\/p>\n<p>First learning how the widgets behaved was a crucial step to writing effective microcopy. Build relationships with cross-functional peers so you can ask those questions and understand the limitations of the component you need to write for.<\/p>\n<h2>2. Spit out your first draft. Then revise, revise, revise.<\/h2>\n<div style=\"width: 854px\" class=\"wp-caption alignnone\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/miro.medium.com\/max\/844\/1*3Jwgtz9YhLXYy1qUTeAhMQ.jpeg\" alt=\"Image of a Mark Twain quote: https:\/\/www.goodreads.com\/quotes\/4957-the-difference-between-the-almost-right-word-and-the-right\" width=\"844\" height=\"600\" \/><p class=\"wp-caption-text\">Mark Twain, The Wit and Wisdom of Mark Twain<\/p><\/div>\n<p>Now that I understood my constraints, I was ready to start typing. I typically work through several versions in a Google Doc, wearing out my delete key as I keep reworking until I get it \u2018right.\u2019<\/p>\n<div style=\"width: 1210px\" class=\"wp-caption alignnone\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*HqQXxBa8A0QflHiBpYtGgg.jpeg\" alt=\"Image of a table outlining iterations of microcopy written and an assessment of each one.\" width=\"1200\" height=\"1120\" \/><p class=\"wp-caption-text\">I wrote several iterations of the description for this widget to maximize the limited space and make the microcopy as useful as possible.<\/p><\/div>\n<p>Microcopy strives to provide maximum clarity in a limited amount of space. Every word counts and has to work hard. It\u2019s worth the effort to analyze each word and ask yourself if it\u2019s serving you as well as it could. Consider tense, voice, and other words on the screen.<\/p>\n<h2>3. Solicit feedback on your work.<\/h2>\n<p>Before delivering final strings to Engineering, it\u2019s always a good practice to get a second set of eyes from a fellow team member (this could be a content designer, UX designer, or researcher). Someone less familiar with the problem space can help spot confusing language or superfluous words.<\/p>\n<p>In many cases, our team also runs copy by our localization team to understand if the language might be too US-centric. Sometimes we will add a note for our localizers to explain the context and intent of the message. We also do a legal review with in-house product counsel. These extra checks give us better confidence in the microcopy we ultimately ship.<\/p>\n<h2>Wrapping up<\/h2>\n<p>Magical microcopy doesn\u2019t shoot from our fingertips as we type (though we wish it did)! If we have any trade secrets to share, it\u2019s only that first we seek to understand our constraints, then we revise, tweak, and rethink our words many times over. Ideally we bring in a partner to help us further refine and help us catch blind spots. This is why writing short can take time.<br \/>\nIf you\u2019re tasked with writing microcopy, first learn as much as you can about the component you are writing for, particularly its constraints. When you finally sit down to write, don\u2019t worry about getting it right the first time. Get your thoughts on paper, reflect on what you can improve, then repeat. You\u2019ll get crisper and cleaner with each draft.<\/p>\n<h3>Acknowledgements<\/h3>\n<p>Thank you to my editors Meridel Walkington and Sharon Bautista for your excellent notes and suggestions on this post. Thanks to Emanuela Damiani for the Figma help.<\/p>\n<p><em>This post was originally published on <a href=\"https:\/\/medium.com\/firefox-ux\/how-to-write-microcopy-that-improves-the-user-experience-6335a512634c\">Medium<\/a>.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The small bits of copy you see sprinkled throughout apps and websites are called microcopy. As content designers, we think deeply about what each word communicates. Microcopy is the tidiest &hellip; <a class=\"go\" href=\"https:\/\/blog.mozilla.org\/ux\/2020\/11\/how-to-write-microcopy-that-improves-the-user-experience\/\">Read more<\/a><\/p>\n","protected":false},"author":1625,"featured_media":4447,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9577,103],"tags":[52921,52922],"coauthors":[440641],"_links":{"self":[{"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/posts\/4445"}],"collection":[{"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/users\/1625"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/comments?post=4445"}],"version-history":[{"count":0,"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/posts\/4445\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/media\/4447"}],"wp:attachment":[{"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/media?parent=4445"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/categories?post=4445"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/tags?post=4445"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/coauthors?post=4445"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}