UX In Action. Why New Views in TargetProcess are sofa king cool

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.