Joshua Porter

3,957 views

Published on

www.warmgun.com

Published in: Technology, Business
  • Be the first to comment

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

×