The secret ingredient is ... Transitions!

Information Technology interfaces have progressed to the point that the core competency factor has become design. Design that is pleasing to see and gives a good feeling, or as many sarcastically call it - 'eye candy'. Call it what you like, if your product has good design it will do well. Talented graphic designers are finding themselves under heavy demand.

Background

Microsoft does have to be credited with constantly upgrading it's software design - from Windows 3.11 to Windows 95 to Windows XP and now Vista. Microsoft Windows Vista's new look is percieved to be largely a response to the design initiatives at Apple corporation. Though I think Linux has also pushed the Vista design team.



At Apple corporation the design initiative was initially unleashed on the physical machines with it's new iMac series. Then it went deeper with the Mac OS, which focussed on the software interface itself. Innovative design was invested in creating new interface elements and redesigning the existing ones. The user who's aesthetic sensibilities had been ignored for so long received a happy shock.

Linux and the open source community has consistently provided the plug-ins to enhance user experience. The fact that all of these have not traditionally been in one installable bundle made them inaccessible for common computer users. Here are a few examples from the Linux Ubuntu site:



Transitions

Excuse my being awfully simple about this definition:

1. When you are using a computer you'll initiate an action at a time, for example opening a program window. The computer system may also initiate an action.


2. The result of that action will produce a result on your screen. For example, a window will appear or a menu may open.

What happens between 1 and 2 is a transition period. How the software fills that time on the screen is what makes a Transition.
Ordinarily, there's no need to fill a Transition with any work. Click a button, computer does some processing and a window instantly appears. Optionally a better experience would be to have the software create an animation to make the window appear to zoom in to place, from some corner of the screen. That gives some feeling and space for the Transition taking place. Another common Transition occurs when clicking on menu's. Normally, the menu could be made to instantly appear - which doesn't provide as good an experience as when the menu rectangle slowly folds out from the top menu button, or rolls-out downwards.

There are many such points of Transition that the software can handle better. With the evolution of operating systems, the main change I have seen in the interface is the incorporation and enhancements of these transitions.

I have been using Vista for a few weeks now, so I'll refer to those examples, but know that these days almost every operating system has some fantastic transitions built in. In Vista click on a window to open and it fades in and zooms into view, minimize it and it fades out and zooms out to the toolbar. A small thing to do, but makes a great difference in the feel of how the software 'drives'. The difference between a Mercedes and an old Toyota.

Switching between windows could be an ordinary click-on-another-window-and-it-comes-into-view, or you could do the same using Vista's spectacular Flip-3D.

All of these Transitions still work on application events inside the operating system. As more applications move to a web interface, these transitions will need to happen inside the browser. There are already HTML meta tags that are used to create transitions, but these have traditionally been frowned upon. Most of the official movie sites look for a lot of dynamic effects and transitions. As a HTML based site is limited in this area, most of the sites use Adobe Flash interface, which, by the way, is not counted as a standard (for examples see The Inconvenient Truth site, the X-men site). Applications are also moving onto small portable devices, and even there graphics and transitions are providing a smoother and friendlier user experience.

It is still tricky business building graphics and transitions into applications using the current developer platforms and technologies. Technologies such as Java never really cared much or helped with the software layout, graphics and transitions. That's due for a change.

At work I don't have Windows Vista, I don't even have Windows XP, I have Windows 2000. But that hasn't refrained me from incorporating features such as transparent windows, a Mac OS style dock, and even 3D effects on the windows. Enterprising developers can build any Transition effect plug-in into any level of software. All the windows you see below can actually flip-away to a folded-up view or flip-down to a full-window. The bar on top is like the MacOS applications dock, very handy for launching applications and folder explorer windows. Get the plug-ins here.



Hard-core programmers and developers tend to thumb their noses at such not-central-to-the-problem features. However, as mentioned previously - with the gap between the software features narrowing, such design feature differentiators can become the main Unique Selling Proposition. Having a good experience while you work is not to be discounted.

In our current technology interface, we work within 2-dimensional (2D) environment that we see on our monitor screen. To alieviate this situation, graphic engines have been added to provide a 3-dimensional (3D) emulation. You can see 3-dimensional objects - such as cars in a game - on your 2D screen. Many of the above plug-ins sought to put in an artistic 3D effect - shadows, light gradients to alieviate that flat experience. Now the experience has been further enhanced by full 3D emulation, making all the 2D elements undergo 3D Transitions - fly around the screen, rotate, distort, animate etc. The stuff you see in videogames are going to be incorporated in the elements of the everyday interface.

Transitions are a design trend here to stay.

More Examples

Here's another peek into future Transitions.

• Check all the transitions in Vista Origami experience
  
• Note the transitions in the upcoming Adobe Media Player
  
• In iTunes check the Cover Flow transition navigator
  
• See the Vista Flip3D transition application switcher
  

Links to Transition software

Most of the software below works in Windows, but I'm sure you could find Linux equivalents - search for Ubuntu or Beryl. The best stuff in life is free!

• Firefox browser - 'Tab effect' extension. Everybody I know who's seen it on my desktop wants it, and keep coming back to me on where to get it. Well, here it is. The Transition is that when you move to another tab in Firefox, it looks like a cube is rotating with one face being the old tab screen and the next face being the new tab screen


• Madotate - A japanese designed software which makes even the windows in my Win2000 computer flip sideways when not needed, as in my desktop above. The small configuration interface is in Japanese but there are English translation documents provided.


• Transparent Windows - I use these to make my windows partly transparent. You won't feel the need for dual monitor systems.


• Object Dock / Aquadock - provide a MacOS type dock in Windows environments, Aquadock currenlty works upto WinXP only


• Yahoo Gadgets / Google Desktop - lots of nice little dynamic graphic icons to add to your desktop


• The Amnesty Generator, for you new Vista users. This converts widgets, games and video's on the web to gadgets that can be added to the Vista Sidebar.


• And finally, here's the ultimate demo in transitions - multiple spinning desktops, really strechable toolbars/docks, truly flexible windows. It's a combination of a great NVidia Graphics Cards, Linux Ubuntu, and Beryl OpenGL accelerated desktop