16 February, 2009 / Developing TargetProcess v.3.0: Navigation (Tabs or Tree?)


First thing we are going to change in v.3.0 is navigation. First discussion was quite general and first solution most likely is not ideal. We rightly identified two major different areas: inside and outside of a project. Initially we wanted to separate navigation outside of a project and inside of a project, thus having two completely different menus. But what if we can unite these areas?

Indeed, there are lot of similarities. We may just create global filter by project. If you select a specific project, you will be inside the project and, for example, Help Desk will show requests from this project. But if you select All Projects value then Help Desk will contain all requests from all your projects. This approach has several nice advantages:

  1. Main menu does not change, only sub-menu is different inside and outside of a project. It gives better perception and better learning curve.
  2. Global project filter is an easy-to-adopt concept. You always know where you are.
  3. When you switch project, you will remain in the same area. For example, now you are in the backlog of project Alpha. You change project and appeared in the backlog of project Beta.

It may look like this:

Option 1. Tabs

We've received several requests to add left panel with a tree navigation. I never thought it was a good idea, but you never know till try.

Option 2. Tree

The question is do you like tabs or tree? It seems both approaches has own advantages and it is really hard to select the best one. We are looking for your opinion!

Labels: , , , ,


At February 16, 2009 2:49 AM, Blogger Glen Lipka said...

The tree is the superior choice. It's more scalable and can be collapsed if you use an extJS viewport.

Like this: http://www.extjs.com/deploy/dev/examples/portal/portal.html

Is there a timeline for this project? (roughly?) Like maybe which Quarter you are targeting?

One thing we did was to have an alternate URL you could access the newer shell. Same data underneath but different rendering. Really helped to work out the bugs with customers and still have a fallback of the original shell.

At February 16, 2009 3:54 AM, Anonymous David said...

I think it might be so much better to use the typical pull-down menu (with a bit of a wait on hover, not only css). It has the advantage of being compact, not having to click anything to get to an option, having access to all options at one time, and options being categorized logically...

At February 16, 2009 1:42 PM, Blogger comprock said...

In using Target Process currently, I like keeping the navigation in tabs and links just below them. Having a left side navigation tree is a distraction when trying to focus on the task at task.

If the navigation tree is selected, at least have the means to collapse left and expand right to hide or show it.

Thanks for a great PM tool.

At February 16, 2009 4:46 PM, Blogger Michael Dubakov said...

@Glen We have several options now and will make a decision this week. The options are:
1. Implement new Help Desk Portal (it will take 1-2 months)
2. Start v.3.0 development.

We did not make a decision so far (thinking). BTW, 3.0 will be released by functional stages. First several releases will be focused on:
1. Navigation (1 month)
2. Add/Edit/View (1 month)
3. Lists (2 months)

When new Navigation will be ready, we will release v.3.0.0, when Add/Edit/View will be ready, we will release v.3.0.1, etc. It means new Navigation will be released in 1-3 months (depending whether we go with Help Desk Portal implementation first).

At February 16, 2009 6:01 PM, Blogger GraemeF said...

In my opinion fixing the help desk has to take priority.

At February 16, 2009 11:22 PM, Blogger Andrew Matlock said...

I would be concerned about the wasted real-estate consumed by a tree control. Inevitably the content of the page will consume more vertical space than the navigation consumes. You'll end up with a large block of whitespace under the tree on the left side of the page.

To me, a tree control is good when you have a hierarchy that grows, needs to be reorganized, and have newly user-imposed categories built into the tree.

In the case, of TargetProcess, the navigation options are finite and do not grow. They are not susceptible to user customization that would drive them to be unwieldy if they continue to be tabs.

In my opinion, you've got a good thing going with the tab approach and changing it would be a shame.

I would prefer that you focus on providing an anchored locations for all of the navigational controls so that they don't scroll out of view when scrolling through the page content.

It would really be great if both the tabs and the paging controls were always in a locked, visible portion of the page and didn't scroll out of view when looking through lists of content.

