1. Don’t ask too many questions.
   Only ask for information that you’ll actually use. For example, if you plan to respond to form submissions via email, only ask for an email address, not their email address and phone number. Short forms are more likely to be completed and most of us don’t like giving away all our contact information anyway.
   
   
2. Ask specific questions.
   In a generic web site contact form, for example, ask the user for a specific piece of information in the “message box” field. Asking something like “What type of of service are you most interested in?” or “What is the biggest challenge for you in X area?” will give you better information to work with than “Enter your message here:”. (With more specific information, you can address a user’s specific needs right away when responding to them.)
   
   
3. If a field has a validation requirement, tell the user what the requirement is.
   For example, tell the user you need their phone number entered in the format: 703-555-5555, rather than giving them the error “Please enter a valid phone number.” What is an appropriate entry to you may differ from what the user things is appropriate.
   
   
4. Confirm successful submissions.
   After a user clicks the “submit” button, there should be some kind of confirmation that their message was received (or an error message if there were any problems.) We like to display all the information the user submitted, and ask them to contact us if any of the information is incorrect. You’ll also want to tell the user when they can expect a response to their submission.
   
   
5. Post and adhere to your privacy policy.
   Any time you collect user information, you should have an easily accessible privacy statement that addresses what you collect, how you use it, and under what circumstances, if any, you disclose it. If completing a form means you’ll add their email address to your newsletter system, for example, you need to be clear about that upfront.
   
   
6. Consider your audience.
   As with everything web related, forms should be created with the end user and their specific goals in mind. You may need separate forms for existing customers, new prospects, or different situations. Don’t try to service all users from the same form.

Finally, and most importantly, make form completion easy, intuitive and as painless as possible.

Recommended Reading:
Smashing Magazine’s review of form design patterns on 100 popular web sites.

Also see:
Netdrafter’s How to Properly Test Web Forms

Once any kind of web form has been created, it needs to be thoroughly tested before released to web site visitors. We do a good deal of testing on the development end, but it’s a good idea for you to conduct testing as well, from the user end. Here’s how:

1. Attempt to submit the form before completing any information.
   The form should respond by preventing submission and assisting the user with the completion process.
   
   
2. Test each field individually.
   Did all the field validations work? For example, if a field is noted as “required”, were you able to submit the form without supplying this information? Were you able to submit a piece of information in the wrong format? (Ex: an email address formatted without the ‘@’ symbol, a phone number that is missing digits, etc.) Are field character or selection limitations in place and sufficient?
   
   
3. Review the user instructions.
   Are the form instructions clear? To they give enough instruction to reduce the possibility that the user will encounter an error message?
   
   
4. Review error messages.
   Do the error messages correctly describe the problem? Is there enough information to assist the user in correcting the problem?
   
   
5. If present, does the CAPTCHA work?
   A common type of CAPTCHA requires that the user type the letters of a distorted image that appear on the screen, before a form is submitted.
   
   
6. Does the form function without the use of Javascript?
   If Javascript is turned off in the browser, there should be a secondary mechanism to handle form validation.
   
   
7. Review the “Thank You” page.
   Were all fields collected as planned? Were provisions made for handling blank fields? Does the language on this page properly confirm submission? Is the language sufficient to indicate any “next steps” for the user? Is the language consistent with company branding?
   
   
8. Test response emails.
   Review any email messages sent to the user and/or the administrator after form completion. Did messages arrive at their intended destinations? Were all the fields properly displayed?
   
   
9. Test the database.
   If response information was sent to a database, did it arrive properly? Are provision in place to reject incorrect or malicious data?
   
   
10. Test logic and conditionals.
    Were all calculations correctly executed? Were any special rules (if this, do that) correctly applied?
    
    

Be sure to consider (and handle) the following possibilities:

1. Incorrectly formatted or fake email addresses.
2. Misspellings and misinformation.
3. Submitting information to early in the process.
4. Abandoning a process before completion. (Either on purpose or by error of their browser/computer/internet connection.)
5. Incorrect data types. (Supplying a date in the format 7-1-07 when the format 2007-07-01 is needed.)
6. Errors in imported, submitted, or stored data.
7. Other silly and random user mistakes.
8. Form spam.

Things Netdrafter does to minimize the possibility of user error:

