![Page 1: 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,](https://reader035.vdocuments.us/reader035/viewer/2022071102/5fdb0354a92d0407ac169623/html5/thumbnails/1.jpg)
Microcopy -Tiny Words, Huge Impact!SANGEETA RAGHU-PUNNADI
STC INDIA ANNUAL CONFERENCE 2017
08-DEC-2017
![Page 2: 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,](https://reader035.vdocuments.us/reader035/viewer/2022071102/5fdb0354a92d0407ac169623/html5/thumbnails/2.jpg)
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?
![Page 3: 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,](https://reader035.vdocuments.us/reader035/viewer/2022071102/5fdb0354a92d0407ac169623/html5/thumbnails/3.jpg)
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
![Page 4: 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,](https://reader035.vdocuments.us/reader035/viewer/2022071102/5fdb0354a92d0407ac169623/html5/thumbnails/4.jpg)
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.
![Page 5: 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,](https://reader035.vdocuments.us/reader035/viewer/2022071102/5fdb0354a92d0407ac169623/html5/thumbnails/5.jpg)
Examples of Good Microcopy
![Page 6: 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,](https://reader035.vdocuments.us/reader035/viewer/2022071102/5fdb0354a92d0407ac169623/html5/thumbnails/6.jpg)
![Page 7: 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,](https://reader035.vdocuments.us/reader035/viewer/2022071102/5fdb0354a92d0407ac169623/html5/thumbnails/7.jpg)
Why is Microcopy Important?
Better User Experience Human Interaction
Builds Trust
Better UI Interaction
Increases Conversions Delights the User
![Page 8: 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,](https://reader035.vdocuments.us/reader035/viewer/2022071102/5fdb0354a92d0407ac169623/html5/thumbnails/8.jpg)
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
![Page 9: 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,](https://reader035.vdocuments.us/reader035/viewer/2022071102/5fdb0354a92d0407ac169623/html5/thumbnails/9.jpg)
Let’s Start with Microcopy • Microcopy lives everywhere!
• Session covers:◦ Sign up form for Newsletter
◦ Error messages
◦ Buttons
◦ 404-Page not found
![Page 10: 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,](https://reader035.vdocuments.us/reader035/viewer/2022071102/5fdb0354a92d0407ac169623/html5/thumbnails/10.jpg)
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
![Page 11: 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,](https://reader035.vdocuments.us/reader035/viewer/2022071102/5fdb0354a92d0407ac169623/html5/thumbnails/11.jpg)
![Page 12: 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,](https://reader035.vdocuments.us/reader035/viewer/2022071102/5fdb0354a92d0407ac169623/html5/thumbnails/12.jpg)
Error Messages• User Emotion
• Challenges:◦ User is annoyed!
◦ Unclear, half information
• Tweaks:◦ What went wrong?
◦ Why?
◦ What to do next?
![Page 13: 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,](https://reader035.vdocuments.us/reader035/viewer/2022071102/5fdb0354a92d0407ac169623/html5/thumbnails/13.jpg)
Examples of Bad Error Messages
![Page 14: 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,](https://reader035.vdocuments.us/reader035/viewer/2022071102/5fdb0354a92d0407ac169623/html5/thumbnails/14.jpg)
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
![Page 15: 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,](https://reader035.vdocuments.us/reader035/viewer/2022071102/5fdb0354a92d0407ac169623/html5/thumbnails/15.jpg)
Examples of Good Error Messages
![Page 16: 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,](https://reader035.vdocuments.us/reader035/viewer/2022071102/5fdb0354a92d0407ac169623/html5/thumbnails/16.jpg)
![Page 17: 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,](https://reader035.vdocuments.us/reader035/viewer/2022071102/5fdb0354a92d0407ac169623/html5/thumbnails/17.jpg)
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
![Page 18: 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,](https://reader035.vdocuments.us/reader035/viewer/2022071102/5fdb0354a92d0407ac169623/html5/thumbnails/18.jpg)
![Page 19: 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,](https://reader035.vdocuments.us/reader035/viewer/2022071102/5fdb0354a92d0407ac169623/html5/thumbnails/19.jpg)
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
![Page 20: 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,](https://reader035.vdocuments.us/reader035/viewer/2022071102/5fdb0354a92d0407ac169623/html5/thumbnails/20.jpg)
![Page 21: 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,](https://reader035.vdocuments.us/reader035/viewer/2022071102/5fdb0354a92d0407ac169623/html5/thumbnails/21.jpg)
![Page 22: 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,](https://reader035.vdocuments.us/reader035/viewer/2022071102/5fdb0354a92d0407ac169623/html5/thumbnails/22.jpg)
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!
![Page 23: 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,](https://reader035.vdocuments.us/reader035/viewer/2022071102/5fdb0354a92d0407ac169623/html5/thumbnails/23.jpg)
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.”
![Page 24: 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,](https://reader035.vdocuments.us/reader035/viewer/2022071102/5fdb0354a92d0407ac169623/html5/thumbnails/24.jpg)
![Page 25: 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,](https://reader035.vdocuments.us/reader035/viewer/2022071102/5fdb0354a92d0407ac169623/html5/thumbnails/25.jpg)
*All images used in this presentation were sourced from the world wide web and used only for an educational purpose.