Design Matters: Looking at a Re-themed Bugzilla

I’ll be honest. There was a time when I thought design didn’t matter. To my credit, it was a long time ago… but I used to think, if the tool was good enough, the design won’t matter, people will use it cause it is helpful. (This may or may not have influenced some fashion choices earlier in life as well – I’d like to think things have improved – but not everyone may agree it has improved sufficiently).

Being useful may be sufficient (although take a look at the government website at the bottom of this post – it’s a very useful website). But it’s no excuse for not making things easier to use. Especially when you are running an open source community and want to encourage participation and ease people up the learning curve faster.

Hence why I enjoyed recently discovering ActiveState’s implementation of Bugzilla (rethemed by Tara Gibbs). Bugzilla is the software many open source projects use to identify, track and resolve bugs.

Here we have two identical pieces of software (so the “usefulness” is the same) but what makes ActiveState’s version of Bugzilla so nice are a few simple things they’ve done to make it more user friendly (doubly pleased to see them implement some ideas I’d blogged earlier as well – great minds think alike!).

So let’s start with the Mozilla instance of Bugzilla – as this was the one I was used to.

I’ve circled a couple of the key features to zero in on. Let me go through them as I want you to be thinking about them when you look at the ActiveState version:

Red circle: Notice that this has a lot of key items in it, but it is lost next to the “search” button, which pulls your attention away
Dark orange arrow: the search button! most often you won’t find a search box located here in an application.
Green circle: Tons of useful stuff down here, but arranged in one long horizontal list, that makes it hard to find what you’re look for (and another search box!)
Light orange arrow: another log out option… didn’t I see that somewhere else as well?

I want to be clear, the Bugzilla team at Mozilla is awesome. Recently hired they are trying to do a ton of stuff and this is not where I’d expect them to start (and they’ve been super responsive to everything I’ve blogged about so I’m a huge fan), I want to flag this because everyone, from software engineers to government officials need to recognize that we rely on good design to make our lives easier, to help with decision fatigue and streamline our work, every day.

Now check out the ActiveState version of the exact same software, but re-designed.

So, my cartoonish circles and arrows are mucking up the design and ascetics of both theses sites, so please forgive that. (I suggest opening them in adjecent tabs – Mozilla here, ActiveState here – so you can see them uninterrupted).

So, a few things:

Red circle: Now everything to do with the administration of your account is in the top, top right hand corner. This is where google, facebook and most websites put this info now, that’s why you’re expecting to find it there!
Dark orange arrow: now the search button is in the top right hand corner. Pretty much the same location it appears in Firefox (and safari, IE, chrome, OS X, etc…) and so where users have come to expect it.
Green circle: This part really is genius. Did you know there were saved searches in the above version? There are, but the feature didn’t stand out. This theme sorts the users options and displays them vertically within a menu: much, much easier to digest quickly.
Light orange arrow: Features appear only once! For example, the sign out and search feature do not appear at the top and bottom. This helps reduce clutter and allows the user to find things more quickly

My point is that a few minor changes can dramatically improve the usability of a website or tool. Is Mozilla’s bugzilla radically worse than ActiveState’s? No, but I definitely prefer ActiveState’s design. Moreover, when you are relying on volunteer contributors and attracting new contributors is something that matters to you, this is an important gateway and so you want it to be as seamless as possible.

What’s interesting is that often it is in the non-profit and government sector that design gets neglected because it is deemed a luxury, or the “substantive” people don’t think design matters and so ignore it.

The results can be disastrous.

I mean, especially if you are in government, then you’ve really got to be advocating for better design. Consider the website below. Remember, this may be the most important citizen facing website in the Canadian government – the one stop shop to find every service you need. It is better than most government website, and yet, you’ve got a site that is still maddeningly difficult to navigate. Where am I supposed to look??? Eyes… being… pulled… in… so… many… directions…

Personally, I think you could solve 80% of the problem with this page just by getting rid of the left hand column and put a search button in the top right hand corner. But I’m supremely confident that would violate some arcane website design rule the government has and so will remain a post for another day…

Email & Share: