Copywriting for UX
44 likes7,261 views
This document discusses the importance of thoughtful copywriting for user experience (UX). It begins by noting that both designers and copywriters are tasked with making experiences intuitive and compelling for users. The document then outlines how copy, like design, should consider the user, context, flow, business goals, and brand. It provides examples of where copy is needed and recommends that copy be researched, concise, put the audience first, and reduce ambiguity. The document also discusses how copy is typically created using spreadsheets and comments in design tools, and the importance of brand guides, content guides, and product marketing in aligning copy with UX and business goals.
![With spreadsheets and google docs
Hi {Name},
Your call for Wednesday January 4th
at 12pm is confirmed!
Please [review your welcome packet]
before hand and be sure to be at your
computer.
[Review the packet]
Looking forward to speaking with you,
Support Team
Google doc
with body copy
Onboarding flow
Email Spreadsheet](https://image.slidesharecdn.com/copywritingforux-slideshare-151109220817-lva1-app6892/85/Copywriting-for-UX-29-320.jpg)
Copywriting for UX
- 1. Copywriting for UX Talisa Chang | @talisa
- 2. What people ask designers: Can you make this look better?
- 3. What people ask copywriters: Can you make this sound better?
- 4. What they mean in both cases: Can you make this experience intuitive and compelling for the person who will be using it?
- 5. My background Hats I’ve worn: • UX Designer • UX Researcher • Copywriter • Product Marketing Manager • Brand Consultant • Brand Manager • Digital Strategist • Content Strategist • Reporter • “Talisa-fier” • “All of the words” +
- 6. Like design, copy is more than the sum of its parts words. Brand Desirability Usability Utility
- 7. Just like good UX, good copy… Considers the user Who’s reading this? What background knowledge do they have? What are their goals? What are their pain points?
- 8. Just like good UX, good copy… Considers the context Where are they physically? What device are they using? Are they in a rush? Have they been to this page/screen before? How often?
- 9. Just like good UX, good copy… Considers the flow What did they do before this? What can they do next?
- 10. Just like good UX, good copy… Considers the business goals Ideally, what would we like them to do?
- 11. Just like good UX, good copy… Considers the brand How do we want the overall experience to feel?
- 12. Where do all the words go?
- 13. Where do all the words go? • Interfaces • Navbars • Drop downs • Form fields • Tool tips • Error messages • Loading screens • Settings pages • Landing pages • Empty states • Onboarding • Coach marks • Confirmation pages • Support articles • Product videos • Call scripts • Emails • Blog posts • App store descriptions • Social media posts • Social media ads • Press releases • Style guides • etc.
- 14. Wait, so who is supposed to make/write all this stuff?
- 15. If you are lucky… A few people whose explicit job is to write it (content strategists, copywriters, email marketers, etc.) … who have created and/or are following guidelines for how to write it … and are in constant communication with designers, engineers, support, marketing, sales, etc. … to ensure there is a consistent, cohesive narrative to the experience
- 16. But at a lot of places, it’s... ● Designers, kind of ● Someone from marketing, sometimes ● Whoever is the best speller on the team ● Whoever happened to bump the fidelity from lorem ipsum → real words ● Whoever realized copy was needed somewhere and put it there as they were making it (probably a developer)
- 17. How to write thoughtful copy
- 18. Good copy reduces ambiguity ● It’s specific ● It’s readable at all viewport widths ● It’s concise ● It’s contextual ● It’s consistent ● It labels objects clearly ● It speaks in plain language (no jargon)
- 19. Good copy puts the audience first ● Considers the context and flow (use personas, user journeys, and user flows) ● Considers goals and motivations ● Offers actionable information ● Explains why, not just what ● Is translation-friendly
- 20. Good copy is well-researched ● Research conventions ● Ask your subject matter experts ● Ask your community members ● Put it in your (early) prototypes ● Put it in your usability tests ● Test it in emails ● Card sort it ● A/B test it
- 21. Good copy is well-researched ● Research conventions ● Ask your subject matter experts ● Ask your community members ● Put it in your (early) prototypes ● Put it in your usability tests ● Card sort it ● A/B test it ● Test messaging with email
- 22. PSA: No one reads on the internet.
- 23. So make it count.
- 24. Especially when…
- 25. ...the stakes are high ● CTAs ● Navigation ● Instructions ● Errors ● Important forms and documents ● Customer support ● Privacy concerns ● Things that cost money ● Any situation where users are willing to read
- 26. … the stakes are low ● Loading screens ● App store update copy ● Non-critical notifications ● Any place you can push the brand voice without risking clarity
- 27. Extra words or explanatory text can’t “fix” poor UX. But copy can help make good UX even better.
- 29. With spreadsheets and google docs Hi {Name}, Your call for Wednesday January 4th at 12pm is confirmed! Please [review your welcome packet] before hand and be sure to be at your computer. [Review the packet] Looking forward to speaking with you, Support Team Google doc with body copy Onboarding flow Email Spreadsheet
- 30. Using spreadsheets Basic Process ● Designer or product manager creates a content spreadsheet in google docs ● Add columns for states, errors, tooltips, versions, etc. ● Copywriter and various stakeholders can fill out Benefits ● Allows you to organize a lot of copy ● Flexible: can link out to other docs if necessary, color- code columns, merge sections, etc. ● Engineers can see all states, errors, tooltips, etc even if they’re not represented in the design ● Same commenting features as all google docs
- 31. Using InVision comments Basic Process ● Designers upload wires to InVision via Dropbox ● Copywriters use comment feature to suggest copy ● Designers update copy and re-sync via Dropbox Benefits ● Copy edits can be placed directly onto the design ● Commenting feature allows for questions, feedback, etc. (participants get email notifications) ● Easy to share with stakeholders for review; no account needed to view or comment ● Already set up to test prototype with user ● No different versions of marked up pdfs floating around
- 32. Using Google docs Basic Process ● Put screenshots of designs that need new copy into a google doc (and label them/explain where they are in the flow) ● Write/suggest new copy underneath ● Protip: highlight the actual interface/UI copy in a separate color Benefits ● Quick and dirty ● Plenty of room to add additional copy (states, errors, etc) ● Team members can easily comment, suggest edits, see revision history, etc
- 33. Notes on process ● As a designer, it’s your job to care about copy ● Don’t wait for a finished mock up. Let copy start anywhere, with anyone. (The sooner, the better) ● Get organized. Make simple checklists, schedules/deadlines, and spreadsheets as needed. ● Involve product managers to help keep things organized, but *stay close to the process* As soon as you know you need words, start thinking about how and when they’ll be created and finalized.
- 34. Notes on process, cont ● Requests to the person writing copy should always include context (full screenshots and/or screen flows, word counts, goals, translation deadlines, etc) ● Allow time for revisions, especially if the initial copy lives outside of the design in a doc ● Consider the brand. Work with your marketing team. ● Consider the implications. Work with your customer support team. ● Consider the flow and functionality. Work with your engineers/designers/product owners. ● No waterfalling! Pair copywriters with designers throughout the process.
- 35. Brand, style, and content guides
- 36. Brand Positioning The result of business and brand research, stakeholder interviews, workshops, etc. Could be used internally or externally. Could be created by an in-house marketing team or by an agency. Could be robust and polished, or brief and in a google doc. May include: brand pillars, mission/vision statements, about us copy, key messaging, naming and lexicon, etc. brand.quantcast.com
- 37. Content Guides The result of collaboration between marketing, product, and other stakeholders Can serve as a guide across teams (sales, customer support, etc) Should be actionable and include specific examples, do’s and don’ ts May include: voice and tone, grammar rules, capitalization rules, naming and glossaries, do’ s and don’ts, etc.
- 38. MailChimp: The Content & Copy Pros | http://voiceandtone.com | http://styleguide.mailchimp.com
- 39. 18F: Made for the federal government; a great starting point for you | https://pages.18f.gov/content-guide/
- 40. Product + Marketing = Product Marketing ● The glue between product and marketing ● Sometimes a dedicated role or team, sometimes just a process ● Helps ensure the story of your product or feature is told externally (blog posts, press outreach, support faqs, app store copy, etc) ● Helps ensure the story is reflected in the product (interfaces, error messages, notifications, etc) ● May entail: launch checklists and copy processes, messaging docs, brand positioning, market research, new naming, email or blog copy, social media strategy, pr plans, app store copy
- 41. I need a copywriter. Can I hire you?
- 42. Just like good UX, good copy is not just a role you can hire for and be done with.
- 43. How to get started at upping the copy game at your organization:
- 44. 1. Figure out what you need. Content strategy? Style guidelines? Consistent naming and language? Taxonomy/lexicon? A unified voice and tone? Brand positioning/messaging? Interface copy? Landing pages? Translations and localized copy? Onboarding emails? Transactional emails? Lifecycle emails?
- 45. 2. Figure out how (or by whom) it’s getting done today and what the biggest priorities and gaps are. It’s probably a combination of people in marketing or product. At a minimum, it’s whoever is writing the copy now, and/or whoever is signing off on it.
- 46. 3. Make a commitment to make copy part your design process and start asap. This may require upfront work (developing guidelines, messaging, etc). It will also mean making changes to how things currently get shipped. It won’t happen overnight. But you’ll be very happy you did it.
- 47. 4. Hire accordingly and keep iterating. Don’t hire until you have a sense for what you need. Don’t hire until you’re ready to make some changes to your processes.
- 48. Talisa Chang is an interdisciplinary product and UX consultant. Find her on Twitter, Linkedin, Medium, or her website.