Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Copywriting & Conversion: Optimizing the Customer Experience

979 visualizaciones

Publicado el

In this presentation we'll discuss (sales)funnels. First off, what is a funnel, and how does the model work? Secondly, how can conversion (sales) be improved? By doing this we'll highlighting some of best practices from the user experience field (from covering visual design, interaction design to copywriting).

We'll discuss the best practices and examples per 'step' within an archetypical funnel model, namely: 1) product and landing pages, 2) order and payment details, 3) summary and check, and 4) confirmation.

In a more general sense, we'll discuss some interaction principles. Which patterns and conventions are appropriate in what scenario?

We'll also touch upon some of the dark patterns (tricks to exploit the user) that can be found in funnels.

The presentation will end with a check list for UX practitioners concerning copywriting that can be used to both improve the experience and increase sales.

Read the full article on: http://www.sodastudio.nl/kennis-ideeen/copy-en-conversie-lunchpresentatie

Publicado en: Internet
  • Sé el primero en comentar

Copywriting & Conversion: Optimizing the Customer Experience

  1. 1. Copy&conversion Optimizing the customer experience Or: putting the ‘fun’ in ‘funnel’
  2. 2. Inthispresentation • The funnel model • The funnel archetype • Product and landing pages • Order and payment details • Summary and check • Confirmation • Applying the right interaction principles • Dark patterns (don’t be evil) • Check list
  3. 3. Whatfunnel?
  4. 4. Here’sone..
  5. 5. Here’sone.. Homepage / landingpage Product page(s) Product details Buy Generally. Each decision ‘mode’ is covered by individual pages or information. Tumbling down should be smooth and easy.
  6. 6. Whythismodel?
  7. 7. Visitors Customers The road to conversion..
  8. 8. People tend to drop out though. E.g if they walk into technical problems, or can’t find information, have any doubt … hence a funnel. Can’t find right product info Unclear errors in ordering form Hidden costs at end of ordering process
  9. 9. It’s up to UX teams (designers, copywriters, developers) to broaden the funnel and increase conversion. Can’t find right product info Unclear errors in ordering form Hidden costs at end of ordering process
  10. 10. Product& landingpages The funnel archetype
  11. 11. “Users don’t care about you, they care about themselves and solutions to their problems. Write copy accordingly.” – Peep Laja Proposition
  12. 12. Pinterest shows a series of simple use cases which people relate to. It might also work for you!
  13. 13. Too bad though, this user remains very vague. It doesn’t feel that authentic..
  14. 14. Talking about vague: ‘Find things that inspire you’? Like what? What added value does Pinterest have?
  15. 15. “Arrive in style”. Uber focusses on how they complements your lifestyle or you identity.
  16. 16. Skype lets you talk to the world. It helps you connect to people you care about, easily.
  17. 17. Dutch telecom company Simyo clearly lists the most important unique selling points on the product selection page.
  18. 18. They also includes, amongst others, a logo of their network provider to boost trust.
  19. 19. They aren’t too humble about accomplishments: won prizes are showcased on a dedicated page.
  20. 20. Also, Dutch insurance company InShared presents trust icons (like common certificates and quality labels).
  21. 21. “One jar held ten cookies while the other contained just two. Though the cookies and jars were identical, participants valued the ones in the near-empty jar more highly. Scarcity had somehow affected their perception of value.” – Nir Eyal Scarcity
  22. 22. On Booking scarcity is all over the place. There’s a sense of urgency. (Up to the point that it’s uncomfortable to look at.)
  23. 23. On eBay, the number of viewers is shown, also driving the sense of urgency.
  24. 24. On VakantieVeilingen, winning an auction is key, the actual product becomes secondary. Winning at the last second is the ‘rush’.
  25. 25. Pushing scarcity, and people’s “fear of missing out” may seem nasty (especially when the scarcity is artificially created by the site owners).. On the other hand, a case can be made for showing availability, to give the customer a fair chance to buy the product. Ultimately, to manage a customer’s expectations Afterthoughts
  26. 26. But let’s move on..
  27. 27. When it’s actually sold out, give the customer a chance to stay up-to-date on new stock. I.e CoolBlue offers the option to be notified via SMS. “Temporarily sold out”
  28. 28. Quantitative: How many customers have bought your product? Qualitative: What customers or businesses use it? What’s their story? Social proof
  29. 29. Apparently, large renowned companies (with authority) are already using Slack. They can’t be wrong, right?
  30. 30. Additionally, Slack features the love users have for the product..
  31. 31. .. Which links to this Twitter page (‘wall of love’). The reviews you see here are curated, but they’re authentic!
  32. 32. Kickstarter is all about the numbers. You’d want to fund projects in large amounts, jump the bandwagon. And, in many cases, support the ‘new player’ in the field to excel with their product.
  33. 33. Making decision-making easier Product options
  34. 34. Labels like “Most popular” make choosing easy on Simyo. Apparently, this option is sufficient for most people.
  35. 35. In the funnel of health insurance company Ziezo, the price is updated according to the user’s choices. The total costs are always shown, which makes it easier to decide.
  36. 36. Thechoiceparadox People want control. But in most cases too much choice backfires; resulting in people not choosing anything.
  37. 37. “Most people online are gorillas. When a gorilla walks into an experiment, what they say is ‘What do I do now? Where’s the banana?’” – Seth Godin Call-to-actions (CTA’s)
  38. 38. Differentiate http://blog.codinghorror.com/the-god-login/ Be clear on labelling, provide sufficient feedforward and differentiate multiple CTA’s.
  39. 39. ‘Clickmagnets’ • Use words that trigger • ‘Fast’, ‘easy’, ‘convenient’, ‘free’ et cetera • (The offer has to be relevant in order to be effective though.)
  40. 40. The3rdoption Adding a trivial third option increases conversion. (Supposedly, because user feel in control.) http://www.marketingfacts.nl/berichten/conversieknaller-de-extra-link-die-niemand-klikt-hobson1-effect
  41. 41. Order& paymentdetails The funnel archetype
  42. 42. The insurance company Zelf gives feed-forward about what information is needed to complete an order. This is recommended if certain parts are uncommon or hard. Also, when completing an order takes longer than average, it might also be useful to manage the customer’s expectations. I.e “This will take about 30 minutes”.
  43. 43. Booking uses this to their advantage. It just takes 2 minutes. .. Same trick here. You don’t need to many details to complete a booking. Promotingconvenience
  44. 44. Stepindication • Emphasize on ‘Where am I?’ and ‘What’s next?’ • Apply ‘just’ enough, clearly demarcated steps. • Splitting input into steps (and making the user submit more often) avoids errors • Splitting up forms and information keeps your pages more digestible • Label the steps consistently
  45. 45. Threadless presents a small and compact ordering form with clear steps.
  46. 46. However, there’s no way to tell what the payment options are. The user might not be able to pay, which is useful information up front.
  47. 47. On the site of cable company Tele2, labelling of steps is short and sweet. Stepindication
  48. 48. But what about ‘levering’ (delivery)? Are there elaborate options? Might be useful to communicate this earlier in the process.. Stepindication
  49. 49. ‘Confirmation’? Do I need to confirm my details here, or is my order confirmed once I enter this screen? (Ambiguous labelling.) Stepindication
  50. 50. Stepindication On Booking, it’s clear what expected of the user in each step. (1 to 3 is all requires input.)
  51. 51. Stepindication ‘Geboekt’ (booked) is clearly ‘just’ a confirmation. Also fits with the excitement after having booked.
  52. 52. Minimize‘escapes’
  53. 53. Minimize‘escapes’ The Vodafone funnel uses another header and footer which contains a minimal amount of outgoing links. The focus is on making a purchase.
  54. 54. Minimize‘escapes’ They also have a nice heads-up about what information is needed to complete the order.
  55. 55. Defaults&shortcuts To make going through forms lightning fast: • Use smart defaults (i.e for a country dropdown), so most users don’t have to fiddle with those inputs. • Use shortcuts for entering information, i.e entering postal code as a shortcut for city + street name. So the number of input fields can be reduced.
  56. 56. Defaults&shortcuts Vodafone offers the option to re-use information which is entered earlier. In this case for delivery/billing address.
  57. 57. Sell!
  58. 58. Uporcross? • Upselling:
 “A sales technique whereby a seller induces the customer to purchase more expensive items, upgrades, or other add-ons [e.g] services or products [or showing] other options.” – Wikipedia • Cross-selling:
 “[trying] to sell something else.” – Wikipedia
  59. 59. On Asos, the customer is tempted to keep shopping so that certain delivery options are free (upsell).
  60. 60. On Coolblue, upsell/cross-sell is done when adding a product to your cart. Relevant upgrades and extensions to that product are shown.
  61. 61. In the KLM funnel, choosing extras is a separate step in the ordering process. The used photography feels overly ‘stocky’ though..
  62. 62. Takingawaydoubt • Answer questions that the customer might have on relevant locations (FAQ’s are often clunky) • Provide a telephone number, chats or other ways for quick Q&A • Make the user feel safe, highlight the SSL certificate, possibly with the security provider (Norton, MacAfee et cetera)
  63. 63. Coolblue always shows their telephone number. (Moreover, they are practically always open.)
  64. 64. Accountmanagement • Don’t force the user in creating an account, offer a guest user option • If an account needs to be created.. • Use e-mail als key identifier (not a username) • Leave out password creation (i.e generate one and send it via e-mail), otherwise, be clear about your password criteria when choosing one
  65. 65. Passwordcreation Dropbox shows when the password you’ve entered is secure enough, which avoids trial and error.
  66. 66. Summarizethe order The funnel archetype
  67. 67. Summarizetheorder • Summarize clearly, make checking quick and easy • Provide all possible information • Summarize the terms & conditions so the user knows what he agrees with • Make the submit (order) button feel ‘definitive’
  68. 68. Health insurance company Zilveren Kruis clearly lists all entered information.
  69. 69. Confirmation The funnel archetype
  70. 70. Confirmation • Thank the customer • If appropriate: celebrate • Summarize the order once again • Explain the after-payment process (what’s next?) • Give solutions for all possible process errors (i.e what if the confirmation e-mail was not received, or when customer details are not okay)
  71. 71. Car rental service YellowBrick tells what the next steps are. What to expect.
  72. 72. However, the copywriting is very formal.
  73. 73. Presents a link to ‘the site’. Is this page not ‘the site’?
  74. 74. A link to the order summary is hidden over here, and doesn’t feel very clickable.
  75. 75. Interaction principles
  76. 76. UIelements Radio buttons • Few options, mutually exclusive (i.e gender) Check boxes • Options that can be turned on/off independently (i.e opt-in list for different types of newsletters) Dropdowns • 1 option, few options (up to about 15 options) Toggles / Switches • Either on or off Option 1 Option 2 Option 3 Male Female Amsterdam
  77. 77. On Ziezo, the radio button convention is used to further communicate the component’s affordance.
  78. 78. Tooltips Guide the user with example input to prevent errors. Even better: allow for multiple formats (i.e with and without spaces)
  79. 79. Errormessages
  80. 80. “Error messages punish people for not behaving like machines. […] It is time to design and build machines that conform to our requirements. Stop confronting us: Collaborate with us.” – Don Norman Error messages
  81. 81. Errormessages • Explain what’s gone wrong • Don’t ‘blame’ the user • Provide solutions to the problem • Avoid technical jargon • Allow for different values: make the system more forgiving if possible
  82. 82. Inlinevalidation Inline validation means giving feedback while the input field is active. This makes your forms faster to go through, and relieves some of the hassle. On Bol suggestions are given when common mistakes are made when entering an e-mail address.
  83. 83. Inlinevalidation However, choose the moment for feedback wisely. You don’t want to show errors before the user has had the chance to complete the input. “This is no valid date of birth.”
  84. 84. Errormessages Choose copy that’s human, and not too harsh..
  85. 85. Sometimesclearand shortcopyisbetter prevue.it has tried a lighthearted (funny) error. Which eventually didn’t fit the context. (The user could be in a hurry and stressed when using the product.)
  86. 86. Lightheartedly In other cases, a lighthearted error is appropriate. (Above: the error when submitting a empty login form.)
  87. 87. In some cases, text can be left out. In Wordpress the login box shakes when submitting the incorrect credentials.
  88. 88. DarkPatterns
  89. 89. A Dark Pattern is a type of user interface that appears to have been carefully crafted to trick users into doing things, such as buying insurance with their purchase or signing up for recurring bills. Don’tbeevil DarkPatterns.org
  90. 90. Don’tbeevil • Provide sufficient information • Avoid hidden costs, be transparent about price • Don’t put something in the shopping cart without a user’s consent, or check product options by default • Avoid trick questions
  91. 91. On Hotels, the opt-in for newsletter is phrased as a double negative. “Check if you do not want to receive..”. Thus exploiting the user’s mental model (the convention). Moreover, the text is pretty long for something that’s fairly simple.
  92. 92. On SeeTickets, the total price is shown, but the check (by default) makes it so that additional costs can be added further on in the funnel.
  93. 93. Inconclusion..
  94. 94. Checklist • Use headings that are easily scannable • Use bullet lists when appropriate. When using longer list, highlight the important. • Use one clear CTA on every page • Label CTA’s with the right ‘weight’ (‘proceed’ or ‘buy’) • Use natural language • Use just enough copy, make it feel light • Research the edge cases (i.e errors) and think about how to help the user in those situations • Don’t be evil
  95. 95. Let’smakeshopping moreconvenient! Photo: Hans Kemp Questions? E-mail me at sjoerd@sodastudio.nl Good luck!

×