How to have good UX with these master-detail relations?

Question

I work on a web app where users have to create and manage their projects.

Each project is defined among others by a list of sub-project, which is defined by a list of tasks, which is defined by a list of resources.

I have this master-detail problem, I'm not sure how to make an intuitive UI in order to allow the user to create sub-projects by project, add tasks in these sub-projects and then assign resources to these tasks.

Despite these parent-child relation there is other mandatory information related to each "subject".

• Project : Name, Code, Budget, Category, List of sub-project
• Sub-project : Name, ID, List of tasks
• Task : Name, Category, List of resources
• Resources : Name, Start date, End date

I though about a master-details grid like this one.

How many levels are acceptable in this kind of grid? I think two levels are already too much.

Can someone recommend good UX practices to make a solid UI with this project management functionality ?

Should I avoid dialog panel? Should I open new pages for each objects and display a breadcrumb?

Answer 1

This is a great question. As a PM who's used both Jira and Asana this is a problem I struggle with for the latter, mostly because to me there are really four layers:

• Product
• Project
• Task
• Subtask

In other words, three layers of actionable items but only two of which are really critical. Typically two layers are the maximum for visual displays though I believe that's purely a corporate limitation because not everyone has at least 1650px of real estate for their project management tool. Jira gets around this by adding multiple types of filters, flags, and relying on search. Asana just doesn't have more than two layers, and is also adding filter types.

Looking at your grid, I think that's fine and definitely understandable. In theory you could click further and see more details, but at a 3rd visible level on the same page I'd question what valuable data could actually be displayed at that point. It also depends on how the user will actually make use of this page. What are the valuable pieces of information?

Further, showing all levels of the grid also helps the user know exactly where they are, which is extremely helpful (which I don't see listed anywhere in an easy to digest way on the page). If I know how I got there after an hour on the page, you've done good.

Answer 2

The best metaphor I've used for this type of project management breakdown is the layered pages metaphor.

Basecamp uses this to great effect. When you move into a project, the deeper level appears as a page layer floating above the last level.

This way you maintain a sense of depth and location, and the titles of the deeper layers become links back there, giving a stacked breadcrumb functionality.

I think this mild skeuomorphic effect, assuming you can make it work with the data you need to represent, gives a much less intense experience than clicking around in vast sliding tables.

Even if you don't use this technique, it sounds like you might benefit from getting a free trial at Basecamp.com and playing around. They really do a great job at keeping things simple.

Answer 3

You have quite information-loaded application. This could negatively affect user and lead to bad usability.

I'd recommend to use progressive disclosure pattern, in a way it is defined in the article: Progressive Disclosure- the best interaction design technique?

Progressive disclosure is an interaction design technique that sequences information and actions across several screens in order to reduce feelings of overwhelm for the user. By disclosing information progressively, you reveal only the essentials and help the user manage the complexity of feature-rich sites or applications.

Master-detail grid you've mentioned isn't perfect solution, as user sees too much information anyway. This doesn't allow to focus their attention on current task.

Probably you could stay with two level hierarchy: Project − Sub-project. The latter level provides good overview of the Sub-project, as you can observe Tasks and how they coordinate with each other. Also it's good to use secondary menu as both navigational mean and observing the overall sub-projects list.

Also pay attention to the users' roles and theirs' goals and tasks. Different users need different levels of abstraction for decision making. And again, this is what progressive disclosure technique does well.