Monday, February 25, 2013

Thunderbird UI Concept

Thunderbird UI Concept

Currently Thunderbird's UI is lacking. Because of this, I decided to create a list of things that could (and perhaps should) be changed in TB. I also created a sketchup of a new TB concept that is more user-friendly and elegant.

(Note: Why does my opinion really matter? What authority do I have? Well, I am a volunteer Firefox developer. But more importantly I am the lead programmer and UI designer for... myself. Indie App Developer. Oh, and I also got some info from Blake Winton, Lead UI Developer for Thunderbird)


  1. Blue link text should be lighter by default.

    Bug: https://bugzilla.mozilla.org/show_bug.cgi?id=845807 (Done! Color changed plus a new color dialog has been added)
 Examine the blue font here, it does not look particularly attractive and could be altered. Perhaps more like Apple's Mail App (note I am fine with keeping regular font completely black, only the link font needs to change.):

 This is more in line with Apple's current Aqua style. Windows may or may not need it.


   2.  There should be a unified inbox folder inside the View -> All Folders default view.

At the moment, our default view "View -> All Folders" does not actually have a combined Inbox Folder. This should combine ONLY the inbox mail from each account. Now, Blake Winton commented on this saying that doing this could aggravate some users because they couldn't find a way out of this.

The key here is to simply place it below Local Folders, with the other accounts easily accessible. The position would be about here:


  3. By default, emails should be sorted by date, with the newest at the top.

Now this is quite optional. Apparently people are about 50/50 if they want newest mail at the top or bottom. Therefore this isn't a big problem, but it makes a transition to Thunderbird smoother, since most clients sort by Date Ascending anyways.


  4. Default font needs to be changed. Specifically on OS X.

I'm actually not sure it's the default font that needs to be changed, instead it is whatever font is used to display text such as:


This is kind of dated font, it should be displayed similar with font similar to this sentence. Slight modification, but needed. (I believe this is plain-text font, so we might be showing the supplied font, but we could detect this and try altering it, not sure though. Even Blake agreed though that font throughout the app could get changed)



  5. Pinch zooming to increase text in OS X.

This really doesn't require much explanation. On Firefox on OS X, pinch zooming makes text appear bigger/smaller, something similar should arrive to the message content view. 


  6. Folder Pane should have the "sandstone" image overlaid on the background color.

Bug: https://bugzilla.mozilla.org/show_bug.cgi?id=845819 (Pushed to inbound. Success!)
 
At the moment the Folder Pane looks like:

This isn't bad, but it would much better overlaid with the grain.png image found here: https://assets.mozillalabs.com/Websites/Sandstone/Backgrounds/

This would make it more consistent with our current style on our Website, and Firefox. (For Firefox, see the new tab page texture)





  7. Only show "show all tabs" button when there are multiple tabs.

Bug: https://bugzilla.mozilla.org/show_bug.cgi?id=846414 

Right now we are currently showing this button always:

This just lists all tabs, but when only one tab is open this is pointless. It could be removed/hidden during this time. Just another way to remove clutter.






8. Tabs should animate when re-arranged

Bug: https://bugzilla.mozilla.org/show_bug.cgi?id=612577
 
Pretty clear again, right now moving tabs looks like:

Compared to Firefox's:

Something like this should be added. However, this would take quite a bit of work.


9. Vertical view should be the default, but the mail tableview needs to be redone.

This is really three points, one is the above idea ^: https://bugzilla.mozilla.org/show_bug.cgi?id=213945

Point two is updating the UI for mail viewer and adding better conversation view. 

Point three is to add a "favorite folders" section in the Folder Pane. (Not shown in the concept, but explained below.)

In other words, the future of Thunderbird. Right now we have the layout as follows:


Green: Toolbar
Red: Folder Pane
Yellow: Inbox
Blue: Mail Viewer

Now, this doesn't really make much sense. Most modern mail is not composed to be so wide, but instead has more content vertically. How the setup currently is shows very little vertical height. Therefore, the default view should be the vertical view, but look what happens then:





Doing this, the content display looks better, however the inbox setup would need to be redone. At the moment you can't even see the sender. A view similar to Apple's Mail App on OS X would be better than this. Therefore, I came up with a mockup design.


 
Now, let's look at the details.

 This demonstrates the grain texture under the list of accounts. Where we have All Accounts under Local Folders, but the other ones easily available.

