20071008

Think Different (Part 3)

This is a 3-part series on porting Trillian across platforms, particularly Mac OS X. It would make more sense if you start reading from Part 1. Thanks for your interest!

Coherence across platforms

Trillian Platform Comparison

Meanwhile, the second question is the coherence of the product between different platforms. If the user switches between Web and Mac OS X often, it would be nice if their experiences are around the same. Our web version is a very delicate replica of the Windows version, so that transition between Web and Windows is very smooth. Users don't need to re-learn how to use again, as it is conceived as one single product. It would be not convenient if in one OS the toolbar is at the top, and in another the toolbar is at the bottom.

In order to provide a familiar experience for all Trillian Astra users across the platform, we use the same skin through out. While we made a lot of changes to accommodate the ease of use in Mac OS X, the form of the contact list window remained the same - with its signature curved bottom housing a variety of controls - and it works well for the identity of the instant messenger as well.

The OS X version of Cordonata has an overall flatter "lacquered and polished steel" appearance that is based on Leopard. I am not completely sure about the darkness of the window yet, but it seems most windows in Leopard are very gray. We have also flattened the bottom buttons to follow the new toolbar buttons in Leopard.

Font choice varies across the platforms. It makes sense because certain system fonts do not exist on other systems. Default font of respective operating systems are used as a result, while in Flash we will try to adapt to both.

Other Trillian-centric behaviors are kept in spots where familiarity between Trillian products weighs more beneficial than familiarity between Trillian and OS X, and where there were no precedents in Mac OS X. For example, we use the same toolbar in both Windows and Mac to showcase all the IM services the user is using.

So this concludes my 3-part series on porting the design of Trillian to Mac OS X. Please feel free to send me comments on what you would expect on the designs of Trillian. Thanks!

Labels: , , , ,

Think Different (Part 2)

Coherence with Mac OS X

Trillian Astra designed in context of OS X Leopard 

There were two stages in the design of the windows. While critics may say it is unnecessary to design anything new with the use of HIG (Human Interface Guidelines) from Apple, it is in no doubt instant messaging requires a large variety of new controls.

For instance, Apple had to introduce chat bubbles in iChat to distinguish individual messages in a conversation. In the contact list, there are no standards between how contacts are laid out. Some have two lines, some have one line. iChat has buddy icons in the size of 28x28, which is not a nice size as it has to shrink down a buddy icon usually 48x48 or 50x50 in size. It is also difficult to pick which control to use. Windows Live Messenger for Mac is the only messenger that uses the true list control from OSX, while iChat simply do away with groups for tidiness.

Tabs are also another questioned area in OS X. While iChat in OS X Tiger have tabs at the bottom, iChat in Leopard moved the tabs to the left for the new Source List look, and Safari still have tabs at the top. Yahoo! Messenger followed suit to have tabs at the bottom to be as 'authentic' as possible.

Therefore, custom controls are needed no matter what, but the question is how we can design it so it looks like a part of the OS.

Of course, the necessity of custom controls is not the license to go crazy in the design. In order to pay respect to the users of Mac OS X, we paid attention to a lot of details so it can be easier to get used to.

We made numerous small changes in the base version of Trillian Cordonata, the default skin of Trillian. Of two most obvious changes, the window buttons are moved to the position where OS X users are used to. The Zoom effect also maximizes the contact list to its content only. We are also going to make the scroll bar comply with the system setting so the arrow buttons will fall into the right place. The glow and selected states of list items will also correspond to the color settings in System Preferences.

The design of Trillian Preferences was based on Mac OS X System Preferences.

And in fact, concepts from Mac OS X were referenced heavily in the design of Trillian. For example, the Trillian preferences window is based on System Preferences in Mac OS. Even though it has a Windows look in the Windows version currently, the Mac version will spot a Mac look with authentic controls. The design of the skin also has a feel of a 'remote control' in mind, similar to the widgets on Dashboard, or the controls of the Apple DVD Player.

Various Apps on OSX that takes on imaginative forms

In future, we would hopefully allow the possibility of having other interfaces. While I would love to see a 'normal' OS X window or a minimal black slate window also, the current plan is to develop Cordonata first, which is essentially the superset of these other alternative skins. Those other skins may be beneficial to those who only uses IM on a Mac.

Next up, I'll talk about how Trillian Astra for Mac lives well with its brothers on the Web and on Windows.

Proceed to Part 3...

Labels: , , , ,

Think Different: A Lesson in Porting

With the release of the alpha of Trillian Astra for Mac, there are lots of comments and controversies stirred up by the new design of the software. In the following 3-part series, I will attempt to explain the reasoning behind the design and open myself to critiques and comments.

iTunes-WindowsVSMac
iTunes: a straight port

Apple's Mac OS X is the Mecca of desktop user interface design. Despite how many times Apple itself breaks its own interface guidelines with iTunes, Time Machine or Dashboard, such new experiences are justified by good logic and craftsmanship, no matter how they deviate from the norm.

As we move along in the future of software, I envision that the distinction between downloaded desktop software and web software. And this is how the design challenge began.

Designing between Platforms

Office-WindowsVSMac
Microsoft Office: a culture-specific port

We first saw software from OS X coming to Windows (e.g. iTunes, QuickTime), and software from Windows coming to OS X (e.g. Office), when their user bases were distinct, i.e. Mac users always stay in Mac, Windows users always stay in Windows. That was relatively easy. Windows and Mac OS X could be a metaphor of two different nations with different culture. One could simply translate the software directly into another and call it done, or one could also design the software to be culture-specific. The latter means that, Office for Windows have a Windows layout and Windows features, while Office for Mac have a Mac layout and Mac features.

Photoshop-WindowsVSMac

Adobe Photoshop: an in-between port

And then we also had software that are designed to work on both platforms (e.g. Photoshop). Back in the days, they were mostly professional software. Such software exists as its own entity; their users will be unhappy to relearn the software if they switch OS. Therefore, it is always interesting to look at Adobe and Macromedia products, in the way how they designed the UI to make users of both OS-es happy. In my observation, Adobe is getting more aggressive these days introducing its own UI elements, while still respecting the fonts and metrics of the OS.

And now we have the third type of software: Software that is always connected, across operating systems and across platforms of desktop, web and device.

So here's the challenge: Design a unified interface across all OS platforms, desktop and web, while retaining an identity. This is Trillian Astra.

Admittedly, Trillian Astra is one of the few first software out there that attempts such triumvirate. Here at Trillian, a lot of users use IM across OS-es and devices. For example, one would have a Mac at home, while a Windows PC in the office, and also an iPhone on the run at the same time. There would also be users who have a Windows PC at home, and always on the run in libraries and Internet cafes. The user does not stay at the same platform all the time in these cases, as we encourage them to use Trillian across the board. In this point of view, coherence is not simply between the software and the operating system, but also between the software in these different incarnations.

I would like to start a conversation with any UX designers out there, and I hope we will have a better reach to do this with the release of the Mac edition. Please feel free to drop your comments in.

Next up, I will talk about how Trillian is designed to be coherent with Mac OS X.

Proceed to Part 2...

Labels: , , ,