JeffreyBarke.net

Designing Our Way Through Web Forms

Although forms make the Web go around, they are often ugly due the generic way in which browsers display them, not to mention irritating to our site's visitors when they don't work as expected. In this session, panelists will provide specific details on ways to successfully create compelling forms for your users.

• Christopher Schmitt, Web Design Specialist, Heat Vision
• Eric Ellis, VP Sr Designer, Bank of America
• Kimberly Blessing, Senior Web Development Manager, Comcast Interactive Media

Twitter search for #formsxsw

Audio

Download Designing Our Way Through Web Forms (58,557 KB, 01:02:27, 128 kbps).

Christopher Schmitt's slides

Notes

Eric Ellis

Forms suck (see Luke Wroblewski's Web Form Design). Forms stand in the way of what we want to do; what we want to accomplish. An evil means to an end for the end user. What can we do to make it less evil? We were never make forms great, but what can we do to make them less evil.

Try to create a conversation and behind every conversation is trust. Good forms must be structured like a conversation and offer trust. Good forms offer trust, are patient, are forgiving, don't waste your time, provide a basis for good two-way conversation.

Things to consider when designing forms:

• Flow: can a user look at a page and see a pattern of interaction?
• Manage noise: Anything that inhibits user completing a task, including help if not done right.
• Expectation
• Order: Lay things out in steps and let people know where they are.

People before pixels. Think about people and relationships; the form copy's tone of voice.

Check out Pattern Tap and Huffduffer for form examples.

Read Barry Schwartz's Paradox of Choice. Choice makes us more paralyzed; too many options. As designers we need to manage choice with our forms and this will lead to progressive engagement. Show/hide layers.

Kimberly Blessing

When it comes to forms, takes more to create a style guide.

The key to crafting any great user experience with forms is to make sure the entire team is working together on that user experience.

Redesigned Bank of America form Eric demoed using PayPal's form standards (unfortunately these standards are not public). (Code examples to be published, but not sure when/where. Will update this post when I know.)

(Think I'll attempt to reverse engineer the PayPal form standards and then post in my demos/tutorials section.)

Make sure forms degrade gracefully: kill the CSS and JavaScript. Are they still legible? Are they still functional? Where are the error messages hidden? Before the form?

Christopher Schmitt

Form design/elements should match the rest of the page, but often their styling is quite basic. Flash is nice because Flash developers have a blank canvas. However, styling form elements in HTML is more problematic.

Wanted to better understand CSS and how it applies to forms. Even the same browser will display a form element differently from one OSM to the next.

So created the amazing WebFormElements.com. Screengrabs from eight form elements, 20 CSS properties, 11 browsers and two operating systems! 3,520 screengrabs in total!

(Want to make this easier to use than the tagged Flickr photos; similar to the CSS tables at QuirksMode.)

Only going to get more interesting with HTML 5. Opera 9.6 has implemented the HTML 5 forms: slider, date and time. How will we be able to style these form elements?

Discussion

Q: (Christopher Schmitt) How do you maintain form standards guide?

A: (Eric Ellis) Do not recreate the wheel. Have reusable chunks of form code. Make things into components. Have an editorial style guide that talks about copy and having a consistent tone of voice. (Kimberly Blessing) Creating a style guide works best when it's bottom-up, not top-down. Forcing it from the top-down can cause a lot of resentment among design/development teams. Every company needs to work it out for themselves, though. Best practices, but no one way to do it.

Q: What do you think about using table elements for form design? And how do they impact accessibility?

A: (Eric Ellis) Bank of America views forms as data and data is organized in tabular format. (Kimberly Blessing) Depends on the form. May not be necessary for a simple form. If only want labels aligned to left of field, table may be overkill and may cause it fail on a mobile device. Forms inside of tables are accessible.

Q: How many people use a screen reader to check accessibility when designing forms?

A: (Eric Ellis) Check out Fire Vox; a screen reading extension for Firefox.

Q: Please comment on best practices for form validation.

A: (Eric Ellis) Client-side is nice because it provides immediate feedback, but server-side validation is essential for security. jQuery Validation plugin.

Q: What is the best way to code forms? Are dl elements best? What about wrapping inputs with p elements?

A: (Christopher Schmitt) I don't [use dl elements]. (Kimberly Blessing) I think they're overkill. There is no ideal answer out there. Most important is a fieldset with a legend and labels and inputs.

Q: A lot of interest in using HTML/JavaScript to create/replicate form elements.

A: (Kimberly Blessing) Check out the Jeremy Gillick's split button form control.

Q: With paged forms, is there a maximum number of pages? Maximum number of elements per page?

A: (Eric Ellis) Depends on what we're asking the user to do. There is an expectation on the part of users. Users won't go past one page for replacing a debit card, but willing to do four pages when applying for credit. Research your own customers and determine what they expect out of the "conversation."