I'm working on a web app where the data is structured as follows:

CLIENTS   may have one or more CONTRACTS
CONTRACTS may have one or more CASES
CASES     may have one or more CLIENTS
               and one or more CONTRACTS

When the user is opening a new CASE, they first have to choose one or more CLIENTS and the respective one or more CONTRACTS.

I started by showing the user cascading dropdowns, like this:

STEP 1: choose a CLIENT
STEP 2: a <select> showing that CLIENT's CONTRACTS is shown
STEP 3: the user may click a link labeled "ADD ANOTHER CLIENT" or another labeled "ADD ANOTHER CONTRACT"

However, if - for instance - there's a CLIENT with multiple CONTRACTS and another one with only one CONTRACT, it starts to become quite confusing.

What would be the best way to present these choices?

EDIT 1: I've started experimenting with a multiple select for the CONTRACTS, will report back.

EDIT 2: To make matters more clear. It's an app for a law office. The have cases in which they represent one or more clients, also, that representation may be based on more that one contract for each of that clients. So, when adding a case, the represented clients and representation contracts pertaining to that case have to be id'd.


1 Answer 1


If we put aside the database tables (cases, clients, contracts) and try to understand the end result of the form we would notice that the result is a Case with a list of Contracts grouped by Clients. This would help to understand the problem that we are trying to solve.

So the thinking steps for me to achieve the task would be like so: 1 - Create new case 2 - Browse through a list of Contracts to allocate them to the case 3 - To select the appropriate Contracts I will filter the list by Clients

Hence the interface could be something like this.


download bmml source – Wireframes created with Balsamiq Mockups

Here's an explanation.

Firstly, I'm not trying to suggest the layout instead let's focus on the concept.

The way I see it working is when creating a new case you would want to associate some contracts with it. The user would click on Add Contracts and then would be presented with two lists. First list would be a list of Clients and the second list would be all available Contracts (from all the Clients). By selected an item in the first list e.g. Client the list on the right would filter and show Contracts for the selected Client. The user then would tick the required Contracts and will continue by selecting different Clients from the first list and ticking Contracts in the filtered list on the right. Once complete the user would click Add button and all the selected Contracts would appear in a list grouped by a client.

There are many improvements that could be applied to the proposed interface. However, I am simply trying to convey my idea that is to go through Contracts without adding any Clients.

  • I do believe you have nailed it, good sir.
    – Go22
    Jul 28, 2012 at 22:20

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.