This is going to be a long post, so be forewarned. :)

I should start off by saying that Windows Live Messenger is one of the first releases of Messenger in a long time that I'm actually looking forward to. The team has been busy working on some fun and useful new features like music and folder sharing, offline messaging, better contact list management, and so on. The last few releases haven't been particularly exciting for me (sorry, not a big fan of winks and nudges), so it's good to see a release that's focusing on more interesting scenarios.

However, one thing that has always bothered me is the direction in which the user interface of the application has been going. Ever since the split between Windows Messenger and MSN Messenger came about, the MSNM UI has progressively been getting more and more "busy" with each new version. The current beta of Windows Live Messenger is no exception, and despite all the great new features that are making their way into the client, I feel like it has taken a step backwards in some sense from v7.5 in terms of the UI.

In today's post, I'll focus on the message window (click for a larger version):

One thing that might not be immediately apparent from the screenshot is the size of the window itself. On a 1024x768 display, a single message window occupies about 1/4th of the total screen area. Moreover, the window feels heavy and bogged down at first glance, a sharp contrast from Windows Vista's Aero Glass UI, which appears clean and lightweight. The main points of focus in the message window should be the two text areas for sending and receiving messages; instead, there is a clutter of distracting buttons and controls on the window surface.

On the other hand, here's an example of a spartan UI for a message window in Google Talk:

Now, you have to admit - Google's job of keeping the UI simple and effective has been much easier, simply because it presently lacks even some of the most basic functionality that every other IM client has had for years. The real challenge is to be able to maintain this same simple and effective UI even when your application is brimming with lots of great features.

So I thought to myself - how would I personally modify WLM's message window UI so that it feels clean and inviting, and at the same time, exposes all the fancy new functionality? Bear in mind that my goal was not to create a radically different UI; in fact, I wanted to stay as close to the current UI as possible. Here's one of the mockups I came up with (click for a larger version):

The picture is simply not complete without a brief explanation of some of the motivation behind the UI changes. The first two things that you might notice are the significant reduction in the amount of screen real-estate that the window takes up, and the clear focus on the two text areas that provide the core functionality of the application - instant messaging.

Redundant UI elements such as the Send button and the user's own display picture have been removed completely. The user's display picture is already present on the contact list window and serves no functional purpose on the message window. A new panel could fold out only when the user begins a webcam session. If a Send button is required, a smaller, less jarring one, similar to the "Go" button on the Internet Explorer toolbar could be added. The new Search button is a magnifying glass, the universally recognized symbol representing search - it occupies less space and the colors blend in with the rest of the window.

Hovering over the triangle in the upper-right corner of the screen opens up a fold-out panel that exposes secondary functionality, such as the ability to start a voice conversation or a webcam session, share files etc. The panel could be visible by default so that new features are readily discoverable; but provide a quick and easy way to hide it when it's not being used, similar to the button that toggles the main toolbar in the current UI. This gives the user the flexibility to minimize the amount of wasted screen space and reduces UI clutter to a minimum. Similarly, the formatting toolbar could auto-hide when not in use and slide out only when the user's pointer hovers over it. The tab for switching between text and ink could be incorporated into the formatting toolbar, thus eliminating the need for the large amount of wasted grey area under the input textbox. Remember, pixels are precious. Use them sparingly.

So now that I've put a few of my ideas down in pictures and words, what are your thoughts? Do you like the new UI of the message window in the WLM Beta (we'll get to the contact list some other time)? What do you think of the modifications and the UI in the mockup? What would you change in the original and what would you change in the modified version, if anything at all? There's still a good chance that we might see changes to the UI before the final version is released, so if there's something you don't like speak up now before it's too late.

Technorati Tags: WLM, Messenger