Form design - challenges and solutions

Contents

‘ Forms suck’ Luke W. – Web Form Design: Filling in the Blanks

Flow, Noise, Expectation, Order

Create a conversation

Engage progressively

Expectation [Managed] Noise Order Flow

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/

Challenge How do I show users exactly what they need, when they need it?

Form guidance

Show/hide (progressive engagement)

Modal layers

Modeless layers

Solution Show/Hide (progressive engagement)

Solution Show/Hide (progressive engagement) – cont’d.

Solution Modeless layers http://plugins.jquery.com/project/dyndatetime http://www.mechanicalmarksy.com/hosted/toolman/dyndatetime/example.html

Solution Modal layers

Solution Modal layers (cont’d). http://plugins.jquery.com/project/modaldialog http://tautologistics.com/projects/jquery.modaldialog/doc/1.0.0/

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?

Challenge How can I create user-focused form layout?

Flow

Noise

Expectation

Order

Challenge How do I design user-focused validation?

Plan for errors, but don’t forget successes

Inline validation

Inline suggestion

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)

And this too Client-side validation <form method="get" class="cmxform" id="form1" action="">  <fieldset> <legend>Login Form</legend>  <p> <label>Username</label> <input name="user" title="Please enter your username (at least 3 characters)" class="{required:true,minlength:3}" /> </p>  <p> <label>Password</label> <input type="password" maxlength="12" name="password" title="Please enter your password, between 5 and 12 characters" class="{required:true,minlength:5}" /> </p>  <div class="error"> </div> <p> <input class="submit" type="submit" value="Login"/> </p> </fieldset> </form> http://plugins.jquery.com/project/validate http ://bassistance.de/jquery-plugins/jquery-plugin-validation/

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/

Question Why not use client-side validation only?

Security, that’s why not

ADA ‘back-up’

Solution Combine server-side checks with client-side best practices

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/

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>