microcopy tiny words, huge impact! - stc india · better user experience human interaction builds...
TRANSCRIPT
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.