Edge of Chaos | Agile Development Blog

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.

Design Studio is a quite simple and efficient way to run UX meetings. Yesterday we tried it for the first time. There are several variations of Design Studio, we made it simple for the first run and set the following rules:

1. Define problem.
2. Sketch 5 ideas individually. No more than 5 minutes per idea.
3. Present and categorize ideas to the team.
4. Discuss positive and negative sides of the ideas.
5. Select interesting ideas and create 2 versions for each final final solutions.

We ran Design Studio for the first time to design Email Integration plugin UI. This plugin allows to setup emails integration and define some rules like “bind email to project and create request”. This way TargetProcess retrieves emails and does some interesting things.

Alex, UX designer, is asking some questions.

Sketches categorized by ideas: 1 vertical line = 1 category.

Sticky notes show votes for each idea. 3 ideas have been selected as top ideas.

Hot discussion.

2 most repeated ideas: define email rules via drop downs and via drag and drop

The wall overview

Resulting Sketches

Setup email rules via drop downs

Setup email rules via drag and drop

In general, the meeting went fine. It took about 2 hours to generate, discuss and select ideas. 8 people participated in the meeting, and it seems too many. I think it is much better to have 4-5 people, no more. Also the ideas convergence phase should be improved. Too many people generate too much buzz, so it is harder to make decisions. Anyway, we are going to try Design Studio again and adjust it to our needs.

4 people from TargetProcess attended London UX Conference this year. It was a decent event and here are mine “take-aways”.

UX + Agile

Alan Cooper read a solid visionary lecture about UX future and adoption. The main trend is to mix agile software development practices with user experience teams. There is a new initiative called Balanced Team. He did not spend much time on this topic, but that is something I am curious about. We’ve been adopting UX + Agile at TargetProcess since 2009 and definitely want to do that efficiently.

It was nice to be reassured that we are going in the right direction as a company. We already do many things  Alan mentioned in his speech.

Visual Meetings

Our meetings might be better. Sometimes they are too long. Sometimes too boring. Sometimes there is no clear outcome. Quite many workshops and sessions at London UX 2011 were dedicated to better, more productive and more fun meetings. Sunni Brown ran a fantastic workshop:  The Art of Graphic facilitation (a.k.a. “How to Run A Workshop with Pictures”). It was very funny and useful. We had several short creative meetings and drew a lot of sketches. I highly recommend her Gamestorming book.

Kate Rutter’s session Design Patterns for Fantabulous Collaborations was very informative and I’ve learned new ways of running efficient meetings, but the practical part was a bit boring and out of context. Overall, after this conference I have a clear understanding how we can improve our meetings which is good. Best Practices for Facilitation looks like a “must read” book, but it seems you can barely purchase it.

We often do ad-hoc meetings, without any preparation. We go like “Let’s discuss this user story with filters”. However, such meetings should be planned. All attendees should be prepared. There should be a right balance of order and chaos. Our meetings are on the chaotic end, so we have a huge space to improve.

Sketching, Sketching, Sketching

Everybody should be able to sketch. It means we should train people to not be afraid to draw something and express information with words AND pictures. Adults often prefer to write and don’t like to draw their thoughts. Mostly because they’re wary of looking  “unprofessional” and “ridiculous”. We should break this prejudice. Sketching is a very powerful technique that allows people to try and express ideas blazingly fast. Bill Buxton wrote an incredible book Sketching User Experience. Read it and you will understand why sketching is so cool.

 

I haven’t attended many conferences in my life. To be honest, agile conferences disappointed me. Agile 2009 was half boring, half OK with just one mind-blowing keynote by Jared Spool. As you probably assume, he talked about UX. In fact, this talk has changed many things in TargetProcess, as we started incorporating UX into the company culture. And this is the only reason why I can give Agile 2009 a “good conference” label.

We decided to visit UX LX in Lisbon to check whether there’s any difference. I am an expert in agile, but novice in UX. Conferences are good places to re-charge batteries and to fuel vision. UX LX fully met my expectations. It. Was. Cool.

So what I’ve learned? What we’ll try to apply at TargetProcess soon?

Brainstorming

Maybe this is a number one and Dan Saffer did a really great job at the workshop. To be honest, brainstorming sessions sometimes were boring at TargetProcess. We used several whiteboards and markers. The process was synchronous. It means one person grabs the marker and writes something on the board. Other people throw out ideas and suggestions. Sometimes it works, but there is a much better way.

