- Chris Schmitt
- Kimberly Blessing – AOL > Paypal > Comcast
- Eric Ellis – Sr. Designer for Bank of America
“Forms Suck” from Web Form Design: Filling in the Blanks by Luke W.
Think of someone that you know as a master of conversation, is a great communicator and their conversation is flowing. The primary question is do you trust this person? Good forms offer trust, good forms are patient, good forms are forgiving and facilitate a 2-way communication.
BofA follows 4 basics when it comes to forms:
Expectation
(He didn’t really talk about this much)
Flow
(He didn’t really talk about this much either)
Order
Get the important stuff done in the first few pages/fields of a form—a user could give up half way through the form, or something could happen and they’d get timed out.
Noise
Anything that may distract a user from completing their form, but information which may not want to be eliminated (eg – instructions, )
Use a conversational voice, and remember that successful forms should put “people before pixels”. Consider the sign up form of Cork’d—totally awesome, and very much Gary. Huffduffer’s fill in the blank approach is pretty rad too.
Check out The Paradox of Choice by Barry Shwartz (basically about how our infinite array of choices paralyzes us).
We don’t need to reinvent the wheel every time we have to make a form because forms are one of the few things that we can totally reuse ad infinitum. These elements are universal
SInce JAWS is so damned expensive, the Firefox Vox plugin is a decent baseline screen reader that will at least get you in the ballpark of accessible forms.
Kimberly Blessing
Kimberly busted Eric because the social security number inputs for BofA’s saving account sign up form are not disabled when you select that you don’t have a social security number—though you get a message that you cannot continue with your application.
Kimberly has a span class=”accessaid” message to tell screen reader users what the form is for. She also has each separate option for US Citizen with a security number, Legal Alien with a social security number, and no social security number embedded in their corresponding lis .
The best way to set up company standards is to pull together the folks that are passionate about standards—particularly the back-end folks because data storage will sometimes dictate how the front end works (eg – “we don’t want to store three separate fields for a phone number”).
Kimberly uses paragraph tags and other such unsemantic mark-up for forms because they “look better when css is turned off”. I personally feel that this is a total cop out, and that nesting the parts of forms within ordered list items looks just as nice and is more semantic (they are a list of input fields after all).
Christopher
http://webformelements.com has some really great screenshots of all of the various form elements as rendered by the various browsers and on the various platforms.
With HTML5, you’ll get:
- input type=”slider”
- input type=”date”
- input type=”time”
- input type=”placeholder”
Which may be a bit more difficult to style due to CSS limitations.
Post a Comment