Multiple Save Buttons
Written by Verne on June 4th, 2009Just 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.Картини
If you enjoyed this post, subscribe to the free feed by RSS or Email.
SL
July 8th, 2009 at 5:15 pmA 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
October 5th, 2009 at 5:19 pmA 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
October 7th, 2010 at 12:18 pmThanks 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
November 3rd, 2010 at 3:30 pmAnother good solution to this problem is edit in place. Good post. Thanks for sharing.