form design - challenges and solutions
Post on 16-May-2015
3.709 Views
Preview:
DESCRIPTION
TRANSCRIPT
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>
top related