Question

I have a form with a drop down box with multiple selections, I am going to set it up so that depending on the selection the fields in the form will change.

I have currently thought of two ways to do this (keep in mind I’m relatively new to web development):

• The first method is using one page of HTML with a JS function that will show
  specific fields depending on the sections display value, a la:
  elem.style.display="inline" or elem.style.display="none"
• The second method is to have multiple pages and to use JS to redirect
  depending on which item is chosen.

Is there a preferred method? Do users prefer a specific method, which one is more efficient? I believe the second would be easier to manage in the future but I wonder about its usability and efficiency.

Answer 1

For the user it is usually nicer to use the first method since there is not the wait of a page load. There are probably times and places where it is better to use separate pages, but for the most part I would say doing it all on one page is better.

Here is a quick list of some of the pros and cons

First method:
Pros:
1. No extra page loads (however the first page could be slow if you try to load to much)
2. Easier for the user to stay with the flow of the process
3. It looks cooler/trendy when the page responds immediately to input (somewhat subjective I know)
Cons:
1. Can be quite a bit more complicated to maintain
2. Along with one can be a lot easier to introduce bugs

Second method:
Pros:
1. Straightforward to develop
2. Signals to the user there is a change in what you are doing (In some cases switching pages creates logical breaks in the users mind.)
Cons:
1. Can look a little outdated (again its subjective)
2. There is some maintenance on the backend making sure everything gets communicated from one page to the next correctly and securely