• Print directions to assist the user.
• Require specific web form fields.
• Validate web form fields before accepting the information.
• Provide form field examples.
• Use consistent and intuitive program logic and flow.
• Follow our own form design best practices.

Also see:
Netdrafter’s 6 Tips for Effective Web Forms

Wikipedia describes an “unconference” (or BarCamp) as network of open, participatory workshop-events, whose content is provided by participants. So, it’s an event where the content is totally audience generated and the agenda is spontaneous, often not created until everyone arrives. This leads to quite a unique experience, both from an attendee and planning perspective. (This format was really a challenge for my organized and scheduled mind, but I saw real value in enabling audience members to address their specific interests at this precise moment in time. It’s a neat concept.)

The Program Grid

There were 45 sessions to choose from and a wide variety of topics: everything from how Frank Lloyd Wright’s “destroying the box” architecture influenced the user experience, creating unique Photoshop brushes, measuring UX, audience research methods, UX on mobile devices, to a demo of the new toys in the MIT Media Lab.

Rachel Pastirik - Listening to How an Unconference Works

Attendees were required to participate to some degree: either by leading a discussion, showing a demo, sharing information, or by creating another type of collaborative session. The conference was specifically for web designers, user experience practitioners and information architects.

Key: = Tool, = Web Resource

Quick Links:
- Code Validation and Related
- Browser Compatibility
- Mobile
- Section 508 Compliance
- Performance Testing
- Web Standards
- Link Checkers
- SEO, Analytics and Related
- Design/User Interface (UI)/User Experience (UX)
- Firefox Browser Add-ons
- Internet Explorer Browser Plugins

Code Validation and Related
W3C Markup Validator
W3Schools – Online web tutorials.
Test Everything – Large collection of testing tools in one convenient place.
IBM Rational AppScan Software – “Web site security, Web site compliance, and application security solutions for the most comprehensive approach to assessing vulnerabilities in networked applications and critical Web sites.”
Dr. Watson – Checks code, including link validity, download speed, search engine compatibility, and link popularity.
NetMechanic – “Affordable self-service web tools that help create a quality web experience for customers, as well as accessibility for search engine spiders.”
WDG HTML Validator
Google Web Site Optimizer
JSLint – “The JavaScript Code Quality Tool”
Clean CSS Formatter and Optimiser – “Takes your CSS code and makes it cleaner and more concise.”
CSS Redundancy Checker – “Find CSS selectors that aren’t used by any of your HTML files and may be redundant.”
CSSCheck
Website Spell Checking Service
Watir – “Watir, pronounced water, is an open-source (BSD) library for automating web browsers. It allows you to write tests that are easy to read and maintain.”

Browser Compatibility
BrowserCam – “See your web design on any browser on any operating system. Check javascripts, DHTML, forms and other dynamic functionality on any platform. Not just yours. Use our bank of testing machines remotely to test your website.”
IE NetRenderer – “Check how a website is rendered by Internet Explorer 8, 7, 6 or 5.5.”
Web Page Backward Compatibility Viewer
Browser Simulator/Emulator = “Masquerade Referer and User-Agent values to simulate/emulate browser types, robots, spiders, and referring links.”
Gomez Cross Browser Testing – “Gomez’s on-demand cross-browser testing solution automates the validation of Web and mobile applications across all major browsers, operating systems and mobile devices.”
BrowsrCamp – “Test the compatibility of your design with Mac OS X browsers.”
SortSite – “A one-click compatibility test tool for web sites – inside or outside the firewall.”
Browser Sandbox – “Run any browser from the web.”
Litmus – “The advanced testing tool for web professionals.” (web pages and email campaigns)
Cross Browser Testing – “Website testing center for cross platform, cross browser compatibility.”
Browsershots – “Makes screenshots of your web design in different browsers.”
Adobe Browser Lab – “Exact renderings of their web pages in multiple browsers and operating systems, on demand.”
IE Capture
AnyBrowser.com
Running Multiple Browsers on a Single Machine

Mobile
W3C Mobile Web Initiative
W3C Mobile Validator
MobiReady – “Evaluates mobile-readiness using industry best practices & standards.”

