Microcopy Tiny Words, Huge Impact! - STC India · Better User Experience Human Interaction Builds Trust Better UI Interaction ... •Get buy in from all stakeholders: PO, PM, UX,

Microcopy -Tiny Words, Huge Impact!SANGEETA RAGHU-PUNNADI

STC INDIA ANNUAL CONFERENCE 2017

08-DEC-2017

Agenda

• What is Microcopy?

• History of Microcopy

• Why is Microcopy Important?

• How to Write Good Microcopy?

• Let’s Start with Microcopy

• How to Implement Microcopy?

What is Microcopy?• Small chunks of text that helps user perform a task

• Provides just-in-time clear instructions

• Microcopy is almost everywhere:◦ Instructions on the user interface

◦ Confirmation messages

◦ Error messages

◦ Form fields

◦ Buttons and menus

History of Microcopy• Small bits of copies on the interface

• Joshua Porter, introduced the term “Microcopy”

• Checkout form for e-commerce project

• Billing address errors had transactions failing

Don’t be deceived by the size of microcopy. It can make or break an interface.

Examples of Good Microcopy

Why is Microcopy Important?

Better User Experience Human Interaction

Builds Trust

Better UI Interaction

Increases Conversions Delights the User

How to Write Good Microcopy?

• Check the Voice and Tone of your Organization

• Keep it simple, may not be short at times

• Clear instructions. Must answer questions, such as:◦ What to do next?

◦ Result of click on UI?

◦ Is task complete?

◦ Why the error?

• Human touch

Let’s Start with Microcopy • Microcopy lives everywhere!

• Session covers:◦ Sign up form for Newsletter

◦ Error messages

◦ Buttons

◦ 404-Page not found

Sign Up Form for Newsletter• User Emotion

• Challenges:◦ Fear of spam◦ Why sign up?◦ Timing of sign up message?

• Tweaks:◦ Interesting title and value for user◦ Reassure no spams◦ Frequency of newsletter◦ Social proof◦ Label of sign in button must also be eye catcher!◦ Time the message

Error Messages• User Emotion

• Challenges:◦ User is annoyed!

◦ Unclear, half information

• Tweaks:◦ What went wrong?

◦ Why?

◦ What to do next?

Examples of Bad Error Messages

How to Write Good Error Messages?• Never blame the user

• Apologize

• Message for humans

• Technical jargons a big NO!

• Remove ambiguity

• Constructive resolution

• Tone light-hearted

Best way to avoid error messages is to avoid the error… HOW??Proper guidance using Microcopy wherever possible

Examples of Good Error Messages

Buttons• User Emotion

• Challenges:◦ Get user to click the button

◦ Generic button labels, Submit, Send, Register, Download

• Tweaks:◦ Value instead action

◦ Button labels and Call-to-Action (CTA)

• Request a free quote today!

• Become a Member!

◦ Simple and personal labels

404-Page Not Found• User emotion

• Challenges:◦ Dead end!

◦ Page does not exist

◦ User typed incorrect URL

• Tweaks:◦ Explain what happened. 404 is just a number!

◦ Apologize

◦ Link to important pages: Home, Contact Page, 2-3 important links on your site

◦ Contact details of Customer Support

How to Implement Microcopy?• Get buy in from all stakeholders: PO, PM, UX, Dev, L10N

• Analyze Usability testing

• Add relevant Microcopy

• Do A/B testing

• Become part of core group

Delight in small details!

Christopher Murphy and Nicklas Persson in their book The Craft of Words, Part Two: Microcopy describe Microcopy as:

“The craft of words at a micro level, considering how words can satisfy a functional requirement by aiding and improving design interactions,

enhancing interfaces for both function and delight, and helping a user on their journey.”

*All images used in this presentation were sourced from the world wide web and used only for an educational purpose.