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.comColor Stream: a Free iPhone App For Web Designers2.smashingmagazine.comAn Introduction to Split Testing in WordPress3.net.tutsplus.comRecession Survival Tips For Online Businesses4.smashingmagazine.comAdvantages Of Collective Collaboration in Online Art Collectives

5.

psd.tutsplus.comGestalt Principles Applied in Design6.sixrevisions.comUser Experience Books for Beginners7.uxbooth.comShow 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.comGiving 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



Technology

Tips for-coding-and-designing-usabl