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

Interactive Forms with Javascript / HTML Tutorial

One of the most important aspects of web design is getting information from the viewer to the webmaster. This is where HTML forms are used. If you have been on the internet, you have seen forms before. Google uses them for search queries, Amazon uses them for shipping and credit card information, your bank uses them for you to login. Almost every site on the web has a type of form somewhere. We can't live without forms. How about changing the forms based on input by the viewer? This is where interactive forms using Javascript and HTML can help.

Zimmer, Brian. Zimmertech.com (2001). Design>Web Design>Forms>DHTML

International Address Fields in Web Forms

As enablers of online conversations between businesses and customers, Web forms are often responsible for gathering critical information—email addresses for continued communications, mailing addresses for product shipments, and billing information for payment processing to name just a few. So it shouldn’t come as much of a surprise that one of the most common questions I get asked about Web form design is: “How do I deal with international addresses?”

Wroblewski, Luke. UXmatters (2008). Design>Web Design>Forms>Usability

Label Placement in Forms

Placing a label above an input field works better in most cases, because users aren't forced to look separately at the label and the input field. Be careful to visually separate the label for the next input field from the previous input field.

Penzo, Matteo. UXmatters (2006). Design>Web Design>Forms>Usability

Load List Values for Improved Efficiency

Reduce the number of database hits and improve your Web application's efficiency when you load common shared list values only once. In this code-filled article, learn to load the values for drop-down lists when your Web application starts and then to share these loaded list values among all the users of your application.

Karanam, Srinivasa Rao. IBM (2005). Design>Web Design>Forms>User Centered Design

The Long Road to Simple: Creating, Debating, and Iterating "Add an Event"

Sometimes there's a lot more to simple than meets the eye. To the customer, this is just a few obvious words in a small box. But really, that's the point.

Signal vs. Noise (2007). Design>Web Design>Forms>User Centered Design

Making Compact Forms More Accessible

Space constraints can put the squeeze on accessibility and usability. Mike Brittain shares his method for making itty-bitty forms more accessible and easier to use.

Brittain, Mike. List Apart, A (2006). Design>Web Design>CSS>Forms

Name and Address Forms on the Web: Research into Usability  

Internet forms can be found on all kinds of sites that enable visitors to interact with companies, such as order forms in online shops or application forms on job boards. These forms ask visitors to fill out their name and address, which in many cases results in user errors as a consequence of design failures. In this article we report on a research project using event logs to analyze user errors and optimize the design of name and address forms. Two factors are identified as crucial for usability: the sequence of elements in the name field and the spatial orientation in the address field.

Lentz, Leo and Menno D.T. de Jong. STC Proceedings (2005). Design>Web Design>Forms>Usability

Prettier Accessible Forms

Forms are a pain. You can make them pretty, make them accessible, or go a little crazy trying to achieve both. Nick Rigby offers a happy solution.

Rigby, Nick. List Apart, A (2006). Design>Web Design>Accessibility>Forms

Refining Data Tables

Many articles have been written on what is probably the single most ubiquitous interface element within Web applications today: the form. Forms justifiably get a lot of attention because their design is critical to successfully gathering input from users. Registration forms are the gatekeepers to community membership. Checkout forms are how eCommerce vendors close deals. But what goes in must eventually come out, and the information users provide to Web applications often makes its way back to users in the form of tabular data.

Wroblewski, Luke. UXmatters (2006). Design>Web Design>Forms>Databases

The Scott Adams Meltdown: Anatomy of a Disaster

A chain of five errors led to Scott Adams losing his work. Not one of those errors was his. They had been made months and even years before Scott Adams ever started work on his blog. His was an accident waiting to happen, an accident that has almost certainly befallen a large number of other individuals who have had the misfortune to use the same software.

Tognazzini, Bruce. Nielsen Norman Group (2006). Design>Web Design>Usability>Forms

Selection-Dependent Inputs

Successful Web applications tend to grow--both in terms of capability and complexity. And this increasing complexity is often passed on to and absorbed by a Web application's forms. In addition to needing more input fields, labels, and Help text, forms with a growing number of options may also require selection-dependent inputs.

Wroblewski, Luke. UXmatters (2007). Articles>Web Design>User Interface>Forms