UPDATE: We also now want to add a "favorite folders" sections either right above or right under Local Folders for fast access. Perhaps a favorite folders for each account as well. But that's another issue.








Second, examine the new inbox after the jump:

Here you can see that the inbox looks quite different. As highlighted in blue, each column would have this format:


================================
Subject Line Here... Hello World... Yippie
------------------------------------------------------
  Sender   |   Account   |   Date                | 3 |
================================

Where the red number is the amount of email in that conversation. Also note, that all sorting abilities do not disappear, instead, they are moved to the bottom. Shown in green.


Now, remember that with this plan, we wouldn't show individual mail from each conversation, instead we would combine very similar to how Apple does. See it after the jump.


















In green we have the familiar toolbar, with the Sender, Subject, and Receiver. On the right side we have the date and a way to star the message.

In red you see the buttons that Thunderbird currently shows that look like:
Right now I have it set to the right edge inside the body content. These controls would hide when the user's mouse is over the body content, but otherwise is shown. The controls here could be modified to be more familiar to the user, as opposed to this square-like design I showed here.


Also, you can see how the conversation mode would work. According to how the date order is set up, we show the messages in it's own view. Pretty straight forward.

10. Move Tabs into the title bar on OS X.

https://bugzilla.mozilla.org/show_bug.cgi?id=768516

Since we are redoing tab look on Firefox (Australis), which is unifying the look between Thunderbird and Firefox, it makes sense to take one of those ques. Essentially, this:


The idea is we do something similar to this, where the tabs draw part way into the title bar, and we move the window control buttons downward. This gives us more screen real-estate, and frankly looks a lot nicer.


So there you go, my concept and also the many ideas that I will file bugs on (the lesser stuff). However I would love to see the new UI go into effect eventually. I know the TB team is small, so doing this is a huge task, but it does make sense. Another possibility is that we don't add all these changes into the "Horizontal, Vertical + All Folders, Unified Folders view", but instead have a completely new mode, that works like the concept, with the combined folders and new vertical format. That way, our existing users really wouldn't notice a difference when they upgrade, keeping them happy.

If you would like to see these additions go into place, or have any objections either place a comment below or email me at josiah@programmer.net

Also, I will update this page eventually as bugs are filled, and elements are removed from this list. (Either successfully or rejected) So, if you want to start working on these either email me or Blake at bwinton@mozilla.com

If you file a bug on one of these concepts before I do, send me an email or comment linking to it, and I can update this page. Thanks!

6 comments:

  1. Hi,

    Great ideas here. I wonder if number 9 isn't related to https://bugzilla.mozilla.org/show_bug.cgi?id=213945

    ReplyDelete
    Replies
    1. Ah thanks. That looks like part 1 of number 9. Number 9 is really two parts.

      1. Change mail list to be optimized for vertical view and make that view the default.

      2. Change UI for mail viewer and add a conversation mode too it.

      Anyway, thanks again. I will update this post with that bug.

      Delete
  2. If I can add my 2 cents. I have found one particular small feature in Outlook so invaluable that I wish Thunderbird had it. Maybe it can be considered with this redesign. In Outlook the left pane is split into two. On top of the left column there is a small pane with list of "favorite folders". below is the regular list of folders as you have it today or as you propose it.
    I have several hundreds of folders under my local folder. When I am trying to move emails from my inbox to particular folder via drag & drop, I select my inbox first to select emails, then I find my folder by scrolling the list of folder. This means I no longer see my Inbox folder, though I still see the list of emails in the inbox. Then I drag the emails from inbox to particular folder. This setup has 2 issues:

    1. Once I am done with moving the emails, I have to scroll the left pane back up to see my inbox/send or other top level important folder
    2. If I accidentally click on particular folder, I loose my list of emails in inbox, since content of that folder will appear. Then i have to scroll back to select inbox, scroll back to find the folder and go over it again.

    If there is a small pane with favorite folders and if I have an option to mark certain folders as favorites to appear in that pane, I can quickly switch between two locations/folders and dramatically improve the usability.

    Thank you

    ReplyDelete
    Replies
    1. Ah, good idea. Just to clarify, you are saying we should have a "favorite folders" section in the Folder Pane. Sounds good to me.

      Thanks!

      Delete
  3. This comment has been removed by a blog administrator.

    ReplyDelete
  4. Hi, nice post.

    Have a look on this addon
    https://addons.mozilla.org/en-us/thunderbird/addon/morelayouts/

    ReplyDelete

Note: Only a member of this blog may post a comment.