top of page

Copied

What is microcopy and how to nail it on your website

Dana Meir

What is microcopy

Design plays a significant role when you create a website. It’s about telling a story through an accurate use of images, typography, color schemes and more. These factors are critical in grabbing attention, pointing people in the right direction, setting a tone and generally impacting the user experience. However, there’s another small detail that plays a crucial role in any website or app design: microcopy.


In this guide, we’ll cover the definition of microcopy, why it’s important for UX, and best practices for getting it right, along with microcopy examples to learn from:



What is microcopy?


Microcopy is the term describing the small bits of copy on a product’s interface. It appears throughout an app or website, serving to guide users, help them understand functions and complete tasks. These little snippets of text, however small they may be, can greatly improve the user experience of any product. As a result, microcopy can even help boost your conversion.


Without noticing it, we run into microcopy all the time. Think of warning signs on an app for instance, or the text that appears within a search bar before typing a query. You’ll also have seen it used in calls-to-action encouraging us to subscribe to a newsletter, explanatory text on an online form, and loading text, where it often appears alongside an engaging animation.



Wix Video Maker loading animation
Microcopy example from the Wix Video Maker.


Why is UX microcopy important?


These short bits of copy have the power to subconsciously shape our experience of a product. As a result, they can also play a role in affecting a user’s perception of your brand.


Good microcopy will not only explain what to do and where to go, consequently ensuring smooth navigation, but will also provide a sense of success when achieving a desired action (for example, after creating an account or making a purchase). These little moments of delight make all the difference when it comes to a user’s experience on your website or app.



Best practices for writing good microcopy


You’ve probably heard the term ‘microcopy’ floating around recently. With the rise in UX writing within the world of tech, we can clearly see that microcopy is not a passing web design trend, but a practice that’s here to stay. Whether or not you’re working alongside a professional writer, these tips will put you on the path to writing top-notch UX microcopy.



01. Align with your brand identity


Just as you would when writing content for your website, make sure to have a clear image of your brand identity before you start writing. This way, you’ll be able to define a voice and keep it cohesive throughout all your microcopy.


Consider how you want your users to feel, and then ask yourself which characteristics you should employ to make that happen. Are you witty? Professional? Do you convey a sense of coolness or is your tone more cutesy?


Example: Personalize the labels on your buttons, playing around with microcopy that suits your brand’s overall tone. Instead of simply saying ‘start,’ the buttons below use more inviting and colloquial phrases that fit Wix’s identity.



Microcopy example from the Wix Editor dashboard
Microcopy example from the Wix Editor.


02. Make it conversational


These days, interfaces are no longer cold and robotic. They’re much more human-centered. While this can be achieved through the right use of website color schemes, animations and other visual assets, microcopy also has a part to play.


Remember that you’re writing for real people. There may be a screen between yourself and the user, but picture yourself removing the screen and communicating with your customers face-to-face. You wouldn’t use overly formal language or technical jargon. Instead, you’d relay the information in a more casual, friendly tone. And that’s exactly how microcopy should be, too.


Example: In the example below, users are invited to create a logo. The text is written in second person (‘you’ form), directly addressing the user, just as you would in a regular conversation. Also notice the lighthearted copy on the CTA (call-to-action), saying ‘Let’s Go.’



Wix Logo Maker screenshot
Microcopy example from the Wix Logo Maker.


03. Keep it clear and concise


As opposed to writing a blog post or other types of long-form content, microcopy should be short and simple. It should clearly convey your message using as few words as possible, while taking note not to sound too formal or rigid.


By getting to know different user personas, you can understand the kind of language they use. Opt for straightforward, everyday words that they will be familiar with. For example, instead of referring to your ‘eCommerce website’, consider making it sound more approachable by calling it your ‘online store.’


Example: Notice how the lightbox popup below warns the user in a clear and succinct manner. There’s a header that states the message in just two simple words, plus a brief explanation below and labeled buttons that leave no room for confusion.



Warning message from the Wix Video Maker
Warning message example from the Wix Video Maker.


4. Be helpful


One of the main goals of microcopy is to guide users through your product, which goes hand-in-hand with good UX website design outline clear user journeys. Any piece of text, from the copy on your 404 page to your website menu’s labels, should help users progress through your website structure. This focus on will greatly improve your website navigation.


For example, the microcopy on a 404 error page can point site visitors in the direction of another page they may find relevant, as well as adding an uplifting message. This way, you’ll be able to alleviate any concerns, giving your customers a more positive feeling and better user experience.


Example: Another example where users can benefit from helpful advice is on error messages. Your customers need to know exactly what went wrong and how they can fix the issue. For example, if a user has incorrectly filled in a form on your website, the message should explain where the mistake happened - did they enter the wrong password, was their username not recognized or did they miss out a certain field?



Example of an error on Wix's sign up page
Microcopy to signify an error on Wix's sign up page.


Was this article helpful?

bottom of page