Edge of Chaos

How does a great design differ from a good or mediocre design? Often the difference is just in the smallest details. These details shape user experience and greatly affect the way we feel about a product. The product may look great, but people remain cold using it. They don’t feel it is designed for them.

Views functionality in TargetProcess is not a rocket science. There are thousands of applications with views. View is such a boring page to work with usually .

New Views in TargetProcess are crafted with great attention to details. Every single detail is thought out. Every single decision was debated. Let’s dig into details. I will show and explain all of them.

Inline Edit

Inline edit (edit-in-place) is a huge thing. It allows you to edit everything very quickly. These two words are important: everything and quickly. In our new View you can indeed edit everything and do that really quick. But this is not all. Watch these two very short videos.

Inline edit in JIRA

Now compare it with inline edit in TargetProcess

The difference is clear. When you are editing something in JIRA, the effort value jumps back and forth. It is somewhat confusing and unpleasant. Effort in TargetProcess stands stone still as you edit it.  This produces a totally different feeling. When everything is still you feel that things are under control.  The jumps, on the contrary, are quite distracting,  and you feel that something is not good (but often can’t say what exactly).

People assignments

People assignments component has all the small details that make it just awesome. Avatars enable quick recognition. You may think that avatars are not important, but with time you’re so used to them that you identify a person in a split second. Humans recognize image patterns much faster than words. With first and last names only you have to read. With avatars you just scan.

Quick filter is the fastest way to find someone  if you have a large development team.

Popular actions are available on the top. Quite often you want to assign work to yourself or un-assign work. It is always a good idea to put popular actions to a visible place.

Moreover, potentially dangerous actions are marked red on mouseover, which secures them from accidental clicks.  Also, the red mark builds up quick memory for actions. For Unassign, you will point mouse cursor and click quickly if the button is red without reading.

Links and Actions

There are two types of links: some links represent actions and some links are usual links. There should be a clear distinction between the  two types of links, thus action links have a different underline style (dotted):

If you can perform an action (like edit), you miss an opportunity to jump to entity. This problem was resolved by adding a tiny icon. The icon is an idiomatic pattern to navigate away from the current page.

When a property is empty, it is not clear if  you can edit it or not. You point cursor to an empty row and think something like “Hmm, is it possible to edit something here?” Then you click, and it appears that it is indeed possible to edit this value. But why make people think? The clear message is shown in an empty row when you move mouse over it:

Hidden Stuff

It is a good idea to show only relevant details. For example, you want to change release or iteration. Releases and iterations have end date, you have many releases and iterations that are already done. Most likely you don’t want to assign a user story to an old release. Thus, old releases are hidden by default.

Mouse over pattern is everywhere. So, all actions are hidden by default. You need to move a mouse cursor over a comment to edit or delete it. Thus interface is clean and not burdened with repeated buttons. There is one disadvantage in this approach: available actions are invisible by default for new users, and they might not be actually aware that they can edit something. But we consider this a good trade-off. We don’t design for new users,  we mainly design for people who continuously use our product.

Multi-attach

How often you do you need to upload several files, one by one? It is intolerable in a modern web application. People should be able to upload all the files at once:

Layout

The general layout is pretty straightforward. You have a content area with title, tags, description, attachments and comments on the left, and more details area with miscellaneous information on the right. This separation is logical.

The layout of the area on the right is beautiful. The most important information is on top. For example, status of a user story and its progress. Then you see all assigned people with estimated effort. Everything is lined-up and there are no unclear labels or weird information. Only relevant information is visible. You can also hide information blocks if you want to.

This is it. New views are in beta and more improvements are coming. Stay tuned and give us your feedback. We live by it.

Since I started to work for TargetProcess and use the product for my daily working routine, I’ve experienced some problems. One of these problems was  navigation. All the links were grouped under sections in primary navigation level or administration level at the top. It took quite long to learn which group of links  should I select  to find some specific page.

The mind map of old navigation

Later I grew up to an experienced TargetProcess user as I’ve been testing new features or build every day but I still was mistaking the groups almost every time  (e.g. trying ‘Tracking’ instead of ‘Planning’ group when looking for Builds list).

Since navigation was the common pain we started to think how we can revamp its look and feel. We wanted it to be flat, customizable, easy to use and quick.

Wireframes

Complaints and requests from other TP users have been considered as we’ve been generating ideas for first wireframes:

We’ve been thinking if we should hide or show the whole group of links as on the screen below:

…and ended up with the concept of customization by links as we enabled users either to pin each single link to primary nav tab or to keep the link in ‘More’ group, create their own groups and rename the links:

All these wireframes emerged after long meetings, hot debates and multiple changes.

Concepts

As a result, by mid-January ’10 we’ve had two different navigation concepts ready to be shown to some customers, members of TargetProcess UX group. We asked the customers to review two navigation concepts implemented as dynamic and static PDF and give us their feedback on both.

Here’s the first navigation concept:

1. One-level menu for quick system navigation.
2. Configurable tabs order.
3. Quick access to all pages grouped logically in “More” pull-down menu.
4. Easy-to-use advanced tuning mode.

The second navigation concept:

1. Two-level menu.
2. Configurable tabs with the possibility to re-group links.
3. Easy-to-use advanced tuning mode.

Most of our customers-UXers voted for the first concept and we went along with this design. Development of dynamic prototype was started simultaneously with the nav coding so we had usability test results available by the end of implementation.

Dynamic Prototype and Usability Tests

We wanted to run a usability test with our customers as early as we could and the interactive dynamic prototype for navigation was ready in a week (with IxEdit). The prototype replicated TargetProcess tool and was available on the web. Not like in the real web app, there were just screenshots with static pages:

In this proto users were able to navigate from page to page and to customize links selection for their primary nav menu. The only major thing at that time was re-ordering of pinned tabs which didn’t work in the proto.

Test scenarios were rather simple:

1. As we drastically changed the layout and re-grouped some links, we wanted to check if users will find particular pages easily with new navigation . So the first scenario was about simple pages browsing.
2. The second scenario was related to the customization of primary navigation level.

We asked our customers from the UX community to take part in the usability testing of new navigation, and four of them agreed. The testing was done via GoTo meeting.

Usability Tests Results

Based on the results of this testing, we’ve become aware of some areas in the navigation where users slowed down.

Most of the users who saw the nav for the first time tried to drag and drop links right away and guessed slowly that tuning and re-ordering tabs works in customization mode only. After customization was done, they forgot to switch customization mode off. Also we noticed that [Reset to default] button appeared uncalled, so it was removed in the final version.

That’s why we went on and tried to emphasize with different styles when navigation is in customization mode and when not.

Now the highlighted menu background under the button [Customize] shows that the button should be pressed to start tuning (customization).

That’s what one can see in the tuning mode (check the screen below):

• [Customize] button disappears; yellow background rolls up to the primary nav level where [Done] button appears.
• Only the primary nav level and  ‘More’ menu are active, content of the page is grayed out and disabled.
• Links selected for relocation in ‘More’ change their background from white to solid blue; mouse cursor changes shape to cross.

We believe that it’s hardly possible to mess up with the navigation modes now. The navigation is quick, one-level and simple for personal customization.

And – what’s most important – people like it as well. Out of many feedbacks, here’s just one from Igor France:

I have just installed the latest version of Target Process with the intention to start using it on my own projects (the company I worked for at the time didn’t adopt it) and I am again really enjoying using it! Apart from the positive things already mentioned, the main navigation itself in the meantime not only stopped being confusing but is now fully customizable as well!