Screen Mockup

I am designing a Project Management App. See Mockup.

  1. User Selects a Folder in the Folder Treeview. A folder can have subfolders.

  2. The Projects in that folder is then displayed in the Projects Treeview.

  3. The User Selects a project. A project can have Subprojects.

  4. The Tasks related to that project is displayed. At the same time, the Details of the Project is displayed in the Details Pane.

  5. The User selects a task. The Details Pane then displays the details of the Task (instead of the Details of the Project). The details of both the Project and a Task are the same, so one screen will work for both.

Is this a good workflow? Is there a better way to do this?

The alternative would be to have a single Treeview that Displays Folders, Projects, and Tasks in a single Treeview. My concern with this is that a Project with 25 tasks would be difficult to navigate.

I have posted a lot on programming questions on StackOverflow, but this is my first on UX.

  • Could you rotate your mockup. It is kind of a strain on the neck at the moment. Commented Nov 14, 2016 at 7:34

1 Answer 1


You might be better off with a tree view, since that provides a visual indication of relationship among the levels.

A tree view is a gestalt, a visual "chunk", that is much easier to keep in memory than visually-disconnected lines in several columns are. The visually-disconnected lines across columns require the person to maintain the relationships in short-term memory. We don't have a lot of short-term memory (about 5-9 registers, but more often 5 than 9).

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.