16

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.

Improve this question
4
  • 3
    put them both on the top right corner and the bottom right corner
    – Naoise Golden
    Dec 23, 2011 at 10:19
  • I think that's not a good idea to place buttons both at top and bottom
    – Ravi
    Dec 23, 2011 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, 2011 at 14:27
  • Finally, i agree to show the toolbar always at a fixed position and let only the form scroll.
    – Ravi
    Dec 24, 2011 at 5:58

4 Answers 4

Reset to default
7

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?

Improve this answer
3
  • 4
    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, 2011 at 22:37
  • @exp, ya, basically like that
    – CaffGeek
    Dec 23, 2011 at 22:38
  • Even new gmail UI has handled similarly, if you compare with old UI..thanks chad, exp
    – Ravi
    Dec 24, 2011 at 3:28
4

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.

Improve this answer
1

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.

Improve this answer
0

In this case the user already fill very long forum Its correct place to put at the bottom center i think, because its easy to access. If its top right corner means again they need scroll and then choose its very difficult to access.

Improve this answer
1
  • How about both the top and the bottom of the form?
    – Mayo
    Oct 7, 2016 at 10:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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