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? – Vitaly Mijiritsky Apr 9 '12 at 19:30

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.

| improve this answer | |

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.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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