Form design - challenges and solutions

5,067 views

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
1 Comment
9 Likes
Statistics
Notes
  • 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 http://www.formsdesign.com.au
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
5,067
On SlideShare
0
From Embeds
0
Number of Embeds
34
Actions
Shares
0
Downloads
96
Comments
1
Likes
9
Embeds 0
No embeds

No notes for slide
  • Form design - challenges and solutions

    1. Form Design – Challenges & Solutions ProjectEric.com 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>http://patterntap.com/usersets/set/ 136 http://www.huffduffer.com/signup/
    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 http://plugins.jquery.com/project/dyndatetime http://www.mechanicalmarksy.com/hosted/toolman/dyndatetime/example.html
    9. Solution Modal layers
    10. Solution Modal layers (cont’d). http://plugins.jquery.com/project/modaldialog http://tautologistics.com/projects/jquery.modaldialog/doc/1.0.0/
    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;} http://plugins.jquery.com/project/pass_strength http://mypocket-technologies.com/jquery/password_strength/ http://edevil.wordpress.com/2005/11/14/javascript-libraries-roundup/ (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://plugins.jquery.com/project/validate http ://bassistance.de/jquery-plugins/jquery-plugin-validation/
    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>http://www.devx.com/webdev/Article/31695 </li></ul></ul></ul><ul><ul><ul><li>http://www.pengoworks.com/index.cfm?action=qForms </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>http://www.jsvalidate.com/demo/ </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>http://sourceforge.net/projects/fangs/
    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>

    ×