Review: Calling in the Big Guns: Review of Web Form Design: Filling in the Blanks

What is likely to win the most converts is the joy Wroblewski takes in designing. This impression becomes clear as you page through the book. He isn’t just an ardent evangelizer, following the rituals of going to conferences selling snake oil. He’s been there in the trenches, just like you; he’s done this a hundred, maybe a thousand times. He’s tested these ideas and provides a framework for you to use from day one. Half the battle in good form design is defending your decisions to stakeholders.

Evans, Will. Boxes and Arrows (2008). Articles>Reviews>Web Design>Forms

Creating Killer Forms with CSS

So you’ve been to about a million websites at this point in your cyber life. There’s a little bit of everything in the online jungle, with every different imaginable style, color, and layout. Everyone is trying to be different, trying to separate themselves from the pack. So why is it that nearly every website, from the coolest of the cool to the worst of the worst, seem to still be using the same, ugly form fields that are default. Well, that’s about to change, at least on your website. I’m going to give you some quick and easy tips to spice up your form fields and set your website apart from the rest.

Robbins, Kyle. ReEncoded (2008). Articles>Web Design>CSS>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

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>Personalization>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

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

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

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

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

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

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

Accessible CSS Forms: Using CSS to Create a Two-Column Layout

Websites have become less accessible and more complex over time according to recent studies. Learn how to buck the trend by creating fast, accessible CSS forms that work with modern browsers and gracefully degrade.

Website Optimization (2008). Articles>Web Design>CSS>Forms

Accessible Forms

This document is concerned with what the user of a Website form "sees" and interacts with. It outlines how you can create forms for the Web that are more accessible and describes the appropriate use of.

Hudson, William. Webusability (2004). Articles>Web Design>Usability>Forms

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). Articles>Web Design>Accessibility>Forms

Colons at the End of Labels?

You are writing captions or labels for fields in forms, for example 'Name' or 'Date of birth'. Should they be finished with a colon, or not?

Light, Ann. Usability News (2006). Articles>Web Design>Usability>Forms

Creating Bulletproof and Easy to Complete Web Forms

Effective form design is a great way to boost conversion rates. Jason Fried and Matthew Linderman share with us the secret of how to create attractive and functional forms.

Fried, Jason and Matthew Linderman. Peachpit Press (2004). Articles>Web Design>Standards>Forms