Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

For example user have Options page with long form in it. The most popular options are often on the top of the form, so user is changing them and have to scroll to the bottom of the form to hit "Submit" button. Imagine if user have to change something often and each time user should scroll to the bottom of the page to submit the form. IMHO it would be better for users to put "Submit" button above the form and they would scroll less. Example for testing two different types of forms on jsfiddle.

Sometimes long forms are splitted into tabs for making the form easier to use. But still it would be better to place "Submit" button above the tabs, because the height of tabs are different and the position on "Submit" button will not be the same.

Advantages of placing "Submit" button on the top:

  • "Submit" button is always on the same place no matter of how long form is
  • if the most frequently used options of the form are placed on the top part of form (as it should be) than in most cases "Submit" button will be visible for user without the scroll

Is there any disadvantages in placing "Submit" button on the top of the long form?

Possible compromise: maybe it would be good for users to put two "Submit" buttons in the long forms (one on the top of the form, another - at the bottom).

Similar question.

P.S. In the login or registration or survey forms "Submit" button should be in the bottom of the form because user will fill the text-inputs one-by-one and in the end user will hit "Submit" button. It would not be useful to place "Submit" button on the top of the form in these (or similar) cases.

share|improve this question
3  
You could try a fixed header/footer solution where the submit button is always there –  Ben Brocka Aug 16 '12 at 21:23
    
@BenBrocka +1 Great solution. IMHO fixed block with "Submit" button solves all the problems with long forms. –  webvitaly Aug 16 '12 at 21:38
    
I swear I've seen that used as a pattern but can't find an example –  Ben Brocka Aug 16 '12 at 21:41
    
@BenBrocka Similar approach is used for 2-level menu on Bootstrap site - twitter.github.com/bootstrap/base-css.html (try to scroll the page) and imho it would be useful for forms too as you described. –  webvitaly Aug 16 '12 at 21:44
add comment

1 Answer 1

up vote 3 down vote accepted

Expanding on my comment, a possibility is to simply use a floating header/footer submit button. This way the submit button is always visible and can easily be accessed regardless of one's position on the form.

This has a potential to be confusing though; it should be clear that you can't just press the submit button whenever (unless you can, of course). Instead you should use some inline validation to show what's missing on the form. A possibility is scrolling to the error on the form when clicking the submit button (since it might not be on screen) but I'd want to test that. Automatically moving the user's scroll position is rarely desired.

Consider the linearity of your form as well; a floating submit button would be best if your form is:

  1. Multiple, scrollable pages in length
  2. Either doesn't have a definite ending point or invites editing multiple parts of the form out of order
  3. Often accessed to edit previously completed forms.

I can see this pattern being especially effective if the form were something like customer information where I might repeatedly need to access and edit an already filled out form. This becomes more like editing a document in Google Documents; Submit is now an easily accessible Save feature more than a final note on a sequential form.

share|improve this answer
    
Someday I will found the example of such form and I will post the link to that form here :) About "can't just press the submit button" - Submit button could be disabled if not all required inputs are filled and the form is not ready to be submitted. –  webvitaly Aug 16 '12 at 22:07
    
I liked the fixed header/footer solution in your comment better. Personally I dislike floating content in that I really dislike content that moves as I scroll. It's distractive and intrusive... But hey, maybe it's just my old eyes... :-) –  Marjan Venema Aug 17 '12 at 9:09
    
@MarjanVenema I'm not sure we're on the same page here. A "fixed" header/footer is the "floating" content I'm talking about...and that's why it moves as you scroll. What difference are you thinking of between the two? –  Ben Brocka Aug 17 '12 at 11:57
add comment

Your Answer

 
discard

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.