Designing for the JIRA project-centric view

This page provides you with design guidelines for adding your add-on to the new project-centric view in JIRA. Read this before you read the Development guide - JIRA project-centric view, which provides the technical information required to implement the changes described below.

The guidelines on this page show how the new project-centric navigation will affect users using JIRA and your add-on. Following these guidelines will help you provide users with the best user experience for your add-on.

Overview

The project-centric view will be introduced in JIRA 6.4, but can be disabled on both the user level or on the global level by an administrator.

For both JIRA Cloud and JIRA Server, individual users will be able to switch it on or off. Administrators will also be able to override this setting (i.e. enable/disable for all users). This means that from JIRA 6.4, your add-on will need to cater for instances where the project-centric view is enabled, as well as instances where it is disabled.

The project-centric view provides a new way for users to navigate through the structure of a project, which includes issues, collections of issues (like backlogs and boards), reports, and other project-related features (like versions, components, and add-on views provided by add-ons). The goal of this change is to make JIRA's structure understandable to every user, by simplifying the navigation of a JIRA project and making it easy to learn. In turn, this will help open up JIRA to users who may struggle with JIRA's current complexity and terminology.

Screenshot: Example JIRA project-centric view
 

The project-centric view can be accessed by navigating to Projects in the header and selecting a project.  The main feature of this new project centric home is the new sidebar navigation through which all information important for a particular project can be accessed.

Guidelines

We strongly recommend that you follow the guidelines below when adding your add-on to the new project-centric view. Following these guidelines will help us build an approachable and stable UX platform, which will help attract many new users to JIRA and its add-ons in the long-term.

The instructions in this section tell you how to add your add-on to the sidebar, which is the main point of integration for add-ons in the project-centric view. In addition, we will show you how to design for navigation between your add-on's screens.

Tip: When developing your add-on, consider how your add-on fits into a customer's day-to-day JIRA experience. When do they access your add-on's features? How often? How does they get there? Remember that prominence does not equal usability! 

Adding your add-on to the sidebar

Before you begin: the navigation in the project-centric view is reserved exclusively for navigation within the project context. If your add-on requires the user to leave the project, you should not add it to the project-centric view and consider the alternate pluggable interface points instead.

Position

Guidelines

• The add-on link must be in the project navigation section of the sidebar.
• The link must be added below the default items in the project navigation section.
  Why? This provides a more consistent user experience. 

Good examples	Bad examples

Label

Guidelines

• The label should unambiguously describe what the add-on does.
• The label should be a noun, not a verb.
• US English spelling and sentence case, as per the Atlassian Design Guidelines.
• Do not use your company, brand or product name, unless it also explicitly calls out the functionality of your add-on.
  *Why? This is confusing to new users or any user who is not familiar with your brand, particularly when multiple add-ons are installed,
  plus it does not fit with the default menu items.* 

Icon

Guidelines

• Use an icon that aligns well with the functionality of your add-on
• Do not simply use your company brand or logo
• All icons must be designed according to the Atlassian Design Guidelines:
  • 20px by 20px
  • Single pixel stroke
  • #333 only
  • Must support retina displays

Good examples	Bad examples

Sub-navigation

Guidelines

• Do not add sub-navigation items for your add-on to the sidebar
• Use the JIRA sub-navigation pattern, as shown in the example.

Good examples	Bad examples

Need help?

Try the following resources:

• Post your question on our forums: Atlassian Answers. This is probably the fastest way to get help, as many of our customers and staff are active on Atlassian Answers.
• Contact the developer relations team: Contact us. Note, you will need to create a developer.atlassian.com account if you don't already have one.