roy

Something I've been mulling over on and off for the past few weeks is how to build a better webmail client. In this case, I am NOT talking about replacing Yahoo! mail, Gmail, or Hotmail. I am talking about the type of service you can install on your own server and run for your own domain (for free). Much like Brian of Audio Activism, I don't like the idea that critical emails are sitting on other servers. Although it's a bit more work, I've kept (and maintained) my own mail server for the better part of 6 or 7 years (on my neopages.com domain).

Sometimes when travelling, the need to use webmail arises. I'm not much of a Pine guy (too much CLI for me), so I tend to use Squirrelmail.

This is what Squirrelmail looks like:

It's perfectly functional, but it's not very fun to use. I've been using Gmail lately, and it's just easier to use. There's more functionality, and things are more streamlined.

With a bit of sparetime, I mocked up some ideas for a webmail client that would be comparable to clients like Gmail and Yahoo! mail. I'm sure if I had no projects and lots of time, I would probably try to hack Squirrelmail to make this work, but until then, these screenshots will have to do.

The overriding goal for this new design is simplicity. It's surprising how many email clients use the three-pane layout; I thought I was hooked on that, until Gmail showed me that we don't need three panes. Three panes looks confusing. My mom would never figure out how to operate Thunderbird. The goal is to create a tool that is simple to use; a relative newbie can pick up the new design very easily.

Just as a background, I've used Squirrelmail, Gmail, Hotmail, Outlook and Thunderbird in the past. There will be parts of the mockup which will reflect parts of these services - I don't intend to say anything I'm mocking up is new - it's just what I'd like to see.

The benefit of building a webmail client is you don't have to waste time with useless branding stuff; you can just display the actual content!

Inbox view:

Actual emails may not reflect emails that I get

As you can see, a very simple interface. Not many buttons, and the preferences are kept to a minimum (three along the top). I like Gmail's checkboxes, but I don't like how their buttons aren't greyed out when nothing is checked - if actions aren't possible, they should be greyed out.

I've borrowed from Gmail again the 'labels' feature and terminology (I like it better than tagging and keywording - labels hearkens back to the good ol' days of labelling your manilla folders!). As you navigate different folders, the folders left bar (the blue one) highlights so it's clear what page you're on - I don't like Gmail's "connected" background effect - it makes it look too busy.

The target to load any given email is the the whole row - like Gmail. Hotmail is confusing with the multiple links on each line; I can't recall now which link actually opens the email (maybe all of them do, I don't know).

New emails are bolded - I was thinking of using a background color, but I know a lot of people who don't always read their new emails, so using a background color would be way too much like a patchwork quilt.

When you hover over a row:

You'll notice the row lights up - this should make it easy to distinguish what row you're looking at. Also, if the item is labelled, the selected labels will show up on the left bar (the green labels box).

To make the buttons actionable, we must check an item:

Notice how the buttons how light up. This mockup is very crude, but I would imagine the final version would also allow you to modify the status of an email (read/unread/junk).

So let's say, I've decided to modify the labels, I click the "labels" button; an inline dialogue loads up:

You'll notice the ones that were already selected are bold and have a label icon. You can click on any of the links to select it (or select an existing one to de-select it). Let's say I want to create a new label, so I click "Create a new label" link. It switches out the text for a form:

Wooooo! You can obviously see what Naomi Watts means to me... I then save by clicking "Create Label." This then updates the label box:

This is as far as I've gone with mockups - I have some ideas for "Write new email" and the "Address book," but those'll have to wait until I have some more time.

What do you think?