It is a very good idea to separate two activities. Brainstorming phase may be asynchronous. It means all people can brainstorm the problem and sketch/write results/ideas. There are several techniques that help. One of my favorite is brainwriting. You have a problem and everyone has a sheet of paper. You have 1 minute to write or sketch anything related to the problem. It may be just few words or a very brief sketch. Then you pass the sheet to the next person and receive a similar sheet from the person at the left hand. You see absolutely new content and have 1 minute to understand it and expand it. Very clever and fun.

Photo by Adaptivepath

Also it is very important to engage everyone. Use wall, sticky notes and paper to break down ideas into groups. Then you may review every idea and decide what to do with it. Group interacts with physical objects and these simple activities boost engagement. Also you may give some simple gifts for really cool ideas. It sounds silly, as Dan said, but this works!

Emotions

During one session I understood that TargetProcess is  (quite) a boring product. It has almost no emotions inside. It should be more emotional and humanish. Out of the box ideas are:

• Use avatars and real people faces
• Use better wording in dialogs, navigation, etc.
• Make it more personalized

Copywriting

Text is important. It is really, really important. If someone looks for information, finds the page, reads the text and has no clue what that mess of words is all about — that’s really bad. You might have a beautifully designed web site, but if the copy was written by a marketer or developer with poor writing skills — it will not be effective.

Eric Reiss ran fantastic workshop on copywriting and showed how poor wording can literarily kill a product.

Visualization

The truth is that visualization is hard, but if applied well may lead to unexpected boost of satisfaction. There is a lot of data in TargetProcess, but visualization is not so good. Many areas can be improved. We should pay attention to data visualization all the time.

Source: Swarm

Async Usability Testing

We tried synchronous usability testing on new navigation. It works perfect, but there are less intrusive methods to gather interesting statistic via async usability testing. For example, we can try daily notes or true intent studies. I clearly see how daily notes can be used for installation experience. We just ask a person to install TargetProcess and write everything during this activity (emotions, thoughts, problems). True intent studies may be context-dependent and it is a quick way to gather some interesting data in just a few minutes.

The conference was very good. I feel refreshed and full of new ideas. Also, I feel that in general we are on the right track about User Experience at TargetProcess, but some tactics should be changed.

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!

Overall the recent Agile 2009 Conf. in Chicago was a good event. Unfortunately, the first two days were not quite what I expected. Combination of just “OK” sessions and jet lag left me wondering whether the trip was worth it. However, the following two days were much better, but the very last, Jared Spool’s keynote, left no doubts that Agile 2009 was totally worth coming to! An absolute killer presentation on User Experience with an excellent steak on the side (yes, Americans know good steak) – what else could you ask for?  A lightning bolt, a hit, all of the above – I can hardly express how enlightened and inspired I felt walking out of the ballroom where the speech took place. And that’s when reality hit me, and I suddenly understood how bad we suck with our User Experience… I got depressed for about 2 days, but then I started to act.

I read several books about User Experience. I read countless articles, forum threads, blog posts on the same subject and finally started a process of searching for UX specialist to add to our development team (and we hired him already). I’ve dug through all the information about UX, UI, Design and thought about how we could integrate it into our development process.

In one month I came up with a vision. I created interesting presentation and shared my vision with the team and inspired them. They applauded (thank you, folks!). I believe Agile and UX is a great mix. Definitely it is not easy, but I think it is a right path to follow. We want to create the best agile PM software in the world, and it is just impossible without outstanding user experience.

We want to share all the new experience about the journey. I’ll post more about process changes, mindset changes, education and whole team involvement. Here is our first try, see how we are re-designing ToDo list in TargetProcess:

• Personas
• Scenarios
• Wireframes – part I (part II, part III)
• Prototype and Usability testing results
• Improved prototype
• New ToDo list in TargetProcess

Fact: Complexity causes 50% of product returns

Fast and easy-to-use applications are quite rare. Simplicity and Performance are two major properties of any killer software product. We, as software developers, should pay attention to these properties as non-functional requirements, but in real life we often tend to implement more features, more functions, more settings, more, more, more… The race is hard to win with this strategy along the whole way.

I must confess we’ve done almost the same to TargetProcess. We went on with providing more and more features and options. Definitely we tried to keep the application simple and fast, but these goals were secondary. We’ve stopped. And changed.

