Tips for-coding-and-designing-usabl

AJAX•
CSS•
DESIGN•
PHOTOSHOP•
TUTORIAL•
WORDPRESS•
more »• Noupe Design Blog
Web Designer's Online Resource
Jan 21
Tips for Coding and Designing Usable Web Forms
Posted in DESIGN•
•
41 Comments »•
By Louis Lazaris
The web form has been one of the most discussed elements in web design for more than ten years
now. We can’t help it. Call-to-action functionality often leads users to a form; purchases are made
using forms; users register or subscribe using forms — the uses for forms are endless.
While it is fairly easy to slap together a form in HTML, it’s not as easy to code, style, and design your
form in a manner that makes it usable and accessible to the majority of users. Since forms play such
a large role in website conversions and success rates, the tips below, as well as the resources provided
at the end of this article, should prove valuable for developers creating and coding web forms.
Page 1 of 28Tips for Coding and Designing Usable Web Forms - Noupe Design Blog
8/17/2010http://www.noupe.com/design/tips-for-coding-and-designing-usable-web-forms.html

Two-Column vs. One
This decision will generally depend on the content of the form, but it’s often preferable to avoid a two
-column layout if the form is fairly simple.
Below is a good example of a simple form that places each label above its related form element.
What are the benefits to this type of form layout, as opposed to a two-column form? First, the form
labels have plenty of space to allow for future changes to the text inside them. A two-column form
could be limited in this regard, and might require the entire form to be restructured if changes are
made. Another benefit is that the form is not as cluttered looking, having plenty of whitespace in the
label areas, so it’s easy to read and easy to associate the labels with the fields. Additionally, the
background color given to each label/field pairing makes the form more visually inviting.
By contrast, look at the two-column form below:

Especially because of the left-aligned text and lack of color, this form doesn’t have the same clean,
visual effect as the previous example. In fact, the vertical space between the labels and the fields is
somewhat distracting, giving the sense of multiple entities, when in fact a simple form like this
should visually be presented as one grouped entity.
It’s not impossible, however to achieve a clean, organized look with a two-column layout, as shown
by the example below from Chapters Indigo Books:
So, although there are no definite rules for the general layout of your form, effective guidelines
include avoiding a two-column layout for simple forms, and aligning the text labels right if a two-
column layout is used.

Use Inline Form Validation
Recently Luke Wroblewski wrote about the effectiveness of inline form validation on A List Apart.
To quote directly from that article:
Our participants were faster, more successful, less error-prone, and more satisfied when
they used the forms with inline validation.
jQuery Inline Form Validation, Because Validation is a Mess is a step-by-step tutorial describing how
to use jQuery to add inline validation to a lengthy form.
Really Easy Field Validation

Dexagogo provides a simple script that can be used to add inline validation to your forms. The demo
example is not the prettiest, but of course it can be customized to suit your needs. The script uses
Scriptaculous for the fade-in effect.
Group Related Fields
With a lengthy form, you’ll be limited as to what you can do to improve its usability, but grouping
related fields together to divide the form into manageable visual components will make the form a
little less intimidating. Thus, the form will be perceived to be easier to fill out, even though it will
probably take about the same amount of time as a form that has no grouping of fields.
To group related fields, use <fieldset> and the optional <legend> element, as shown in the code
below:
view plain copy to clipboard print ?
<form id="form" action="register.php" method="post">  01.
  02.
    <fieldset>  03.
        <legend>Basic Info</legend>  04.
        <div>  05.
        <label for="name">Name:</label>  06.
        <input type="text" name="name" id="name" />  07.
        </div>  08.
        <label for="password">Password:</label>  09.
        <input type="text" name="password" id="password" />  10.
        <div>  11.
        <label for="password-confirm">Confirm Password:</label>  12.
        <input type="text" name="password-confirm" id="password-confirm" />  13.
        </div>  14.
    </fieldset>  15.
  16.
    <fieldset>  17.
        <legend>Address</legend>  18.

