Aperture has a very ‘particular’ interface. We all know by now about doing colour corrections against a neutral background, in fact most books on digital colour always recommended setting your desktop picture to a mid-grey. But is there more to Aperture’s greyscale GUI (graphical user interface) than first appears?

I think there is. Following on from last week’s slightly dismissive comments about DFX’s Aperture plug-in interface, I though I’d have a closer look at the Aperture interface, from a designer’s and user’s point of view. The regular interface, that is - bringing fullscreen mode into this is just going to complicate things...

So, it’s grey. Actually, it’s lots of different greys. Several main greys, and then a whole bunch of more subtle tones. By the way, a neat way of looking at screen colours, if you’re interested, is to fire up DigitalColor Meter from the Utilities folder, but note that it’s showing screen colours, so don’t expect accurate RGB values for the original colour space of an image.

Grey 1 - Projects/Metadata/Adjustments pane. At 74.9%, this is the palest ‘block’ of grey in the interface. This is especially noticeable when displaying a short metadata view, leaving a large expanse of flat colour.
Designer observation - look carefully at the Projects pane and you may be able to make out a difference between the tab at the top of the pane and the actual list of Projects etc. - at 74.1% the list area is just that fraction darker to make it sink back slightly.

Grey 2 - ‘the twiddly bits above and below the panes’. Sitting at 74.5%, these are the area below the Viewer pane which hold the tool buttons, the area above the Browser pane which holds the view order, view type and search fields, and the area at the bottom of the Browser pane which holds the thumbnail size slider, the number of images selected and the number of images displayed. Basically, much of the outer framework of the image viewing areas.
Designer observation - look at the tops and bottoms of these areas and see how the embossing helps differentiate these areas from the filler spaces between them.
Designer observation 2 - the filler space isn’t a flat colour! It’s mostly 69%, making it enough darker than the twiddly bits for contrast, but if both the Viewer and Browser panes are visible, there’s a gradient leading up to the middle, just about bringing our eye to the grabbable divider marker in the middle. I’d not actually noticed that until researching this post.

Grey 3 - the Browser pane background. Obviously, this is configureable from the preferences, but the default setting of 33% is pretty good and I don’t often come across people changing it.
Designer observation - there’s another grey (22%) for the surroundings of opened Stacks, but it’s not as dark as:

Grey 4 - the Viewer pane. Again, this can be changed but most people use the default 18% setting.

Note how the closer we get to the actual image, the darker the interface gets? It’s consistent enough that there’s no way this is an accident - the tonality appears to be designed to give us a clear progression showing how close we are to viewing the image itself.

The Loupe

The Loupe is a special case - it’s a totally non-standard interface item - it’s not a window or palette but can move around, it’s not a button, slider, text field or any of the other things you normally find in an application. On the other hand, it fits right into the ‘the darker it is, the closer you are to the image’ concept. At ~12% it’s the darkest thing we’ve seen so far, and is clearly the closest we’re getting to the image, short of zooming in to 100% or going fullscreen.
Designer observation - the the loupe is slightly transparent it’s not too easy to get an exact figure. The slight drop-shadow helps reinforce the idea that this is not a conventional UI element, while the tiny 1px lighter grey border inside and out help distinguish the edges of the Loupe from almost any tone of image.

Text Fields

Aperture uses a lighter tone for it’s text fields such as the ones in the Metadata tab, presumably for a greater contrast with the black text in them. Like most Mac applications, Aperture uses reduced contrast as a signal when the controls aren’t available, for instance if there is no image selected. In the same way, the adjustment bricks get ‘greyed-out’ with offline Masters or in Quick Preview mode.
Designer observation - make sure there are no images selected and swap between the Metadata and Adjustment tabs - the entirety of the adjustment bricks grey out, but not the tag titles in the Metadata pane.
Designer observation 2 - pick a metadata view which contains both editable tags such as IPTC data and non-editable tags such as EXIF data, the default ‘general’ view is good for this. As well as the tonal difference between the fields (the EXIF ones are only a couple of percent lighter than the background) there are other visual differences - the non-editable fields have no hint of embossing, and are very slightly rounded, compared to the angular, embossed editable fields. The difference is still visible when you’ve clicked off an image and the whole lot is greyed out.

In summary, Aperture's interface is full of little visual tweaks and details that aren't initially visible but can make a big difference in guiding the user towards the application's use, presumably making use of the same 'affordance' design concepts that the physical design of the various Macs is based on so strongly.

And that's not including the HUDs... maybe next week. ;-)

Ian