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.
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!”
You were wrong, bitch. Very Wrong.
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.
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 some examples to get a better understanding.
1. Action: create account (by Abstract)
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 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)
3. Action: Motivating users to get started (by USAFacts)
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)
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)
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)
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)
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 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)
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)
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!)
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’.
You need time and practise to be a good microcopy writer.
“Just because it’s ‘micro’, doesn’t mean it’s easy to master.”
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.
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.
- 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)
- 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.
- Understand how to create good user experience and user interface. Good place to start training your UX/UI muscles: www.dailyui.co
- 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.
- 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.