Sensible Forms: A Form Usability Checklist

Sometimes it’s the little things that drive you nuts. As many of us have probably noticed during this season of holiday shopping, usability problems in online forms can be infuriating. Brian Crescimanno helps solve the problem with a checklist of form-usability recommendations.

Crescimanno, Brian. List Apart, A (2005). Design>Web Design>Usability>Forms

Seven Steps to Usable Forms

Follow these seven steps to make your forms - and your users - happy.

Reichley, Keith. SitePoint (2002). Design>Web Design>Forms>Usability

Sign Up Forms Must Die

You load a new web service, eager to dive in and start engaging, and what's the first thing that greets you? A sign-up form. We can do better, says Luke Wroblewski, author of Web Form Design: Filling in the Blanks. Via a technique of "gradual engagment," we can get people using and caring about our web services instead of frustrating them (or sending them to a competitor's site) by forcing them to fill out a sign-up form first.

Wroblewski, Luke. List Apart, A (2008). Articles>Web Design>Forms>User Centered Design

Simple Tricks for More Usable Forms

Web developers loathe the task of building forms almost as much as users loathe having to fill them in. These are both unfortunate facts of the Web, but some smart JavaScript and intelligent CSS can go a long way to remedying the situation. In this article, I'll introduce a number of simple tricks for improving the usability of forms, and hopefully inspire you to improve on them and create your own.

Willison, Simon. SitePoint (2004). Design>Web Design>Forms>Usability

Site Comment: Yellow Page Search on Krak.dk

Too many required choices, too much mouse moving, too weak words, and less obvious options make address search hard on Krak.dk.

Bohmann, Kristoffer. Bohmann Usability (2000). Design>Web Design>Usability>Forms

Streamline Your Forms with Widgets

“Advanced forms” are rarely that. A more fitting name would be “Overwhelming and confusing forms”. But with Jason Long’s clever approach to streamlining a screen full of checkboxes, you might just be able to once again look fondly on your forms.

Long, Jason. Vitamin (2008). Articles>Web Design>Forms>CSS

Tabular List

This worked example applies styling and functionality to a basic grid of data to produce a simple form control that's a pleasure to use.

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

Ten Tips To A Better Form

The most monotonous entities in the known universe, forms, are a staple of every web programmer's balanced diet. Whether we like them or not, forms are the gatekeepers to our site’s goodies and often their design alone determines whether a user will try what you’re selling or simply walk away. Without pomp or circumstance, here are ten tips to transform your plain vanilla into double chocolate chunk with marshmallows.

Campbell, Chris. Particletree (2005). Design>Web Design>Forms>User Centered Design

Getting a Form's Structure Right: Designing Usable Online Email Applications

There are a million websites out there. There are a million email service providers out there. How do you ensure that you gain the right audience to join your service? What are those factors that will help users move ahead and become your loyal customer? Part of the answer has to do with the first step: Registration!

Kirmani, Afshan. Boxes and Arrows (2008). Articles>Web Design>Forms>Usability

Multiple Form Labels and Screen Readers

Just about every website needs some forms. Sometimes there are many of them, sometimes just a single contact form. Regardless of their number, they need to be usable and accessible, which can sometimes be a little more work than it would be if theory and practice aligned a little better.

Johansson, Roger. 456 Berea Street (2008). Articles>Web Design>Accessibility>Forms

Use the Label Element to Make Your HTML Forms Accessible

There are plenty of articles and tutorials that describe how to create accessible HTML forms out there. Despite that it is common to come across forms that do not use a single label element and forms that use label elements but do so incorrectly.

Johansson, Roger. 456 Berea Street (2007). Articles>Web Design>Accessibility>Forms

Autopopulating Text Input Fields with JavaScript

Few people will argue against the need to explain to users what they are supposed to enter into text input fields. One common workaround when no label can be displayed is to put some placeholder text in the text field and let that act as the label.This approach works reasonably well, but it burdens the user with having to clear the input before entering their own text, which can lead to frustration and mistakes. An approach that avoids that is using JavaScript to clear the input when it receives focus. Since that won’t work when JavaScript support is missing, JavaScript should be used to insert the placeholder text as well.

Johansson, Roger. 456 Berea Street (2007). Articles>Web Design>Accessibility>Forms