Makeover Mock-up

 I hear two very different yet very strong opinions about the FogBugz User Interface from new users.  One group, which I believe is typically represented by users that have tried to use other defect tracking software, exclaim over the simplified beauty of the FogBugz interface.  The other group, weaned on the modern Web 2.0 look or the sheen of Mac OS X, looks at FogBugz for the first time and thinks it is rather plain or even ugly.

First Impressions

I have often wondered if the elves at Fog Creek would ever, or have ever, attempted to apply a little lipstick to their app and improve upon the first impression.  We could argue the need for such a change, for certainly Fog Creek values simplicity over glitz.  But I suspect the average Fog Creek’er would not sit idly by while somebody disparaged their interface.

Since it seems unlikely that Joel and crew will suddenly feel compelled to share their spitball ideas and alternate user interfaces (if they exist) with me, I decided to take a shot at a makeover mock-up and see if I could come up with some changes that might help the first impressions.  And more importantly, I wanted to see if I would actually want to use whatever comes out of FogFanz lab.

A Napkin Sketch

Before I go any further, I must confess that I am by no means a designer.  My graphics skills are only slightly better than that of my three year old daughter and my mastery of design principles is virtually non-existent.  I know this.  But, I do know a few things about what I like to see in applications, I do know the FogBugz interface quite well and I know a few things about usability.

Thus, I present this as sort of a napkin sketch of concepts that might improve the first impression and maybe even the daily impressions of heavy use.  In fact, since I’m utterly lost at the art of drawing, I’ve leaned on some free icon resources to help with the graphics end of things. 

Most of the “new” graphics I’ve used come from the fine folks at FastIcon.com.  I also borrowed from a “Free Delivery” at IconBuffet.com.  If you have issues with the quality of the graphics in my example, rest assured it is because I messed up the fine work these folks.

Baseline

With that said, lets move on with the show.   We should start by reviewing the default view of FogBugz 6: The Case List.

Original

 I could probably write a book about what is right about this interface.  But where is the fun in that since I can’t take credit for the fine design work anyway?  Therefore, I will ask… What is wrong with this look? 

There are a few things to nit-pick, but the primary argument I’m trying to address is that it just looks too pedestrian.  My secondary issue is that after using this interface for almost two years I find that some of the common and important functions blend too much with the less common and less important features.

Exploring an Idea

I’m not sure how a real designer would approach this process, but I had a basic idea in my head and I opened up Photoshop (Photoshop Express actually. I told you I’m not a designer.) and started mucking away at a screen shot.

My original idea was pretty focused on a single concept.  I felt like the “List” link was the most common feature used and should be the dominate menu or icon.  I originally was just going to come up with a huge icon for “List” and leave most everything else alone.  I tried moving the FogBugz logo so that “List” could have the prime real estate.

Eventually, I realized that my original idea was not going to work. Or at least I didn’t have the design chops to make it work.  So, I went with a less drastic change to the placement of objects but a more comprehensive change to the way each item at the top of the screen is displayed.

FogFanz Makeover Mock-up

Click the link below to see the full image of my makeover mock-up.  Then, follow on below as I attempt to explain my logic to the changes.

Proposed FogBugz Makeover

 

Leave Some Things Alone

I could not rationalize moving the logo from the upper left.  It just makes sense there.  Likewise, keep the Search area at the top of the screen as this a global and powerful feature that experienced FogBugz users rely on extensively.   Finally, the user admin links in the upper right are well placed and need to be globally accessible.

Priority Menu Items

Ignoring the icons for the moment, the biggest change I wanted to make was to adjust the order of the menus to reflect the relative importance of each menu and the frequency of use.

“List”, “New Case” and “Working On” seemed like the three most important and frequently used menus based upon my own experience.  In the original layout, “Working On” is way over on the right-hand side, in small text, and crammed in near the user administration links.  And yet, if your team is really using FogBugz and especially EBS, you want this features to be used quite frequently.   So, I promoted it to the third most important spot in the menu area.

Secondary Menu Items

