Multiple, hierarchical selections for web application

Question

We are currently making improvements to the user interface of our real estate management web-app. One big problem we have is multiple, hierarchical selections for big amounts of data in input masks.

The data hierarchy in this example is: building > rental unit > room > tenant.

The example below is from an input mask for tenancy agreements. All fields are currently autocomplete lists. At the moment the typical work flow is:

• (A) Select one or more buildings (out of up to 2000 entries!)

• (B) Select one or more rental units (out of up to several hundred entries)

• (C) Select one or more rooms (out of up to a few dozens )

• (D, hidden in this screenshot) Select a tenant (usually just one)

Each selection the user makes narrows down the available data in the next autocomplete list. So, one problem is that users often seem to make multiple selections at once and from a big pile of entries at that.

The second problem is that the available data for input field "rental units" has already been narrowed down, but the user has no information about which building each rental unit belongs to etc.

Unfortunately, we don't have a lot of information about how our users currently interact with this mask.

Any thoughts are appreciated! Please let me know if the description above is too confusing.

Answer 1

I'm not 100% sure I follow the question- do the users need to be able to make multiple selections, are are you trying to prevent that from happening accidentally?

If it is the single selection case (again, I may be reading the question wrong) You might want to try something like the image below. Basically you have a set of columns, one for each thing you're selecting for. You leave the ones to the right empty until a selection is made, and then populate the values in the next column. This is fairly friendly for scrolling, so you can deal with having a relatively large number of options in each. I'd also recommend considering a search box for building because there are so many choices.

Alternatively, you could break this apart on multiple screens into something "wizard-like" so you ask one question, then the next, and so on. It depends how often people will want to switch this around.

Answer 2

Sounds to me like what you need is a column view structure , with the difference that starting from the second column, each column should actually contain two internal columns - the values themselves, and the value from the previous column to which this value corresponds. i.e.:

----------------------------------------------------------------------------
Building  ||  Rental Unit|Building  ||  Room|Rental Unit  ||  Tenant|Room ||
----------------------------------------------------------------------------

Now, if all your entities have unique identifiers, you're pretty much set. If they don't (e.g. there's a Rental Unit 5 in both building A and B, and there's room 4 in many rental units), then the "grouping" internal column should ideally display some kind of path: Tenant Joe | Room 4 (RU 5 / Bldg B).

For a web implementation of a regular column view (minus the hierarchy), consider Grooveshark.