Peacock’s Interface Design

The Peacock Visual Laboratory from Aviary is a node-based raster image processing environment that shares the same ‘patching’ paradigm used by other environments like Cycling ’74’s Max, Apple’s Quartz composer, and a number of others.  You can kind of think of it like Max for still images.  If you visit the Aviary website they have a video showing it in action.  Or you can just use it from within your web browser.

I love Peacock’s interface experience.  It seems to be very well designed and thought out.


First, I love the one window design, which I find to be a lot more fluid and usable than any other environment like this that I’ve tried.  There aren’t lots of palettes or floating toolbars or additional windows in the way (or too far out of the way).  I’ve commented about this issue before.  I can simply see my work without distraction or stress.

Second, I like the use of colors: the gray is neutral, thus not distorting the user’s ability to work with color.  The colors are dark, and thus the non-active parts of the UI do not command attention.  I use syntax highlighting in TextMate this way: the background is a very dark gray, and comments are less dark gray — they are there when I want them but they don’t command my attention when I’m skimming through the screen.

The patch cords are great.  They automatically color themselves with varying colors which makes it easy to trace the path of a patchcord and not get confused.  The look of the cords are very fluid and lead to a smooth reading of the data flow.  You are able to put ‘segments’ in a patch cord, which are more like anchor points in an SVG application, and they allow you to push patch cords out of the way if you want to control them.

The “file browsers” and “object palettes” and “inspectors” (to use Max 5 terminology) are all tabs that are nicely tucked away and can be drawn out when needed.   All drag and drop is initiated from these side wells.

To create a new object you choose an object from the relevant tab in the upper-left and then drag that object into the work area.  If you drag the object such that its outlet touches the inlet of another object then you can draw out a connection between to the two objects before you release the mouse and place the object.  This is a really slick feature that helps to make the whole experience to feel natural and efficient.

What does not feel natural or efficient is how slow Peacock is.  This is, I suspect, a limitation of trying to run this application inside of a web browser.  In fact it is so slow that it seems to bring not just my web browser but pretty much the whole computer to its knees.  This is unfortunate.  The design of the user interaction is so good that hopefully the folks working on it can work on optimizing the back-end now.  At some point performance too is a usability issue, and I think that’s clearly the case here.

That one issue withstanding, this brilliant work and hats-off to the Aviary team.

About this entry