User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I have a questions about how to best present a form based off a many to many relationship to a user. I'll explain my models to help give an idea of what data I need to present.

Models and Relationships
   Shipment  has_many :products :through => :shipment_products
   Product   has_many :shipments :through => :shipment_products
   ShipmentProducts belongs_to :shipment,  belongs_to :product

So basically I have A shipment form that has the necessary data to create a bill of lading. In addition to that form, I need to select multiple products and their quantities. I've had a similar issue in the past where I used drag and drop, but I was unhappy with the experience being a little cumbersome. In this case I believe there would be too many products to list in a container to be able to drag and drop.

So what I need is a form that will allow me to fill out the shipment data, search for a product, select the product, add the quantity, and associate that with a shipment. What is the most effective way of designing my form so these items are presented clearly to my end user?

share|improve this question
up vote 6 down vote accepted

It's a rather simple form. At the very basic level, it's a shopping cart that is filled not from product pages but from the cart/order summary page. Thus, you need 2 main sections: finding/adding the product and the summary view of everything that is already in the shipment.

The find-and-add function is best accomplished with a simple free-form text box that has autocomplete script monitoring it and suggesting matches. It should accept both product names & SKUs (or any other identifiers you have in your system).

The shipment summary section can be a simple table showing the basic info (SKU & Name), the quantity (with the ability to change it on the fly), and any additional actions (such as delete).

Here's a very rough mock-up:


download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer
Looks good. Now I need to learn how to best do this in Ruby on Rails. – ctilley79 Jun 21 '12 at 21:40
@ctilley79: If you have Aglie Web Dev w/ Rails lying around, I'm pretty sure you can copy the cart model from there. Most of the work in this form is AJAX: real-time lookup and dynamic quantity changes for existing items. – dnbrv Jun 21 '12 at 21:45

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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