<label for="address">Address:</label>  19.
        <input type="text" name="address" id="address" />  20.
  21.
        <label for="address2">Address (cont'd):</label>  22.
        <input type="text" name="address2" id="address2" />  23.
  24.
        <label for="zip">Zip/Postal:</label>  25.
        <input type="text" name="zip" id="zip" />  26.
  27.
        <label for="city">City:</label>  28.
        <input type="text" name="city" id="city" />  29.
  30.
        <label for="country">Country:</label>  31.
        <input type="text" name="country" id="country" />  32.
  33.
    </fieldset>  34.
  35.
</form>  36.
The <fieldset> element by default has a border, which can be changed, and is often removed in a
CSS reset. Below is an example of a single form that is divided into two sections using <fieldset>
and <legend> elements:
Cosmicsoda Registration Form
Unfortunately, the display of the border on the <fieldset> is not the same across all browsers, so it
is usually best to disable the border in your stylesheet and create a custom border by some other
means. This will also affect the look of the <legend> element, so it’s rare to see the use of these two

elements nowadays. But the <fieldset> can still be used to group elements, and custom borders and
headings can be included to provide the same basic effect. The <fieldset> and <legend> elements
also have the added benefit of contributing to a form’s accessibility.
Clearly Indicate Required Fields
It’s common to indicate required fields by means of the asterisk symbol (*) in a different color than
the rest of the text, so the required indicator stands out. Although most sites nowadays include this
indicator, some still fail to use it properly.
The explanatory text that describes the purpose of the asterisk should be placed immediately above
the form that is to be filled out, so the users see it before they begin filling it out. Some sites have
used the asterisk character somewhat like a footnote indicator, placing the description of the asterisk
below the form. The example below from the Elderluxe contact page demonstrates this poor
placement of the the text that explains the meaning of the asterisk:
Elderluxe Contact Form
The example above has two problems: the asterisks are the same color as the rest of the text, and the
explanation of the asterisk is near the bottom of the form. In many instances, asterisks alone would be
enough, without any explanation, but if your target audience is not as computer-savvy, you will
likely want to include at the top of the form a brief description of what the asterisk means.
The example below from Office Depot’s registration page demonstrates a properly-placed asterisk
description:
Office Depot Registration Form

Although the example form above does have problems (left aligned text, small type, little use of
whitespace), it clearly indicates required fields and explains the meaning of the asterisk before the
user begins filling it out. This is especially important in this example, since the first three fields are
not required, thus the user can safely skip them.
Fancier Checkboxes, Radio Buttons, and Select Elements
Forms can look awfully dull, especially since the styling of <select> elements, checkboxes, and
radio buttons is limited in most browsers, and it is impossible to use CSS alone to style those elements
to look exactly the same in every browser. Fortunately, there are a number of JavaScript library
plugins and code that allow developers to include fancier, cross-browser form elements that degrade
gracefully.
jQuery Checkbox allows you to insert custom checkboxes and radio buttons into your forms. I don’t
particularly care for the look of the radio buttons in this case (they look nothing like radio buttons),
but it’s one option to consider.

jQuery Image Combobox is a fully skinnable image-based replacement for the browser’s usually-ugly
<select> element.
Giva Labs mcDropdown jQuery Plug-in is an intuitive, keyboard-accessible, easy-to-implement
replacement for a typical <select> element that allows for nested data.

Display a Hint When a Field Gets Focus
Complex forms with many different fields can be easier for the user to fill out if some help text is
given. Of course, you don’t want to overwhelm the user with one or more paragraphs of text above
the form explaining what the fields are for.
As a simple alternative, you can write some JavaScript (or use a customizable plugin) that will display
a custom tooltip-style message to explain form elements that might be confusing, or that require a
certain type of input (for example, a username that only allows letters or numbers and must have at
least 6 characters).
jQuery Input Floating Hint Box is a simple plugin that displays a fully-customizable floating hint
when a field gets focus.

DHTML Goodies Form Field Tooltip is another variation of the form field helper text that displays
the helper text based on what is entered in the form field’s title attribute.
Be Generous with Whitespace
As mentioned earlier, forms can look ugly and cluttered if the elements in the form are not displayed
in a clean, usable manner. We generally think of the use of whitespace in our overall site design, but
the same principle can be applied within a form, even down to the smallest details.
You can improve a form’s design by adding appropriate amounts of space around field elements,
giving the elements themselves a larger and more usable size, and also allowing plenty of space inside
text fields by using padding in your CSS. For example, try typing some text into the two fields below.
With just a small difference in size and padding, the second input field has a more usable feel. When
multiple text fields appear in the same form, this can make quite a difference in how the overall

experience is perceived, even though technically it might not make a whole lot of difference as far as
how long it takes the user to fill it out.
It also helps to allow text fields to have plenty of visible characters. A name field especially should
have plenty of space to allow for longer names. Overflow of characters will start pushing the text out
of view, so it’s best to have enough space to accommodate longer names so that the user can more
easily spot mistakes. The example field below demonstrates how a longer name would be cut off.
Veerasingham Anandasangaree
A text field that is similar in size to the ones in the previous example would be more appropriate and
would allow for longer input to be entered without the risk of cutting anything off. The same principle
would apply to a search box that may potentially receive long queries as input.
Make Your Forms Accessible
The topic of accessible forms could easily encompass an entire article and much more, but here are
just a few tips to ensure your forms are more accessible and usable to a diverse audience.
Use the title attribute for inputs, to assist those using screen readers•
If a label doesn’t wrap around the field it is associated with, use a for attribute that matches the
accompanying field’s id
•
Set a tab order using the tabindex attribute on each element•
For the tab order, increment the tab numbers by large amounts (e.g. “10, 20, 30…” instead of
“1, 2, 3…”), to allow for later additions that don’t require rewriting all the tab indexes
•
For radio buttons and checkboxes, put the label after the associated element so screen readers
read the item first and the word “checkbox” or “radio button” second
•
Use the <optgroup> tag to group <select> items•
Use the accesskey attribute on form elements, to allow keyboard access•
Further Reading
Creating Accessible Forms•
Beautiful Forms – Design, Style, & make it work with PHP & Ajax•
HTML Forms and Input on W3Schools•
25 Web Form Optimization Tips•
Accessible Forms•
Web Form Design: Modern Solutions and Creative Ideas•
Tags: CSS, Forms
This entry was posted on Thursday, January 21st, 2010 at 6:23 am and is filed under DESIGN. You can follow any
responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not
allowed.

41 Responses, Add Comment +
julio 21 January 2010
1.
nicely done!
Reply
Marco Barbosa 21 January 2010
2.
Nice tips. Mostly are well known but there are still some unusable forms out there.
Reply
Web Design New York 21 January 2010
3.
Wonderful stuff
The contact page of #1 cellarthief . com looks awesome.I love the pop-up style and the way
they arranged the fields.
Thanks for the great Post.
Reply
Clayton Correia 21 January 2010
4.
Perfect timing…I’m going to be working on a form today :)
Thanks much!
Reply
Prasanth @ Simfatic Solutions 21 January 2010
5.

