Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Form design - challenges and solutions


Published on

Online forms suck. Here are a few best practices in 'cookbook' style to make them less sucky. Part of this presentation was used during the 'Designing Our Way Through Web Forms Panel' at SXSW 2009 in Austin, TX.

Published in: Technology, Design
  • D0WNL0AD FULL ▶ ▶ ▶ ▶ ◀ ◀ ◀ ◀
    Are you sure you want to  Yes  No
    Your message goes here
  • I would have to agree. online forms offer very limited experience. If someone needs professionally designed forms with interactive elements that delight user's experience rather than make it boring, let us know
    Are you sure you want to  Yes  No
    Your message goes here

Form design - challenges and solutions

  1. Form Design – Challenges & Solutions Copyright 2009. ProjectEric / Eric E. Ellis. All rights strictly reserved.
  2. Contents <ul><li>‘ Forms suck’ Luke W. – Web Form Design: Filling in the Blanks </li></ul><ul><li>Flow, Noise, Expectation, Order </li></ul><ul><li>Create a conversation </li></ul><ul><li>Engage progressively </li></ul>
  3. Expectation [Managed] Noise Order Flow
  4. Challenge What should I consider when developing form content? <ul><li>Conversation, voice. People before pixels </li></ul><ul><li>Context </li></ul> 136
  5. Challenge How do I show users exactly what they need, when they need it? <ul><li>Form guidance </li></ul><ul><ul><li>Show/hide (progressive engagement) </li></ul></ul><ul><ul><li>Modal layers </li></ul></ul><ul><ul><li>Modeless layers </li></ul></ul>
  6. Solution Show/Hide (progressive engagement)
  7. Solution Show/Hide (progressive engagement) – cont’d.
  8. Solution Modeless layers
  9. Solution Modal layers
  10. Solution Modal layers (cont’d).
  11. Challenge How do I design forms to better manage ‘choice’? <ul><li>Ask: </li></ul><ul><ul><li>What works for most people? </li></ul></ul><ul><ul><li>Will the default selection be clear(er)? </li></ul></ul><ul><ul><li>Can the choices be personally relevant? </li></ul></ul>
  12. Challenge How can I create user-focused form layout? <ul><li>Flow </li></ul><ul><li>Noise </li></ul><ul><li>Expectation </li></ul><ul><li>Order </li></ul>
  13. Challenge How do I design user-focused validation? <ul><li>Plan for errors, but don’t forget successes </li></ul><ul><li>Inline validation </li></ul><ul><li>Inline suggestion </li></ul>
  14. Try this Password strength meter by Daren Mason Easy to change the validation that the users would see (function($){ $.fn.shortPass = 'Too short'; $.fn.badPass = 'Weak'; $.fn.goodPass = 'Good'; $.fn.strongPass = 'Strong'; $.fn.samePassword = 'Username and Password identical.’;$.fn.resultStyle = &quot;&quot;; The math is configurable //password has 3 numbers if (password.match(/(.*[0-9].*[0-9].*[0-9])/)){ score += 5;} (good comprehensive list of JS libraries)
  15. And this too Client-side validation <form method=&quot;get&quot; class=&quot;cmxform&quot; id=&quot;form1&quot; action=&quot;&quot;> <!-- The form section title --> <fieldset> <legend>Login Form</legend> <!-- The username --> <p> <label>Username</label> <input name=&quot;user&quot; title=&quot;Please enter your username (at least 3 characters)&quot; class=&quot;{required:true,minlength:3}&quot; /> </p> <!-- The password --> <p> <label>Password</label> <input type=&quot;password&quot; maxlength=&quot;12&quot; name=&quot;password&quot; title=&quot;Please enter your password, between 5 and 12 characters&quot; class=&quot;{required:true,minlength:5}&quot; /> </p> <!-- The inline error messaging --> <div class=&quot;error&quot;> </div> <p> <input class=&quot;submit&quot; type=&quot;submit&quot; value=&quot;Login&quot;/> </p> </fieldset> </form> http ://
  16. Question Must I trove through plug-ins to find all my validation solutions? <ul><li>You don’t have to: </li></ul><ul><ul><li>qForms JavaScript API </li></ul></ul><ul><ul><ul><li> </li></ul></ul></ul><ul><ul><ul><li> </li></ul></ul></ul><ul><ul><li>JSValidate (beta) </li></ul></ul><ul><ul><ul><li>Strong browser testing </li></ul></ul></ul><ul><ul><ul><li> </li></ul></ul></ul>
  17. Question Why not use client-side validation only? <ul><li>Security, that’s why not </li></ul><ul><li>ADA ‘back-up’ </li></ul>
  18. Solution Combine server-side checks with client-side best practices
  19. Challenge How do I make JS-based layers, like for bubble help, accessible? <ul><li>This is especially tricky when using JS-based inline validation </li></ul><ul><ul><li>ARIA standards through the W3C </li></ul></ul><ul><ul><li>‘ WAI-ARIA, the Accessible Rich Internet Applications Suite, defines a way to make Web content and Web applications more accessible to people with disabilities.’ </li></ul></ul>
  20. Question What are common elements in form-building that deserve more attention? <ul><li><fieldset> , <legend> , <label> </li></ul><fieldset> <legend> The name section </legend> <label for=“firstname” > First name </label> <input id=“firstname” type=“text” /> <label for=“lastname” > Last name </label> <input id=“lastname” type=“text” /> </fieldset>