selecting 2 levels of information in one screen using search

Question

I have to levels of information, for familiarity, let's name them hospitals and doctors. The user first searches for hospitals and somehow selects a list of them, and then for each hospital she searches for a subset of doctors who work at that hospital, and select them. So in the end of the action, I should receive a list of doctors and which hospitals they work at.

Constraints:

• Has to be an intuitive design
• Space is limited as this is just one step in a multi-page form
• Has to be on one page only, (e.g. a wizard, multi-tabs, etc are not accepted solutions)
• Number of hospitals and doctors can be very high, and hence the use of search

What have I tried:

• a search textbox (for hospital search), positioned at the top of a list, when search is performed the list changes its content (i.e. hospital names that match the search will appear), each hospital name in the list has a checkbox next to it, when checked the hospital name moves to another list. when the user is done adding they can click on each hospital name in the 2nd list, and then in a 3rd list they can search for doctors and check the checkbox next to them.

Problems with this design: sparse, too many steps, not possible for the user to see all that they selected at once, they have to click on the hospital name in the 2nd box to see what doctors they selected in the 3rd box, so i am not happy with it.

Ideally, I would want to do it in a wizard style where you first pick hospitals and then for each hospital a new wizard page appears and it you select what doctors you want, but the requirement is out of my control, and I reach a dead end here.

How would you go about it?

Answer 1

why use checkbox? it sounds silly..

I'd recommend having two lists (or combo boxes, if no of hospitals and doctors < 60), what are selectable. if you select one in hospital, the doctors list will update.

They can be both vertically and horizontally aligned. whatever fits better. Its a good idea to group them with a border, so the user knows they belong together.

So the key is making the use of the filter optional. (If you click on a list, and press 'n' it should jump to that section. ) This way you can finish it by 2 clicks. However, if you want to filter the list, here it is (you can create a filter to the doctors field as well. also a better design helps):

Answer 2

How about something like this? Narrow the search by location. Maybe if the list gets too large reserve the first couple of columns for selected items and paginate the rest.

Answer 3

Because the users know the names of hospitals and doctors when they fill in your form, I'd go with the following design:

[input:hospital] → [input:doctor]
[button:add another hospital doctor]

The two input fields have autocomplete.

1. In the beginning, the doctor input and the button are deactivated, so users can only fill in the hospital.
2. When users select an autocompleted hospital name, the hospital field is deactivated and the doctor field becomes active.
3. When users select an autocompleted doctor name, the button becomes active (so that they can add another hospital/doctor combo)

Only if the doctor field is emptied, the hospital field becomes active again, so that the hospital name can be changed.

It would be possible to deactivate the doctor field too, as soon as the doctor name is selected. Then you should display an little "Edit" button next to the doctor field. You could also provide a "Delete" button, if necessary.

It would also be a good idea to style the input fields differently (green, or with checkmark etc.) as soon as a correct value is selected/entered, so that it's visible if a name is not known/correct (if users enter it by hand, without using the autocomplete).

If users typically add several doctors from the same hospital, you could auto-fill the next combo with the same hospital name. So users would only have to enter the doctor name, and only when they want to add doctors from a different hospital, they'd have to empty the pre-filled hospital field.

---

So if users filled in several hospital/doctor combos, the form would look like:

[input:hospital] → [input:doctor]
[input:hospital] → [input:doctor]
[input:hospital] → [input:doctor]
[input:hospital] → [input:doctor]
[input:hospital] → [input:doctor]

[button:add another hospital doctor]

resp. with edit/delete function:

[input:hospital] → [input:doctor] ✎ ✖
[input:hospital] → [input:doctor] ✎ ✖
[input:hospital] → [input:doctor] ✎ ✖
[input:hospital] → [input:doctor] ✎ ✖
[input:hospital] → [input:doctor] ✎ ✖

[button:add another hospital doctor]