Bad Design Can Be So Taxing

When people design Web forms, they often overlook some great sources of professional expertise in the world -- the existence of form design techniques with which nearly all users are familiar. This month, the cranky user looks at form design and management.

Seebach, Peter. IBM (2005). Design>Web Design>Forms

Better Invoices for Better Business

Invoices that obfuscate information, incorrectly state terms or arrive incomplete can be a massive headache for all parties. These mistakes will only delay the payment process, so it is critical you produce invoices that clearly deliver information your client will need.

Potts, Kevin. List Apart, A (2004). Design>Web Design>Forms>Usability

Better Web Forms: Redesigning eBay's Registration

Even the smallest adjustments to a page's design, layout, and content can make a major improvement in the overall quality of the page. Taking a fresh look at sections of a site that have been ignored for a while can give you an entirely new perspective. By making small incremental changes and testing them against real world scenarios, we can more easily focus on continuous improvement without going back to square one every time.

Dimon, Garrett. Digital Web Magazine (2007). Design>Web Design>Forms>E Commerce

Build a "Send to a Friend" Page

In this quick 'n easy tutorial, Short shows how to increase the popularity of your site by building a simple 'Send to Friend' form in HTML and ASP.

Short, Daniel. List Apart, A (2001). Design>Web Design>Forms>ASP

Build Accessible Online Forms

Ask anyone who has had to fix a Website that's littered with accessibility howlers, and top-most in their list of problems encountered will be forms, closely followed by tables. These two topics always seem to present the most difficulties, but they needn't be a problem. For the most part, forms are a problem because the extra accessibility tags are simply not known to the Web designer -- after all, it looks right, it seems to work... what's the problem? Only by switching off the monitor and using a screen-reader can our oblivious Web developer understand the issues.

Lloyd, Ian. SitePoint (2003). Design>Web Design>Accessibility>Forms

Building a Bulletproof Contact Form with PHP

The humble contact form: It's the cornerstone of nearly every website, from the humble personal blog right up to the corporate megasite--and a billion small business sites in-between. In the early years of operating a website, we were happy to put our shiny new email address out there for anyone to mailto, but the rise of the spammer has made us justifiably wary of publicizing our contact details--enter the contact form.

Pennell, Matthew. Digital Web Magazine (2007). Design>Web Design>Forms>PHP

Can XForm Transform the Web?

Today's Web forms are hopelessly tied to the original GUI of NCSA Mosaic for X Windows, circa 1994.

Khare, Rohit. University of California Irvine (2000). Design>Web Design>XML>Forms

Coloring Your Scrollbars with CSS

You really can color your scrollbars and have a change of scenery from the basic gray or other browser default. It just takes a few snippets of CSS markup, which you'll learn how to do in this tutorial.

Kaiser, Shirley E. Website Tips. Design>Web Design>Forms>CSS

Creating Accessible Forms

When we talk about the accessibility of forms, we are usually referring about their accessibility to screen readers and the visually impaired. People with other types of disabilities generally are less affected by 'faulty' forms that are missing some of the HTML accessibility features.

WebAIM (2003). Design>Web Design>Accessibility>Forms

Customer Service In Good Form

Online product registration forms can make customer service easier for the manufacturer and more valuable to the customer.

Allen, Cliff. Allen.com (2001). Design>Web Design>Forms>E Commerce

Datasheet-Style Form

This worked example creates a compact form with multiple similar records, with the familiar appearance of a datasheet.

Hunt, Ben. Web Design From Scratch (2006). Design>Web Design>DHTML>Forms

Developing an Online Form

Creating an online form can present developers with many challenges. This case study reviews how a paper-based form was taken through the usability engineering process to develop a functional online version. We discuss the steps in planning and research, prototype development, test design, and the usability test results.

Usability.gov. Articles>Web Design>Forms>Usability

Dynamic Forms with DHTML

This approach uses Dynamic HTML (DHTML), which has several benefits over using IFRAMES to make life a bit easier for the users of your site. First, DHTML allows for more flexible formatting than IFRAMEs permit. You can apply background images, borders, fonts, and all the other features you’ve learned to expect from HTML and Cascading Style Sheets to DHTML objects. In contrast, IFRAMES have almost no configurable features. Second, if someone fills out one form, switches to another, then switches back, there’s a good chance that the browser will lose the information that was initially entered. This problem doesn’t exist in the DHTML solution. Third, with DHTML you can do tricky things like clipping and moving the form around the page. You could do these things by combining IFRAMES and DHTML, but you might as well just use DHTML in the first place.

Apple Inc. (2006). Design>Web Design>Forms>DHTML

Dynamic Help in Web Forms

