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

Stylistic Differences in Multilingual Administrative Forms: A Cross-Linguistic Characterization    

This article studies the stylistic variation in the design of administrative forms in three European countries--the United Kingdom, Italy, and Spain-- through the linguistic analysis of a small corpus of multilingual administrative forms dealing with pension benefits and other kinds of allowances written in four different languages--English, Spanish, Italian, and German. The analysis included both monolingual administrative forms--written in English, Spanish, and Italian--and bilingual Italian/German and Italian/ English forms. The purpose of the study was to search for cross-linguistic regularities in the design of administrative forms which would enable their characterization as a genre, both in terms of its staging structure and of the linguistic and formatting features of the elements which configure it as such. The analysis performed on the small corpus yielded interesting stylistic differences and tendencies in the design of comparable administrative forms in the different countries, characterized by different socio-cultural backgrounds. It is suggested that these differences are a reflection of the social attitudes of the different administrations toward their citizens.

Lavid, Julia and Maite Taboada. Journal of Technical Writing and Communication (2004). Articles>Language>Business Communication>Forms

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

Using Word's User Forms  

Mohr explains how to create User Forms--macro-controlled user interfaces that employ standard graphical user interface components--for collecting information from users that can be saved as character-delimited text files and fed into a database.

Mohr, Robert P. Intercom (2003). Articles>Word Processing>Software>Forms

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

Spruce Up Your Search Box with CSS and a Background Image

Very few designers appreciate the aesthetic of a text input field, and styling form fields cross-browser on any Web site can be a tedious and frustrating experience. The compromise typically involves applying a simple colored border and background to the fields. I think this is the right approach for Web sites and applications that are form field intensive, but the search box plays a special role in the design, and it deserves a little more attention.

Reindel, Brian. d'bug (2008). Articles>Web Design>Forms>CSS

Formal Weirdness

Explains some of the technical reasons for form controls being so hard to style consistently across platforms with CSS. Also asks a lot of good questions related to how various CSS properties should affect form controls if browsers would let them.

Meyer, Eric. MeyerWeb (2007). Articles>Web Design>Forms>CSS

Improve Your Forms Using HTML 5!

HTML hasn't really been updated since HTML version 4 was released back in 1998. However, the WHATWG community has been working on HTML since 2004 and this will hopefully result in some much needed improvements. This article shows some of the new functionality of the proposed form chapter of HTML5: Web Forms 2.

Van Kesteren, Anne. Opera (2008). Articles>Web Design>Forms>HTML5

Fancy Form Design Using CSS

Forms. Is there any other word that strikes as much fear into the hearts of grown web designers? There's also an improperly held belief that the only way you can guarantee that a form displays properly is by using tables. All of the code reproduced here for forms is standards-based, semantic markup, so you've got no excuse for relying on tables now!

Adams, Cameron. SitePoint (2008). Articles>Web Design>CSS>Forms

Nailing Form Layout  

You may not realize it, but there are times when each variant of form layout can have a positive or negative impact on how the form (and your site) is used or perceived. And applying the right variant at the right time is one of the simplest things you can do to improve your user’s experiences.

Hoekman, Robert, Jr. RobertHoekman.com (2008). Articles>Web Design>Forms

Five Ways To Make Sure That Users Abandon Your Forms

What do you really need to know in your form process? Be brutal. Don't include stuff that your sales team would like. 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. That is evidence of the deeper relationship, not the vehicle by which you persuade your users.

Meyer, Eric. Improving Customer Experience (2006). Articles>Web Design>Usability>Forms