The Bug Genie team blog

What's cooking behind the scenes of The Bug Genie

A streamlined experience

leave a comment »

Now that we’re quite late in the development cycle for v3, we’ve been looking at how to improve the UI to provide a more streamlined experience. While the the completely tabbed interface have worked well with both v1 and v2, internal usage have shown that the UI experience with v3 has much room for improvement. The focus after the previous alphas have been on adjusting font sizes, removing unecessary padding and discussing / potentially redesigning the header and footer areas so that less screen space is wasted.

The first thing we did was to redo the footer. Instead of the bigger footer in alpha 4, we now have a slimmed down footer with less padding and a more visually appealing icon. It works out really well, and adds about 20/25px to the available screen space for “actual” content.

An ongoing thing since alpha 4 has also been adjusting and tweaking font sizes to improve consistency and reduce unnecessary padding. The improved font sizes also deliver a more visually consistent and appealing experience where focus is moved more to the content and away from the “noice” around it.

Speaking of “noise” around the content, the next and final step was to look at ways to reduce padding and screen space wastage in the header area. While the header area contains useful links such as navigation tabs, project navigation and user info, we’ve felt that it took too much space and drew attention away from the actual content, leaving too little space for what you’re actually using the bug genie for – managing projects and issues. We had a go at trying to reduce the “main” header (the blue area) without doing much with the links. This still left us with the project menu bar below it, which also ate up too much screen space regardless of how we reduced its padding. In the end, we went for a completely new approach, one that seems to have worked out a lot better.

By combining the “main” menu with the project menu bar, removing “main” links and replacing them with their project context counterparts, we’ve managed to merge the two navigational bars into one. When in “project context” mode, we noticed that since clicking the “configure” tab would take you out of the project context, it made more sense to move that out of the way. Since it’s also actually not a project context tab, moving it made even more sense. So – in project context mode, the “Configure” tab is removed from the tab menu, and a link is placed in the footer bar. Permission control is still present, so you still won’t see the link unless you actually have access. Outside the project context, the “Configure” tab is still in the top menu, as it is actually a tab similar to “about”, “main page” and “dashboard”.

This redesign also moved the quick search box into a little bar below the main bar, which is now highlighted and used as a breadcrumb bar when in project context mode. This breadcrumb bar has been further enhanced with smarter wiki navigation, and proper breadcrumb navigation when using the different project views. Lastly, we’ve redone the notification popups so they now fade in and out in the middle of the screen, and can be dismissed with a click.

We think you’ll like it! So, to give you a little preview, here’s a few screenshots of the new layout in action:

Written by Daniel André

November 4, 2010 at 23:43

Posted in The Bug Genie 3.0

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

%d bloggers like this: