Here at Atlassian we’ve been focusing a lot on user experience – a year ago, we introduced the Atlassian Design Guidelines (ADG), which serve to unify the customer experience across all of our products and add-ons with a simple, and straightforward approach.
JIRA goes ADG
JIRA 6, released May 2013, is now ADG compliant with a more modern and beautiful experience. The header is now consistent with other products and easier to customize. Typography, spacing, and overall layout are uniform throughout JIRA as well as in other Atlassian applications. (To learn more about the design process in JIRA I’d encourage you to check out the interview with Ross Chaldecott, JIRA’s design lead: Part 1/Part 2.) Good design though is not a moment in time. It’s an iterative experience of listening to your customers, and using that feedback to make the product better. As we did this, it occurred to us that an issue’s status is a central part of the JIRA experience. In fact, it might be the most important attribute of an issue aside from the summary. It’s essential that we crisply communicate what the status is of each and every issue.
We heard a lot about our status icons. You know the ones…
Quick test: Do you know the default meaning of each of these icons? As a former JIRA administrator myself, I found it hard to find the right icon that would symbolize a consistent meaning across my organization. Users would often ask me what each icon meant. When we were using JIRA to track inventory, the people icons didn’t make sense. Additionally I’d often have to hunt for icons to represent new status. I’d ask myself, “Where am I going to find an icon to represent code review?” I found out that I’m not alone; lots of teams felt this way. So we’re making the status experience much better. With the next release of JIRA, the status attribute will now be ADG compliant.
From icons to lozenges
What’s a lozenge? Let’s take a look at what the ADG has to say:
Lozenges are used to highlight the state or status of an entity for quick recognition by users.
Our former solution with icons didn’t do either of those particularly well, so JIRA is moving away from status icons to using status lozenges. We’re also packing in more information while communicating status. We believe that all issues in JIRA go through three major phases: new (blue), in progress (yellow), and complete (green). Each status defined in JIRA will be in one of these phases.
The color of the status lozenge quickly communicates what phase of work this issue is in. We realize that every workflow isn’t three steps, of course – software teams might use a set of statuses to manage their workflow.
Our status lozenges have two rendering styles:
When scanning lists of issues, status is a part of the search results, but it’s not the only part. We use outline style in areas of the product where the traditional style is too distracting. Outline style helps status fit in with the rest of the data in list view while giving you important information on your issues. We’ve also added tool tips to pull in the status description.
JIRA has also added a new compact view that shows status for sub-tasks in the issue detail view and in JIRA Agile. Hovering over the colored square shows the status name.
Lozenges localize too!
The new status lozenges also work well for JIRA in non-English-speaking locales. Users will be able to translate custom statuses. Let’s take a look at the status “open” in English, German, and Japanese.
Based on your feedback, we believe this change will make for a more consistent and effective experience with JIRA. Users in all locales will get contextually relevant information on the status of their issue. We will be rolling this change out to all applications that surface JIRA issues: The JIRA issues macro in Confluence, JIRA Agile, and integration with the developer tools will now sport the new ADG-compliant status lozenges.