Showing multiple navigation trees

Question

I have a tricky interface to design and was hoping that the more seasoned UX designers here could give me some ideas or perhaps point me in the right direction.

I have two entities :

A DocumentType could also be called a 'document template'. As its name suggests it describes a type of document. Each DocumentType belongs to a "Section" which in turn belongs to a "Zone" (Zone > Section > DocType). It also be attached to one or more contexts. These contexts are also hierarchical (Country > Company > Employee).

Name | Section | Zone | ContextCountry? | ContextCompany? | ContextEmployee?

A Document is an instance of a DocumentType.

So for instance a "CV" DocumentType would be in the 'Corporate' zone and the 'HR' section and would be marked as applicable to Employees. Instances (Documents) of this "CV" DocumentType would thus be associated with actual Employees registered within the system.

When viewing the Documents I'd like users to be able to filter and sort according to both hierarchies (Zone > Section > DocType) & (Country > Company > Employee). Rather than display a large table with tons of filters I was thinking of two different views each with a tree which would filter a table of documents, thus permitting us to see all documents associated with a particular Country (and thus all Documents associated with Companies in this country and/or their Employees) (and ditto for Zone>Section>Doc).

Seems a bit clunky though. Particularly if we add to each view, filters on the 'other' hierarchy (not represented by a tree)....

Any ideas?

AW

Answer 1

My initial reaction is to be cognizant of how your users would search for what they are looking for. On the backend, your data is architected with the structure you described above, but is it the same way your users would think about finding the data? (What are your users mental models and what kind of vocabulary might they use when going about trying to find information?)

It might be interesting to talk with a few of your users to see how they would use their system, so you don't get trapped into displaying a complex filtering system that doesn't necessarily reflect the mental models that your users have.

You could mockup 2 or 3 different interactive wireframes with varying interfaces to get feedback.

Answer 2

A flat list of possible values for each category to filter down on the left and the list of documents on the right will usually be understood the best by most users.

You can also add icons like flags next to each country to help with recognition.

Using a tree with 3 different levels means duplicating the same values over and over again so the flat list that shows number of results for each value is best especially if the system is fast enough to update after every filter selection.

Answer 3

You have multiple variables in your system. Like @Lauren Dankiewicz pointed out, you need to float some initial wire-frames and learn from user reactions.

A simple tree mostly wont help you here, you'd need to mix and match UI metaphors to achieve the right amount of granularity without making it tedious for the end user.

You could also check what all the decisions the system can confidently make for the user. Like if a user has been assigned to a particular zone / country, will he have access to other areas? If not can you trim that level of filtering?

Also there might be content which users extensively filter on, vs there might be filters which are relatively fixed in a user session. It would be beneficial if you could have filtering only on parts which matter. User profiles, access levels can come handy in deciding which filters are more important for the users.