I am about to make a long form where users can select/enter data on a web interface directly. Something similar to filling up an invoice form on the web page. I wanted inputs on which process of the two mentioned below is easier for a user to fill up easily.

Option 1: Using a wizard and allowing user to make selection in two to three steps


Option 2: Using a single form to fill in all the details

The details to be included are below:

  1. Customer Details (name, address & contacts)
  2. Invoice Details (Invoice#, Date, Due Date, Terms P.O#)
  3. Product/Service Details (multiple products with rate, qty, discount, tax and amount)
  4. Total Summary (subtotal, taxes, discount and TOTAL)
  5. Terms & Conditions

1 Answer 1


The latter option gives the users an accurate idea of the scope of the task. Yes, option 1 may provide this using breadcrumbs, but that doesn't give FULL scope and IMO it's better to keep the users in the know as much as possible at all times.

Having said that you don't want an unapproachable form with too many fields, so subtitles, sections and even an accordion will help with that.

To give you an idea of what I mean (I've only done the first couple of form parts) the accordion on the left and sectioned form on the right:


download bmml source – Wireframes created with Balsamiq Mockups


In a form on the system I'm working on sections could be minimised. In your case you could have a master section/category as listed above and then group inputs in to fieldsets. The groups could be collapsed meaning you can always sow mandatory fields (by making fieldsets containing mandatory fields expanded by default) yet still save space by hiding some areas of the form. Screenshot below.

enter image description here

  • thanks for your suggestions. In accordion model, user will not be able to see the "mandatory fields" while submitting. For second method, can we show the all fields in single page? If yes, it will be too long.
    – jelumalai
    Commented Aug 23, 2012 at 11:11
  • Good point about mandatory field. I'll modify my answer to add a screenshot of how I tackled the same problem.
    – TJH
    Commented Aug 23, 2012 at 12:59
  • 1
    You may find Best way to make user complete each accordion of content to be helpful, especially Anna's answer. The mandatory field is possibly handled by having only one accordion open at a time, and having the continue button fail if the current view is incomplete.
    – Brian
    Commented Aug 23, 2012 at 14:38
  • Thanks Brian & TJH for all the help. @Brian the link is really informative.
    – jelumalai
    Commented Aug 24, 2012 at 6:18
  • Thanks for the link Brian, I'll use that another time for sure. And no worries @jelumalai happy to help!
    – TJH
    Commented Aug 24, 2012 at 7:13

Your Answer

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

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