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.

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

[OR]

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
share|improve this question

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:

mockup

download bmml source – Wireframes created with Balsamiq Mockups


Edit:

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

share|improve this answer
    
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 Aug 23 '12 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 Aug 23 '12 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 Aug 23 '12 at 14:38
    
Thanks Brian & TJH for all the help. @Brian the link is really informative. –  jelumalai Aug 24 '12 at 6:18
    
Thanks for the link Brian, I'll use that another time for sure. And no worries @jelumalai happy to help! –  TJH Aug 24 '12 at 7:13

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.