You’re reading our thoughts on design, a publication about UI, UX and product management by Dconstrct Design Agency.

Tweet
Share on Facebook
Share On LinkedIn
Email to your friend
Listen To The Article
Voiced by Amazon Polly

The evolution of user experience.

Just like how the internet as we know has been evolving, user experience design has been changing as well. Nowadays, most UX designers that I meet are still stuck with the 2010s definition of UX. They define UX as the fonts and typography, the colors, the content and how is it displayed, and the flow from one part of the experience to the other.

The fact is that to out-innovate other companies, most startups and big companies are forced to look at other components of their product to deliver a better user experience. Since 2015, the latest component that has been included in the arsenal of a UX designer is the small bits of copy that appear on an app’s interface to guide, to reassure or to delight customers i.e. The Microcopy.

The Bastard Child of UX: Microcopy 1

I always believed that words and copy is just as powerful if not more compared to the colors and the flow of an app. It’s one of the big reason why I always start any design with the copy first, not the UI or the fonts. I remember conversations I have had with product owners before that goes something like this:

“Don’t pay too much attention to the text, after all, no-one reads them anyway!”

Guess what?

You were wrong, bitch. Very Wrong.

The Bastard Child of UX: Microcopy 2

Why microcopy matters?

The goal of every UX designer is to make sure the users perform the desired action – the step to purchase, to subscribe, to register for the service, to share, etc. Microcopy provides a subtle but significant way to prod the users through the action.

The Bastard Child of UX: Microcopy 3

Good microcopy enhances the user experience behind an action done in your app while clearly communicating the information and staying true to the tone/voice of your brand.

Lets look at how brands are using microcopy to design better conversion.

1. Action: create account (by Abstract)

The Bastard Child of UX: Microcopy 4

Abstract used microcopy on the right of their create account page to motivate users through the action. By presenting the USP of the product, it reminds the users why they are here. Highlighting #1 creates a bias in users where if you see something that’s done one out of three, you are naturally inclined to complete it. The words used are simple and easy to understand.

2. Action: picking the right package (by Abstract)

The Bastard Child of UX: Microcopy 5

 

The microcopy right next to the pricing tier allows the users to easily digest the information and make a decision on what’s the best tier for them. The bullet points are clear, it mentions the features in one tier includes the list from the previous tier, plus more. Abstract goes beyond by making simplying the experience by including ‘great for freelancers’ and ‘great for freelancers’,etc.

Another example of the same (by Leadpages)

The Bastard Child of UX: Microcopy 6

3. Action: Motivating users to get started (by USAFacts)

The Bastard Child of UX: Microcopy 7

 

When you land on USAFacts, you will quickly see that that the colors and font choices are really appealing. But, a big concern here is that, they are not google. Where do you start? Users need to be prodded on the things that can be searched on the app. So, they have used a microcopy to get you started: “Search for things like ‘Arrests in 2012’ or ‘crime rates'”.

Another example of the same (by Netflix Help Centre)

 

The Bastard Child of UX: Microcopy 8

When an user is on your help page, something has gone wrong. The best you can do is to provide the answer as fast as possible to make sure that the user doesn’t get more irritated. By just including a search bar, users will have no idea what they can search and will be stuck with looking at the index of knowledge base articles, hence, more frustrated. So, Netflix included what to search for, hence, guiding users through the action.

4. Action: show users how to use the product (by Muzzleapp)

The Bastard Child of UX: Microcopy 9

First of all, Muzzleapp presents a masterclass on minimilastic landing page, good copy and good UX in single page site. Muzzle presents their USP in the clearest way possible: a simple mac app to silence embarrassing notifications while screensharing. This is where the makers were clever with their microcopy:

  • You might look at the site and think where can I use this, they present easy to understand for that by listing some of the places that you might get embarassing messages.
  • But, you might not know what does an embarassing message look like, hence they start listing examples on the right. Genius! Good microcopy includes being clear and to have a voice, hence, the are using a funny approach to the examples.

5. Action: asking questions (by Quora)

 

The Bastard Child of UX: Microcopy 10

Quora’s biggest reason to exist is to provide a space on the internet to ask questions, and to get answers from the experts and the opinionated. They have done few clever microcopy tricks when someone asks questions:

  • When you type a questions, the instant search gives you suggestions on what you can ask based on the indexed questions, sorted by a mix relevance and popularity. It also auto fixes your question if you asked something that might not be the best way to phrase the question.
  • But what if there’s no question asked related to yours – Quora added a last line that says ask the question. Hence, providing a feeback loop to your action.

