Form design - challenges and solutions

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    8 Favorites

    Form design - challenges and solutions - Presentation Transcript

    1. Form Design – Challenges & Solutions ProjectEric.com Copyright 2009. ProjectEric / Eric E. Ellis. All rights strictly reserved.
    2. Contents
      • ‘ Forms suck’ Luke W. – Web Form Design: Filling in the Blanks
      • Flow, Noise, Expectation, Order
      • Create a conversation
      • Engage progressively
    3. Expectation [Managed] Noise Order Flow
    4. Challenge What should I consider when developing form content?
      • Conversation, voice. People before pixels
      • Context
      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?
      • Form guidance
        • Show/hide (progressive engagement)
        • Modal layers
        • Modeless layers
    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’?
      • Ask:
        • What works for most people?
        • Will the default selection be clear(er)?
        • Can the choices be personally relevant?
    12. Challenge How can I create user-focused form layout?
      • Flow
      • Noise
      • Expectation
      • Order
    13. Challenge How do I design user-focused validation?
      • Plan for errors, but don’t forget successes
      • Inline validation
      • Inline suggestion
    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 = ""; 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?
      • You don’t have to:
        • qForms JavaScript API
          • http://www.devx.com/webdev/Article/31695
          • http://www.pengoworks.com/index.cfm?action=qForms
        • JSValidate (beta)
          • Strong browser testing
          • http://www.jsvalidate.com/demo/
    17. Question Why not use client-side validation only?
      • Security, that’s why not
      • ADA ‘back-up’
    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?
      • This is especially tricky when using JS-based inline validation
        • ARIA standards through the W3C
        • ‘ WAI-ARIA, the Accessible Rich Internet Applications Suite, defines a way to make Web content and Web applications more accessible to people with disabilities.’
      http://sourceforge.net/projects/fangs/
    20. Question What are common elements in form-building that deserve more attention?
      • <fieldset> , <legend> , <label>
      <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>

    + fnkdumplinfnkdumplin, 8 months ago

    custom

    1773 views, 8 favs, 3 embeds more stats

    Online forms suck. Here are a few best practices in more

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 1773
      • 1764 on SlideShare
      • 9 from embeds
    • Comments 0
    • Favorites 8
    • Downloads 68
    Most viewed embeds
    • 7 views on http://www.projecteric.com
    • 1 views on http://www.slideshare.net
    • 1 views on http://projecteric.com

    more

    All embeds
    • 7 views on http://www.projecteric.com
    • 1 views on http://www.slideshare.net
    • 1 views on http://projecteric.com

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories