How to present a long form with optional sections

Question

I have a long form that will require the user to print it out and mail it in (the signature is legally required and submitting it online isn't an option at this point). The form is to change various information about their account. There are six sections with multiple input fields. Most of the time people will only want to change one section but there are situations where they may want to change more.

I was leaning toward an accordion form based off of this article and the idea of progressive disclosure. But I have two arguments against it:

1) In the article written by Mr. Wroblewski he talks about people not understanding that they need to click the headers. Granted, it is written in 2010, but I could still see that as a problem. Even with an arrow pointing down.

2) I'm also having problems on where to put the "Print Form" button.
Wireframe a)

If someone is in the accordion section I could put a "Print Form" button within the dropdown, but what if they do want to fill out another section? I can see them clicking it and then printing out multiple forms each time they filled it out.

Wireframe B)

If I put the "print form" below the accordion and someone is filling out the fields in a dropdown I can't imagine they'll think to look at the bottom of the headers and click the button.

Wireframe C)

I could have the button in the right sidebar but it'd just be there all by it's lonesome and I think people would be blind to it.

Wireframe D)

give the users a list one one page, and then build the form on a second so it's more traditional. However, this feels clunky to me.

Wireframe E)

Combine the two and give them check marks and then show the content below. It'd feel more like a standard form layout and they may be drawn to the print button this way:

So, I guess my overall question is, what's the best way to present a long form with entire sections that are optional while presenting the "print form" button in a highly noticeable way?

Answer 1

To find the answer I referenced Luke Wroblewski's Web Form Design. He has an entire section that talks about selection-dependent inputs, which is more or less what I was trying to do. Here's what I found:

Wireframe A, B and C:

Positives: 100% pass rate. It keeps the initial options visible.

Negatives: It's not clear that the header is selectable, there's a slow completion speed and it's not completely accessible(that's changing though)

Wireframe D:

Positives: Average satisfaction scores. Low number of user errors. Rates well with eyetracking.

Negatives: The user can't see or access their initial options. It's slower.

Wireframe E:

Positives: Near perfect satisfaction rating. The header and inputs are close to each other. It keeps the initial options visible.

Negatives: If the number of inputs is substantial then the method breaks down quickly. The combination of the page jump and the movement of the initial options cause confusion.

Wireframe displayed in the comments by DesignerAnalyst:

Positives: Rates best in eyetracking. Near perfect satisfaction ratings (the eye doesn't have to travel too far once they select a section. It keeps the initial options visible.

Negatives: When the number of initial options grows it doesn't do well. There is confusion about mutual exclusivity of each tab.

I ended up going with a version of Wireframe D. The form is going to be substantial and will probably grow from the first implementation. It's a complex subject matter so I wanted to help reduce user error and confusion. Although they can't keep track of their initial options I'm giving them a back button so they can go back to the first page to see what they chose. It's not great but for phase one it works. I may display a header on each page to show their selections. In my particular instance the initial inputs are going to build a form for the person, so I'm actually altering the wireframe a bit and putting each selection on its own page. Each separate section has the potential to be somewhat lengthy so this will help the user to digest the information. The print button is on the very last page under and image of their form.

Luke talked about a few other designs that I didn’t come up with in his book but they didn’t seem to work for my purposes at all. If you’re facing this problem or any other problems related to web forms I would check his book out and read up. It’s a great resource.

Answer 2

I think some of the key questions that will allow you to come up with the optimal design will be:

• How will the user know if they are going to need to fill out each section? This will determine whether you are trying to get the user to go through the entire form or allow them to simply skim through each heading and go to the section that they want to fill in easily. Then you can decide how prominent the headings should be, and whether the contents should be exposed at the beginning.
• What is the purpose of printing the form? If it is form record keeping then you don't need to show it right at the beginning since you only need to do it right at the end. If it is to print out the form so that they can also fill it in by hand then perhaps you want them to be able to add or remove sections from the printed version so that it only contain information they need to look at.
• What is the purpose of the form? I think if there are money or legal implications involved, then it is important to make sure that the user can see everything whether they think it is going to be important for them or not to save you from problem later on. But if it is to encourage people to use it then you have to balance that concern by not overwhelming them with information.
• How much content is there (and can it be simplified) and how much more do you expect there to be in the future? So that the form is usable on different devices and also easy to navigate (because people might change their mind or fill in something incorrectly) you need to provide that usability for the form to take advantage of the digital format.

So while I can't help you come up with the best design, I think you can use some of these ideas to plan your design and testing.

Answer 3

You may use a list, and when an item is selected the coresponding fields are displayed. Let the user change any field from any section.

^{download bmml source – Wireframes created with Balsamiq Mockups}

The print changes form, will only print the changes made e.g. if only favorite color is changed, print only that.

^{download bmml source}