I currently have the following data in a table-like layout:

First Name | Last Name | Email | Phone | Services

For each person, the last column, Services, contains a list of services the person can provide with a checkbox next to each service where the user can select/deselect as appropriate. The list will realistically contain somewhere between 1 and 30 services, but more are possible.

I'm thinking I'd like to keep this data on the same page with the other information mentioned (First Name, Last Name, etc).

I'm not set on a table layout at all. I'm looking for ideas on how to display all this as well as what the list selection might look like.

Thanks for any thoughts, or examples!

EDIT: This looks like a good option for the list of services: Best way to select a subset of items in a long list

I'd still need a nice way to incorporate in the other data mentioned above.

3 Answers 3


enter image description here

  • Please add an explanation to your screenshot.
    – dnbrv
    Feb 21, 2012 at 14:14

Sounds like a classic case where a master-detail relation can be used. You have one master scrollable pane for a table holding People with the First | Last | Email | Phone fields. You have a separate scrollable detail pane for holding Services. Selecting a Person instantly populates the detail pane with Services the Person can potentially provide which the user can check or uncheck as desired (I’m assuming you mean each person may have between 1 and 30 checkboxes of which some subset may be checked, right? There are couple other modifications of the master-detail approach you can use if I got it wrong).

This allows for a variable number of Services per Person without wasting a lot of space, especially if most of the People have few services. The main drawback is the user can’t scroll and scan through the People table and see who provides what services. Instead, the user has to key down through the People table with the down cursor key, selecting each Person and looking to the Services, which may be acceptable depending on how fast your can populate the Services pane. Given you’ve decided to organize your data by Person rather than by Service, I assume that is not a typical user task.

You can also mitigate this limitation with a couple designs:

  • You can provide a filtering or Find feature to only show/select people with user-specified services.

  • You can provide some sort of helpful summary field in the People table that indicates key information about the services each Person provides (e.g., the number of services, or maybe something like a job title or rank that the user will associated with certain sets of services).

An alternative to the master-detail design is a tree or “telescope” design where the user can expand any row of the People table to show the services immediately below. I compare trees with master-details at Taking Panes.

  • Nice explanation, I like when classic problems are solved with well known UI. If each person is highly specialized (i.e. offers very few services) you could add a column with a comma separated list of the person's checked services. That read-only columd would make the information visible, clicking on it would open the details table.
    – Mart
    Dec 26, 2010 at 8:22
  • Yes, a comma-delimited aggregate field is something I've used myself for this situation, but I didn't think it would work for you when the list could be so long. Maybe you could truncate the list to the most significant services for those cases, with an ellipsis to indicate that there's more. Dec 26, 2010 at 16:25

A hyper-linked two-dimensional array of services with number of service providers specified next to it in parenthesis will be a nice way to group the data. By clicking on each service the user can find out the details of service providers which can also be presented in grid fashion.

If you have not read it, checkout these books: Visual Display Quantitative Information and Envisioning Information.

and also this link: http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0001IV

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.