Cubed Mail

Lately I’ve been working a lot on the Thunderbird add-ons developers user experience.  Often times designers don’t get to work on developer experiences because developers tend to do those pieces themselves without much design.  With a lot of others I’ve spent a good amount of time working on the whole experience of development, docs, and extension types so hopefully the Thunderbird 3 add-on developer experience will be significantly better.

To get into the user experience of an add-on developer I recently made a Jetpack, Bugzilla Air Traffic Control, to examine what it is like to develop inside Jetpack.  I’ve also been creating a number of example extensions that take advantage of the new code that has landed in Thunderbird recently and learn the pitfalls of extension development.

So in honor of the hacks.mozilla.org recent article called 3D transforms in Firefox 3.5 – the isocube I added a similar hack to my tabbed message example extension.  I give you…

Cubed Email Messages

To demonstrate the awesome interactiveness that I didn’t add to my email extension I also have a pure HTML demo available.   Try out the email cube test demo for yourself.  This demo requires Firefox 3.5, go get it if you don’t have it.

If you’re asking “why email in a cube,?” then I’ll ask you why not?  This demo reminds me that Thunderbird has all the same Firefox goodness that’s coming out in 3.5 but we have yet to take advantage of much of it.  Hopefully as we make more progress in the coming months we’ll do just that.

And if you’re asking yourself… Is this what Bryan gets paid to do?  Well then we’re asking ourselves the same question; though I don’t think I’m referring to myself in the third person.

Syndicated 2009-06-18 23:59:17 from Bryan Clark

The pattern is not full

This past Friday I made my first Jetpack and on Sunday while lazily waiting for chores to finish themselves I posted my Jetpack on userscripts.org. <h2 class="title">Bugzilla - Air Traffic Control</h2>

For Jetpackers a mid-air collision is an especially scary thing.

So this Jetpack does a pretty simple thing to help you avoid the mid-air collision by notifying you before it’s about to happen.

For every tab you have with a bug open this Jetpack does a simple check in the background to see if someone else has modified the bug while you were looking at it.

Code

The code for this is pretty simple and in total it probably took me only an hour to get up and running and then a bunch more time polishing things off.  Here’s the break down.

I have a simple regex to find urls that are showing a bug:

var show_bug_regex = /^https:\/\/bugzilla\.mozilla\.org\/show_bug\.cgi\?id=(\d+)/;

Then I check if the url matches whenever a new page is loaded in a tab:

jetpack.tabs.onReady(function(doc) {
  // here we setup our persistent check
  var match = this.url.match(show_bug_regex);
  if (match) {
    init(this);
    this.bug_id = match[1];
    startCheckingTab(this);
  }
});

Also for good measure I do a similar check when a tab is focused, in case the Jetpack wasn’t installed or running during the original load.

jetpack.tabs.onFocus(function() {
  // here we just double check out status
  var match = this.url.match(show_bug_regex);
  if (match) {

    /* if we've already notified then we aren't checking anymore */
    if ( alreadyNotifiedTab(this) )
      return;

    if ( ! areCheckingTab(this) ) {
      // they focused a url match that we haven't been checking!
      init(this);
      this.bug_id = match[1];
      startCheckingTab(this);
    } else {
      resetCheckingTabInterval(this);
    }
  }
});

The start checking function simply runs an ajax request against the bug on an interval.  All that was needed for this was to know if the bug had changed from the last time we looked so we build a url that only retrieves the delta_ts field to create a Date object.

"https://bugzilla.mozilla.org/show_bug.cgi?id=" + bug_id +  "&ctype=xml&field=delta_ts";

That’s about it.  If you want to check out the source or install it yourself you can go to the Bugzilla - Air Traffic Control page at userscripts.

Syndicated 2009-06-08 15:47:50 from Bryan Clark

The power of defaults in our choices

My bus ride home trippled in time last night because of some construction so I had the opportunity to watch this TED talk.

This really drove home the power of defaults user interface choices and how it is the responsibility of good designers to default to the right behaviour, especially when the options are complex.

<object width="446" height="326"><param name="movie" value="http://video.ted.com/assets/player/swf/EmbedPlayer.swf"></param><param name="allowFullScreen" value="true" /><param name="wmode" value="transparent"></param><param name="bgColor" value="#ffffff"></param><param name="flashvars" value="vu=http://video.ted.com/talks/embed/DanAriely_2008P-embed-PARTNER_high.flv&su=http://images.ted.com/images/ted/tedindex/embed-posters/DanAriely-2008P.embed_thumbnail.jpg&vw=432&vh=240&ap=0&ti=548" /><embed src="http://video.ted.com/assets/player/swf/EmbedPlayer.swf" pluginspace="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent" bgColor="#ffffff" width="446" height="326" allowFullScreen="true" flashvars="vu=http://video.ted.com/talks/embed/DanAriely_2008P-embed-PARTNER_high.flv&su=http://images.ted.com/images/ted/tedindex/embed-posters/DanAriely-2008P.embed_thumbnail.jpg&vw=432&vh=240&ap=0&ti=548"></embed><noembed></noembed></object>

Dan Ariely asks, Are we in control of our own decisions?

Syndicated 2009-05-22 20:08:31 from Bryan Clark

Negotiate with your users

I always advocate against simple (and especially modal) dialogs in user interfaces because they aren’t there to help the user get past the problem, more like work through the emotional issues the software is having.

Dialogs aren’t the real evil, though they usually aren’t great, it’s the lack of real negotiation.  In the book Getting to Yes it states that you “Make emotions explicit and acknowledge them as legitimate…”, however don’t stop there.

A useful dialog would negotiate with your users.  Give them actions and power to change their situation.  Don’t ask users to acknowledge your troubles and stop the negotiation there.  Reconnect!  Try Again!  Even simple actions can help people correct the situation.

Syndicated 2009-05-14 18:46:56 from Bryan Clark

question: dualbutton css

How do you make the dualbutton always appear like the last two sets of screenshots (as it does on hover)?

I’m looking to make dualbuttons always show their dropdown button with a real button like look.  This dualbutton reply button is  going to land in Thunderbird 3 soon and I’d like the style to look correct for both Linux and Windows (Mac is using it’s own button style).

However this doesn’t appear to be some kind of toolkit CSS hover issue. The windows CSS is decidedly worse than the Linux right now so that may be a separate issue all together; and if so we can attempt that in the same way we handled the Mac.

Hints, answers, and the like are greatly appreciated in the comments.

Syndicated 2009-05-11 22:07:55 from Bryan Clark