Meanwhile, after reviewing the other menu options, they just didn’t seem to belong in the same class as these three.  “Wiki”, “Reports”, and “Discuss” all open up completely different areas of FogBugz and have nothing to do with managing your cases.  While some user roles may use the “Email” feature frequently and daily, many users like myself, rarely use this feature.  And “Extras” seems self-explanatory in its lower status.

So all of these menu items were right aligned and clearly separated from the primary case management menu items.

Flight 815

You should have noticed that the “Filter” menu got lost in this makeover.  I would love to spend some time in a usability lab to really validate or improve upon this idea.  But I’ve never been a fan of using the word “Filter” in a UI that will be used by non-database users.  Though I realize that sometimes it is the only word that makes sense.

But in this case, it struck me that the “Filter” menu was really just another version of the “List” menu with more options.  So, in this mock-up I removed the “Filter” menu and added a drop-down arrow to “List” so that the filtered list options could still be accessed. 

This serves the dual purpose of reducing the menus/icons and consolidating similar functionality into a single place. Is this actually easier to user? I would probably need to try to use FogBugz with this change for a little while before I would know for sure. But I like the possibility of reducing the options on the screen.

The Icons

My key attempt to improve the first impression of the FogBugz UI is to expand the simple menu concept with the use of moderately sized icons.  As previously discussed, my graphic design skills are virtually non-existent so rather than designing custom graphics for each icon I searched the free options at my disposal for nice looking icons.

The icons I’ve selected are merely representative of the icons that could be used.  They are not very cohesive in style and they don’t really look like they belong together.  But please bear with me and pretend they go well together and pretend that my minor alterations were done with an artistic touch.

One trend that did show up in almost all of my selections was the yellow/orange color.  Believe it or not, that was not a premeditated decision.  It just kind of happened.  I’m not sure that is the color I would recommend to dominate the icons. 

Actually, I’m pretty sure it is not the color I would recommend.  But again, please play along and pretend the colors and styles are cohesive.  Or you could just  imagine what a really good designer could do with these concepts.

Icon By Icon

List

I would love to test different terms here in a usability lab.  “Cases”, “Show Me”, and “Show” are alternative labels I can think of off the top of my head that might appeal to non-developers if you wanted to promote FogBugz as a general purpose project management tool.

Regardless, the icon here clearly should indicate something about listing items.  I choose this nice looking document icon from FastIcon.com.

New Case

The label is spot on.  The icon could probably be some “plus sign” or some sort of writing action/instrument.  I choose a simple pencil icon, also from FastIcon.com.

Working On

Being accustomed to FogBugz, I’m fine with the “Working On” label but I wonder if new users would get it in a usability lab.  Meanwhile, I thought the icon should reflect “clocking in” to work.  So, I modified a white circle button icon from FastIcon.com to show the face of a clock.  This is one image that stylistically really doesn’t fit with the others.  But you should get the idea.

Wiki

All of the secondary icons are intentionally smaller than the primary icons.  I have no idea what icon indicates a wiki, but I think the initial motivation of adding the wiki feature was to promote documentation.  So, I took a book looking icon from FastIcon.com, and made it a little more generic.

Reports

Clipboards, check marks and spark-lines would all do here.  I used this nice looking clipboard from FastIcon.com.

Discuss

I wanted some sort of discussion bubble but couldn’t put my hands on a good free option that was generic enough for this mock-up.  So, I used a basic shape from Photoshop Elements.  It is boring, but you should get the idea.  Once again, an artist could do something nice with this.

Extras

A generic label seemed destined to have a generic icon.   But it also presents an opportunity for something a little more fun.  I almost convinced myself to use an ice cream cone here to indicate tasty extras. 

But I found the mustard and ketchup icons in a set of free icons from IconBuffet.com and couldn’t resist putting them together.  Who doesn’t want some condiments to top off the main dish?

Email

This must be the most used icon on the Internet.  I’m not sure how you make an interesting email icon these days since we’ve all seen about 5,000 variations.  This one came from FastIcon.com.

The Filter Bar

One of the great, yet some what ugly, features of FogBugz is the list of filter conditions above your case list.  It will often say something like you see in the original image: “Filter: All Open Cases in ProjectName.”

