Displaying multiple Sections/Subsections in one page to avoid scrolling

Question

I want to create a layout for web application where the user enters a large amount of information for review in the company.

• Multiple users can access the same review of company.
• The user can select a primary section, and according to that it will select a secondary subsection as per review.
• The primary section has multiple subsections, and multiple users can add more review factors for each subsection.
• Adding multiple review factors, and already available review factors, will create more sections on review page.
  • It will make the review page bulkier, and scrolling would be given accordingly.

What would be the best practice to display multiple sections/subsections in one page to avoid scrolling?

Answer 1

I would recommend against trying to reduce scrolling for the sake of reducing scrolling.

Decreasing the vertical height of your form may reduce scrolling, but it will damage the user experience much more in other areas.

Nielsen recommends keeping forms in a single-column layout instead of trying to decrease vertical space because:

Multiple columns interrupt the vertical momentum of moving down the form.

Rather than requiring users to visually reorient themselves, keep them in the flow by sticking to a single column with a separate row for each field.

---

If your main aim is to avoid scrolling, a step-by-step wizard form would reduce scrolling, and reduce the cognitive load of the user.

Answer 2

Based on my experience facing long and complex forms, I got the best acceptance verified in usability tests keeping the forms with one column (instead of the scrolling). It keeps the information flow oriented and improves the "discoverability" of the labels/fields in the form.

I've made a post with many studies regarding this on this post: What is the best way to deal with very complex forms?