Section 508 Compliance
Section508.gov – Main site for 508 law, FAQ, impact, and related info.
Accessites.org – “We will show you artfully crafted sites made by some of today’s most progressive web developers.”
Cynthia Says – “A web content accessibility validation solution designed to identify errors in your content related to Section 508 standards and/or the WCAG guidelines.”
Virginia’?s Roadmap for Implementing IT Accessibility (.pdf)
Usability.gov – “The primary government source for information on usability and user-centered design.”
Colorblind Web Page Filter
WAVE Web Accessibility Evaluation Tool
Site Valet – “Web tools for quality, accessibility, and standards compliance.”
Accessibility Color Wheel
JAWS Screen Reader – “Developed for computer users whose vision loss prevents them from seeing screen content, JAWS reads aloud what’s on the PC screen.”
MAGic Screen Magnifier
Dragon Naturally Speaking – “Software developer kit used by developers and integrators to add speech recognition capabilities into in-house and commercial applications or workflow applications.”
Standards Schmandards – “A problematic approach to web accessibility.”

Performance Testing
OptiView Tools – Page scanner and line speed tester.
Web Page Analyzer – “Free website performance tool and web page speed analysis.”
Gomez Instant Test – “Use Gomez’s instant testing to find performance problems before your customers do.”

Web Standards
World Wide Web Consortium – “An international community that develops standards to ensure the long-term growth of the Web.”
The Web Standards Project – “A grassroots coalition fighting for standards which ensure simple, affordable access to web technologies for all.”

Link Checkers
1-Hit Broken Link Checker
Link Validation Spider (site wide scanning ability)
Link Tiger – “We hunt down your broken links.”
Link Alarm = “The premier tool for regular automatic link validation reports.”
Link Valet – “A deluxe website monitoring service that integrates automated reporting with online tools.”

SEO, Analytics and Related
Builtwith – “Apply this information and improve your websites Search Engine Optimization, Web Technologies and Document Standards with the BuiltWith Website Optimizer.”
Compete – “The only online competitive intelligence service that combines site and search analytics in one site to help you quickly master online marketing.”

Design/User Interface (UI)/User Experience (UX)
Fivesecondtest – “Easily identify the most prominent elements of your user interfaces.”
Whatsitscolor – “An image-color processing utility that will evaluate an image and give you the image’s primary and complementary dominant colors of an image, how many visually unique colors are in an image, and the top ten visually unique colors in an image.”
Adobe Kuler
Pantone to RGB and Hex
HEX Color Code Calculation
Image Analyser – “Examines all images found on a web page to check for any accessibility issues.”
Readability Index Calculator

Firefox Browser Add-ons
WAVE Web Accessibility Evaluation Tool Toolbar
Fangs Screen Reader Emulator
CodeBurner
ColorZilla
CSS Validator (W3C)
DT Whois
Fireshot
IE View
MeasureIt
Page Validator (W3C)
PPC Web Spy Toolbar
Web Developer Browser Extension
Multiproxy Switch
All-in-One Sidebar
Selenium

Internet Explorer Browser Plugins
WiDGets for IE – HTML Validation WiDGet, Disable Style Sheets WiDGet, Change Style WiDGet, Append Style WiDGet, Prepend Style WiDGet, Remove Images WiDGet
Expression Web Super Preview – “View browser renderings side-by-side horizontally or vertically, or overlay them to identify differences. You can use rulers and guides to measure and highlight visual problems. You can zoom in and out of a page and see all the browser renderings update in tandem.”
IE Developer Toolbar – “Several features for exploring and understanding Web pages.”
Web Accessibility Toolbar

Have resources to add or broken links or discontinued tools to report? Let us know!

Before you hire a web developer, ask the following questions:

1. Do you have a web site?
2. Where can I see examples of your work?
3. How did you get into the industry?
4. How long have you been in business?
5. Are you educated in this field or hold a degree in a related field?
6. Will you provide references of former or current clients?
7. What software and technologies do you use? Will they be compatible with the needs of my site?
8. How do you increase your knowledge of and keep up with emerging technology?
9. How does the development process work? What steps are involved?
10. What other services do you provide?
11. Once you’ve completed my project, how is maintenance performed?
12. Who retains ownership of my project files?
13. How long will it take to complete my project?
14. What are your fees?
15. Do you have a contract?
16. What information will we need to provide you?