Issue details improvements

One of the main areas of focus for 3.2 is improvements in usability and general appearance. We’ve added some new style elements, and are going through all the different areas of The Bug Genie, applying the new style elements where appropriate. These new style elements go far beyond mere looks, however, and whenever we can, we do a functional review of the area we’re working on and try to find things to improve. One of the latest pages to see some style and usability improvements is the issue details page. This page is usually where you spend most of your time, so anything we can do to help here is time well spent. Here is a summary of the changes we’ve made to this page.

Completely redesigned look

We’ve ripped up the existing 3.0 and 3.1 look and feel of this page and completely redesigned it. The new issue details page has been designed to help you focus on the important aspects, and help you get things done.

Redesigned issue details

This new design helps bring the more important information into view. Issue details such as status, progress, etc are now easier to spot. The whole issue details page now adapts to the available space on-screen, instead of being limited to the fixed 900px issue details “card” in the previous version(s). The redesigned layout also means the issue description can now occupy the entire width of the page, making it easier to read and greatly improving readability for elements such as code samples.

The issue title has now also been visually highlighted, and we put less emphasis on non-critical messages. There is now a “pop-down” message area below the header – visible enough to stand out, but not so much that it gets in the way. Clicking on the “OK” button in that message area causes it to disappear temporarily (until the next refresh). For critical messages, this pop-down area turns red, and some messages – such as the information about blocking issues – cannot be dismissed.

The workflow buttons have also been both restyled and repositioned, making them more visible and easily recognizable. In addition to this, they’ve also been better grouped, and we’ve also moved the “More actions” button (previously located as a link below the issue details) into this area. This gives better visibility to features that can otherwise be hard to find.

Improved functionality when scrolling

Sometimes, when you scroll, you wish you didn’t have to scroll back up to trigger a workflow action, or post a comment. The new design takes this into consideration, and the header area will now fix itself at the top position when the title area scrolls out of view. If you continue to scroll, the header area also “picks up” the workflow buttons, so you have them available wherever you are on the page.

Scrolled issue view

If you scroll past the “add comment” button, the workflow controls also “picks up” this button, letting you post comments also from mid-page (or at the very bottom).

Issue view scrolled past the "Add comment" button

This can be very handy and useful when you’re working with long comment threads, browsing the source code activity log and other items that have you scrolling up and down the page.

More unified look

We’ve also applied the new style elements to several other areas of this issue page, giving it a much more consistent look and feel. In addition to this, we’ve also switched over to the unified dialog look for items requiring confirmation. This means you get a consistent experience for any confirmation-based actions.

Delete issue popup

 

We hope you appreciate all the work we put into making The Bug Genie an even better issue tracking system. Just for you.

5 thoughts on “Issue details improvements

  1. when i installed version 3.2 beta, its not loadding new design template showing completely white block instead of blue header.

    Could you please help on this.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.