UX Design

UI Design

How to Write Microcopy in UI

Microcopy is a significant part of UI design: tiny bits of text that guide users through an interface, provide instructions and give feedback. Microcopy in UI greatly impacts the user experience. It can help users navigate an interface more easily, understand the purpose of UI elements, and feel more confident while using an app or website. 

In this article, we’ll explain the importance of microcopy in UI design, share some best practices for writing effective microcopy, and provide examples of microcopy in action.

A blue typewriter

What is microcopy in UI

Microcopy refers to the small snippets of text used throughout a user interface to provide users guidance, feedback, and contextual information. Writing effective microcopy in UI is essential in creating a user-friendly and intuitive interface. It includes the words used in UI elements such as buttons, labels, tooltips, error messages, and other text in the interface.

Microcopy aims to help users understand what actions they can take, what will happen when they take them, and to provide feedback when things go wrong. Effective microcopy in UI can make a big difference in the user experience by reducing confusion, frustration, and errors.

The relation between microcopy in UI and UX writing

Microcopy and UX writing are closely related, and in many cases, people use the terms interchangeably. Both microcopy and UX writing involve crafting the text that appears throughout a user interface to provide users with clear, coherent, and helpful information.

However, while microcopy refers specifically to the small snippets of text that appear in UI elements such as buttons, tooltips, and error messages, UX writing encompasses a broader range of text throughout the user experience. Such wording might include text in onboarding flows, instructional content, navigation labels, etc.

In other words, UX writing encompasses all the written content in a user interface. At the same time, microcopy in UI refers specifically to the shorter, more contextual pieces of text that appear in specific UI elements. Microcopy and UX writing are significant components of creating a positive user experience.

Logos from Duolingo, Calm, Airbnb, Apple, Mailchimp, X(Twitter), Spotify, Headspace, Dropbox, GitHub, Slack

Famous brands with great microcopy

Best practices for microcopy in UI

Writing microcopy isn’t always as easy as it might seem, but with a couple of hefty tips, this struggle will become a thing of the past.

Always be clear and concise

As a designer, you should write microcopy in simple, easy-to-understand language that communicates the intended message quickly. Keep sentences short and to the point.

Whenever possible, use active voice

Writing in an active voice makes the text more engaging and easier to understand. For example, instead of saying, “Your password will be reset,” say, “We’re resetting your password.”

Provide context

Ensure the microcopy provides enough context so that users can understand what action they are taking and what the result will be. For example, instead of “Submit,” say “Submit your order.”

Use positive language

Frame microcopy in a positive way to make users feel confident and empowered. Instead of saying, “You can’t do that,” say, “Here’s what you can do.”

Consistency is vital

Use consistent language throughout the UI to avoid confusion and make navigating easier for users. For example, use the same language for buttons and menu options that perform the same action.

Use humor (but wisely)

Witty microcopy is more engaging and memorable, but use it judiciously and ensure it’s appropriate for the audience and context. One great example our team encountered was “Add to cartwheel” instead of “Add to cart” on a webshop that sells plant seeds and gardening equipment.

Always test and iterate when needed

Test the microcopy with your users to see if it’s practical, and understandable. Iterate based on user feedback and make changes as required.

Examples of a good microcopy in UI

A successful microcopy is understandable, concise, and sparks engagement. To achieve that, you must stay consistent with your brand’s pre-defined tone of voice.

For example, Spotify uses great microcopy in its app. They use friendly language that is easy to understand and engaging for their users.

Some examples of their microcopy include:

  • When the app loads: “Hold on tight, we’re getting there.”
  • When a user reaches the end of a playlist: “You’ve reached the end of the playlist. We’ll keep the music going for you.”
  • When a user skips too many songs: “Looks like you’re really picky! We’re working on finding the perfect song for you.”
  • When a user can’t play music due to regional restrictions: “This song is not available in your region. Bummer.”

These examples reveal how Spotify uses microcopy in UI to inject personality into their app and make it more user-friendly.

Spotify's create a playlist screen

The Calm app also uses good and compelling microcopy in their app. They use peaceful, reassuring language consistent with their brand’s overall tone and messaging.

Some examples of their microcopy include:

  • When a user opens the app: “Take a deep breath.”
  • When a user selects a meditation: “Find your calm.”
  • When a user is completing a meditation: “Take a moment to reflect.”
  • When a user is using the sleep stories feature: “Drift off to sleep.”

The microcopy in Calm’s UI aims to soothe and calm the user and reinforce the feeling of relaxation and mindfulness in the user. They also use straightforward language to guide users through each step of their meditation or sleep experience.

Calm's breathing exercise screen

We’ll stay in the mindfulness sphere to give you an example of a great CTA microcopy. Headspace app stands out by using uncomplicated and actionable language in its CTAs to encourage users to take specific actions within the app.

Some examples of their CTA microcopy include:

  • When a user completes a meditation: “Set your intention for the day.”
  • When a user sets a meditation reminder: “Don’t forget to take a breather.”
  • When a user finishes a meditation course: “Start a new course.”
  • When a user navigates to a recommended meditation: “Try this meditation.”
Headspace's "Choose your teacher" screen

The error message is a critical element that requires a well-crafted copy. Users tend to make mistakes; when they do, they need to know what happened and how to undo their actions. 

Slack is a fantastic example of a great error message microcopy. Their error messages help users understand what went wrong and how to fix it.

Some examples of their error message microcopy include:

  • “Something went wrong. Don’t worry, we’re looking into it.” Such copy acknowledges the issue and reassures the user it’s being handled.
  • “You don’t have permission to perform this action.” This error message is coherent and specific about what went wrong, and it helps the user understand what they need to do to fix the issue.
  • “Oops! We couldn’t connect to the server. Please check your internet connection and try again.” This error message provides actionable steps for the user to follow and suggests a potential solution to the problem.
Slack's modal prompt for deleting a channel

Summary

If you are new in the UI design world, writing microcopy might seem challenging or unattainable. But, the truth is that UI designers can write good microcopy. Many UI designers already write microcopy as part of their job, such as button labels, error messages, tooltips, and other interface copy.

To summarize this article, if UI designers want to write effective microcopy, they should familiarize themselves with the principles of good writing and learn how to communicate clearly and briefly. Most importantly, they must have a concrete understanding of their users and find the tone of voice that resonates with them. 

We hope this article helped you learn more about microcopy in UI. If you wish to cover additional areas of UI design, such as typography, check out our fresh-out-the-oven Ultimate UI Typography Masterclass! This masterclass contains cheat sheets, assignments, quizzes, and numerous tricks that will turn you from a beginner into a pro in almost no time.

You’ll learn to articulate the rationale behind your design decisions easily and adequately approach the typography for any design project.

For more helpful and inspiring content, follow us on Instagram and join our hard-working and dedicated community.

Happy designing! 🥳

THE ULTIMATE UI Design Mastery Courses Bundle

Fast-track your path to UI design mastery and supercharge your career

Elevate your UI design skills and unleash your full design potential.
Confidently design stunning pixel-perfect web and app interfaces. Apply to higher-level design positions, enhance your portfolio, and impress your teammates and clients.

View Details

30+ hours

You might like the following
Blog Articles