the features of highly effective forms n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
The Features of Highly Effective Forms [SmashingConf NYC 2016] PowerPoint Presentation
Download Presentation
The Features of Highly Effective Forms [SmashingConf NYC 2016]

Loading in 2 Seconds...

play fullscreen
1 / 118

The Features of Highly Effective Forms [SmashingConf NYC 2016] - PowerPoint PPT Presentation


  • 44 Views
  • Uploaded on

Web forms are complex beasts with many moving parts. That’s one of the reasons they're so challenging to build well. In this session, Aaron Gustafson will walk you through the process of creating a form—from planning to production—and give you sage advice for improvement. You’ll learn ways to keep forms focused, how to leverage HTML5 for better user interaction, and a variety of design techniques to enhance forms’ usability. Whether you have one form or a thousand, you’ll leave this session with a much better handle on how to take them from distressing to delightful!

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

The Features of Highly Effective Forms [SmashingConf NYC 2016]


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
    Presentation Transcript
    1. THE FEATURES OF
 HIGHLY EFFECTIVE FORMS Aaron Gustafson @AaronGustafson slideshare.net/AaronGustafson

    2. I Consider the conversation

    3. Make every field fight for its place in your forms.

    4. 30% Percentage of Users Converted 25% 20% 15% 10% 5% 0% 1 2 3 4 5 6 7 8 9 10 Number of Fields http://is.gd/field_count_conversion

    5. MICHAEL AAGAARD, UNBOUNCE I finally convinced the client to let me remove three form fields. I wanted to
 remove more, but I could only get away 
 with removing three. But that’s still one 
 third of the form fields – a lot less friction. The result? 14% drop in conversion. http://is.gd/fewer_fields_fewer_conversions

    6. Prepare for pushback.

    7. II Choose your
 words carefully

    8. HATE SPEECH HARASSMENT

    9. How does this photo make you feel? ? Embarrassing ? Upsetting ? Saddening ? Bad Photo ? Other

    10. How does this photo make you feel? ? Embarrassing ? Upsetting ? Saddening ? Bad Photo ◉ Other it’s embarrassing

    11. Please describe the photo ? It’s embarrassing ? It’s a bad photo of me ? It makes me sad

    12. Talk to your users like they talk
 to one another.

    13. Ask higher value questions.

    14. Make it clear users need to respond

    15. “What’s your first name?”

    16. “Without your first name, I won’t
 know how to address you.
 Could you please provide it?”

    17. “Reserve your spot”

    18. III Make good
 markup choices

    19. Label every field

    20. Who you gonna call? <input name=“calling”>

    21. <label>Who you gonna call?</label> <input name=“calling”>

    22. <label for=“calling”>Who you gonna call?</label> <input id=“calling” name=“calling”>

    23. <label> Who you gonna call? <input name=“calling”> </label>

    24. <label for=“calling”> Who you gonna call? <input id=“calling” name=“calling”> </label>

    25. <label for=“calling”>Who you gonna call?</label> <input id=“calling” name=“calling”>

    26. Use real buttons

    27. Sign In

    28. Sign In <input type=“submit” value=“Sign In”>

    29. Sign In <button type=“submit”>Sign In</button>

    30. Sign In <a href=“#” class=“button”>Sign In</a>

    31. Sign In Sign In <div class=“button”>Sign In</div>

    32. Sign In <input type=“submit” value=“Sign In”> Appearance Seen As Focusable Activates Submits Forms Button Button Yes Yes Yes

    33. Sign In <button type=“submit”>Sign In</button> Appearance Seen As Focusable Activates Submits Forms Button Button Yes Yes Yes

    34. Sign In <a href=“#” class=“button” role=“button”>Sign In</a> CSS dependency < JS dependency Focusable Activates Submits Forms < Appearance Seen As Inline Text Link < Yes Kinda No JS dependency < ARIA dependency

    35. Sign In Sign In <div class=“button” role=“button” tabindex=“0”>Sign In</div> CSS dependency < < HTML dependency JS dependency < Appearance Seen As Focusable Activates Submits Forms Block Text Generic < No No < No ARIA dependency JS dependency

    36. Sign In <button type=“submit”>Sign In</button> Appearance Seen As Focusable Activates Submits Forms Button Button Yes Yes Yes

    37. Use the right
 field type

    38. THE FEATURES OF HIGHLY EFFECTIVE FORMS Free Response <label for=“calling”>Who you gonna call?</label> <input type=“text” id=“calling” name=“calling”>

    39. THE FEATURES OF HIGHLY EFFECTIVE FORMS Free Response (is the default) <label for=“calling”>Who you gonna call?</label> <input id=“calling” name=“calling”>

    40. THE FEATURES OF HIGHLY EFFECTIVE FORMS Free Response: Email <label for=“email”>What’s Your Business Email Address?</label> <input type=“email” id=“email” name=“email”> Appearance Native Validation Custom Keyboard Text Field Maybe Maybe

    41. THE FEATURES OF HIGHLY EFFECTIVE FORMS Free Response: Email <label for=“email”>What’s Your Business Email Address?</label> <input type=“email” id=“email” name=“email”> Appearance Native Validation Custom Keyboard Text Field Maybe Maybe

    42. Browsers ignore what they don’t understand