“Fancier Checkboxes, Radio Buttons, and Select Elements…”
Too fancy elements can often confuse the user too. Our usability tests suggest keeping the
familiar ‘standard’ look.
Except, when the fancy item adds some value/clarity (example: the lists with the icon)
Reply
Louis 21 January 2010
◦
You’re probably right, those were not exactly the safest recommendation in an article
about “usable” web forms, so I should have pointed out the potential drawbacks. Thanks.
Reply
Teylor Feliz 21 January 2010
6.
Thanks for sharing!
In AdmixWeb We cover this topic too in our entry “15+ Best Practices Designing Web Forms”
http://bit.ly/8tAPiU.
Nice Job!!!!!
Reply
Joe 21 January 2010
7.
Nice article. Great resources as well. Keeping forms simple and painless is an art in it self.
Reply
Timmy 21 January 2010
8.
Nice tip about explaining the asterisk on top. However, I think using two columns has its place.
Not for labels, but for really long forms. For example, let’s say a form has 40 inputs and most
of them are text. Normally, text boxes are about 40 characters long, but a normal browser
window size is 5-10 times that, meaning lots of unnecessary scrolling when filling out the form.

Adding a column or two to split up the input elements will make it more readable and easier to
navigate as its filled out.
Reply
Michael Evans 21 January 2010
9.
There are so many little things that add up to a good user experience…Good Information!
Reply
Darren Azzopardi 21 January 2010
10.
Thanks for making the time to write this.
One thing that would have been nice to read is how the forms’ feedback is markedup, i.e when
a user forgets to complete a field.
You mention semantic when creating the actual form: fieldset, label, title, using the right tags,
etc.
You could talk about about the markup used to display an error…such as using tags to alert the
user of incorrect field or password mismatch.
Thanks
Darren
Reply
Darren Azzopardi 21 January 2010
◦
i used html characters that didn’t display. Last paragrpah should read.
You could talk about about the markup used to display an error…such as using the strong
tags to alert the user of incorrect field or password mismatch.
Thanks
Reply

jesse 21 January 2010
11.
I was just looking for a form tuts when I StumbleUpon this. Nice job.
Reply
CeBe 21 January 2010
12.
Yeah! Good work, I like it! :-)
Reply
J. Albert Bowden II 21 January 2010
13.
nice post. i would add use a label for every form control and use the for attribute with said label
matching its conrols id.
Reply
Veerasingham Anandasangaree 21 January 2010
14.
very informative, especially image combo box .. great!
Reply
Amazin Sey 21 January 2010
15.
Nice Post, thanks for making out time to write this, very insightful!
Reply
16.