At February 17, 2009 4:57 PM, Blogger Michael Dubakov said...

It seems nobody loves trees but Glen :)

At February 17, 2009 7:18 PM, Blogger Glen Lipka said...

Maybe if the mockup showed a more collapsible view. Your mockup takes up space, but my example doesn't.

Users in general like what they like. Might as well give them both. There is nothing stopping you from giving a tabbed and a collapsible tree view.

At February 17, 2009 7:35 PM, Blogger Michael Dubakov said...

Definitely tree is collapsible. There is a Hide link that shows that, maybe indeed not very clear. But I am thinking about navigation pattern using tree (assuming people will collapse it often).

I navigate to Release Plan for example and collapse the tree to drop some stories to release. Then I need to check requests. I expand tree, click Help Desk - Requests. Page loads and I collapse tree again. Looks like too many clicks for simple navigation...

Both options... I think it is bad idea. Having two navigations controls will be confusing for the people.

At February 17, 2009 7:39 PM, Blogger Glen Lipka said...

Most engineers have a decent resolution. My main monitor (using 2) is 1680x1050. I would never ever ever collapse something. I have tons of room. But do the rest of your customers? Here is how to find out:

Use Google Analytics INSIDE your application. It keeps track of screen resolutions. Why make guesses? Get the exact details and then make your UI decisions based on that. DO you already have those stats?

At February 17, 2009 7:56 PM, Blogger Michael Dubakov said...

Nice shot! Unfortunately we do not have such stats for TP application and did not insert google analytics code so far (not sure how legal it is, that is the reason).

One more argument is that many executives uses notebooks with smaller resolution (1024 is still quite common).

We have stats for our web site though.
15% - 1024
40% - 1280
55% - 1400 and higher

At February 18, 2009 12:25 AM, Anonymous Anonymous said...

Please do not implement navigation using trees. We had it in our application, and it was nightmare. Tree is raw structure and I do not like it for fixed navigation. It is overkill for menues.
Please keep the good idea of havin "inside" and "outside" project.

At February 19, 2009 8:58 AM, Anonymous Bernard said...

Don't choose the naviagtion tree! You need all the horizontal space for your information. Humans read and combine information faster from left to right than top to bottom.

At February 23, 2009 12:41 AM, Blogger gregbacchus said...

In my humble opinion, tab menu is far nicer/easier/simpler.

At February 24, 2009 6:27 PM, Anonymous Anonymous said...

A usability study would be enlightening on tab vs tree. I like the tab in terms of aesthetics.

One item that is a bit out of place is the action menu of the lower right. Would really like to see this integrated better, in particular scrolling to view all actions is a problem.

TP rocks! thanks all!

At February 24, 2009 9:07 PM, Blogger Michael Dubakov said...

I suspect we will keep tabs navigation. It was my original opinion and it was proved here.

At February 25, 2009 4:48 PM, Blogger Kjetil Klaussen said...

I'm with Glen Lipka on this one; Most screens today are widescreens (even those little Asus EEE has a widescreen format), so for me the tree-view would make most sense. But is this really an either/or question? Would it be to much work implementing both and let it be a user config setting?

At February 25, 2009 5:00 PM, Blogger Michael Dubakov said...

@Kjetil Having 2 main menus is definitely an overhead. We do not want to give too much customization settings, in many cases it is better to make a decision and just provide one way to do things. Apple products for example have quite a few customization settings, and that is good.

At February 27, 2009 5:41 PM, Anonymous Steffen Binas said...

Please keep the tabs. It doesn't consume so much screen space and hovering for the submenus is faster than expanding a tree item.


Post a Comment

Links to this post:

Create a Link

<< Home


We are developing TargetProcess agile project management software and blogging about our progress.

Subscribe to the RSS feed
Stay tuned by having the latest updates via RSS
Follow TargetProcess on Twitter
Get in touch with our team

Try TargetProcess
TargetProcess quick tour