Drawn vs Constructed User Interfaces
Often I’m presented with a new web application that has a fantastic new interface and I just don’t get it. For example, here’s the interface for chime.tv:
This is an neat application built on you tube that has a joost like feel. I can understand that this looks cool but there’s always been a usability issue that I could never pinpoint with flash interfaces like this. If you look at the YouTube interface now you may find it more inviting and familiar:
Flash use in this case is minimized to the media player. The rest of the interface is HTML based. The blue links are familiar along with the rectangular vertical scrolling layout. This is how I use my browser, clicking links and scrolling. I even have a wheel on my mouse for it.
Let’s look at another example thats not as obvious: comparing Yahoo maps which uses a Flash interface to Google maps which uses a HTML interface. Here’s Yahoo:
Here’s Google:
I would say that at face value Yahoo looks better (even though Yahoo is showing me Buffalo instead of Toronto!). But with Google’s those little blue links can do wonders. I know exactly what the interface is implying by presenting those links. If I click them they will take me somewhere. The list on the left in the Yahoo interface is also clickable but it is less predictable what will happen.
I’ve struggled with this type of uncertainty about Flash interfaces for a long time. No matter how good they look they just don’t feel right. I wrote an instant messenger app several years ago initially with a skinned interface. It looked pretty cool but I eventually reverted back to a standard interface with controls provided by the operating system. Recently I’ve given this some thought and have come to a conclusion. Constructed interfaces are better for usability that drawn interfaces, (no matter how good your graphic designer is).
Whats the difference? A drawn interface is one that is created in a program like Flash. Flash is a really great app but I believe it is better for animations and multimedia than application interfaces. Basically, with drawn interfaces you need to draw your controls. A constructed interface is one where you use preexisting controls to build your interface.
Yes, the preexisting controls can get boring but its something you have to live with. We need standards like this so that we don’t have to think about performing simple tasks.
There’s also the argument that with drawn interfaces or skins you can replicate any operating system control. This essentially is true but nearly impossible to pull off properly without an enormous amount of work. Take for example the Google Maps and Yahoo Maps example. Yahoo comes pretty close to making controls that resemble operating system controls. They take an operating system agnostic approach where there controls are a compromise between operating systems. Take a look at the scrollbar for example. It looks similar to a Mac scrollback but its slightly different. The scroll arrows are at the top and bottom like on Windows. Another thing to note is the text is all anti aliased. This looks find when you’re on an OS/browser that automatically does this. But if you’re on IE6 the having anti aliased links looks different. Different can be good sometimes but its bad when it causes the user to think for even a split second.
It will be interesting to see which direction this heads. I’m definitely on the constructed interface side of things using GWT which uses the native browser controls. Rich client applications are making it big in the browser and there is a lot of new technology coming out that aims to tackle this including Silverlight, JavaFX, and AIR. It’s good to know that the iphone is on the constructed side, and Apple knows usability right?
Adobe Apollo, now called AIR, (Adobe Integrated Runtime), the runtime environment that allows you to use existing web technology for apps on the desktop is an obvious next step from building desktop like Ajax applications that seem to be awkwardly confined to a browser window. The technology requires a runtime installation of approximately 10MB, similar to the need to install the Java or .NET runtime to run apps in these technologies. However, AIR stands apart by allowing you to develop your applications using web standard technologies. It also adds desktop application like features including storage on your hard drive.
Of course Microsoft sees this battle going on and wants a piece of the action. They have always had great development tools that have really pushed client application development on windows and are now trying to push web application development in the browser with its Silverlight plugin. Silverlight is a very interesting technology that supports a subset of the .NET framework. This means that it is like AIR providing better integration with OS features but differs by running in the browser. The download size is also a subset of the size of the .NET framework at approximately 10MB.