Now we are focusing on better performance and usability. We think that TargetProcess is a quite feature-rich application that fulfills most needs in agile project management. It is time to stop and find answers to the questions: “Where do people get stuck with our software?”, “What is complex and how it can be simplified?”, “How to make TargetProcess enjoyable to use?”, “How to make TargetProcess the most performant software in our niche?”. The questions are hard to answer and address quickly, but we are looking for the answers.

Steven C. Seow wrote an excellent book about principles that should be taken into consideration for any “performant” application Designing and Engineering Time: The Psychology of Time Perception in Software. I read it and want to share some interesting observations.

Hick–Hyman Law describes the time it takes for a person to make a decision as a result of the possible choices he or she has. Simply speaking, less functions — simpler and faster choice. It leads to several conclusions what we should do as software developers:

• Minimize options. Obviously, if you have 50 elements on the screen, it takes time to choose which action is required. If you have 20, the UI is faster to work with.
• Keep it simple. Well, it is a general principle for all the facets of agile software development.
• Short system messages (10 words max). People don’t have time to read long messages. Delays kill usability.

Some concrete numbers from the book:

• Response time of typical action in the application should be about 2 seconds.
• If response time takes more than 5 seconds, it is required to show a progress indicator. User should know that system is working on the task.
• If system response time is more than 7 seconds, people tend to leave web site or switch to another task. It breaks interaction flow.

Noticeable Performance Improvement

If you are going to improve performance, it should be faster by more than 20%. Otherwise most people will not see the difference (it was shown in some researches that performance difference is noticeable in a range between 10% and 18%). For example, if you are improving search function with 10 seconds response time, it is required to make response time at least 8 seconds (or less).

Flow

Flow is very important for good user experience.

Flow is the mental state of operation in which the person is fully immersed in what he or she is doing by a feeling of energized focus, full involvement, and success in the process of the activity.

Our goal is to make the Flow possible. I think it is the hardest thing in software development.

When user opens an application and sees complex UI, it is frustrating for him. Application should match user experience and skills. Simple or Advantage modes, clean and simple UI (Hick–Hyman Law!), balanced options and functionality — this sounds familiar, but hard to develop.

• Distinguishing decorative from meaningful elements in UI design. Ryan from 37signals shows how small decorative elements may influence usability.
• 10 Useful Techniques To Improve Your User Interface Designs. I am not a big fan of articles like “99 advices to web design”, however this article is really useful. I especially like number 3 “Using contrast to manage focus”, number 8 “Custom input focus” and 9 “Hover controls”. We are going to use hover controls in v.3.0 design.
• Konigi.com is a great resource for UI developers. Many very useful links and examples.
• 2008 – The Year In Pictures. Nice photos. Nice atmosphere. Taste the last year as a good wine…

99% of web applications have add forms. Most of them have edit forms as well. It is really hard to imagine how you can add/store something without a form. OK, there are some ways like: import something from CSV file or another format, create something from incoming email/SMS/etc., capture image and create something from this image

Still if you need to add something quickly, in most cases you will use a web form. Obviously, if you need to edit something you will use web form as well. Is it the best solution? Can we get rid of edit forms? I bet we can.

Most applications has View page. It represents information in a more readable and usable format than a form. And to change one property you:

• Click Edit link and wait for new page to load.
• Change the property.
• Find and click Save button.
• Wait for previous View page to load.

That’s quite time consuming process. I think the better way will be:

• Double click property you want to change.
• Type new value.
• Push Enter to save the new value using AJAX.

This way has several advantages. First, you don’t need to create edit forms (ok, but you need to implement inline edit). Second, you provide much better user experience. Third, you get rid of Edit links everywhere, which is good (less complexity and less links is always good). That is something we are going to try in TargetProcess v.3.0.

I’m working on new lists in v.3.0 already and wondering how 37signals managed to create several web applications with no traditional lists. OK, there is one list that shows time records in Basecamp, but as far as I know there are no other such lists. All the other lists are very simple and well formatted. All 37signal’s applications look simple, with fresh air and the first expression is very good.

Typical list in Basecamp:

The only traditional list I found in Basecamp:

Now I wonder why that happened. Maybe data volume in Basecamp is low? Maybe they are just super-smart folks (well, no doubt here)? Also I wonder whether it is possible to get rid of traditional lists in TargetProcess. Is it possible at all when people want to prioritize 300 user stories in the backlog (yes, we have such requests from customers!). Is it possible to get rid of usual lists when you receive dozens of support requests daily?