The HUD, OSX Image Editors, and Floating Windows

Earlier today I complained on Twitter (the number 1 reason for using Twitter) about Pixelmator.

Pixelmator is an excellent low-cost image editor. I don’t want to call it an alternative to Photoshop because Photoshop blows it out of the water for higher end tasks (perspective, things like that). But if you don’t need to do that kind of stuff, Pixelmator, along with Acorn, are excellent choices.

Yet, Pixelmator has a problem. It’s over designed. It makes use of transparent panels, typically called HUD windows, in OSX. They look like this:


The above is the Clips window from Coda. This is a good example of proper HUD use. Apple’s developer references state:

A transparent panel gives users a way to make quick adjustments to their content or task without being distracted from their work. Although the behavior of a transparent panel is similar to the behavior of a standard panel, its appearance is designed to complement applications that focus on highly visual content or that provide an immersive experience, such as a full-screen slide show…

Coda uses the HUD view as an auxiliary window for quick edits. Apple’s Keynote does the same, using it when the user wants to quickly edit an image.


Pixelmator uses the HUD for absolutely every window:


Also from Apple’s references:

It’s important to understand that transparent panels are not intended to replace all panels in every application. In fact, in applications that don’t focus on highly visual content or provide an immersive environment, a transparent panel can be more distracting to users than a standard panel, because there is no logical reason for its presence.

In Pixelmator’s defense, it does deal with highly visual content. But the beauty of Apple’s transparent panels comes at the cost of usability. When every window is a HUD it becomes very easy to get lost in the HUD clutter.

Compare Pixelmator’s windows to Acorn’s:


It’s not just the HUD look. It’s the amount of windows. Pixelmator has five floating windows. Acorn has only two. What takes Pixelmator 5 floating windows to accomplish takes Acorn only two (although in Acorn 1 it wasn’t quite as consolidated).

Floating windows are the bane of my existence on OSX. I think they’re meant to be used sparingly, but have gotten abused by developers that can’t figure out how to best lay out their applications.

Even Adobe, who is accused of being slow on the upkeep, realizes this. Between CS2 and CS4 they went from floating windows everywhere to an attempt at consolidating these tools into a one-window environment.

Adobe Photoshop CS2

Adobe Photoshop CS3

Adobe Photoshop CS4

Apple also did this transition with floating windows to a one-window workspace with Logic Pro:

Logic Pro Mixing Window in Logic 6

Logic Pro mixing window in Logic 8 underneath the arrange view

Users can still open separate mixing windows in Logic 8/9, but if you have a big enough screen why bother? (I’ll look the other way on dual-display uses.)

I think that’s the key to understanding the decline of floating windows. Display resolutions got larger. Why have a floating window if one window can show you everything at once?

That, and I think floating windows just don’t get along with OSX’s Spaces. Hence the frustrated twote from earlier and the slow but steady trend to one-window applications that use HUDs for support.

With one window the tools you use become one with the document you’re working on. Neither Acorn nor Pixelmator really have that, although Acorn has come close with version 2. This horrible mockup I did of Acorn 1 brings that idea to image editing.


Adobe Photoshop screenshots used under Creative Commons licenses. Originally by Talking Tree, hooverdust, and Vincent J. Brown.

Logic Pro screenshots used under Creative Commons licenses. Originally by sonicdeviant and rgsproductions2005