![\"\"](\"https:\/\/uxmag.com\/wp-content\/uploads\/2024\/03\/image-2.png\")
<\/figure>\n\n\n\nThe obvious difference between these two onboarding visuals is that option A is devoid of words and is absolutely useless. No direction, no guidance, or calls to action, nada. This point is so blindingly obvious (I\u2019m yelling at the screen), that it\u2019s impossible to deny.<\/p>\n\n\n\n
Over many years, I have noticed designers having a blind spot for words and language, leaving it till the last minute to dollop text unceremoniously from a height onto the beautifully rendered design. Not through any malice of designers, but through the demands and expectations of the job. I have been guilty of doing this myself. We are all sinners and I am now flagellating myself in public.<\/p>\n\n\n\n
Microcopy is the small text you find on websites and apps such as button text, section captions, page titles, form labels, and error messages. Small words have a big impact, visually and psychologically, but this separation of words and image in our visual mind is an easy trap for designers to fall into.<\/p>\n\n\n\n
I like to think of microcopy and textual content as another design element that can make or break a user experience.<\/p>\n\n\n\n
Good microcopy helps the user navigate their way through a digital experience, maximising meaning in a condensed manner, and with space at a premium, every word should count.<\/p>\n\n\n\n
Don\u2019t be mere decorators, be literate designers<\/h2>\n\n\n\n
Being a literate designer means paying attention to the text, thinking of microcopy as an essential consideration in the design process, an element that can alter the concept and influence the solution. Aesthetics and words go hand in hand. It is also a basic skill that all designers should cultivate.<\/p>\n\n\n\n
Why don\u2019t we do it? Well, it can be bloody hard work to write good microcopy that serves the user well. If the budget allows, we can bring on UX writers to our team, which is ideal, but in reality, many companies see this as a luxury they can\u2019t afford.<\/p>\n\n\n\n
In the absence of those dedicated UX writers out there, we need to become more rounded designers and start crafting better microcopy.<\/p>\n\n\n\n
Graphic designer Lucine Robert wrote some time ago<\/a> that, \u2018Designers are not just decorators and aesthetes \u2014 pattern-makers using letterforms as their palette of marks \u2014 but individuals responsible for the intake of information.\u2019<\/p>\n\n\n\n I\u2019m almost fond of these classic and spectacularly awful error messages you see from time to time, even though they cause heartburn.<\/p>\n\n\n\n Windows error message with nonsense text<\/em><\/p>\n\n\n\n Really?<\/p>\n\n\n\n Paypal type screen with hard to read error text<\/em><\/p>\n\n\n\n Arghhh, I don\u2019t know what to read. My eyes are bleeding.<\/p>\n\n\n\n But let\u2019s not concentrate on the bad. When done correctly, we immediately reposed to well written, clear, and concise microcopy.<\/p>\n\n\n\n Welcome to Mailchimp signup screen<\/em><\/p>\n\n\n\n Mailchimp is renowned for its friendly tone using clear titles, unambiguous supplementary text, and clearly presented password rules.<\/p>\n\n\n\n FigJam onboarding screen showing what the user can do<\/em><\/p>\n\n\n\n Figma\u2019s whiteboard tool uses attractive tooltip onboarding to guide the user. What works here is the combination of good visuals with clear text.<\/p>\n\n\n\n Asana new messages screen showing recipient inputs<\/em><\/p>\n\n\n\n The well-considered input placeholder text guides the user. I like the hint text on the side panel. The well-placed text to the left of the Discard and Send buttons gives reassurance, and alerts the user to the number of people being notified.<\/p>\n\n\n\n Noun Project password reset screen<\/em><\/p>\n\n\n\n The Noun Project injects a little dry humour in what is an inconvenience, yet it is also clear what will happen next.<\/p>\n\n\n\n What all these screens have in common is clarity, with well-written sentences that tell the user what to do or what will happen. Yet they also have a hint of personality, and don\u2019t feel like an afterthought.<\/p>\n\n\n\n Microcopy fulfils a wide brief and has many roles:<\/p>\n\n\n\n By <\/em>Giammarco<\/em><\/a><\/p>\n\n\n\n These rules are guides to make it easier to craft good microcopy. There are many more, but these will serve as an excellent base to begin with.<\/p>\n\n\n\n Use short words and sentences. Avoid unnecessary modifiers.<\/p>\n\n\n\n \u2018Red\u2019 is unnecessary in \u2018Click this red button\u2019. Don\u2019t be over-elaborate for the sake of it.<\/p>\n\n\n\n Avoid vague or informal language.<\/p>\n\n\n\n No technical terms except if it\u2019s related to the user\u2019s world. We can just use \u2018Save\u2019 instead of the robot sounding \u2018Save file to database\u2019.<\/p>\n\n\n\n My unscientific rule of thumb is that paragraphs should be no more than seven long (approximately 70 characters) lines. Nothing looks more daunting than a page full of dense paragraphs.<\/p>\n\n\n\n In body copy, spell out numbers up to nine. Use numerals after 10.<\/p>\n\n\n\n Do not overuse contractions such as:<\/p>\n\n\n\n Contractions can make the text sound informal and feel easier to read, but it can also be a distraction and it looks messy.<\/p>\n\n\n\n By <\/em>Marcin Wichary<\/em><\/a><\/p>\n\n\n\n Sentence case is when you only capitalise the first letter of the first word in a title.<\/p>\n\n\n\n \u2018This is a sentence case title\u2019<\/p>\n\n\n\n It is more conversational, sounds less formal, and is easier to read than title case as \u2018Long Sentences Set In Title Case Can be Very Uncomfortable To Scan\u2019.<\/p>\n\n\n\n Use sentence case for buttons and links such as \u2018Select a user\u2019 and \u2018Create a new task\u2019.<\/p>\n\n\n\n Sentence case also has the added benefit of being easier for product teams to work with, as there are no formatting rules to remember, unlike title case.<\/p>\n\n\n\n Title case is when you capitalise the first letter of each word, except for certain small words such as conjunctions and prepositions.<\/p>\n\n\n\n \u2018This Is A Title Case Title\u2019<\/p>\n\n\n\n Sounds more formal, doesn\u2019t it?<\/p>\n\n\n\n There is a view that the title case gives short pieces of text more visual weight, but too many words set in the title case can look awkward. Three words and under is a good rule. Titles can be hard to process when the number of words is six or more.<\/p>\n\n\n\n John Saito makes an interesting observation in his excellent article on case<\/a> that Apple favours title case and Google goes for sentence case. Do Apple opt for a title case because it\u2019s more symmetrical and aesthetically pleasing than a sentence case? You can imagine Steve Jobs weighing up both options in his mind.<\/p>\n\n\n\n As always, the title case can be appropriate in the right context.<\/p>\n\n\n\n Capitalise proper names, such as Evil Corp and Valley Cryogenics.<\/p>\n\n\n\n Do not capitalise functionality except if they refer to specific or branded functionality, such as Instagram Stories or The Flying Enchilada Dashboard.<\/p>\n\n\n\n By <\/em>Ty Williams<\/em><\/a><\/p>\n\n\n\n The debate over whether to use \u2018Your\u2019 and \u2018My\u2019 rages on in countless forums. It comes down to what suits your brand and how social and collaborative the product is. There is an argument that using a personal pronoun is a way of making the user feel engaged.<\/p>\n\n\n\n Using \u2018Your\u2019 (the second person pronoun) in an interface implies the product is talking with you. It makes the product feel like it\u2019s a personal assistant. It\u2019s helpful without being too demanding.<\/p>\n\n\n\n \u2018Your\u2019 is social. An example would be a project management app where a team is creating tasks. \u2018Your\u2019 is useful as it differentiates your tasks from all people\u2019s tasks.<\/p>\n\n\n\n Use \u2018Your\u2019 if the system has created something for you, like a report or digest.<\/p>\n\n\n\n Using \u2018My\u2019 (first person pronoun) suggests that the product is an extension of the user. \u2018My\u2019 gives the sense of control and ownership, but as an individual. It is solipsistic. An example would be a tax return site. Since the user is not in an open and sharing mood while calculating their finances, \u2018My\u2019 feels appropriate, especially where data is sensitive.<\/p>\n\n\n\n Another example is \u2018My profile\u2019, where you do not want to share any data with others. Here, the first person gives a better sense of security. It makes the user understand clearly that they are viewing their information.<\/p>\n\n\n\n Use \u2018My\u2019 if you have created something in the system, such as a saved search or personalised playlist.<\/p>\n\n\n\n You can do this too. There are no rules to say that your product has to speak at all. In my experience, it is not so important to label things \u2018Your\u2019 or \u2018My\u2019.<\/p>\n\n\n\n Use the proper noun or action, like, \u2018Suitcase\u2019 instead of \u2018My suitcase\u2019 for example. It sidesteps issues of long line lengths and visual clutter. Using the personal pronoun is unnecessary in most cases except for those I mentioned above, namely distinguishing your own data from that of a team.<\/p>\n\n\n\n By <\/em>Stephanie Harry<\/em><\/a><\/p>\n\n\n\n We can be unaware that we are falling into a negative tone, especially with error messages like \u2018Sorry, you can\u2019t do this\u2019. This negative tone can give a sense of finality, effectively blaming the poor user for what has occurred.<\/p>\n\n\n\n If our user encounters an issue, we want them to know that there is a solution.<\/p>\n\n\n\n One of the most useful communication theories that apply to writing is the Feedback Method<\/a> by David L. Cooperrider and Diana Whitney.<\/p>\n\n\n\n There are four types of feedback we can give the user<\/p>\n\n\n\n 1.\u2018No\u2019 is negative, destructive<\/p>\n\n\n\n 2.\u2018No, because\u2026\u2019 is negative, constructive<\/p>\n\n\n\n 3.\u2018Yes, but\u2026\u2019 is positive, destructive<\/p>\n\n\n\n 4.\u2018Yes, and\u2026\u2019 is positive, constructive<\/p>\n\n\n\n Fashion positive messages by using \u2018negative, constructive\u2019 and \u2018positive, constructive\u2019 in our sentences.<\/p>\n\n\n\n \u2018You cannot view this task because you are not assigned. Please request access.\u2019<\/p>\n\n\n\n This explains what you cannot do, but at least it tells you that there is a solution in a friendly manner.<\/p>\n\n\n\n \u2018You have been subscribed. View now.\u2019<\/p>\n\n\n\n This is good, as it tells you in very positive terms what has happened and what you can now do.<\/p>\n\n\n\n \u2018You cannot view this task.\u2019<\/p>\n\n\n\n This is unhelpful, depressing, and might remind the user of their own mortality.<\/p>\n\n\n\n By <\/em>cottonbro<\/em><\/a><\/p>\n\n\n\n Active voice describes a sentence where the subject performs the action stated by the verb and sounds stronger than passive voice and can be easier to understand. Always use active voice in your writing.<\/p>\n\n\n\n \u2018Users love feedback.\u2019<\/p>\n\n\n\n Passive voice is when the focus is on the action, not the subject as the subject comes last. This has the effect of lessening the importance of who or what is doing the action. This can lead to weak sounding sentences.<\/p>\n\n\n\n \u2018Feedback is loved by users.\u2019<\/p>\n\n\n\n Use an active voice when you need to signal who or what caused an action.<\/p>\n\n\n\n \u2018Thom Gunn created a task.\u2019 <\/p>\n\n\n\n is better than <\/p>\n\n\n\n \u2018The task was created by Thom Gunn.\u2019<\/p>\n\n\n\n Even though we stated that active voice is the ideal, passive voice has its place. Use passive voice when the action is more important than what caused (subject) the action.<\/p>\n\n\n\n \u2018Results not found.\u2019 <\/p>\n\n\n\n is better than <\/p>\n\n\n\n \u2018The search did not return any results.\u2019<\/p>\n\n\n\n By <\/em>w\u0142odi<\/em><\/a><\/p>\n\n\n\n It is essential to get your call to action correct. You are prompting the user to take action. Social media scientist Dan Zarrella<\/a> discovered verbs generated a higher click-through rate than nouns and adjectives on the top social media platforms. His findings suggest that to be a proper call to action, the text should begin with a verb such as \u2018Download file\u2019 and \u2018Refresh this page\u2019. \u2018Account\u2019 is not a verb, so it\u2019s not a call to action.<\/p>\n\n\n\n Let\u2019s get slightly theoretical. There are two actors \u2014 the product and the user. They are both involved when an interaction occurs on a call to action. The creators of the product want the user to take action, and the user wants the product to do an action for them. Truly symbiotic.<\/p>\n\n\n\n Without getting into the grammatical concepts of [conditional and interrogative moods](http:\/\/www.grammar.net\/interrogative-mood), a perfect call to action is born when the text makes sense after both:<\/p>\n\n\n\n Button text: \u2018Forgotten password?\u2019<\/p>\n\n\n\n Both sentences make little sense.<\/p>\n\n\n\n Button text: \u2018Add to basket\u2019<\/p>\n\n\n\n This works for both.<\/p>\n\n\n\n By <\/em>Ma<\/em><\/a>x<\/a><\/em>im<\/em><\/a> Illyhov<\/em><\/p>\n\n\n\n Notifications, such as emails and alerts, are an important part of product engagement. As well as conforming to consistent branding and messaging, they also need to be transparent in terms of intent.<\/p>\n\n\n\n They must know at a glance that the notification is from your product\/company. In an email, the subject is the most important part of the email.<\/p>\n\n\n\n It must look trustworthy. The company name must be front and centre. The \u2018From\u2019 email address must be displayed with the name of the company in it.<\/p>\n\n\n\n This should be part of the title and subject, e.g. \u2018Task: You have been assigned a task\u2019.<\/p>\n\n\n\n This is essential to provide a trigger for engagement. A link, button or steps for what to do next should be in the notification.<\/p>\n\n\n\n By <\/em>Jos\u00e9 Mart\u00edn Ram\u00edrez Carrasco<\/em><\/a><\/p>\n\n\n\n Thinking about microcopy from the very beginning of ideation through to the prototyping stages is essential in creating a unified design. Microcopy, at its very best, can create useful signposts for users traveling on their journey through your product, in a language they can understand and a tone they will respond positively to.<\/p>\n\n\n\n Make or break the user experience Look at these two images: The obvious difference between these two onboarding visuals is that option A is devoid of words and is absolutely useless. No direction, no guidance, or calls to action, nada. This point is so blindingly obvious (I\u2019m yelling at the screen), that it\u2019s impossible to<\/p>\n","protected":false},"author":2436,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[1],"tags":[],"topics":[3,21,28,81,122],"class_list":{"0":"post-18773","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-uncategorized","7":"topics-accessibility","8":"topics-content-and-copy","9":"topics-design","10":"topics-personal-and-professional-development","11":"topics-ux-magazine","12":"entry"},"yoast_head":"\nExamples of microcopy<\/h2>\n\n\n\n
![\"\"](\"https:\/\/uxmag.com\/wp-content\/uploads\/2024\/03\/image.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/uxmag.com\/wp-content\/uploads\/2024\/03\/image-1.png\")
<\/figure>\n\n\n\nMailchimp signup<\/h3>\n\n\n\n
![\"\"](\"https:\/\/uxmag.com\/wp-content\/uploads\/2024\/03\/image-5.jpeg\")
<\/figure>\n\n\n\nFigJam onboarding<\/h3>\n\n\n\n
![\"\"](\"https:\/\/uxmag.com\/wp-content\/uploads\/2024\/03\/image-3.png\")
<\/figure>\n\n\n\nAsana messaging<\/h3>\n\n\n\n
![\"\"](\"https:\/\/uxmag.com\/wp-content\/uploads\/2024\/03\/image-4.png\")
<\/figure>\n\n\n\nThe Noun Project password reset<\/h3>\n\n\n\n
![\"\"](\"https:\/\/uxmag.com\/wp-content\/uploads\/2024\/03\/image-1.jpeg\")
<\/figure>\n\n\n\nThe important roles of microcopy<\/h3>\n\n\n\n
\n
![\"\"](\"https:\/\/uxmag.com\/wp-content\/uploads\/2024\/03\/image-8.jpeg\")
<\/figure>\n\n\n\nRules for writing good microcopy<\/h2>\n\n\n\n
1. General rules<\/h2>\n\n\n\n
Be concise<\/h3>\n\n\n\n
Be specific<\/h3>\n\n\n\n
No jargon<\/h3>\n\n\n\n
Keep paragraphs short<\/h3>\n\n\n\n
Spell out numbers<\/h3>\n\n\n\n
Contractions<\/h3>\n\n\n\n
\n
![\"\"](\"https:\/\/uxmag.com\/wp-content\/uploads\/2024\/03\/image-7.jpeg\")
<\/figure>\n\n\n\n2. On the case<\/h2>\n\n\n\n
Sentence case<\/h3>\n\n\n\n
Title case<\/h3>\n\n\n\n
What about capitalising proper names and terms?<\/h3>\n\n\n\n
![\"\"](\"https:\/\/uxmag.com\/wp-content\/uploads\/2024\/03\/image-3.jpeg\")
<\/figure>\n\n\n\n3. Point of view<\/h2>\n\n\n\n
\u2018Your\u2019 stuff<\/h3>\n\n\n\n
\u2018My\u2019 stuff<\/h3>\n\n\n\n
No point of view<\/h3>\n\n\n\n
![\"\"](\"https:\/\/uxmag.com\/wp-content\/uploads\/2024\/03\/image.jpeg\")
<\/figure>\n\n\n\n4. Be constructive<\/h2>\n\n\n\n
A \u2018negative, constructive\u2019 message<\/h3>\n\n\n\n
A \u2018positive, constructive\u2019 message<\/h3>\n\n\n\n
Avoid destructive feedback<\/h3>\n\n\n\n
![\"\"](\"https:\/\/uxmag.com\/wp-content\/uploads\/2024\/03\/image-2.jpeg\")
<\/figure>\n\n\n\n5. Voice<\/h2>\n\n\n\n
Active voice<\/h3>\n\n\n\n
Passive voice<\/h3>\n\n\n\n
Notification and error messaging<\/h3>\n\n\n\n
![\"\"](\"https:\/\/uxmag.com\/wp-content\/uploads\/2024\/03\/image-4.jpeg\")
<\/figure>\n\n\n\n6. Calls to action<\/h2>\n\n\n\n
\n
An example that does not work<\/h3>\n\n\n\n
\n
A good example<\/h3>\n\n\n\n
\n
![\"\"](\"https:\/\/uxmag.com\/wp-content\/uploads\/2024\/03\/image-5.png\")
<\/figure>\n\n\n\n7. Notifications<\/h2>\n\n\n\n
Users need to tell where the notifications are from<\/h3>\n\n\n\n
They need to tell that it\u2019s real<\/h3>\n\n\n\n
They need to know why they are receiving it<\/h3>\n\n\n\n
They need to know what to do next<\/h3>\n\n\n\n
![\"Finger](\"https:\/\/uxmag.com\/wp-content\/uploads\/2024\/03\/image-6.jpeg\")
<\/figure>\n\n\n\nIt\u2019s a journey<\/h2>\n\n\n\n
\n\n\n\nReferences<\/h3>\n\n\n\n
\n