Multiple Save Buttons

Written by Verne on June 4th, 2009

холна секция

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.Картини

4 Responses

  • SL

    A solution I’ve used in the past is an invisible (1px x 1px) iframe. You then have the form submit to the iframe. On every form field you have a onchange=form.submit(). Basically, everytime a form field is changed it’s saved. On the one hand this uses bandwith and database resources, on the other hand nothing is everlost yet the interface is seamless. This also allows for serverside form validation when needed.

    I do agree with short web forms though. I’m currently designing some online insurance applications, which are typically very long and complex. Instead, I’ve broken it down into sections for Insured Information, Risk Informaiton, Broker Information, etc. By using the above technique the user can flip through the different sections without ever losing data and having all the fields filled with database information.

    Hope that helps someone,

  • HE

    A solution I’ve used in the past is an invisible (1px x 1px) iframe. You then have the form submit to the iframe. On every form field you have a onchange=form.submit(). Basically, everytime a form field is changed it’s saved. On the one hand this uses bandwith and database resources, on the other hand nothing is everlost yet the interface is seamless. This also allows for serverside form validation when needed.

    I do agree with short web forms though. I’m currently designing some online insurance applications, which are typically very long and complex. Instead, I’ve broken it down into sections for Insured Information, Risk Informaiton, Broker Information, etc. By using the above technique the user can flip through the different sections without ever losing data and having all the fields filled with database information.

    Hope that helps someone,

  • Kedron

    Thanks for posting. Confusing the user with feature specific save buttons is a tired game. Even with the adoption of AJAX, it’s still confusing. Keep up the good work!

  • Jack Reihl

    Another good solution to this problem is edit in place. Good post. Thanks for sharing.

Leave a Reply