creative briefing

Just a quick note on web forms. Everyone likes short forms (i.e. 5 or less fields). In fact, if you’re designing forms, you should almost always aim to breakdown yours into smaller and more digestable chunks of fields rather than have 20 fields vomited onto a single page.

But, sometimes it’s unavoidable. If you’re editing your profile on one of your kajillion social networks, for example, it’s acceptable to have a lot of fields on a single page. Nonetheless, you still run into longformitis from time to time (fatigue from filling out long forms). One technique I’ve seen that combats this is to have multiple save buttons throughout the page, evenly dispersed between sections of the form. This is the web form equivalent to having checkpoints in Super Mario, and it’ll allow users to save their changes without having to scroll all the way down to the bottom of the page.

How to do it right…

The WordPress cformsII plugin is a great example of how this technique can help. When editing the settings, cformsII doesn’t hold back on the number of options it makes available. However, all the fields are grouped into distinct sections with an Update Settings button available to the right of each section header. An essential feature of this page is that any Update Settings button on the page will save all the data you’ve entered on the page.

How to do it wrong…

Ah, beloved Brightkite. We were once great friends, until I realized my other friends didn’t like you, so we had to part ways. But aside from Brightkite’s inability to break into the Toronto scene, it also faults in one minor aspect.

On its Sharing options page, the form hosts a similar setup to cformsII with multiple Save buttons. However, one major flaw is that each section seems to be independent of each other. Clicking the Save button under the Twitter section only saves the data updated in that section. If you happen to also update your Facebook information at the same time but clicked the Save button under the Twitter section, the form would only store the updates to your Twitter settings. Wuh ohs.

The Lesson

Multiple save buttons are great to relieve bad karma from long and unfriendly forms. Just remember that the purpose of having multiple save buttons should be to make it convenient for the user to save their changes from anywhere on the page. Having section-specific Save buttons defeats this purpose.