MicrocopySmall, yet powerful copy for web & mobile appsWarm Gun Conference, 2011Joshua Porter, HubSpot
“So what is this new type of copy I keep seeing, small and helpful,often pleasing, that helps reduce      friction in an i...
Microcopy.
So what is microcopy?• A short sentence, a phrase, a few words. A  single word.• Targeted at a specific question, concern, ...
Because interfaces are mostly words, andpeople mostly get tripped up by small details,  writing good microcopy is the fast...
Where is microcopy?
http://www.flickr.com/photos/lencioni/5580154551/
Sign Up
App Settings
404 Pages
Email Sign Up
Social Sign-up Policy
Mobile/Web Flow
Soliciting Feedback
Success/Error Messages
Physical Spacehttp://www.flickr.com/photos/matt_gibson/4823533263/in/pool-microcopy/
Welcome Messages
Benefits of Microcopy
Greatmicrocopyclears a pathfor the user.
Greatmicrocopymakes usershappy.
Greatmicrocopymakes usersfeel loved.
Greatmicrocopymakes usersmore loyal.
HubSpot Dashboard Case Study
HubSpot Dashboard Case Study                   Now what?
HubSpot Dashboard Case Study
HubSpot Dashboard Case Study
HubSpot Dashboard Case Study
HubSpot Dashboard Case Study• Over-exposure/repetitiveness breaks the magic. So if a  screen is seen a lot, vary the micro...
“I just noticed the ‘wowza’ cheerleadingcomments to the right of the graphs. That was my thought exactly (and Im flatteredt...
“I like your Wowza comments! I feel like Ihave a mini digital coach in my Dashboard.”
Getting started with microcopy...• If possible, hire a professional copywriter• Standardize UI elements (e.g. success/erro...
MicrocopySmall, yet powerful copy for your web applicationsWarm Gun Conference, 2011Joshua Porter, HubSpot
Joshua Porter
Joshua Porter
Joshua Porter
Joshua Porter
Joshua Porter
Joshua Porter
Joshua Porter
Joshua Porter
Joshua Porter
Upcoming SlideShare
Loading in...5
×

Joshua Porter

2,246

Published on

www.warmgun.com

Published in: Technology, Business
0 Comments
15 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,246
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
87
Comments
0
Likes
15
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Joshua Porter

    1. 1. MicrocopySmall, yet powerful copy for web & mobile appsWarm Gun Conference, 2011Joshua Porter, HubSpot
    2. 2. “So what is this new type of copy I keep seeing, small and helpful,often pleasing, that helps reduce friction in an interface?”
    3. 3. Microcopy.
    4. 4. So what is microcopy?• A short sentence, a phrase, a few words. A single word.• Targeted at a specific question, concern, or other cognitive block.• Extremely contextual (which makes it valuable but hard to predict)• Small copy with the biggest impact.
    5. 5. Because interfaces are mostly words, andpeople mostly get tripped up by small details, writing good microcopy is the fastest way to improve your interface.
    6. 6. Where is microcopy?
    7. 7. http://www.flickr.com/photos/lencioni/5580154551/
    8. 8. Sign Up
    9. 9. App Settings
    10. 10. 404 Pages
    11. 11. Email Sign Up
    12. 12. Social Sign-up Policy
    13. 13. Mobile/Web Flow
    14. 14. Soliciting Feedback
    15. 15. Success/Error Messages
    16. 16. Physical Spacehttp://www.flickr.com/photos/matt_gibson/4823533263/in/pool-microcopy/
    17. 17. Welcome Messages
    18. 18. Benefits of Microcopy
    19. 19. Greatmicrocopyclears a pathfor the user.
    20. 20. Greatmicrocopymakes usershappy.
    21. 21. Greatmicrocopymakes usersfeel loved.
    22. 22. Greatmicrocopymakes usersmore loyal.
    23. 23. HubSpot Dashboard Case Study
    24. 24. HubSpot Dashboard Case Study Now what?
    25. 25. HubSpot Dashboard Case Study
    26. 26. HubSpot Dashboard Case Study
    27. 27. HubSpot Dashboard Case Study
    28. 28. HubSpot Dashboard Case Study• Over-exposure/repetitiveness breaks the magic. So if a screen is seen a lot, vary the microcopy appropriately.• Tone is important. Your microcopy needs to be appropriately serious.• Once you use microcopy to fix existing issues, you’ll expose new problems almost instantly.• The benefits are real. (a good dose of friendly, helpful microcopy leads to trust)
    29. 29. “I just noticed the ‘wowza’ cheerleadingcomments to the right of the graphs. That was my thought exactly (and Im flatteredthat you noticed, too)! Seriously, it’s a cute touch and it made my day.”
    30. 30. “I like your Wowza comments! I feel like Ihave a mini digital coach in my Dashboard.”
    31. 31. Getting started with microcopy...• If possible, hire a professional copywriter• Standardize UI elements (e.g. success/error msgs)• Conduct usability tests to find confusion/issues• Talk to support (they know what is unclear)• Create a microcopy project and publish examples of how you use microcopy (we’ve had really good success at HubSpot)
    32. 32. MicrocopySmall, yet powerful copy for your web applicationsWarm Gun Conference, 2011Joshua Porter, HubSpot
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×