Form Design – Challenges & Solutions

ProjectEric.com

Copyright 2009. ProjectEric / Eric E. Ellis. All rights strictly reserved.

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

Flow, Noise, Expectation, OrderCreate a conversationEngage progressively

Expectation

[Managed] Noise

Order

Flow

ChallengeWhat should I consider when developing form content?

Conversation, voice. People before pixelsContext

http://patterntap.com/usersets/set/136http://www.huffduffer.com/signup/

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

Form guidanceShow/hide (progressive engagement)Modal layersModeless layers

SolutionShow/Hide (progressive engagement)

SolutionShow/Hide (progressive engagement) – cont’d.

SolutionModeless layers

http://plugins.jquery.com/project/dyndatetimehttp://www.mechanicalmarksy.com/hosted/toolman/dyndatetime/example.html

SolutionModal layers

SolutionModal layers (cont’d).

http://plugins.jquery.com/project/modaldialoghttp://tautologistics.com/projects/jquery.modaldialog/doc/1.0.0/

ChallengeHow 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?

ChallengeHow can I create user-focused form layout?

FlowNoiseExpectationOrder

ChallengeHow do I design user-focused validation?

Plan for errors, but don’t forget successes

Inline validationInline

suggestion

Try thisPassword 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_strengthhttp://mypocket-technologies.com/jquery/password_strength/ http://edevil.wordpress.com/2005/11/14/javascript-libraries-roundup/ (good comprehensive list of JS libraries)

And this tooClient-side validation

<form method="get" class="cmxform" id="form1" action="">

<!-- The form section title --><fieldset><legend>Login Form</legend>

<!-- The username --><p><label>Username</label><input name="user" title="Please enter your username (at least 3 characters)" class="{required:true,minlength:3}" /></p>

<!-- The password --><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>

<!-- The inline error messaging --><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/

QuestionMust 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/31695http://www.pengoworks.com/index.cfm?

action=qForms JSValidate (beta)

Strong browser testinghttp://www.jsvalidate.com/demo/

QuestionWhy not use client-side validation only?

Security, that’s why notADA ‘back-up’

SolutionCombine server-side checks with client-side best practices

ChallengeHow do I make JS-based layers, like for bubble help, accessible?

This is especially tricky when using JS-based inline validationARIA 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/

QuestionWhat 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>