Matthias Matz 22 January 2010
good works an pratice for webforms
Reply
web design cheltenham 22 January 2010
17.
fab post, forms can be a pain and the code can sometimes look so messy but you’ve managed to
confirm and wrap thing up very well with this – thanks for sharing
Reply
Helder Hoogeveen 22 January 2010
18.
Nice idea’s. I like them. Thanks for show it.
Reply
viettel 22 January 2010
19.
good works for collect webforms
Reply
Modern interiors 22 January 2010
20.
Great tips, although sometimes people try too hard to make their forms look “pretty” and
actually hurt the user experience. Just as everything else online, forms should be clear, easy to
understand and FAST to load and fill out.
Also, sometimes people (not so much myself) actually prefer the familiar (read: ugly) interfaces
they are used to, so be careful how much you actually beautify your forms.
Reply

Alexey 22 January 2010
21.
Nice and usefull information to share.
Thanks!
Reply
CSS Web Gallery 22 January 2010
22.
This is a very useful post because the style, design and layout of contact forms is vital if you are
to encourage visitors to volunteer their personal information.
I particularly recommend taking a look at the magnificent WordPress Plugin – CForms II. It
actually does most of the layout and AJAX for you and has a whole raft of settings you can
change. I use it as standard on all of my sites.
Reply
web design kent 22 January 2010
23.
Great article – some good tips there!
Reply
Titan 22 January 2010
24.
Thanks for share
a good shell javascript editor http://www.bestofactuality.com/2010/01/jsfiddle-un-editeur-shell-
javascript.html
Reply
25.

Jordan Walker 22 January 2010
That is an extremely helpful article.
Reply
Jordan Walker 22 January 2010
26.
Thanks for the article, it is always important to review usability and style in something as
common as a web form.
Reply
Caroline Jarrett 22 January 2010
27.
Nice roundup of tips – it’s great to see people being really interested in forms design.
One point: on two-column forms design. In the past, I’ve usually seen this refer to having two
columns of fields so that the user has to either switch from working down all the left column,
and then working on the right column, or keep going across/down/across/down. You can see
that even from this description, it’s quite confusing for users. I’ve written about this some more
in my article “Two column forms are best avoided”.
You’ve used the term two-column forms design to refer to the practice of having the labels to
the left of the fields, rather than on top. And although you’re not keen on that style of layout for
simple forms, in fact you’ve given us some examples (lower down your article) that do exactly
that, and are neatly designed and look easy enough.
If the labels are to the left of the fields, the next question is: should they be right-aligned or left
aligned? Another topic that gets people discussing a lot! And the answer is: either can work
very nicely. It depends on what the questions are asking, and how long the text is that you’re
working with.
So the crucial points are:
- don’t have _two columns of fields_. Please.
- choose an arrangement of labels and field that looks harmonious to you. Then test it with
typical users. Be objective about your design. Listen carefully to what your users tell you,
watch them carefully as they fill in the form, and you’ll learn really quickly if you made good
choices.
Best
Caroline Jarrett
Author: “Forms that work: Designing web forms for usability”

Reply
Louis 22 January 2010
◦
Caroline,
Thanks for the info, I’ll have to check out your articles. My problem with having the
labels on the left was only with simple forms, as I mentioned. But even a simple form can
be made to look inviting with the labels aligned left, as shown by the example from
chapters/indigo.
I tend to prefer labels above fields, which is why I leaned towards that. Being a
developer, I find it’s much easier to maintain that way too, so maybe I’m being biased.
Thanks again for your thoughts.
Reply
Tutorijali HDonWEB 22 January 2010
28.
Great post, bookmarked
Reply
Janko 22 January 2010
29.
Hey Louis, nice article. I’d just disagree with two things.
The first one is usage of asterisk. Since the form should contain less optional fields (or none if
possible), in most cases I’d go with marking them instead of required fields. There is an
excellent study about this:
http://www.cxpartners.co.uk/thoughts/web_forms_design_guidelines_an_eyetracking_study.htm
Check out Guidelines 5.
The other thing is usage of fancy stuff. I’d be careful with it since it easily becomes too fancy
and unusable.
Reply
30.

