How best to design a UI that allows for the user to add multiple objects to one master object?

Question

I am in the process of designing a form that allows a user to build a "book" from a group of documents. The documents are selected by the user selecting several options/filters using buttons.

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

A document can be selected up to 5 times for each "book".

I don't want to waste page real estate by repeating the form 5 times on the page - this would result in the user getting lost scrolling around, I would think.

What's a good way to accomplish this type of UI without confusing the user.

I'm thinking along the lines of some type of Accordion layout or displaying the form in a dialog window.

Answer 1

You could use a master-detail layout. The master would contain a list of all your books. The detail would contain the form for building the book. More specifically the book currently selected in the master.

Answer 2

Sounds to me like a step-by-step wizard would be the most appropriate. Take your one-document form, and at the bottom have two submit options: "Add Another Document" and "Finish Book."

Your terminology makes it sound like you're doing this on the web, so what I'm specifically picturing is a modal with the form, and "Add Another Document" does either an AJAX submittal and clears the form, or simply hides the form elements for Document N and shows the elements for Document N+1. The second is fairly similar to your mentioned accordion, but it cleanly prevents people from adding Document 1 and Document 4 with nothing in between.