Many Web application designers strive to reduce the amount of instructional text that appears in the user interfaces they create. A likely part of their motivation is the perception that, if explaining how to use something requires too much instruction, it probably isn't that easy to use and, therefore, has room for improvement in its design. Another motivating factor might be the tendency for people not to read any on-screen instructions, just like they tend not to read product manuals. This type of thinking also applies to Web forms. When possible, designers strive to utilize a minimal amount of text to explain how users should fill in the different input fields in a form.

Wroblewski, Luke. UXmatters (2007). Design>Web Design>Forms>Help

Dynamically Filtering Dropdown Lists in JavaScript

This article describes a technique that takes input from a form text field and uses it to bring matching options to the top in a dropdown list.

Whitford, Justin. evolt (2005). Articles>Web Design>Adaptive>Forms

Dysfunctional Forms Syndrome

Prevent major user annoyance by checking all your web forms: feedback, comment posting, product orders, newsletter sign-up, newsletter opt-in, unsubscribe option, site registration, etc. When a form won't submit, or otherwise fails, after user inputs lots of data, it causes extreme ill will toward your web site, and may be legal violation (UCE laws).

Streight, Steven. Blogger.com (2004). Articles>Web Design>Forms>Usability

Effective Form Design

Forms are often an essential element of an application or website. In fact they are the most popular way of gathering information or encouraging user feedback. Given the sort of information that forms are used to collect (such as registering for a service, or placing an order), the importance of ease-of-use hardly needs to be emphasised. These are tasks central to the success of many online businesses.

Farrell, Tom. Frontend Infocentre (2000). Design>Web Design>Usability>Forms

Effective Use of Forms on Websites

People don't like filling out forms in the real world, and especially not while using the web. Forms are complicated, distracting, and take control away from the user. That is, unless they're designed effectively.

Baker, Adam. Merges.net (2001). Design>Web Design>Forms

Evaluating Forms

To demonstrate an example of some accessibility issues in HTML Forms, the following content intentionally has accessibility errors.

Abou-Zahra, Shadi. W3C (2004). Articles>Web Design>Accessibility>Forms

Five Ways To Make Sure That Users Abandon Your Forms

Completing a form is rarely (if ever) the goal in and of itself. The goal is to entice the user into a deeper relationship (of some sort) with your web site. Notice that I didn't say that the goal was to complete a transaction or make a sale.

Improving Customer Experience (2006). Design>Web Design>Forms>Usability

Form Validation

Any sort of interactive site is going to have form inputs — a place where your users input who they are, what they want to buy, where they live, and so forth. This data is passed to whatever handles your back end — a Perl CGI script, a PHP engine, a database like Oracle, or some other technology you’ve invested in. Whatever system is back there, you can bet that it doesn’t appreciate having its time wasted with bogus information, and chances are the user doesn’t appreciate it either. If the data the user submits to the CGI contains an error, there will be a noticeable lag — typically several seconds — before the information travels over the Internet to the server, is examined on the server, and then returns to the user along with an irritating error message. If you run a little preliminary validation of the user’s form input before the form is submitted, there will be no wait time. Client-side validation is instantaneous because it doesn’t have to transmit any data. JavaScript catches any erroneous data the user enters before it goes anywhere.

Apple Inc. (2006). Design>Web Design>Forms>DHTML

Forms vs. Applications

Once an online form goes beyond two screenfulls, it's often a sign that the underlying functionality is better supported by an application, which offers a more interactive user experience.

Nielsen, Jakob. Alertbox (2005). Articles>Web Design>Forms>Usability

Good Forms

So you've decided it's time to interact with your users. You're tired of this one-way street — you talking, them listening. You want to actually hear what your readers have to say. In order to do this, you'll need to provide a way for people to enter information. Therefore, you're going to need an HTML form.

Greenspan, Jay. Webmonkey (1999). Design>Web Design>Interactive>Forms

Greasemonkey Form Help

Two relatively common usability problems with web forms are textareas that are too small, and dropdown lists being clumsy to use for some people. This Greasemonkey user script automatically assigns links above each textarea so that it can be resized, and automatically expands dropdown lists. The script is easily configurable, so you can choose not to expand dropdown lists, or determine the maximum number of items you want displayed in a dropdown list, or have graphic or text links for resizing textarea form controls.

Lemon, Gez. Juicy Studio (2006). Design>Web Design>Forms>Help

Hide/Show Layer

This script uses dynamic HTML (DHTML) to pop open a box with info in it when you click on a link. In my demo I’ve used this to pop up contextual help about filling in a form. It could also be used, for example, to give pop-up definitions for terms in an article. In both cases, it makes sense to give the information in context, modelessly. Likewise, this solution avoids the problems of statelessness and latency.

Apple Inc. (2006). Design>Web Design>Forms>DHTML