6. Action: uploading your files (by Zeplin)

The Bastard Child of UX: Microcopy 11

 

Any process that involves the users to wait creates a friction in the user flow. Zeplin included the microcopy of explaining what’s exactly happening while you are waiting to provide users with a visual and copy based feeback for their action.

On the surface level, this might seem not that useful for the UX of a product. But once you dive deep, you will see that it’s a very clever inclusion to the experience. Lets say your sketch file contains a lot of images, hence, when Zeplin takes a long time with your images, you are more likely to understand and not get irritated.

7. Action: Loading Screen (by Slack)

The Bastard Child of UX: Microcopy 12

 

The loading screen has zero utility for the users. Users never desire the loading screen. Most brands will use some type of animation to show that it’s loading. Slack cleverly used a microcopy to prod users to stretch instead of just staring at the screen. Slack also have different variations of this microcopy e.g. drink water.

8. Action: filter products (by Lands’ End)

 

The Bastard Child of UX: Microcopy 13

Most ecommerce shops will allow you to filter products by color, size, price, popularity, etc. Lands’ End made it human by using presenting what does the product solve instead of things that users can’t relate to. Amen!

9. Action: Checkout (by GitmannBros)

The Bastard Child of UX: Microcopy 14

 

Most checkout process goes downhill when the users see that it takes 3 weeks for your product to be delivered. GitmannBros set the expectation right by explaining why it takes 3 weeks and give something for the users to talk about when they are wearing Gitmann products.

10. Action: Product URL (by PhotoJojo!)

The Bastard Child of UX: Microcopy 15

 

Now, most shops will use words such as product, shop, store in their url. This is where a good microcopy writer with marketing and tech knowledge makes a real difference. Instead of all those lame words, PhotoJojo! chose to use ‘awesomeness’. Imagine how the user feels when he/she notices it. That’s good microcopy!

Now, Calm your tits before you change your LinkedIn profile to say ‘Microcopy Expert’.

The Bastard Child of UX: Microcopy 16

You need time and practise to be a good microcopy writer.

[easy-tweet tweet=”Just because it’s ‘micro’, doesnt mean it’s easy to master.” user=”dconstrct” hashtags=”microcopy” template=”qlite”]

In order to become an effective microcopy writer, one need to master three different things: marketing with tech in mind or growth hacking, user experience designing and writing content with clarity.

The Bastard Child of UX: Microcopy 17

 

How to get there?

Disclaimer: I am in no way a microcopy expert as well. But, from those who are, this is how you get there.

  1. Have a swipe file with examples of good microcopy. Sometimes its easier to have inspirations ready when you are brainstorming (good place to start: http://goodmicrocopy.com)
  2. Learn about app/product marketing and growth hacking. The best way to learn is to actually by doing it. So, find a product/startup that you can offer the service for free in return of gaining knowledge.
  3. Understand how to create good user experience and user interface. Good place to start training your UX/UI muscles: www.dailyui.co
  4. Start picking up how big brands write content that demonstrates their brand and the brand’s voice. Before you can simplify something, you have to understand how it’s done first.
  5. Now, find a client who believes in microcopy. Offer your service. Once you have done it about 20 times, with good conversion increase – go ahead and change your LinkedIn profile.

Further Reading

  1. The magic of microcopy by UXdesign.cc
  2. Read the book on Microcopy.
Tweet
Share on Facebook
Share On LinkedIn
Email to your friend

Since you’re here …

… we have a small favour to ask.

We don’t do any ads or promoted content to make sure we stay free from commercial bias and not influenced by any companies. Unlike many content sites, we haven’t put up a paywall – we want to keep our articles as widely available as we can. So you can see why we need to ask for your help.

If everyone who reads our articles, who likes it, helps to support it, our future would be much more secure. For as little as $1, you can support Dconstrct – and it only takes a minute. Thank you.

About The Author

If you liked this article, you’ll probably like reading these articles too.

Like what you read, want more?

Subscribe to our weekly design newsletter.

We hate spam as much as you do, so we’ll never send you more emails than you want, and you can unsubscribe at any time.

Let's talk.

If you are ready to elevate your UX/UI design for your product, take the next step below.

If you are still a young company with not much budget for spending on your UX/UI, you can always learn from our design blog. We share everything we know.

Also, we love helping students and new businesses. You can also mail us for help or guidance.