User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I have a big project creation form having atleast having 30-40 fields where i have already grouped the relevant fields as a set(splitting into 3 columns) with proper headers, but still i have a long form.

My Question is where should i place the Save/Cancel/Edit buttons..? I am showing Edit only in read only mode. I have placed bottom left hand corner as user fills the form from top to bottom and hit save. Sometimes, they might not fill all the fields just fill the top section want to save the form, so in that case the user needs to scroll all the way to bottom.

Is there any data or research supporting this pattern? Is there another approach you recommend? I'm not as interested in official guidelines, as much as research-backed principles and the corresponding sources.

share|improve this question
put them both on the top right corner and the bottom right corner – Naoise Golden Dec 23 '11 at 10:19
I think that's not a good idea to place buttons both at top and bottom – Ravi Dec 23 '11 at 12:23
Just as data: Opera has save and reset buttons at the end of every section and all sections folded away by default; Sharepoint has one set at the top and one at the bottom. Opera's approach is ambiguous in that it's not clear whether it only saves changes in that section. – Ulrich Schwarz Dec 23 '11 at 14:27
Finally, i agree to show the toolbar always at a fixed position and let only the form scroll. – Ravi Dec 24 '11 at 5:58
up vote 5 down vote accepted

Another option, is to scroll the form inside a container, and leave one set of buttons.

Rather than having the entire page scroll and the buttons not always being visible on the screen?

share|improve this answer
if you meant 'making button panel visible at all times, but on the bottom of the form, while enabling scrolling for the rest of the form (similar to facebook's or twitter's top panel, but... on the bottom)' - than that's what i'd answer. – exp Dec 23 '11 at 22:37
@exp, ya, basically like that – CaffGeek Dec 23 '11 at 22:38
Even new gmail UI has handled similarly, if you compare with old UI..thanks chad, exp – Ravi Dec 24 '11 at 3:28

I like the approach taken by Jetbrains Teamcity (a continuous integration tool).

The form has regular save/cancel buttons at the end - for the case where the user fills out all the fields from top to bottom.

In addition, as soon as a change has been made, an "overlay" appears at the bottom of the screen with a message advising that there are unsaved changes - and with a "Save" button right there.

It doesn't matter where the users scrolls, there's a save button right there in the centre of the bottom edge of the window.

share|improve this answer

Having two button group at the bottom and top makes sense in your case.

If it's possible put content in three tabs in this way user should complete each step that he wants, and then one button group would suffice.

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.