Tips for-coding-and-designing-usabl
Upcoming SlideShare
Loading in...5

Like this? Share it with your network

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. AJAX•CSS•DESIGN•PHOTOSHOP•TUTORIAL•WORDPRESS•more »• Noupe Design BlogWeb Designers Online ResourceJan 21Tips for Coding and Designing Usable Web FormsPosted in DESIGN••41 Comments »•By Louis LazarisThe web form has been one of the most discussed elements in web design for more than ten yearsnow. We can’t help it. Call-to-action functionality often leads users to a form; purchases are madeusing 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 yourform in a manner that makes it usable and accessible to the majority of users. Since forms play sucha large role in website conversions and success rates, the tips below, as well as the resources providedat 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 Blog8/17/2010
  • 2. Two-Column vs. OneThis 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 formlabels have plenty of space to allow for future changes to the text inside them. A two-column formcould be limited in this regard, and might require the entire form to be restructured if changes aremade. Another benefit is that the form is not as cluttered looking, having plenty of whitespace in thelabel areas, so it’s easy to read and easy to associate the labels with the fields. Additionally, thebackground color given to each label/field pairing makes the form more visually inviting.By contrast, look at the two-column form below:Page 2 of 28Tips for Coding and Designing Usable Web Forms - Noupe Design Blog8/17/2010
  • 3. 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 issomewhat distracting, giving the sense of multiple entities, when in fact a simple form like thisshould visually be presented as one grouped entity.It’s not impossible, however to achieve a clean, organized look with a two-column layout, as shownby the example below from Chapters Indigo Books:So, although there are no definite rules for the general layout of your form, effective guidelinesinclude avoiding a two-column layout for simple forms, and aligning the text labels right if a two-column layout is used.Page 3 of 28Tips for Coding and Designing Usable Web Forms - Noupe Design Blog8/17/2010
  • 4. Use Inline Form ValidationRecently 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 whenthey used the forms with inline validation.jQuery Inline Form Validation, Because Validation is a Mess is a step-by-step tutorial describing howto use jQuery to add inline validation to a lengthy form.Really Easy Field ValidationPage 4 of 28Tips for Coding and Designing Usable Web Forms - Noupe Design Blog8/17/2010
  • 5. Dexagogo provides a simple script that can be used to add inline validation to your forms. The demoexample is not the prettiest, but of course it can be customized to suit your needs. The script usesScriptaculous for the fade-in effect.Group Related FieldsWith a lengthy form, you’ll be limited as to what you can do to improve its usability, but groupingrelated fields together to divide the form into manageable visual components will make the form alittle less intimidating. Thus, the form will be perceived to be easier to fill out, even though it willprobably 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 codebelow: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.Page 5 of 28Tips for Coding and Designing Usable Web Forms - Noupe Design Blog8/17/2010
  • 6.         <label for="address">Address:</label>  19.        <input type="text" name="address" id="address" />  20.  21.        <label for="address2">Address (contd):</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 aCSS reset. Below is an example of a single form that is divided into two sections using <fieldset>and <legend> elements:Cosmicsoda Registration FormUnfortunately, the display of the border on the <fieldset> is not the same across all browsers, so itis usually best to disable the border in your stylesheet and create a custom border by some othermeans. This will also affect the look of the <legend> element, so it’s rare to see the use of these twoPage 6 of 28Tips for Coding and Designing Usable Web Forms - Noupe Design Blog8/17/2010
  • 7. elements nowadays. But the <fieldset> can still be used to group elements, and custom borders andheadings can be included to provide the same basic effect. The <fieldset> and <legend> elementsalso have the added benefit of contributing to a form’s accessibility.Clearly Indicate Required FieldsIt’s common to indicate required fields by means of the asterisk symbol (*) in a different color thanthe rest of the text, so the required indicator stands out. Although most sites nowadays include thisindicator, some still fail to use it properly.The explanatory text that describes the purpose of the asterisk should be placed immediately abovethe form that is to be filled out, so the users see it before they begin filling it out. Some sites haveused the asterisk character somewhat like a footnote indicator, placing the description of the asteriskbelow the form. The example below from the Elderluxe contact page demonstrates this poorplacement of the the text that explains the meaning of the asterisk:Elderluxe Contact FormThe example above has two problems: the asterisks are the same color as the rest of the text, and theexplanation of the asterisk is near the bottom of the form. In many instances, asterisks alone would beenough, without any explanation, but if your target audience is not as computer-savvy, you willlikely 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 asteriskdescription:Office Depot Registration FormPage 7 of 28Tips for Coding and Designing Usable Web Forms - Noupe Design Blog8/17/2010
  • 8. Although the example form above does have problems (left aligned text, small type, little use ofwhitespace), it clearly indicates required fields and explains the meaning of the asterisk before theuser begins filling it out. This is especially important in this example, since the first three fields arenot required, thus the user can safely skip them.Fancier Checkboxes, Radio Buttons, and Select ElementsForms can look awfully dull, especially since the styling of <select> elements, checkboxes, andradio buttons is limited in most browsers, and it is impossible to use CSS alone to style those elementsto look exactly the same in every browser. Fortunately, there are a number of JavaScript libraryplugins and code that allow developers to include fancier, cross-browser form elements that degradegracefully.jQuery Checkbox allows you to insert custom checkboxes and radio buttons into your forms. I don’tparticularly care for the look of the radio buttons in this case (they look nothing like radio buttons),but it’s one option to consider.Page 8 of 28Tips for Coding and Designing Usable Web Forms - Noupe Design Blog8/17/2010
  • 9. 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-implementreplacement for a typical <select> element that allows for nested data.Page 9 of 28Tips for Coding and Designing Usable Web Forms - Noupe Design Blog8/17/2010
  • 10. Display a Hint When a Field Gets FocusComplex forms with many different fields can be easier for the user to fill out if some help text isgiven. Of course, you don’t want to overwhelm the user with one or more paragraphs of text abovethe form explaining what the fields are for.As a simple alternative, you can write some JavaScript (or use a customizable plugin) that will displaya custom tooltip-style message to explain form elements that might be confusing, or that require acertain type of input (for example, a username that only allows letters or numbers and must have atleast 6 characters).jQuery Input Floating Hint Box is a simple plugin that displays a fully-customizable floating hintwhen a field gets focus.Page 10 of 28Tips for Coding and Designing Usable Web Forms - Noupe Design Blog8/17/2010
  • 11. DHTML Goodies Form Field Tooltip is another variation of the form field helper text that displaysthe helper text based on what is entered in the form field’s title attribute.Be Generous with WhitespaceAs mentioned earlier, forms can look ugly and cluttered if the elements in the form are not displayedin a clean, usable manner. We generally think of the use of whitespace in our overall site design, butthe 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 insidetext 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. Whenmultiple text fields appear in the same form, this can make quite a difference in how the overallPage 11 of 28Tips for Coding and Designing Usable Web Forms - Noupe Design Blog8/17/2010
  • 12. experience is perceived, even though technically it might not make a whole lot of difference as far ashow 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 shouldhave plenty of space to allow for longer names. Overflow of characters will start pushing the text outof view, so it’s best to have enough space to accommodate longer names so that the user can moreeasily spot mistakes. The example field below demonstrates how a longer name would be cut off.Veerasingham AnandasangareeA text field that is similar in size to the ones in the previous example would be more appropriate andwould allow for longer input to be entered without the risk of cutting anything off. The same principlewould apply to a search box that may potentially receive long queries as input.Make Your Forms AccessibleThe topic of accessible forms could easily encompass an entire article and much more, but here arejust 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 theaccompanying 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 readersread 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 ReadingCreating 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, FormsThis entry was posted on Thursday, January 21st, 2010 at 6:23 am and is filed under DESIGN. You can follow anyresponses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently notallowed.Page 12 of 28Tips for Coding and Designing Usable Web Forms - Noupe Design Blog8/17/2010
  • 13. 41 Responses, Add Comment +julio 21 January 20101.nicely done!ReplyMarco Barbosa 21 January 20102.Nice tips. Mostly are well known but there are still some unusable forms out there.ReplyWeb Design New York 21 January 20103.Wonderful stuffThe contact page of #1 cellarthief . com looks awesome.I love the pop-up style and the waythey arranged the fields.Thanks for the great Post.ReplyClayton Correia 21 January 20104.Perfect timing…I’m going to be working on a form today :)Thanks much!ReplyPrasanth @ Simfatic Solutions 21 January 20105.Page 13 of 28Tips for Coding and Designing Usable Web Forms - Noupe Design Blog8/17/2010
  • 14. “Fancier Checkboxes, Radio Buttons, and Select Elements…”Too fancy elements can often confuse the user too. Our usability tests suggest keeping thefamiliar ‘standard’ look.Except, when the fancy item adds some value/clarity (example: the lists with the icon)ReplyLouis 21 January 2010◦You’re probably right, those were not exactly the safest recommendation in an articleabout “usable” web forms, so I should have pointed out the potential drawbacks. Thanks.ReplyTeylor Feliz 21 January 20106.Thanks for sharing!In AdmixWeb We cover this topic too in our entry “15+ Best Practices Designing Web Forms” Job!!!!!ReplyJoe 21 January 20107.Nice article. Great resources as well. Keeping forms simple and painless is an art in it self.ReplyTimmy 21 January 20108.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 mostof them are text. Normally, text boxes are about 40 characters long, but a normal browserwindow size is 5-10 times that, meaning lots of unnecessary scrolling when filling out the form.Page 14 of 28Tips for Coding and Designing Usable Web Forms - Noupe Design Blog8/17/2010
  • 15. Adding a column or two to split up the input elements will make it more readable and easier tonavigate as its filled out.ReplyMichael Evans 21 January 20109.There are so many little things that add up to a good user experience…Good Information!ReplyDarren Azzopardi 21 January 201010.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 whena 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 theuser of incorrect field or password mismatch.ThanksDarrenReplyDarren 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 strongtags to alert the user of incorrect field or password mismatch.ThanksReplyPage 15 of 28Tips for Coding and Designing Usable Web Forms - Noupe Design Blog8/17/2010
  • 16. jesse 21 January 201011.I was just looking for a form tuts when I StumbleUpon this. Nice job.ReplyCeBe 21 January 201012.Yeah! Good work, I like it! :-)ReplyJ. Albert Bowden II 21 January 201013.nice post. i would add use a label for every form control and use the for attribute with said labelmatching its conrols id.ReplyVeerasingham Anandasangaree 21 January 201014.very informative, especially image combo box .. great!ReplyAmazin Sey 21 January 201015.Nice Post, thanks for making out time to write this, very insightful!Reply16.Page 16 of 28Tips for Coding and Designing Usable Web Forms - Noupe Design Blog8/17/2010
  • 17. Matthias Matz 22 January 2010good works an pratice for webformsReplyweb design cheltenham 22 January 201017.fab post, forms can be a pain and the code can sometimes look so messy but you’ve managed toconfirm and wrap thing up very well with this – thanks for sharingReplyHelder Hoogeveen 22 January 201018.Nice idea’s. I like them. Thanks for show it.Replyviettel 22 January 201019.good works for collect webformsReplyModern interiors 22 January 201020.Great tips, although sometimes people try too hard to make their forms look “pretty” andactually hurt the user experience. Just as everything else online, forms should be clear, easy tounderstand and FAST to load and fill out.Also, sometimes people (not so much myself) actually prefer the familiar (read: ugly) interfacesthey are used to, so be careful how much you actually beautify your forms.ReplyPage 17 of 28Tips for Coding and Designing Usable Web Forms - Noupe Design Blog8/17/2010
  • 18. Alexey 22 January 201021.Nice and usefull information to share.Thanks!ReplyCSS Web Gallery 22 January 201022.This is a very useful post because the style, design and layout of contact forms is vital if you areto encourage visitors to volunteer their personal information.I particularly recommend taking a look at the magnificent WordPress Plugin – CForms II. Itactually does most of the layout and AJAX for you and has a whole raft of settings you canchange. I use it as standard on all of my sites.Replyweb design kent 22 January 201023.Great article – some good tips there!ReplyTitan 22 January 201024.Thanks for sharea good shell javascript editor 18 of 28Tips for Coding and Designing Usable Web Forms - Noupe Design Blog8/17/2010
  • 19. Jordan Walker 22 January 2010That is an extremely helpful article.ReplyJordan Walker 22 January 201026.Thanks for the article, it is always important to review usability and style in something ascommon as a web form.ReplyCaroline Jarrett 22 January 201027.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 twocolumns 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 seethat even from this description, it’s quite confusing for users. I’ve written about this some morein 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 tothe left of the fields, rather than on top. And although you’re not keen on that style of layout forsimple forms, in fact you’ve given us some examples (lower down your article) that do exactlythat, 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 leftaligned? Another topic that gets people discussing a lot! And the answer is: either can workvery nicely. It depends on what the questions are asking, and how long the text is that you’reworking 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 withtypical 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 goodchoices.BestCaroline JarrettAuthor: “Forms that work: Designing web forms for usability”Page 19 of 28Tips for Coding and Designing Usable Web Forms - Noupe Design Blog8/17/2010
  • 20. ReplyLouis 22 January 2010◦Caroline,Thanks for the info, I’ll have to check out your articles. My problem with having thelabels on the left was only with simple forms, as I mentioned. But even a simple form canbe made to look inviting with the labels aligned left, as shown by the example fromchapters/indigo.I tend to prefer labels above fields, which is why I leaned towards that. Being adeveloper, I find it’s much easier to maintain that way too, so maybe I’m being biased.Thanks again for your thoughts.ReplyTutorijali HDonWEB 22 January 201028.Great post, bookmarkedReplyJanko 22 January 201029.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 ifpossible), in most cases I’d go with marking them instead of required fields. There is anexcellent study about this: out Guidelines 5.The other thing is usage of fancy stuff. I’d be careful with it since it easily becomes too fancyand unusable.Reply30.Page 20 of 28Tips for Coding and Designing Usable Web Forms - Noupe Design Blog8/17/2010
  • 21. eticaret 22 January 2010nice tips tahk you.ReplySedat Kumcu 23 January 201031.Thanks for this useful article. Best regards.ReplyBodgan Pop 23 January 201032.You should totally check out this article about web forms good practices and options at’s a really good in depth article.ReplySky 23 January 201033.Excellent article and visuals thanks!ReplyThomas 24 January 201034.I always find it helpful when form fields provide a hint, although most forms are straightforward, don’t assume that every user will fully understand what your looking for.ReplyLisa Hiatt 24 January 201035.Page 21 of 28Tips for Coding and Designing Usable Web Forms - Noupe Design Blog8/17/2010
  • 22. Great post. In my experience inline validation & specifying required fields have been key tosuccessful conversion rates.ReplySohoInteractive 25 January 201036.Forms are usually a pain, especially the forms in two column layouts with dynamic formvalidations.I really liked your collection. Easy to use and well-coveredReplyZENG 20 April 201037.Nice article! Thanks very much for keeping post such good articles!ReplySigaradan BIKTIM 13 May 201038.BIKTIM – sigaradan BIKTIM – sigara BIRAKMA tozu – sigarayI BIRAKMAK istiyorum –sigara BIRAKTIRMA tozu – sigarayI BIRAKMAK – BIKTIM tozu – BIKTIM ilacIconsidered as a brand for modern design and classic elegance. Wearing links london jewelrymakes you out of ordinary in a crowd. Links of Londonis one of the chief jewelry brands in theUK. links of london watches links of london Accessories links of london charm braceletsReplyTrackbacksLeave a ReplyComments are moderated – and rel="nofollow" is in use. Please no link dropping, no keywordsor domains as names; do not spam, and do not advertise!Name (required)Mail (will not be published) (required)Page 22 of 28Tips for Coding and Designing Usable Web Forms - Noupe Design Blog8/17/2010
  • 23. WebsiteSubmit CommentSubscribe by RSS•Subscribe to Noupe by Email•Twitter•Type Keywords And Hit Enter...SponsorsAdvertise with us!Premium Blog ThemesTake ownership of your website.MailChimp E-Mail MarketingPage 23 of 28Tips for Coding and Designing Usable Web Forms - Noupe Design Blog8/17/2010
  • 24. Wireframe with MockFlowBusiness WordPress Themes!Premium Website TemplatesPSD to HTMLup to 3 photos for freePopular ArticlesPage 24 of 28Tips for Coding and Designing Usable Web Forms - Noupe Design Blog8/17/2010
  • 25. Sexy Drop Down Menu w/ jQuery & CSSin TUTORIAL / 364The Ultimate Ugly Showcase of Current Government Websitesin Showcases / 3621000+ Free High Resolution Photoshop Brush Setsin PHOTOSHOP / 257Ten Simple Rules for Choosing the Perfect CMS + Excellent Optionsin PHP / 23540 Most Beautiful Mosques In The Worldin Inspiration / 208Page 25 of 28Tips for Coding and Designing Usable Web Forms - Noupe Design Blog8/17/2010
  • 26. 45 Brilliant Examples of Photo Manipulation Artin PHOTOSHOP / 186Discussing PHP Frameworks: What, When, Why and Which?in PHP / 17550 Most Beautiful Icon Sets Created in 2008in Freebie / 16835 Truly Dramatic Examples of Animal Photographyin Photography / 16313 Awesome Javascript CSS Menusin AJAX / 151Page 26 of 28Tips for Coding and Designing Usable Web Forms - Noupe Design Blog8/17/2010
  • 27. Smashing NetworkUseful and Free Pictogram Dingbat Fonts1.speckyboy.comColor Stream: a Free iPhone App For Web Designers2.smashingmagazine.comAn Introduction to Split Testing in Survival Tips For Online Businesses4.smashingmagazine.comAdvantages Of Collective Collaboration in Online ArtCollectives5.psd.tutsplus.comGestalt Principles Applied in Design6.sixrevisions.comUser Experience Books for Beginners7.uxbooth.comShow Markup in CSS Comments8.css-tricks.com101 CSS Techniques Of All Time- Part 1in DESIGN / 14545+ Must See WordPress themesin WORDPRESS / 14240+ Absolutely Stylish & Creative Hand-picked Wallpapersin Wallpapers / 141Page 27 of 28Tips for Coding and Designing Usable Web Forms - Noupe Design Blog8/17/2010
  • 28. What’s the Single Best Thing You’ve Ever Done forYour Freelancing Biz?9.freelancefolder.comGiving Users Credit10.designinformer.comNoupe LinksAbout•Contact Us•Archive•Publishing Policy•/ /SubscribeRSS Feed•Email Subscription•News RSS•Noupe FriendsSmashing Forum•Dr. Web (.de)•Smashing Magazine•Smashing Jobs•Smashing Book•© 2009-2010 Smashing Media GmbHPage 28 of 28Tips for Coding and Designing Usable Web Forms - Noupe Design Blog8/17/2010