6

I have a form with 3 long columns of checkboxes where the user needs to check whatever options she/he needs. Sortening the amount of checkboxes is not an option Im afraid.

Our users are mostly in the upper age groups with only basic computer experience.

I'm afraid they might check the options they want and not see the submit button at the end of the long form and just leave the page and their info not get saved.

I'm thinking of putting the submit button at the top. I also thought of checking if the user is leaving the page without having saved changes and showing a modal dialogue saying "You have unsaved changes, are you sure you want to leave the page?", etc.


Thanks for all your great answers folks. Every solution seems to have tradeoffs. We decided to use a modal dialog at the moment and see how our users react.

We dont really have any proof that they wont see the submit button at the bottom. Nielsen says 1-2 pagefulls is OK for long forms:

Note that the sheer length of a form is not a sufficient reason to break it up. Yes, it's best to stick to one or two screenfulls: If a form takes up many screens, you should seriously consider eliminating some of the questions and options. Otherwise, you're likely to overwhelm users and reduce your conversion rate. But, if all elements are truly needed, you can certainly place them on one long page -- just ensure that each element is easy and that all users have to do is keep scrolling (and sighing) as they complete each step in the long march to the blessed submit button.

1
  • considering that your user target group is older they might click it before they actually mean to, but if you can do the proper checks that they actually would mean to do so, on a long form people like to scroll back up to check all the information, in that case a button on top will be helpfull
    – HTDutchy
    Aug 24, 2011 at 13:11

6 Answers 6

0

Considering your target user group, I'd use the modal dialogue in case they didn't save before closing the window.

Duplicated submit buttons can be very useful when a form can be filled partially and submitted half-way through, but this does not seem to be your case, and less tech-savvy users may become confused when they see several identical buttons on the page.

P.S.: In case this a form filled by logged-in users, have you considering auto-saving the responses? Although I'd still include a clear submit button for those who aren't used to this...

1
  • Great point: "less tech-savvy users may become confused when they see several identical buttons on the page"
    – elsuertudo
    Aug 24, 2011 at 17:14
6

With the Submit button at the top or bottom there's always going to be a risk that the user fills out a screen full of the options and then hits "Submit" thus missing some of the options.

A better solution might be to break the checkboxes into sub sets and presenting each on a separate page - much like a wizard. Each page can have a heading "Step n of m" so the user knows how much they've done and how much they still have to do. You can then ensure that they don't leave without setting all the options that they need to.

If they don't need to answer all the question - i.e. leave some of the options as the default, then put these on the last page so the user can skip that if they want to.

1
  • Great point: "With the Submit button at the top or bottom there's always going to be a risk that the user fills out a screen full of the options and then hits "Submit" thus missing some of the options."
    – elsuertudo
    Aug 24, 2011 at 17:18
4

Putting a submit at the start doesn't semantically make sense. I would imagine the mental model people have of a form filling process is: you fill in a form then hand it in/post it/send it off/submit it. Therefore the submit should go at the end.

Can the form be broken down into multiple pages? Then have a submit at the end? You can use various queues to provide the user with information regarding number of steps/pages and progress.

You could catch the fact that they are trying to navigate away from the page without submitting? (Personally not a fan of this).

If possible make sure you user test whatever solution you come up with.

1
  • 1
    Great point: "I would imagine the mental model people have of a form filling process is: you fill in a form then hand it in/post it/send it off/submit it. Therefore the submit should go at the end."
    – elsuertudo
    Aug 24, 2011 at 17:18
2

I think the simplest way to handle this could be by adding some help text like, 'Please select your options and click on 'Save' a the end of the page to save your changes' instead of the double submit button.

and "You have unsaved changes, are you sure you want to leave the page?" could become "You have unsaved changes, would you like to save?" with Save|Don't Save as options, deals with the problem better by letting the user save directly.

1
  • "adding some help text" is a good idea but our users dont pay much attention to intructions unless they realize they dont know what theyre doing. Then they read.
    – elsuertudo
    Aug 24, 2011 at 17:18
2

From an accessibility POV, a user browsing with a screen reader will come across the Submit button first before any of the checkboxes.

They'd also have to go passed the Submit, check all the boxes they want to check and then shift-tab back up through them all again to get to the Submit button, making it very difficult for them to use.

1
  • Hadnt thought about that but a very valid concern.
    – elsuertudo
    Aug 24, 2011 at 17:20
1

what if you just made the "SUBMIT" button at the top and "sticky"/doesn't scroll off the page, so the submit button is always there?

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.