New users may not know what to expect when they click the links for each word.  But experienced users will manipulate these filters frequently in their daily work.  I choose to leave this area largely in tact.  But I did experiment with a few minor changes.

Show Me

As previously mentioned, I don’t like the word “Filter” that much and since I’ve removed it from the main menu, it didn’t make much sense here.  One option would be to re-use a version of the corresponding menu above.  “Now Listing” came to mind, but that seemed a little awkward. 

I went with a label that makes sense for the text that follows.  What used to read “Filter: All Open Cases in FogFanz” now reads more like a complete sentence “Show me all open cases in [the project] FogFanz”.  Again, I’m not convinced this is the right answer but I like it better.

I think this would be an interesting concept to usability test.  I’ve experienced enough usability tests to know that my ability to predict the results of wording topics like this is not very good.  Many other users may feel very different about this label.

Save Icon

Fog Creek has always grouped the Save, Fields, List and RSS icons together.  But I felt like the save icon really belonged more with the list of filters which are changed more frequently than the list of fields, in my experience.  So, I placed the save icon right next to the filter text label.

Filter Tools

These three icons all apply to the case list, so they belong in roughly the same space as they started out.  But they were originally vertically positioned a half-step off from the rest of the filtering options.  Functionally, they seemed on the same level to me, so I put them on the same level and right-aligned them to indicate their secondary status. 

I dropped the “Filtering Tools” label to conserve a little vertical space.  I think this also simplifies the grouping as not every icon is strictly tied to filtering functionality.

Case List and Summary Box

There is probably a lot one could do with the actual case list.  But it is so darn functional in its current incarnation that I really didn’t want to try to change it.  You could choose to use more vertical space for each case and that would let you identify each case with a larger, more colorful Category Icon.  I think that might make a nice option in the UI, but I think it is a pretty controversial idea that might take away from the other changes I have suggested.

Likewise, I think the summary box at the bottom does a pretty good job and I’ve never been inclined to change its presentation.  In the end, I choose to leave this entire area of FogBugz the same.

One item I never figured out how to handle is the “Starred” drop-down link.  It feels like this should go near the “List” or the Filter Bar.  But I never found a place that looked right and it didn’t seem to belong as a primary case management menu item.  So, I left it in almost exactly the same place as in the original screen shot.

Conclusions

I fear that my hack’ish attempt to assemble relevant icons diminishes the impact of the makeover.  But in general, I think this Makeover Mock-up has some real potential (imho).  I like having a little bit of eye candy in the interface without totally losing the feel of Fog Creek’s creation.

Most importantly, I think the separation of the three primary case management menu items and the secondary menu items provides some much needed focus to the interface.  I’m sure a talented designer could do a better job of this change, but I feel like the concept is good.

Likewise, I love having the “Save” icon next to the filter text.  However, I’m doubtful of the “Show Me” label is the right change.  I like the way it reads, but I fear it causes more harm than good.

There are three “Next Steps” I would love to see from here.  The first step is up to you.  I’m posting this little experiment on-line with hopes that other FogBugz users and potential users will provide their critical feedback.  I’ve had lots of users rip my work in a usability lab, so I think I’m prepared mentally for the feedback.   I think.

The second and third “next steps” are completely out of my control and will probably never happen.  But I would love to see two more things happen. 

A usability test ⁽¹⁾ involving the current FogBugz 6 interface, my Makeover Mock-up, and any other ideas the Fog Creek elves would like to try out.  And the final thing I would like to see is a top notch designer like Jason Santa Maria (for example) to sit down with Joel and crew and come up with a refined look that meets the Fog Creek standards for simplicity and ease of use.

What I don’t want to see happen is for FogBugz to turn into some sort of cluttered, glitzy mess that loses the focus on functionality.  Perhaps my suggestions have already gone to far.  I don’t think so, but that isn’t for me to judge. 

Regardless, it was a fun experiment.

 

---

 

 

 

 

 

(1) – Yes, I’m very aware of Fog Creek’s use of hallway usability testing and the simplicity and effectiveness of their creations reflects this commitment. But I am biased by having worked for a usability company for 15 years and I am convinced there is no replacement for third party usability testing.