1 / 118

The Features of Highly Effective Forms [SmashingConf NYC 2016]

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!

AaronGustafson
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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

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

More Related