$30 off During Our Annual Pro Sale. View Details »

How to engage users with forms that don't suck

Steve Wells
November 05, 2016

How to engage users with forms that don't suck

Learn how to improve your forms to increase conversions and better engage with users.

Steve Wells

November 05, 2016
Tweet

Other Decks in Technology

Transcript

  1. How to engage users
    with forms that don’t suck

    View Slide

  2. I am Steve Wells
    Co-founder and designer
    at Strategy11.
    You can find me at
    FormidablePro.com
    @SteveWellsJr
    HELLO!

    View Slide

  3. I am Jessica Wittmier
    Strategic Marketing
    Consultant.
    You can find me writing blog
    posts at Formidablepro.com
    @JessicaWittmier
    HELLO!

    View Slide

  4. Lake Isabel, San Isabel National Forest off HWY 165 West of Rye

    View Slide

  5. @FormidableForms #formmatters

    View Slide

  6. FORMS
    Gone are the days when forms were limited to
    a simple contact form or newsletter opt-in.

    View Slide


  7. What can visitors or users
    do on a website?

    View Slide

  8. View Slide

  9. View Slide

  10. View Slide

  11. View Slide

  12. View Slide

  13. Now, virtually all engagement on websites (aside
    from social sharing and commenting) happens via
    forms...
    and even social sharing and commenting are
    accomplished using... FORMS!

    View Slide

  14. WAY
    Historically, users spent their time
    scrolling and clicking through the web
    ONE WWW
    Flow of information in the past

    View Slide

  15. Not just browsing
    In 2016, the typical user wants to be a part of
    the web rather than a bystander

    View Slide


  16. Every second, approximately 6,000 tweets
    are tweeted; more than 40,000 Google
    queries are searched; and more than 2
    million emails are sent.
    * Internet Live Stats -- international Real Time Statistics Project.

    View Slide

  17. WAY
    As website authors, we need to take
    advantage of this two-way flow of information.
    TWO WWW
    Flow of information today

    View Slide

  18. WHY?
    Why do we need to engage our users?

    View Slide

  19. #torontotunnel

    View Slide

  20. The point is:
    We don’t know what goes
    on inside our users’ heads

    View Slide

  21. How do we find out?
    With forms that don’t suck!

    View Slide

  22. ✓ Contact
    ✓ Donation
    ✓ Order/ Payment
    ✓ Event registration
    Form Categories
    ✓ Lead generation
    ✓ Survey
    ✓ Contest

    View Slide


  23. What do you think is the lowest
    converting form category?
    Highest?

    View Slide

  24. ✓ Contact 1%
    ✓ Donation 7%
    ✓ Order/ Payment 9%
    ✓ Event registration 11%
    Form Categories
    ✓ Lead generation 11%
    ✓ Survey 14%
    ✓ Contest 35%
    2015 average conversion rates across
    650,000 sites studied by Formstack.com

    View Slide

  25. Why? W.I.F.M.

    View Slide

  26. Form engagement from a psychological perspective
    https://leadformly.com/form-optimisation-pyramid/

    View Slide

  27. Motivation
    Do I want the outcome of filling out this form?
    1.

    View Slide

  28. Motivate visitors with great marketing copy.
    When crafting marketing copy,
    make sure W.I.F.M. is in play:
    ✓ in your offer
    ✓ in your page copy
    ✓ on your call to action button
    vs.
    YOU want them to submit.
    THEY want instant access.

    View Slide

  29. But great marketing copy can't overcome form field friction.
    4x as many fields PLUS a required
    phone #. Better be a darn good ebook.

    View Slide

  30. Ability
    Can I fill out this form?
    2.

    View Slide

  31. Information
    Does this form require
    specific information I might
    not have readily available?
    Do I have what I need to complete this form?
    Time
    Does this form take more
    time than I have?

    View Slide

  32. Information
    Outline any special
    requirements needed
    to complete the form.

    View Slide


  33. Increase conversion rates by allowing
    users to save their progress and return
    later to complete.

    View Slide

  34. Accessibility
    To maximize your form
    accessibility, consider these tips
    ✓ Test your form with a screen reader
    ✓ Avoid small text
    ✓ Increase the contrast
    vs.

    View Slide

  35. If you are taking them on a journey, provide a roadmap.
    No sense of direction, how long it's going to take or what is going to be needed.

    View Slide

  36. What's needed. Roadmap provided. Ability to save and come back later.

    View Slide

  37. Peace of Mind
    Will anything bad happen if I fill out this form?
    3.

    View Slide


  38. What are some "bad things" you might
    wonder will happen as you fill out a form?

    View Slide

  39. Address the "bad things" in the copy but frame it positively.
    Don't worry. Wait. Should I worry?

    View Slide

  40. Encrypt any sensitive data
    “I wish my website were
    less secure”
    -no one ever

    View Slide

  41. Ease
    Is it easy to fill out this form?
    4.

    View Slide


  42. Simple forms don’t have to
    have fewer fields

    View Slide

  43. Place your screenshot here
    Conditional Logic
    Only show fields your
    user needs to see
    and only when they
    need to see them.

    View Slide

  44. Multi-Page Forms
    Breaking up long
    forms will improve
    completion rates—If
    you have progress
    indicators.

    View Slide

  45. View Slide

  46. More tips
    A few more things:
    » auto-populate fields whenever possible
    » save data from one session to another (save drafts)
    » make forms responsive
    » use repeatable fields for data sets

    View Slide

  47. View Slide

  48. View Slide

  49. As if looking for new health insurance isn't bad enough.

    View Slide

  50. After what we just went through on the other website... this is bliss.

    View Slide

  51. Taking ease of use beyond
    the browser

    View Slide

  52. Which devices are people using to access with the internet?
    47%
    Tablet
    80%
    Smartphone
    91%
    PC/Laptop
    Source: Global Web Index
    Text your favorite color to (720) 573-0128

    View Slide

  53. Which devices are people using to access the internet?
    9%
    Smart Watch
    34%
    Smart TV
    37%
    Game Console
    Source: Global Web Index
    Text your favorite color to (720) 573-0128

    View Slide

  54. Which devices are people using to access the internet?
    ?
    What’s Next?
    Text your favorite color to (720) 573-0128

    View Slide

  55. IoT
    Internet of Things
    Text your favorite color to (720) 573-0128

    View Slide

  56. As a result:
    Text your favorite color to (720) 573-0128

    View Slide

  57. Engaging
    Do I enjoy filling out this form?
    5.
    Text your favorite color to (720) 573-0128

    View Slide

  58. THE GOAL OF ENGAGING FORMS
    » Increase conversions
    » Collect actionable data
    » Build trust
    Text your favorite color to (720) 573-0128

    View Slide

  59. t
    To build engaging forms,
    just pay attention to the
    rest of the pyramid.
    Text your favorite color to (720) 573-0128

    View Slide

  60. t
    Text your favorite color to (720) 573-0128

    View Slide

  61. Engagement doesn’t end there.
    What happens after form submission
    is just as important.
    Text your favorite color to (720) 573-0128

    View Slide

  62. You’ve got mail
    Confirmation Emails
    • confirm submission
    • provide instructions
    • up-sale or promote
    Text your favorite color to (720) 573-0128

    View Slide

  63. You will literally "blow them away" with boring copy and unnecessary
    captchas.
    I guess I could fill out this form.
    But I'd rather tell you about my junker.
    Text your favorite color to (720) 573-0128

    View Slide

  64. And the winner is?

    View Slide

  65. Any questions?
    You can find us at:
    » @SteveWellsJr
    » @JessicaWittmier
    THANKS!
    Text your favorite color to (720) 573-0128

    View Slide