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.

  • 3
    It sounds like an interesting question, but could you provide some more details or context? Is the number of books fixed or limited, or can it be any number? How many documents can be in a book? Does selecting the same document twice for the same book count as two "slots" in the book? Does the order of selection matter? Apr 9, 2012 at 19:30

2 Answers 2


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.


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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.