Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Effective Copywriting Tips for Better UX

335 Aufrufe

Veröffentlicht am

This talk was given at WordCamp NYC 2018.

When we think about UX we’re often too focused on fonts, colors, and flow to think about microcopy‚ those small bits of text that guide users through almost every part of a web interface. These words may be tiny, but they can make a significant difference in the usability of your design and even affect your site’s conversion rates.

This presentation offers copywriting and communication tips that will immediately improve your user interface microcopy, such as error messages and interface instructions, so your users experience less frustration and more delight.

Veröffentlicht in: Design
  • Als Erste(r) kommentieren

Effective Copywriting Tips for Better UX

  1. 1. Copywriting EFFECTIVE TIPS FOR BETTER UX p Andrea zoellner @andreazoellner WordCamp New York 2018
  2. 2. Andrea Hi, I’m Content Creator at @andreazoellner
  3. 3. @andreazoellner
  4. 4. s@andreazoellner Add to cartUhOh! That Item is sold out. Click here to browse all. Pin this recipe Your answer has been submitted. Click here to review your submission. Learn More View all Save for later Read Terms and Conditions Get notified if this item becomes available. Download past Issues Book a service
  5. 5. • Think big to perfect the small • Design with empathy • Keep it simple @andreazoellner Three tips
  6. 6. @andreazoellner 1. Think big to perfect the small
  7. 7. @andreazoellner • What is your company’s mission? • How do you want people to feel about your brand? • If you could picture your brand as a person, how would they act and sound? eCopywriting and your Brand
  8. 8. @andreazoellner • Who is your audience? • What’s the purpose of this piece of content or copy? • Does it make sense with other elements on the site? No accidental copy
  9. 9. e
  10. 10. e
  11. 11. ee
  12. 12. eBe consistent User - Member - Subscriber - Visitor - Reader
 Book - Make a reservation - RSVP - Join - Tickets Basket - Bag - Cart - Shopping Cart @andreazoellner
  13. 13. Flows @andreazoellner vvVVV vvvvvv vv A
  14. 14. Flows @andreazoellner • Signup, payment, subscription flows • Forms and prompts • Product and feature tours • Navigation links and search filters
  15. 15. @andreazoellner 2. Design with empathy t
  16. 16. • What is the reader trying to do? • What could the reader be feeling? • How did the reader get here? • What’s happening next? • What choices can they make? cIn their shoes @andreazoellner
  17. 17. c• What is happening in this frame? • How does it relate to the frames before and after it? • Is it complete? What’s missing from the story? • Does everything sound like it came from the same place? In their shoes @andreazoellner
  18. 18. • Fear of irreversible changes • Fear of data loss • Fears over personal data security • Fear of getting spammed FEELINGS r@andreazoellner
  19. 19. • Help users get started • Let users know what to do next • Explain new features • Reduce cognitive effort • Suggest users take a certain action • Help users in a moment of failure Use copy to: p@andreazoellner
  20. 20. • Check for typos • Edit for consistency • Review the order • Narrow the focus • Timing copyEditing your screens VVVVVV
  21. 21. Overwhelming PATRONISING What’s the right amount of instruction? The sweet spot sets clear expectations while staying out of their way.
  22. 22. Accessibility • Use Label elements • Use precise language • All microcopy should appear as live text—not as an image • Make sure tooltip text is accessible p
  23. 23. @andreazoellner 3. Keep it Simple
  24. 24. @andreazoellner • Use clear, active, and precise language • Avoid jargon and idioms • Replace ambiguous language • Focus on one idea/task at a time Clear > cute
  25. 25. @andreazoellner nWHERE TO START?
  26. 26. The Form
  27. 27. The Form Your name Explanation Add Placeholder text Helper text
  28. 28. @andreazoellner • Always use a label • Use placeholder text • Associate helper text • Highlight required fields • Flag errors • Make clear buttons • Customise the follow- up messages The Form
  29. 29. @andreazoellner The Checkout • Alleviate the user’s concerns
  30. 30. @andreazoellner • Alleviate the user’s concerns • Motivate action The Checkout
  31. 31. @andreazoellner • Alleviate the user’s concerns • Motivate action • Turn an empty state into a trigger The Checkout
  32. 32. ERROR MESSAGES
  33. 33. ERROR MESSAGES
  34. 34. Resources Nicely Said by Nicole Fenton and Kate Kiefer Lee UX Planet - https://uxplanet.org Accessible Microcopy - https://www.invisionapp.com/blog/writing-accessible- microcopy/
  35. 35. THANK YOU p Andrea zoellner @andreazoellner

×