eticaret 22 January 2010
nice tips tahk you.
Reply
Sedat Kumcu 23 January 2010
31.
Thanks for this useful article. Best regards.
Reply
Bodgan Pop 23 January 2010
32.
You should totally check out this article about web forms good practices and options at
http://www.webia.info/articles/usability/forms-cant-live-with-them-cant-live-without-them/
It’s a really good in depth article.
Reply
Sky 23 January 2010
33.
Excellent article and visuals thanks!
Reply
Thomas 24 January 2010
34.
I always find it helpful when form fields provide a hint, although most forms are straight
forward, don’t assume that every user will fully understand what your looking for.
Reply
Lisa Hiatt 24 January 2010
35.

Great post. In my experience inline validation & specifying required fields have been key to
successful conversion rates.
Reply
SohoInteractive 25 January 2010
36.
Forms are usually a pain, especially the forms in two column layouts with dynamic form
validations.
I really liked your collection. Easy to use and well-covered
Reply
ZENG 20 April 2010
37.
Nice article! Thanks very much for keeping post such good articles!
Reply
Sigaradan BIKTIM 13 May 2010
38.
BIKTIM – sigaradan BIKTIM – sigara BIRAKMA tozu – sigarayI BIRAKMAK istiyorum –
sigara BIRAKTIRMA tozu – sigarayI BIRAKMAK – BIKTIM tozu – BIKTIM ilacI
considered as a brand for modern design and classic elegance. Wearing links london jewelry
makes you out of ordinary in a crowd. Links of Londonis one of the chief jewelry brands in the
UK. links of london watches links of london Accessories links of london charm bracelets
Reply
Trackbacks
Leave a Reply
Comments are moderated – and rel="nofollow" is in use. Please no link dropping, no keywords
or domains as names; do not spam, and do not advertise!
Name (required)
Mail (will not be published) (required)

Website
Submit Comment
Subscribe by RSS•
Subscribe to Noupe by Email•
Twitter•
Type Keywords And Hit Enter...
Sponsors
Advertise with us!
Premium Blog Themes
Take ownership of your website.
MailChimp E-Mail Marketing

Wireframe with MockFlow
Business WordPress Themes!
Premium Website Templates
PSD to HTML
up to 3 photos for free
Popular Articles

Sexy Drop Down Menu w/ jQuery & CSS
in TUTORIAL / 364
The Ultimate Ugly Showcase of Current Government Websites
in Showcases / 362
1000+ Free High Resolution Photoshop Brush Sets
in PHOTOSHOP / 257
Ten Simple Rules for Choosing the Perfect CMS + Excellent Options
in PHP / 235
40 Most Beautiful Mosques In The World
in Inspiration / 208

45 Brilliant Examples of Photo Manipulation Art
in PHOTOSHOP / 186
Discussing PHP Frameworks: What, When, Why and Which?
in PHP / 175
50 Most Beautiful Icon Sets Created in 2008
in Freebie / 168
35 Truly Dramatic Examples of Animal Photography
in Photography / 163
13 Awesome Javascript CSS Menus
in AJAX / 151

Smashing Network
Useful and Free Pictogram Dingbat Fonts1.
speckyboy.com
Color Stream: a Free iPhone App For Web Designers2.
smashingmagazine.com
An Introduction to Split Testing in WordPress3.
net.tutsplus.com
Recession Survival Tips For Online Businesses4.
smashingmagazine.com
Advantages Of Collective Collaboration in Online Art
Collectives
5.
psd.tutsplus.com
Gestalt Principles Applied in Design6.
sixrevisions.com
User Experience Books for Beginners7.
uxbooth.com
Show Markup in CSS Comments8.
css-tricks.com
101 CSS Techniques Of All Time- Part 1
in DESIGN / 145
45+ Must See WordPress themes
in WORDPRESS / 142
40+ Absolutely Stylish & Creative Hand-picked Wallpapers
in Wallpapers / 141

What’s the Single Best Thing You’ve Ever Done for
Your Freelancing Biz?
9.
freelancefolder.com
Giving Users Credit10.
designinformer.com
Noupe Links
About•
Contact Us•
Archive•
Publishing Policy•
/ /
Subscribe
RSS Feed•
Email Subscription•
News RSS•
Noupe Friends
Smashing Forum•
Dr. Web (.de)•
Smashing Magazine•
Smashing Jobs•
Smashing Book•
© 2009-2010 Smashing Media GmbH

Tips for-coding-and-designing-usabl

Recommended

Recommended

More Related Content

What's hot

What's hot (10)

Similar to Tips for-coding-and-designing-usabl

Similar to Tips for-coding-and-designing-usabl (20)

More from Daniel Downs

More from Daniel Downs (20)

Recently uploaded

Recently uploaded (20)

Tips for-coding-and-designing-usabl